/* ============================================================
   RateFileAI · Ledger design system — tokens
   Canonical reference. Codex: import this file everywhere; never
   hard-code a color, radius, or font that has a token here.
   Themes: html[data-theme="light"|"dark"]; default light.
   ============================================================ */

:root, html[data-theme="light"] {
  /* Grounds */
  --page:    #F6F7F9;  /* app/page background */
  --surface: #FFFFFF;  /* cards, tables, panels */
  --subtle:  #F9FAFB;  /* table headers, wells, drawer footers */
  --inset:   #F2F4F7;  /* chips, provenance grounds, nav selection */
  /* Ink */
  --ink:   #0F1728;    /* primary text */
  --ink-2: #475467;    /* secondary text */
  --ink-3: #667085;    /* labels, column headers */
  --meta:  #98A2B3;    /* timestamps, tertiary meta */
  /* Brand (interactive) */
  --brand:       #2F54D1;
  --brand-hover: #2847B8;
  --brand-tint:  rgba(47,84,209,.08);
  --brand-line:  rgba(47,84,209,.24);
  --on-brand:    #FFFFFF;
  /* Hairlines & controls */
  --line:        #E4E7EC;
  --line-strong: #D0D5DD;
  /* Semantics — DATA MEANING ONLY, never decoration */
  --up:        #D92D20;  --up-bg:   rgba(217,45,32,.07);
  --down:      #067647;  --down-bg: #ECFDF3;  --down-line: #ABEFC6;
  --ok:        #079455;
  --warn:      #B54708;  --warn-bg: #FFFAEB;  --warn-line: #FEDF89;
  --neutral:   #667085;  --neutral-bg: #F2F4F7;
  /* Fact-vs-inference classes (6.9.16.8) */
  --observed:  var(--down);   --observed-bg:  var(--down-bg);  --observed-line: var(--down-line);
  --inferred:  var(--brand);  --inferred-bg:  var(--brand-tint); --inferred-line: var(--brand-line);
  --contra:    var(--warn);   --contra-bg:    var(--warn-bg);  --contra-line: var(--warn-line);
  /* The honesty mark: unavailable/unknown is a VALUE */
  --hatch: repeating-linear-gradient(45deg, var(--inset) 0 3px, var(--subtle) 3px 6px);
  /* Shadows */
  --shadow-card:    0 1px 2px rgba(16,24,40,.05), 0 2px 8px -3px rgba(16,24,40,.07);
  --shadow-raised:  0 8px 24px -8px rgba(16,24,40,.14);
  --shadow-overlay: 0 12px 32px -8px rgba(16,24,40,.18);
  --shadow-btn:     0 1px 2px rgba(16,24,40,.10);
  /* Focus ring (WCAG 2.2 visible focus) */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  color-scheme: light;
}

html[data-theme="dark"] {
  --page:    #0D1220;
  --surface: #131A2C;
  --subtle:  #101728;
  --inset:   #1B2338;
  --ink:   #E6E9F0;
  --ink-2: #A9B1C6;
  --ink-3: #7D8699;
  --meta:  #5D6779;
  --brand:       #6D8AFF;
  --brand-hover: #8AA1FF;
  --brand-tint:  rgba(109,138,255,.12);
  --brand-line:  rgba(109,138,255,.32);
  --on-brand:    #0D1220;
  --line:        #232D45;
  --line-strong: #2E3A57;
  --up:        #F97066;  --up-bg:   rgba(249,112,102,.10);
  --down:      #32D583;  --down-bg: rgba(50,213,131,.10);  --down-line: rgba(50,213,131,.32);
  --ok:        #32D583;
  --warn:      #FDB022;  --warn-bg: rgba(253,176,34,.10);  --warn-line: rgba(253,176,34,.32);
  --neutral:   #7D8699;  --neutral-bg: #1B2338;
  --hatch: repeating-linear-gradient(45deg, var(--inset) 0 3px, var(--subtle) 3px 6px);
  --shadow-card:    0 1px 3px rgba(0,0,0,.35);
  --shadow-raised:  0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-overlay: 0 12px 32px -8px rgba(0,0,0,.55);
  --shadow-btn:     0 1px 2px rgba(0,0,0,.4);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  color-scheme: dark;
}

:root {
  /* Type — three voices. Serif is not used; grotesk runs display. */
  --font-display: 'Schibsted Grotesk', 'IBM Plex Sans', sans-serif; /* headings, titles */
  --font-ui:      'IBM Plex Sans', system-ui, sans-serif;           /* everything else */
  --font-record:  'IBM Plex Mono', ui-monospace, monospace;         /* every fact of record:
        numbers, filing IDs, dates-of-record, as-of stamps, provenance */
  /* Scale (px): 11 chips/meta · 12 table meta · 13 dense body · 14 UI body ·
     16 reading · 20/24/32/44 display. Never below 11. Tables never below 13. */
  --fs-chip: 11px; --fs-meta: 12px; --fs-dense: 13px; --fs-ui: 13.5px; --fs-read: 15px;
  --fs-h3: 20px; --fs-h2: 24px; --fs-h1: 32px; --fs-hero: 44px;
  --lh-ui: 1.5; --lh-display: 1.15;
  --track-display: -0.02em;
  /* Shared horizontal gutter so pagehead / scopebar / canvas align at every width.
     The max() trick centers content at --content-max while borders stay full-bleed. */
  --pad-x: clamp(24px, 3.2vw, 52px);
  --content-max: 1280px;
  --gutter: var(--pad-x); /* fluid main pane (owner, Aug 11): content expands with the monitor; reading-width pages cap themselves */
  /* Spacing: 4px base. Component 8/12/16 · section 24/32/48 · marketing 64/96 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* Radii */
  --r-ctl: 8px; --r-card: 12px; --r-overlay: 14px; --r-pill: 999px;
  /* Shell geometry (addendum 6.8.5) */
  --rail-w: 248px;          /* left nav rail, 232–256 */
  --rail-w-collapsed: 56px;
  --topbar-h: 56px;
  --rrail-w: 440px;         /* right evidence rail, 400–480 */
  --canvas-reading: 720px; --canvas-standard: 1120px; /* full-width = none */
  /* Motion: respond to the user, never decorate */
  --t-fast: 140ms ease-out; --t-drawer: 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-drawer: 0ms; }
}