/* ============================================================================
   FLASH — design tokens (Hedge v2)
   Canonical source: docs/DESIGN.md  ·  living reference: design-exploration/07-hedge.html
   Rule: if a value here disagrees with the HTML specimen, the HTML wins.
   Components reference tokens ONLY — no raw hex outside this file.
   ============================================================================ */

:root {
  /* ── Color · surfaces ──────────────────────────────────────────────── */
  --canvas:    #EEEFE9;   /* page background (warm cream) */
  --card:      #FFFFFF;   /* card / raised surface */
  --well:      #E5E7DE;   /* inset wells, key badges */

  /* ── Color · ink ───────────────────────────────────────────────────── */
  --ink:       #23251D;   /* primary text, headings */
  --body-ink:  #4D4F46;   /* body text */
  --muted:     #8F917F;   /* meta, captions, kbd hints */

  /* ── Color · lines ─────────────────────────────────────────────────── */
  --line:      #D0D1C9;   /* soft hairlines inside cards */
  --line-hard: #23251D;   /* structural 1.5px borders (ink) */

  /* ── Color · accents (solid color-blocked actions) ─────────────────── */
  --orange:    #F54E00;   /* primary action, Again, progress fill */
  --marker:    #F7A501;   /* highlighter, Hard, streak badge */
  --teal:      #1078A3;   /* info, Easy, state tags */
  --green:     #2EBC72;   /* success, Good, retention stats */
  --red:       #E2452C;   /* destructive, lapsed */

  /* ── Color · derived ───────────────────────────────────────────────── */
  --orange-deep: #D84500; /* progress barber-pole second band */
  --on-accent:   #FFFFFF; /* text on orange/teal/green/red fills */
  --on-marker:   var(--ink); /* text on the yellow Hard/marker fill */
  --marker-hi:   rgba(247, 165, 1, .45); /* highlighter sweep over dark text */

  /* ── Typography ────────────────────────────────────────────────────── */
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'Source Code Pro', ui-monospace, monospace;

  --fs-kbd:   10.5px;  /* kbd hints, mono meta, state tags */
  --fs-chip:  11.5px;  /* fsrs chips, stat badges */
  --fs-ui:    13.5px;  /* UI labels, body, coach */
  --fs-answer:16.5px;  /* answer text */
  --fs-q:     25px;    /* question text */
  --fs-done:  30px;    /* done headline */

  /* ── Geometry ──────────────────────────────────────────────────────── */
  --r:      6px;       /* base radius */
  --r-card: 8px;       /* cards */
  --r-chip: 4px;       /* key / chip badges */
  --bw:     1.5px;     /* structural border width */

  /* ── Elevation (soft hard-offset, never blurred-gray) ──────────────── */
  --shadow:       3px 3px 0 rgba(35, 37, 29, .16);
  --shadow-sm:    2px 2px 0 rgba(35, 37, 29, .14);
  --shadow-hover: 4px 4px 0 rgba(35, 37, 29, .16);
  --shadow-press: 1px 1px 0 rgba(35, 37, 29, .20);

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --sidebar-w: 240px;
  --header-h:  56px;
  --content-max: 1200px;
  --study-col:  min(600px, 100%);

  /* ── Motion ────────────────────────────────────────────────────────── */
  --t-fast: .1s;
  --t-base: .12s;
}

/* ============================================================================
   Dark mode (ships at v1 — PRD NFR-4)
   Surfaces/lines from Terminal specimen (02); accents brightened for AA on
   dark. Keeps Hedge's hard-border + color-block character; NOT glassmorphism.
   Proposed mapping — pending user sign-off (see docs/DESIGN.md).
   ============================================================================ */
[data-theme="dark"] {
  --canvas:    #0A0E14;   /* 02 --bg, phosphor near-black */
  --card:      #0D1320;   /* 02 --panel */
  --well:      #111A2C;   /* 02 --panel-2 */

  --ink:       #EDF0FB;   /* 03 --txt, primary text */
  --body-ink:  #C8D6EE;   /* 02 --txt, body */
  --muted:     #5C6F8F;   /* 02 --dim */

  --line:      #1C2940;   /* 02 --line */
  --line-hard: #2A3D5C;   /* 02 --line-bright */

  --orange:    #FF6224;   /* brightened from #F54E00 for AA on dark */
  --marker:    #FFB454;   /* 02 --amber */
  --teal:      #59C2FF;   /* 02 --cyan */
  --green:     #3DDC97;   /* 02 --green */
  --red:       #F07178;   /* 02 --red */

  --orange-deep: #E0531C;
  --on-accent:   #0A0E14; /* dark ink reads better on the brightened fills */
  --on-marker:   #0A0E14;
  --marker-hi:   rgba(255, 180, 84, .30); /* lower-opacity glow over light text */

  --shadow:       3px 3px 0 rgba(0, 0, 0, .45);
  --shadow-sm:    2px 2px 0 rgba(0, 0, 0, .40);
  --shadow-hover: 4px 4px 0 rgba(0, 0, 0, .45);
  --shadow-press: 1px 1px 0 rgba(0, 0, 0, .50);
}

/* Honor OS preference when the user hasn't explicitly chosen a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0A0E14; --card: #0D1320; --well: #111A2C;
    --ink: #EDF0FB; --body-ink: #C8D6EE; --muted: #5C6F8F;
    --line: #1C2940; --line-hard: #2A3D5C;
    --orange: #FF6224; --marker: #FFB454; --teal: #59C2FF;
    --green: #3DDC97; --red: #F07178;
    --orange-deep: #E0531C;
    --on-accent: #0A0E14; --on-marker: #0A0E14;
    --marker-hi: rgba(255, 180, 84, .30);
    --shadow: 3px 3px 0 rgba(0,0,0,.45);
    --shadow-sm: 2px 2px 0 rgba(0,0,0,.40);
    --shadow-hover: 4px 4px 0 rgba(0,0,0,.45);
    --shadow-press: 1px 1px 0 rgba(0,0,0,.50);
  }
}