/* tokens.css — design tokens + themes.
   To RESKIN: edit the values below, or add a new [data-theme="x"] block.
   To make a NEW niche app: keep this file, swap js/content.js + adjust js/app.js fields.
   (The @font-face for the self-hosted character font lives in base.css, so the
   theming variables below stay at the very top of the stylesheet.) */

/* Six DISTINCT colour families — one per identity, each with its OWN accent so no two
   themes read as variations of the same palette (Mobile's round-9 note: kill the two
   near-duplicate warm oranges and the gold --accent that repeated across three themes):
     warm  — terracotta on cream  (the signature warm)
     dark  — midnight
     rose  — pink / berry
     ocean — blue
     sage  — earthy green
     mono  — black & white
   Colour contrast: --ink-soft, --primary and --danger were re-checked with a WCAG
   relative-luminance script against every background they're actually painted on
   (--bg, --surface, --surface-2) in each theme, plus --primary against --primary-ink
   for button text and --danger against --surface for .btn-danger. Every rendered
   pair clears the 4.5:1 AA floor with real margin (measured floor across all
   pairs/themes: 4.6:1). --primary is never used as body text on --surface-2.
   Re-verified 2026-07 (round 10). */
:root {
  --radius: 16px;
  --radius-sm: 10px;
  --space: 16px;
  /* Character font (Bricolage Grotesque) — self-hosted below via @font-face so it
     also renders offline (the PWA's whole point); system stack is the brief-flash
     fallback before it loads (font-display: swap) or if the file fails to fetch.
     "Bricolage Grotesque Fallback" (defined in base.css) is a metrics-only face —
     a system font with size-adjust/ascent-override/descent-override tuned to match
     Bricolage's box, so the swap from fallback -> webfont causes ~no layout shift. */
  --font: "Bricolage Grotesque", "Bricolage Grotesque Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 560px;

  /* default = CREAM theme */
  --bg: #F4ECDE;
  --surface: #FBF7F0;
  --surface-2: #EFE6D7;
  --ink: #2B2622;
  --ink-soft: #6C6255;
  --primary: #985032;   /* AA: 4.81:1+ on cream bg/surface/surface-2 and on primary-ink button text */
  --primary-ink: #FBF7F0;
  --accent: #C9A24A;
  --line: #E2D6C4;
  --danger: #A6442E;
  --good: #6E8B6A;
}

[data-theme="dark"] {
  --bg: #1E1B18;
  --surface: #2A2622;
  --surface-2: #332E29;
  --ink: #F1E9DC;
  --ink-soft: #B6AA98;
  --primary: #D2784F;
  --primary-ink: #1E1B18;
  --accent: #D8B25E;
  --line: #3D372F;
  --danger: #E08368;
  --good: #9DBE97;
}

[data-theme="sage"] {            /* earthy green — its own moss accent (was the shared gold) */
  --bg: #EEF1E8;
  --surface: #F7F9F2;
  --surface-2: #E2E8D6;
  --ink: #2C322A;
  --ink-soft: #5E6557;
  --primary: #4F6147;         /* deepened a touch so the green reads distinct from mono/dark */
  --primary-ink: #F7F9F2;
  --accent: #8B9B54;          /* moss — sage's own accent */
  --line: #D7DECB;
  --danger: #A6442E;
  --good: #5E7A57;
}

[data-theme="rose"] {            /* pink / berry family */
  --bg: #F9EAEE;
  --surface: #FFF5F8;
  --surface-2: #F2D8E0;
  --ink: #33232A;
  --ink-soft: #6E4F58;
  --primary: #A63A5B;          /* berry rose */
  --primary-ink: #FFF5F8;
  --accent: #E58BA8;           /* soft pink — rose's own accent */
  --line: #EFD0DA;
  --danger: #A6402E;
  --good: #6E8B6A;
}

[data-theme="ocean"] {           /* blue family */
  --bg: #E8EEF6;
  --surface: #F4F8FC;
  --surface-2: #D6E3F0;
  --ink: #1E2A38;
  --ink-soft: #4B5A6D;
  --primary: #2C5A87;          /* deep ocean blue */
  --primary-ink: #F4F8FC;
  --accent: #5B9BD1;           /* sky — ocean's own accent */
  --line: #CCDBEC;
  --danger: #A6442E;
  --good: #3E7A6A;
}

[data-theme="mono"] {
  --bg: #F3F3F1;
  --surface: #FFFFFF;
  --surface-2: #E9E9E6;
  --ink: #1C1C1A;
  --ink-soft: #656561;
  --primary: #2B2A28;
  --primary-ink: #FFFFFF;
  --accent: #8A8A84;
  --line: #E0E0DC;
  --danger: #8A2E1E;
  --good: #4A4A46;
}