/* fraction-ds — css/tokens.css
   The ONLY file in the system that writes a colour. Every panel, hairline
   and status colour a product uses resolves back to a variable declared
   here, never to a colour literal in markup, JS or another stylesheet.

   The palette is the LDU brand's: ink (a cool near-black teal), lilac (the
   one accent, used only where attention belongs), and paper (a warm
   off-white). Source of truth for the values is the ldu_ui design system's
   ldu-tokens.css; this file maps them onto the names Fraction Memory's
   components already speak (--bg, --ink, --line, --accent ...).

   TWO THEMES, ONE SYSTEM. Dark is the default and the first :root block:
   ink surfaces, paper text, lilac accent. Light is paper surfaces, ink text
   and a deeper lilac accent that keeps its contrast on white. Light applies
   when the OS asks for it, unless the page pins a theme with
   <html data-theme="dark|light"> (the in-app switch, remembered per
   browser). Only colour changes between themes: type, shape and sizing are
   declared once, in the dark block.

   data-theme works on ANY element, not only <html>: an element carrying
   data-theme="light" or "dark" redeclares every colour token for itself and
   its subtree. The left rail uses that to stay ink in both themes, the way
   the LDU client app keeps a dark ink frame around paper content.

   Parsers that read token values (ThemeHelper.token) read the FIRST :root
   block only, so they always see the dark default.

   Type: Inter for everything a person wrote, DM Sans for display (the
   wordmark, page titles), a system mono for anything machine-derived. Inter
   and DM Sans are vendored in ../fonts, so nothing is fetched at runtime. */

:root {
  color-scheme: dark;
  --bg: #001E22;
  --bg-2: #0A2C30;
  --board: #001316;
  --grid: rgba(205, 203, 255, .07);
  --ink: #F9F9F7;
  --ink-2: #9CB2B4;
  --ink-3: #6E8B8E;
  --ink-4: #2F5256;
  --line: #1B3D41;
  --line-2: #2F5256;
  --line-3: #4A6B6F;
  --accent: #CDCBFF;
  --accent-soft: rgba(205, 203, 255, .16);
  --accent-ink: #001E22;
  --danger: #E5675C;
  --danger-soft: rgba(229, 103, 92, .18);
  --ok: #35C9A0;
  --warn: #F2C14E;
  --warn-soft: rgba(242, 193, 78, .18);
  --scrim: rgba(0, 19, 22, .65);
  --shadow-menu: 0 8px 24px rgba(0, 19, 22, .55);
  --on-accent-soft: rgba(0, 30, 34, .16);
  --tab-on-edge: rgba(0, 0, 0, 0);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236E8B8E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");

  /* ── type ─────────────────────────────────────────────────── */
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ── shape / sizing ───────────────────────────────────────── */
  --r-1: 8px;
  --r-2: 10px;
  --r-3: 16px;
  --h-control: 36px;
  --h-bar: 52px;
  --fs-body: 15px;
  --fs-ui: 14px;
  --fs-meta: 12px;

  /* ── shell metrics ─────────────────────────────────────────
     Sizes only, no colour. */
  --w-rail: 272px;
  --pad-main: 40px;   /* page content's inset from the top bar and the rail */
  --w-drawer: 380px;
}

/* ═══ light ═════════════════════════════════════════════════════
   Declared twice because CSS cannot share one block between a media query
   and an attribute selector: once for "the OS asks for light and the page
   has not pinned dark", once for "the page pinned light". Both are
   generated from one definition, so they cannot drift. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F9F9F7;
    --bg-2: #FFFFFF;
    --board: #F1F2EF;
    --grid: rgba(0, 30, 34, .06);
    --ink: #001E22;
    --ink-2: #4A6B6F;
    --ink-3: #6E8B8E;
    --ink-4: #C6D5D6;
    --line: #E3EBEB;
    --line-2: #D8E0E0;
    --line-3: #9CB2B4;
    --accent: #564CD1;
    --accent-soft: rgba(111, 102, 242, .12);
    --accent-ink: #FFFFFF;
    --danger: #C0362C;
    --danger-soft: rgba(192, 54, 44, .12);
    --ok: #0E8A64;
    --warn: #B7791F;
    --warn-soft: rgba(183, 121, 31, .14);
    --scrim: rgba(0, 30, 34, .4);
    --shadow-menu: 0 8px 24px rgba(0, 30, 34, .14);
    --on-accent-soft: rgba(255, 255, 255, .25);
    --tab-on-edge: #D8E0E0;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236E8B8E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  }
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F9F9F7;
  --bg-2: #FFFFFF;
  --board: #F1F2EF;
  --grid: rgba(0, 30, 34, .06);
  --ink: #001E22;
  --ink-2: #4A6B6F;
  --ink-3: #6E8B8E;
  --ink-4: #C6D5D6;
  --line: #E3EBEB;
  --line-2: #D8E0E0;
  --line-3: #9CB2B4;
  --accent: #564CD1;
  --accent-soft: rgba(111, 102, 242, .12);
  --accent-ink: #FFFFFF;
  --danger: #C0362C;
  --danger-soft: rgba(192, 54, 44, .12);
  --ok: #0E8A64;
  --warn: #B7791F;
  --warn-soft: rgba(183, 121, 31, .14);
  --scrim: rgba(0, 30, 34, .4);
  --shadow-menu: 0 8px 24px rgba(0, 30, 34, .14);
  --on-accent-soft: rgba(255, 255, 255, .25);
  --tab-on-edge: #D8E0E0;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236E8B8E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
}

/* ═══ dark, scoped ═══════════════════════════════════════════
   The dark values again, for an element that pins dark inside a light page
   (the left rail). */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #001E22;
  --bg-2: #0A2C30;
  --board: #001316;
  --grid: rgba(205, 203, 255, .07);
  --ink: #F9F9F7;
  --ink-2: #9CB2B4;
  --ink-3: #6E8B8E;
  --ink-4: #2F5256;
  --line: #1B3D41;
  --line-2: #2F5256;
  --line-3: #4A6B6F;
  --accent: #CDCBFF;
  --accent-soft: rgba(205, 203, 255, .16);
  --accent-ink: #001E22;
  --danger: #E5675C;
  --danger-soft: rgba(229, 103, 92, .18);
  --ok: #35C9A0;
  --warn: #F2C14E;
  --warn-soft: rgba(242, 193, 78, .18);
  --scrim: rgba(0, 19, 22, .65);
  --shadow-menu: 0 8px 24px rgba(0, 19, 22, .55);
  --on-accent-soft: rgba(0, 30, 34, .16);
  --tab-on-edge: rgba(0, 0, 0, 0);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236E8B8E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
}