/* tokens.css — Ethereal EBS design tokens. The single source of colour, type,
   space, radius, elevation and motion. Component CSS reads these and never a
   raw hex: a hard-coded colour cannot follow the theme.

   Direction (2026-10-05, ui/.prism/style-lock.md "warehouse ledger"): every
   ERP ships corporate navy and an angled dashboard screenshot. Ethereal serves
   wholesale distributors, so the look comes from the warehouse floor instead:
   petrol ink, safety-line yellow used only as a marker, and condensed
   carton-label headings. The working frame (topbar + rail) is dark ink so the
   yellow marker can carry "you are here" at full strength; the content sits on
   paper.

   Token NAMES are unchanged from the previous system on purpose. Screens, the
   two list/document factories and inline styles in ui/js read --ink3, --panel2,
   --line and friends, so the restyle happens here and every consumer follows.

   Contrast: every text pair below was gated (WCAG 2.x relative luminance) in
   both themes before landing; the ratio is noted beside each. Non-text marks
   that are the sole carrier of a state (focus, active nav, field borders) are
   held to 3:1 against the paint beside them.

   Theme mechanism: light is the default on :root. The SPA stamps
   data-theme="light"|"dark" from its toggle (main.js, localStorage ebs.theme),
   so the explicit attribute always wins there. Pages without a toggle (the
   landing, operator pages) follow the OS through the media query, which is
   guarded by :not([data-theme="light"]) so an explicit choice is never
   overridden. */

:root{
  color-scheme:light;

  /* ── lock palette (light) ── */
  --paper:#f2f4f3;       /* lock bg */
  --surface:#ffffff;     /* lock surface */
  --ink-lock:#141a1f;    /* lock text */
  --petrol:#0e4f5c;      /* lock primary, 9.16 white-on */
  --marker:#f2c230;      /* lock accent: a MARKER only. Never text on light, never a button fill. */
  --border:#9aa6a3;      /* lock border: decorative hairline */
  --field-border:#7d8a87;/* 3.59 on surface, 3.25 on paper: controls meet WCAG 1.4.11 */

  /* ── surfaces ── page → recessed strip → card → nested well */
  --bg:#f2f4f3;          /* paper */
  --bg2:#e6eae8;         /* recessed strips, pressed buttons */
  --panel:#ffffff;       /* cards, tables: the reading surface */
  --panel2:#f6f8f7;      /* table header, input wells, nested panels */
  --surface-grad:var(--panel); /* kept for consumers; the system is flat now */
  --line:#cfd6d3;        /* card edges and section rules (decorative) */
  --line-soft:#e3e8e6;   /* row rules inside a table: low contrast on purpose */
  --line-strong:#9aa6a3; /* the head/body rule, emphasised dividers (lock border) */

  /* ── ink ── on paper: 15.88 / 9.12 / 5.81. on white: 17.54 / 10.1 / 6.42 ── */
  --ink:#141a1f;
  --ink2:#3a4442;
  --ink3:#56615f;        /* lock muted: labels, captions. 5.37 even on --primary-tint */

  /* ── primary (petrol) ── */
  --primary:#0e4f5c;          /* links, active state, solid buttons. 8.30 on paper */
  --primary-btn:#0e4f5c;
  --primary-hover:#0b3f4a;    /* 11.51 white-on */
  --primary-deep:#0a3540;
  --primary-tint:#e1edef;     /* selected row, soft primary wash. --primary on it 7.66 */
  --on-primary:#ffffff;

  /* ── the old "gold" family, re-pointed at the lock ──
     --gold-text was "an accent you can read". Yellow is never text on light,
     so in light it is petrol; in dark (where yellow on ink is 9.88) it is the
     marker itself. --gold-graphic IS the marker. */
  --gold-text:#0e4f5c;
  --gold-graphic:#f2c230;
  --gold-graphic-dim:#e2c869;
  --gold-edge:#e3cf86;
  --line-gold:#e3cf86;

  /* ── status ramp, separate from brand. Always a pill with a word. ──
     on white: ok 5.44 / warn 5.47 / bad 6.57. on own tint: 4.69 / 4.76 / 5.55 */
  --ok:#23784a; --warn:#9a5a00; --bad:#b42318; --danger:#b42318;
  /* Warning TEXT on its own tint (S5, build 82): #7a4e08 on --warn-tint 6.25:1.
     --warn stays the badge/edge colour. */
  --warn-ink:#7a4e08;
  --ok-tint:#e5f1e9; --warn-tint:#f7eedf; --bad-tint:#fae8e5;
  --ok-edge:#b3d5bf; --warn-edge:#e6cd9f; --bad-edge:#efc2bb;

  /* module accents: kept defined for any consumer, but the rail no longer
     colour-codes lanes. One marker, one meaning. */
  --mod-dashboard:var(--primary); --mod-pipeline:var(--primary); --mod-purchase:var(--primary);
  --mod-procurement:var(--primary); --mod-inventory:var(--primary); --mod-accounting:var(--primary);
  --mod-sales-team:var(--primary); --mod-network:var(--primary); --mod-marketing:var(--primary);
  --mod-settings:var(--primary); --mod-projects:var(--primary); --mod-back-office:var(--primary);

  /* ── interaction ── */
  --hover-bg:#e9eeec;
  --hover-grad:#e1edef;
  --hi-bg:#e1edef;
  --ask-grad:#e1edef;
  --input-bg:#ffffff;
  --focus:#0e4f5c;            /* 8.30 on paper, 9.16 on white */
  --overlay:rgba(20,26,31,.42);

  /* ── the working frame (topbar + rail): dark ink in both themes ──
     chrome ink 13.51, ink2 7.55 (6.43 on --chrome-raise), marker 9.65 / 7.19 on active */
  --chrome-bg:#132328;
  --chrome-raise:#1c3036;     /* search field, hovered row */
  --chrome-active:#203a41;    /* the current section's row */
  --chrome-line:#2a3f45;
  --chrome-ink:#e6ecea;
  --chrome-ink2:#a3b5b2;

  /* ── elevation: flat surfaces, shadows only on things that float ── */
  --shadow:rgba(20,26,31,.12);
  --shadow-sm:0 1px 0 rgba(20,26,31,.04);
  --shadow-md:0 2px 4px rgba(20,26,31,.06), 0 12px 28px rgba(20,26,31,.12);
  --shadow-lg:0 4px 10px rgba(20,26,31,.08), 0 24px 56px rgba(20,26,31,.18);
  --shadow-btn:none;
  --shadow-raise:0 2px 4px rgba(20,26,31,.06), 0 8px 20px rgba(20,26,31,.08);

  /* ── chart bars: on paper the current month is the DARKEST bar ── */
  --bar:#c3d2d5; --bar-fade:#d9e3e4;
  --bar-accent:#0e4f5c; --bar-accent-fade:#2c6c78;

  /* ── type ──
     Archivo (variable, wdth axis) for headings and uppercase labels, set
     condensed: the carton-label voice. IBM Plex Sans for every control, cell
     and paragraph, tabular figures wherever digits stack. IBM Plex Mono for
     SKUs, document numbers and keys. All self-hosted (fonts.css). */
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Archivo','Arial Narrow','Roboto Condensed',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wdth-head:84%;       /* headings */
  --wdth-label:78%;      /* uppercase tracked labels */
  --wdth-display:80%;    /* the big numbers and the landing headline */

  /* scale: dense-UI ladder anchored at a 14px body */
  --fs-2xs:11px;      /* uppercase micro-labels: th, .lab, field labels */
  --fs-xs:12px;       /* captions, notes, pager, chips */
  --fs-sm:13px;       /* the data workhorse: td, .input, doc values */
  --fs-base:14px;     /* body */
  --fs-md:15px;
  --fs-lg:clamp(17px, 0.4vw + 15.5px, 19px);   /* drawer / dialog title */
  --fs-xl:clamp(19px, 0.7vw + 16px, 22px);     /* section display, totals */
  --fs-2xl:clamp(22px, 1.2vw + 17px, 28px);    /* page title */
  --fs-3xl:clamp(26px, 1.4vw + 19px, 32px);    /* KPI figure: the largest mark on a screen */

  --lh-display:1.05;
  --lh-title:1.2;
  --lh-body:1.5;

  --track-display:-0.005em;
  --track-tight:0;
  --track-caps:0.06em;      /* the lock: uppercase labels tracked +0.06em */
  --track-caps-sm:0.04em;

  /* motion: custom easing, never the browser default */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms;
  --dur:200ms;

  /* shape: square-ish, like printed labels. Pills stay round. */
  --radius:6px; --radius-sm:4px; --radius-lg:10px; --radius-pill:999px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  --topbar-h:56px; --rail-w:224px; --flyout-w:220px;

  /* ── z-index scale ── every sticky/fixed layer that can overlap content
     carries one of these explicitly (a sticky element always opens its own
     stacking context; left at auto it loses to any explicitly-indexed th). */
  --z-content-sticky:1;
  --z-rail:10;
  --z-topbar:20;
  --z-searchdrop:25;
  --z-menu:40;
  --z-overlay:80;
  --z-drawer:90;
  --z-toast:100;
}

:root[data-theme="light"]{ color-scheme:light; }

/* ── DARK (designed, not inverted) ──
   ink on bg 15.50, on panel 13.84; ink2 10.32; ink3 7.53 (6.16 on tint);
   primary 6.83 on panel; dark-on-primary 7.66; ok 7.85 / warn 7.87 / bad 6.92;
   the marker is legible as text here (9.88), so --gold-text uses it. The same
   block appears twice: once for an explicit toggle, once for the OS setting on
   pages that have no toggle. Keep them identical. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0f1416; --surface:#172024; --ink-lock:#e6ecea; --petrol:#5fb3bd; --border:#3a4a4e; --field-border:#6f8481;
  --bg:#0f1416; --bg2:#0b1012; --panel:#172024; --panel2:#1c272b; --surface-grad:var(--panel);
  --line:#2c393d; --line-soft:#222d31; --line-strong:#3e4f53;
  --ink:#e6ecea; --ink2:#c2cfcc; --ink3:#9fb3b0;
  --primary:#5fb3bd; --primary-btn:#5fb3bd; --primary-hover:#7cc5cd; --primary-deep:#a6dbe0;
  --primary-tint:#173238; --on-primary:#0f1416;
  --gold-text:#f2c230; --gold-graphic:#f2c230; --gold-graphic-dim:#8f7a2e; --gold-edge:#4d4222; --line-gold:#4d4222;
  --ok:#6cc493; --warn:#e3a84f; --bad:#f28b80; --danger:#f28b80; --warn-ink:#e3a84f; /* 7.35:1 on dark --warn-tint */
  --ok-tint:#152a20; --warn-tint:#2c2315; --bad-tint:#311b19;
  --ok-edge:#285038; --warn-edge:#544018; --bad-edge:#5a2d28;
  --hover-bg:#212e33; --hover-grad:#173238; --hi-bg:#173238; --ask-grad:#173238;
  --input-bg:#11191c; --focus:#f2c230;
  --overlay:rgba(0,0,0,.58);
  --chrome-bg:#0a0f11; --chrome-raise:#141d20; --chrome-active:#18282c; --chrome-line:#1d282c;
  --chrome-ink:#e6ecea; --chrome-ink2:#9fb3b0;
  --shadow:rgba(0,0,0,.5);
  --shadow-sm:0 1px 0 rgba(0,0,0,.25);
  --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.45);
  --shadow-lg:0 4px 10px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.55);
  --shadow-raise:0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.35);
  --bar:#2c3b40; --bar-fade:#223034; --bar-accent:#5fb3bd; --bar-accent-fade:#3d8790;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0f1416; --surface:#172024; --ink-lock:#e6ecea; --petrol:#5fb3bd; --border:#3a4a4e; --field-border:#6f8481;
    --bg:#0f1416; --bg2:#0b1012; --panel:#172024; --panel2:#1c272b; --surface-grad:var(--panel);
    --line:#2c393d; --line-soft:#222d31; --line-strong:#3e4f53;
    --ink:#e6ecea; --ink2:#c2cfcc; --ink3:#9fb3b0;
    --primary:#5fb3bd; --primary-btn:#5fb3bd; --primary-hover:#7cc5cd; --primary-deep:#a6dbe0;
    --primary-tint:#173238; --on-primary:#0f1416;
    --gold-text:#f2c230; --gold-graphic:#f2c230; --gold-graphic-dim:#8f7a2e; --gold-edge:#4d4222; --line-gold:#4d4222;
    --ok:#6cc493; --warn:#e3a84f; --bad:#f28b80; --danger:#f28b80; --warn-ink:#e3a84f; /* 7.35:1 on dark --warn-tint */
    --ok-tint:#152a20; --warn-tint:#2c2315; --bad-tint:#311b19;
    --ok-edge:#285038; --warn-edge:#544018; --bad-edge:#5a2d28;
    --hover-bg:#212e33; --hover-grad:#173238; --hi-bg:#173238; --ask-grad:#173238;
    --input-bg:#11191c; --focus:#f2c230;
    --overlay:rgba(0,0,0,.58);
    --chrome-bg:#0a0f11; --chrome-raise:#141d20; --chrome-active:#18282c; --chrome-line:#1d282c;
    --chrome-ink:#e6ecea; --chrome-ink2:#9fb3b0;
    --shadow:rgba(0,0,0,.5);
    --shadow-sm:0 1px 0 rgba(0,0,0,.25);
    --shadow-md:0 2px 6px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.45);
    --shadow-lg:0 4px 10px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.55);
    --shadow-raise:0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.35);
    --bar:#2c3b40; --bar-fade:#223034; --bar-accent:#5fb3bd; --bar-accent-fade:#3d8790;
  }
}