/* skh-tokens.css — the SKH portal's design tokens. One sheet, every page.

   Loads AFTER each page's own <style> and BEFORE skh-components.css and skh-polish.css, so the
   values here win over the per-page :root copies that grew up in each file. The variable names
   are the ones the pages already use (--bg, --surface, --ink, --brand ...), so adopting the sheet
   changes nothing structurally: it makes the sixteen copies one.

   Brand: Titillium is the SKH face and is self-hosted from /fonts. No Google Fonts. The accent is
   SKH blue and only SKH blue; greys are cool and tinted toward it; shadows carry the same navy so
   depth reads as one light source. Dark scheme swaps the surfaces, never the meaning. */

@font-face{font-family:'Titillium';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/titillium-400.woff2') format('woff2')}
@font-face{font-family:'Titillium';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/titillium-600.woff2') format('woff2')}
@font-face{font-family:'Titillium';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/titillium-700.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/titillium-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/titillium-600.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/titillium-700.woff2') format('woff2')}

:root{
  color-scheme:light dark;

  /* type */
  --font:'Titillium','Titillium Web',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-base:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:26px;--fs-3xl:34px;
  --lh-tight:1.2;--lh:1.5;--lh-loose:1.6;
  --track-eyebrow:.12em;

  /* light surfaces */
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface2:#eef3f9;
  --ink:#16222e;
  --text-muted:#5b6b7a;      /* greyed text. Deliberately NOT named --muted: the three shadcn pages use --muted for a surface */
  --muted-2:#8ea3b6;
  --line:#e2e9f1;
  --line-2:#cbd5e1;

  /* the one accent */
  --brand:#004682;
  --brand-2:#1a6fc4;          /* hover, links, active tab */
  --brand-soft:#e8f0f8;
  --brand-ink:#fff;           /* text that sits ON the brand colour; dark lifts the brand, so this flips */
  --blue:var(--brand);        /* alias kept for my-tasks and projects */

  /* status, desaturated enough to sit beside the accent */
  --ok:#0a7c59;--ok-bg:#e6f4ee;
  --warn:#a15d00;--warn-bg:#fdf1dd;--amber:var(--warn);
  --crit:#c0392b;--crit-bg:#fbe9e7;--red:var(--crit);
  --today:var(--brand-soft);

  /* rhythm, shape, depth */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,70,130,.06),0 1px 1px rgba(22,34,46,.04);
  --shadow-2:0 6px 20px rgba(0,70,130,.10),0 1px 2px rgba(22,34,46,.05);
  --shadow-3:0 16px 40px rgba(0,70,130,.14);
  --focus-ring:0 0 0 3px rgba(0,70,130,.18);
  --z-raised:10;--z-sticky:100;--z-overlay:1000;--z-toast:2000;
  --tap:44px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  /* motion scale (dashboard-craft Task 2): three durations plus an exit, replacing eight
     hand-picked numbers that had grown up one transition at a time. --t-fast is for hover,
     colour and press feedback; --t-base is for anything entering, leaving or moving on
     screen; --t-slow is reserved for the largest surfaces, the walkthrough dialog and any
     drawer; --t-exit is the fast half of an enter/exit pair, roughly 75% of --t-base. All
     four names were grepped across every stylesheet in src/dist before adding: free. */
  --t-fast:120ms;
  --t-base:180ms;
  --t-slow:260ms;
  --t-exit:135ms;

  /* press feedback (dashboard-craft Task 1). Named --press-scale, not --press: this file
     is loaded before skh-polish.css, which already defines --press as a 120ms *duration*
     (transition:transform var(--press) var(--ease-out), also read by skh-components.css)
     across the whole portal. Reusing --press for a unitless scale factor would either be
     silently shadowed by that 120ms value -- making transform:scale(var(--press)) resolve
     to the invalid "scale(120ms)" and drop out, i.e. no press feedback at all -- or, if it
     won instead, would turn every sitewide transform:transform var(--press) ... into the
     equally invalid "transform .97 ...", killing those transitions everywhere. --press-t
     is new and does not collide with anything. */
  --press-scale:.97;
  /* whole-pass review: press scale has to shrink as the surface grows, or the press stops
     reading as a press and starts reading as the thing bouncing. Edge travel is
     size x (1 - scale) / 2, so .97 moves a 60px chip 0.9px (right) and a 246 x 211 agent card
     3.7 x 3.2px (a bounce). The threshold for reaching for this token is a BLOCK rather than a
     strip: the surface's SMALLER dimension over 100px, so both axes travel visibly. Measured
     live on the dashboard, exactly one pressable selector crosses it (#skh-agents .skh-acard,
     246 x 211, now 1.23 x 1.05px); the next largest is a 154 x 28 [role=button], whose 28px
     height keeps its travel at 0.42px on the axis the eye reads, so it keeps --press-scale.
     Grepped src/dist before adding; no --press-scale-lg existed anywhere. */
  --press-scale-lg:.99;
  /* dashboard-craft Task 2: was transform 160ms cubic-bezier(.16,1,.3,1), a bespoke number
     and a second near-identical curve living beside --ease-out. Now the scale's --t-fast
     (120ms) and the sitewide --ease-out token. 120ms still sits inside emil's guidance band
     of 100 to 160ms for button press feedback, so the move loses a one-off number without
     leaving the band. */
  --press-t:transform var(--t-fast) var(--ease-out);
}

/* dark scheme: same names, swapped surfaces, brand lifted to read on navy */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d151f;--surface:#16222e;--surface2:#1c2b3a;--ink:#e7eef5;--text-muted:#8ea3b6;--muted-2:#6b7f93;
    --line:#243546;--line-2:#33465f;
    --brand:#5fa0d8;--brand-2:#8cc0ea;--brand-soft:#17293b;--brand-ink:#0d151f;
    --ok:#7fc784;--ok-bg:#12331f;--warn:#f0b552;--warn-bg:#33260f;--crit:#ff8a75;--crit-bg:#3a1f1a;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-2:0 8px 24px rgba(0,0,0,.45);--shadow-3:0 16px 40px rgba(0,0,0,.55);
    --focus-ring:0 0 0 3px rgba(95,160,216,.30);
  }
}
:root[data-theme="dark"]{
  --bg:#0d151f;--surface:#16222e;--surface2:#1c2b3a;--ink:#e7eef5;--text-muted:#8ea3b6;--muted-2:#6b7f93;
  --line:#243546;--line-2:#33465f;
  --brand:#5fa0d8;--brand-2:#8cc0ea;--brand-soft:#17293b;--brand-ink:#0d151f;
  --ok:#7fc784;--ok-bg:#12331f;--warn:#f0b552;--warn-bg:#33260f;--crit:#ff8a75;--crit-bg:#3a1f1a;
  --shadow-1:0 1px 2px rgba(0,0,0,.35);--shadow-2:0 8px 24px rgba(0,0,0,.45);--shadow-3:0 16px 40px rgba(0,0,0,.55);
  --focus-ring:0 0 0 3px rgba(95,160,216,.30);
}

/* base: the face and the figures */
html,body{font-family:var(--font)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}   /* background and colour stay each page's own: login keeps its gradient */
button,input,select,textarea{font-family:inherit}
/* every number that sits in a column lines up */
.num,.big,.count,.skh-num,.meta,.mo,.stat,.kpi,.val,.amt,.money,td,th{font-variant-numeric:tabular-nums}
/* the small caps labels the pages call eyebrows, labs and ey: Titillium, not a mono */
.ey,.lab,.eyebrow,.filters .lab{font-family:var(--font);font-weight:600;font-size:var(--fs-xs);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-muted)}
/* dates, ids and month labels: Titillium with lined-up figures; the mono token stays for code only */
.mono{font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:.02em}
code,pre,kbd{font-family:var(--font-mono)}
h1,h2,h3,h4{font-family:var(--font);letter-spacing:-.005em;text-wrap:balance}