/* Brihas terminal design tokens (SPEC 12 A-UI-1). Shunkan's grammar in Brihas's identity: black, dense, calm.
   Read tokens, never hex values. tests/test_tokens.py recomputes every contrast pair from this file.

   One colour, one meaning:
     --ink        the data (white)            --blue-ink   a label, a column header, a code (azure)
     --blue       a fill only: the selection, the active key, the active tab's line, the primary button
     --up/--down  direction only               --warn       stale or flagged, nothing else
   Square corners, 1px rules, no shadows, no gradients, no glass. Panels tile with 1px seams.

   Theme: dark is the base, whatever the OS prefers. html[data-theme="light"] is the light theme, in the same
   grammar. Direction: html[data-dir="reversed"|"mono"] moves only --up/--down; --ok/--err never move.
   Density: compact is the base (owner); standard under html[data-density="standard"], and in PREVIEW until a
   density is chosen. The chrome sizes never change.
   Type: Geist Mono for everything (--sans reads it too); Geist only for the wordmark (--brand-face).
   --t-* are `font` shorthands (font: var(--t-13)); --fs-* are the bare sizes. Nothing is smaller than 11px. */

@font-face {
  font-family: "Geist";
  src: url("/static/vendor/fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/vendor/fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- theme-independent */
:root {
  /* type: one face. --sans is kept as a name because module CSS reads it; it is the mono face now (the simple
     surface, which keeps its own look, sets it back to Geist under body[data-surface="simple"]). */
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: var(--mono);
  --brand-face: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --features: "ss01" 0;
  --fs-11: 11px; --fs-12: 11.5px; --fs-13: 12.5px; --fs-14: 13px; --fs-16: 16px; --fs-18: 16px; --fs-24: 20px; --fs-28: 24px;
  --t-11: 400 var(--fs-11)/14px var(--sans);
  --t-12: 400 var(--fs-12)/16px var(--sans);
  --t-13: 400 var(--fs-13)/18px var(--sans);
  --t-14: 400 var(--fs-14)/20px var(--sans);
  --t-18: 600 var(--fs-18)/22px var(--sans);
  --t-24: 600 var(--fs-24)/26px var(--sans);
  --t-28: 600 var(--fs-28)/30px var(--sans);
  --track-11: 0.08em; --track-head: 0.04em; --track-18: -0.01em; --track-24: -0.02em; --track-28: -0.02em;

  /* spacing (4px grid) */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px;

  /* chrome, top to bottom: top bar 34 (--bar-h), command row 32 (--cmd-h), tabs 26, the view, status bar 22. The
     same in both densities. --top-h is everything above the tabs (bar and command row), as layers that sit under
     the chrome read it. --band-h is the PREVIEW band's height, 0 for the owner. No rail (--rail-w stays 0). */
  --bar-h: 34px; --cmd-h: 32px; --top-h: calc(var(--bar-h) + var(--cmd-h));
  --tabs-h: 26px; --foot-h: 22px; --band-h: 0px; --rail-w: 0px; --cl-h: 32px;
  --r: 0px; --r-win: 0px; --r-sm: 0px; --r-pill: 0px;

  /* control sizes */
  --btn-h: 24px; --field-h: 26px; --tag-h: 18px; --kbd-h: 18px; --mark: 16px; --hit: 24px; --key-h: 32px;
  --form-label-w: 160px; --drawer-w: 400px; --palette-w: 640px; --sheet-max: 600px;

  /* density: compact */
  --row: 24px; --cell-fs: 12.5px; --cell-px: 10px; --panel-head: 28px; --panel-pad: 12px; --grid-gap: 1px;
  --tile-py: 10px; --tile-px: 12px;

  /* focus: a 1px azure line inside the element (the selected cell's grammar), never on a blue fill */
  --ring: var(--blue-ink);
  --ring-w: 1px;
  --ring-offset: -1px;
  --halo: inset 0 0 0 1px var(--ring);   /* a field's focus: its border and this line, 2px of azure inside */

  /* direction (D3): standard. --ok/--err are their own tokens and never move. */
  --ok: var(--teal); --ok-soft: var(--teal-soft);
  --err: var(--vermilion); --err-soft: var(--vermilion-soft);
  --up: var(--teal); --up-soft: var(--teal-soft);
  --down: var(--vermilion); --down-soft: var(--vermilion-soft);

  /* motion. ease-in is banned. No motion for keyboard-initiated actions, focus rings or data. */
  --dur-1: 80ms; --dur-2: 120ms; --dur-3: 160ms; --dur-4: 200ms; --dur-out: 140ms;
  --dur-hold: 800ms; --blink: 1.1s; --tip-delay: 400ms; --skel-delay: 150ms; --toast-ms: 2400ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --scale-press: 0.97; --scale-pop: 1; --shift-drawer: 16px; --shift-toast: 8px;

  /* ---- legacy aliases: every name module CSS reads today ---- */
  --label: var(--blue-ink);
  --accent: var(--blue-ink);
  --accent-ink: var(--on-blue-ink);
  --accent-soft: var(--blue-soft);
  --accent-line: var(--ring);
  --amber: var(--warn); --flag: var(--warn);
  --amber-dim: var(--warn-soft); --flag-soft: var(--warn-soft);
  --bg: var(--ground);
  --bg-panel: var(--panel);
  --bg-panel-2: var(--panel-2);
  --bg-header: var(--chrome);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --text-faint: var(--faint); --grey: var(--faint); --axis: var(--faint);
  --grid: var(--rule);
  --stroke: var(--edge);
  --stroke-soft: var(--rule-2);
  --blue-dim: var(--blue-soft);
  --pending: var(--edge);
  --pop-bg: var(--pop);
  --brand-saffron: var(--ink);
  --brand-teal: var(--blue-ink);
  --azure: var(--blue-ink);
  --series-5: var(--ink-2); --series-6: var(--faint);
  --ease: var(--ease-out);
  --ease-in: var(--ease-std);
  --t-fast: var(--dur-1); --t-med: var(--dur-2); --t-panel: var(--dur-3); --t-drawer: var(--dur-4);
  --row-h: var(--row);
}

/* ---------------------------------------------------------------- dark (the desk): the base */
:root {
  color-scheme: dark;
  --ground: #05070B; --chrome: #070A10; --panel: #070A10; --head: #0B1019; --panel-2: #0F1520; --panel-3: #151C29;
  --pop: #0B1019;
  --ink: #E8ECF2; --ink-3: #D3D9E3; --ink-2: #A9B2C1; --faint: #7D8798;
  --rule: #121824; --rule-2: #1B2231; --edge: #5E6A82;
  --blue: #0A64DC; --blue-hover: #1670EA; --on-blue: #FFFFFF; --blue-line: #3F8CF5;  /* fills only, never text */
  --blue-ink: #5AA9FF; --on-blue-ink: #05070B;                                          /* azure: labels, headers, codes */
  --blue-soft: rgba(10, 100, 220, 0.20); --blue-row: rgba(10, 100, 220, 0.08);
  --teal: #62D29B; --teal-soft: rgba(98, 210, 155, 0.12);         /* green, direction only: owner-locked 28-Oct, same lightness as azure */
  --vermilion: #E06A59; --vermilion-soft: rgba(224, 106, 89, 0.14); /* red, direction only: ~3x apart from green for red-green colour blindness */
  --warn: #D8A54E; --warn-soft: rgba(216, 165, 78, 0.12);         /* amber, stale or flagged only: owner-locked 28-Oct */
  --inverse: #E8ECF2; --on-inverse: #05070B;
  --scrim: rgba(2, 4, 8, 0.66);
  --shadow-pop: none;
  --shadow-panel: none;
  --series-1: #5AA9FF; --series-2: #E8ECF2; --series-3: #2F7BEA; --series-4: #8B95A7;
  --own-1: #3F8CF5; --own-2: #5AA9FF; --own-3: #A8CCF7; --own-4: #D6E6FB; --own-5: #6B7890; --own-rest: #414D63;
  --div-pos: #5AA9FF; --div-neg: #E0713A;
  /* the source card: a panel like any other in the dark desk */
  --paper: #0B1019; --paper-ink: #E8ECF2; --paper-muted: #A9B2C1; --paper-rule: #1B2231;
  /* paper for print: white in both themes */
  --print-paper: #FFFFFF; --print-ink: #0B1424; --print-muted: #4A5872; --print-rule: rgba(11, 20, 36, 0.12);
}

/* ---------------------------------------------------------------- light (day): a stored choice, the same grammar
   A very slightly creamy white. One hue, Brihas blue, in two tones: the light tone on black, the deep tone on cream.
   Faint is a shade under #6B7280 so it keeps 4.5:1 on the header band and the raised surfaces too. */
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #FAF8F3; --chrome: #FDFCF9; --panel: #FDFCF9; --head: #F3F0E8; --panel-2: #F5F2EB; --panel-3: #EFEBE2;
  --pop: #FDFCF9;
  --ink: #0E1A2E; --ink-3: #1E2B40; --ink-2: #4A5568; --faint: #626977;
  --rule: #EEEAE1; --rule-2: #E6E1D6; --edge: #8A8576;
  --blue: #0A64DC; --blue-hover: #0853BA; --on-blue: #FFFFFF; --blue-line: #0A64DC;
  --blue-ink: #0A64DC; --on-blue-ink: #FFFFFF;   /* Brihas blue, deep tone on cream: labels and codes, 5.1:1 */
  --blue-soft: rgba(10, 100, 220, 0.05); --blue-row: rgba(10, 100, 220, 0.03);
  --teal: #0F7A45; --teal-soft: rgba(15, 122, 69, 0.06);       /* green, direction only (owner, 28-Oct) */
  --vermilion: #C62828; --vermilion-soft: rgba(198, 40, 40, 0.06); /* red, direction only (owner, 28-Oct) */
  --warn: #8A5A00; --warn-soft: rgba(138, 90, 0, 0.06);         /* amber, stale or flagged only (owner, 28-Oct) */
  --inverse: #0E1A2E; --on-inverse: #FDFCF9;
  --scrim: rgba(14, 26, 46, 0.28);
  --shadow-pop: none;
  --shadow-panel: none;
  --series-1: #0A64DC; --series-2: #0E1A2E; --series-3: #4A7FC7; --series-4: #6B7280;
  --own-1: #0E2A55; --own-2: #0A64DC; --own-3: #468AE2; --own-4: #6BA0E8; --own-5: #8DB5EC; --own-rest: #A39E90;
  --div-pos: #0A64DC; --div-neg: #D9622B;
  --paper: #FDFCF9; --paper-ink: #0E1A2E; --paper-muted: #4A5568; --paper-rule: #E6E1D6;
}

/* ---------------------------------------------------------------- direction setting (D3) */
:root[data-dir="reversed"] {
  --up: var(--vermilion); --up-soft: var(--vermilion-soft);
  --down: var(--teal); --down-soft: var(--teal-soft);
}
:root[data-dir="mono"] {
  --up: var(--ink); --up-soft: var(--rule-2);
  --down: var(--ink); --down-soft: var(--rule-2);
}

/* ---------------------------------------------------------------- density (D1) */
:root[data-density="standard"],
:root[data-mode="preview"]:not([data-density]) {
  --row: 28px; --cell-fs: 13px; --cell-px: 12px; --panel-head: 30px; --panel-pad: 14px; --grid-gap: 1px;
  --tile-py: 12px; --tile-px: 14px;
}

/* ---------------------------------------------------------------- PREVIEW band */
:root[data-mode="preview"] { --band-h: 22px; }

/* ---------------------------------------------------------------- reduced motion and static shots */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-2: 80ms; --dur-3: 80ms; --dur-4: 80ms; --dur-out: 80ms;
    --scale-press: 1; --scale-pop: 1; --shift-drawer: 0px; --shift-toast: 0px;
  }
}
:root[data-static] {
  --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-out: 0ms; --tip-delay: 0ms; --skel-delay: 0ms;
  --scale-press: 1; --scale-pop: 1; --shift-drawer: 0px; --shift-toast: 0px;
}