/* KALTERA portal: shared tokens.
   Ported from the approved prototype (docs/design/prototypes/kaltera-portal/assets/tokens.css).
   The prototype loaded Google Fonts; the portal uses the theme's own font files. */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Site palette */
  --porcelain: #EAF0EE;      /* page */
  --mist: #E3EDEA;           /* recessed */
  --paper: #F6F9F8;          /* raised surfaces */
  --white: #FFFFFF;
  --teal: #12707E;           /* brand, headings, primary */
  --teal-deep: #0E5D69;
  --teal-pale: #BCD8D6;
  --teal-wash: rgb(18 112 126 / 0.08);
  --navy: #16262B;           /* text, dark surfaces */
  --navy-lift: #21363C;
  --navy-deep: #101D21;
  --ink: #16262B;
  --ink-muted: rgb(22 38 43 / 0.66);
  /* The faint ink carries text, so it has to be readable: 4.68:1 on the page
     and 4.79:1 on white. The step between the two inks is small on purpose.
     The hierarchy is carried by size and weight, not by fading the text
     until it cannot be read. */
  --ink-faint: rgb(22 38 43 / 0.64);
  /* The old faint value, for the lines and the marks that are not text:
     the rules, the decorative icons, the tracks. Never for a word. */
  --ink-line: rgb(22 38 43 / 0.45);
  --rule: rgb(22 38 43 / 0.14);
  --rule-strong: rgb(22 38 43 / 0.28);

  /* Semantic status (kept apart from the brand teal) */
  --ok: #256B41;    --ok-wash: #DCEFE3;
  --warn: #8A5A0F;  --warn-wash: #F5EAD6;
  --bad: #A23B3B;   --bad-wash: #F4DEDE;
  --info: #12707E;  --info-wash: rgb(18 112 126 / 0.08);

  /* Type */
  --f-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Chart marks. Text never wears these: the brand teal stays for
     text, buttons and tile values, and these are for the marks only. */
  --viz-1: #008a9d;        /* the one series colour */
  --viz-ramp-1: #00c0d9;   /* the ordinal ramp, light end: not yet, so far */
  --viz-ramp-2: #00a5bb;
  --viz-ramp-3: #008a9d;
  --viz-ramp-4: #007080;
  --viz-ramp-5: #005864;
  --viz-muted: rgb(22 38 43 / 0.20);  /* the marks that are context, not the point */
  --viz-grid: rgb(22 38 43 / 0.10);   /* the hairline gridline */
  --viz-base: rgb(22 38 43 / 0.28);   /* the baseline */
  --viz-wash: rgb(18 112 126 / 0.07); /* the band under the pointer */
  --viz-track: var(--mist);

  /* Shape and motion */
  --r-sharp: 2px;   /* buttons, inputs: the site's square edge */
  --r-card: 12px;   /* panels */

  /* The motion system's durations and curves. Only transform and opacity
     move, so nothing reflows while a screen changes. */
  --d-1: 120ms;                 /* a press, a pill, a tick */
  --d-2: 200ms;                 /* a toast, a tooltip, a route change */
  --d-3: 280ms;                 /* a sheet */
  --d-out: 140ms;               /* the way out is quicker than the way in */
  --d-bar: 500ms;               /* a chart bar, and only the first time */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.3, 0, 0.8, 0.15);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--porcelain); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* The site's signature controls */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-sharp);
  background: var(--teal); color: var(--porcelain); cursor: pointer;
  font-family: var(--f-display); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; transition: background 200ms var(--ease);
}
.k-btn:hover { background: var(--teal-deep); }
.k-btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.k-btn--ghost:hover { background: rgb(22 38 43 / 0.05); }
.k-btn--dark { background: var(--navy); }
.k-btn--dark:hover { background: var(--navy-lift); }
.k-btn[aria-disabled="true"], .k-btn:disabled { background: var(--mist); color: var(--ink-faint); border-color: var(--rule); cursor: not-allowed; }
.k-eyebrow { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal); }
.k-label { font-family: var(--f-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.k-display { font-family: var(--f-display); font-weight: 300; color: var(--teal); letter-spacing: -0.005em; line-height: 1.12; }
.k-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-sharp); background: var(--white); }
.k-input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-wash); }

/* The ring that says the screen is waiting for the server. A ring that is
   still when the reader asked for less movement, and a ring that turns. */
.ring { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--teal); border-top-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ring-turn 700ms linear infinite; }
}
@keyframes ring-turn { to { transform: rotate(360deg); } }

/* A button that waits: the ring is in it, the label is out of the way, and
   the button keeps the width it had. */
.k-btn.is-busy, .btn.is-busy { position: relative; }
.k-btn.is-busy .busy__label, .btn.is-busy .busy__label { position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; overflow: hidden; }
.k-btn.is-busy .ring, .btn.is-busy .ring { border-color: var(--porcelain); border-top-color: transparent; }
.k-btn--ghost.is-busy .ring, .k-btn--quiet.is-busy .ring { border-color: var(--teal); border-top-color: transparent; }

/* Status tags: the site's spaced uppercase type, square 2px edge, tone dot */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 8px; border-radius: var(--r-sharp); font-family: var(--f-display); font-weight: 400; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--pill-line, var(--rule)); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill--ok { background: var(--ok-wash); color: var(--ok); --pill-line: rgb(38 107 65 / 0.28); }
.pill--warn { background: var(--warn-wash); color: var(--warn); --pill-line: rgb(138 90 15 / 0.28); }
.pill--bad { background: var(--bad-wash); color: var(--bad); --pill-line: rgb(162 59 59 / 0.28); }
.pill--info { background: var(--teal-wash); color: var(--teal); --pill-line: rgb(18 112 126 / 0.3); }
.pill--neutral { background: var(--mist); color: var(--ink-muted); --pill-line: var(--rule); }

/* "?" tooltips */
.qm { position: relative; top: -1px; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink-muted); font-family: var(--f-body); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; vertical-align: middle; cursor: help; }
.qm::after { content: ""; position: absolute; inset: -10px; }
.qm:hover, .qm[aria-expanded="true"] { color: var(--teal); border-color: var(--teal); background: var(--white); }
.ktip.is-on { opacity: 1; visibility: visible; }
.ktip { position: fixed; z-index: 500; opacity: 0; visibility: hidden; transition: opacity var(--d-1) var(--ease); max-width: min(280px, calc(100vw - 24px)); padding: 10px 12px; border-radius: 8px; background: var(--navy); color: var(--porcelain); font-family: var(--f-body); font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.45); pointer-events: none; }

/* Logo mark (the site's crossed K) */
.k-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 300; letter-spacing: 0.42em; font-size: 15px; color: var(--navy); text-decoration: none; }
.k-logo svg { width: 22px; height: 30px; }
.k-mark { fill: none; }
.k-mark line { stroke: currentColor; stroke-width: 1.2222; stroke-linecap: butt; }

/* With less motion asked for, nothing slides and nothing counts up, but the
   fades stay: they are how a press says it was heard. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  * { transition-property: opacity !important; transition-duration: 120ms !important; }
}