/* tokens.css — the design tokens, and nothing else.
 *
 * Single source for every page (landing, guide, trainer). The consumer
 * stylesheets define layout and components but no palette of their own —
 * a color that appears in style.css/intro.css/landing.css instead of here
 * is a bug (see docs/decisions/0008).
 *
 * Theme model, three states:
 *   1. No choice made      → the OS decides (dark base, light media query)
 *   2. data-theme="light"  → light, regardless of OS
 *   3. data-theme="dark"   → dark, regardless of OS (the :not() below is what
 *                            lets the base dark values win over an OS in
 *                            light mode)
 * js/theme.js sets the attribute; a no-flash snippet in each <head> restores
 * the stored choice before first paint.
 *
 * Values are byte-identical to the pre-extraction style.css — phase 1 of the
 * landing redesign is a refactor with a pixel-identical bar, not a restyle.
 */

/* Native form controls follow the page theme — the UA paints a <select>'s
   popup list from this, and nothing else can reach it. It lived in the
   planner's own sheet while the planner was the only page with a native
   control; the feedback panel's screen picker put one on the guides too,
   where that sheet is not loaded and the popup came up light on a dark page.
   It belongs with the three-state model it mirrors. */
:root{color-scheme:light}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark}
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

:root{
  --bg:#0f1117; --panel:#171a23; --panel2:#1e222d; --line:#2a2f3d;
  --ink:#e8eaf0; --dim:#98a0b3; --accent:#e0533d; --accent2:#4a9eff;
  --good:#3ecf8e; --warn:#f5a623; --bad:#ff6b6b;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
}

/* ---- the brand mark (#147) ---------------------------------------------
   The 日 tile is ONE decision, deliberately its own token rather than a
   reference to --accent or --pl-accent. Reaching into a page palette is
   exactly how the logo came to ship in two different oranges: the pages on
   --accent (landing, guide, admin) rendered it #e0533d while the ember
   surfaces (trainer, planner) rendered it #f97316. The brand does not belong
   to either palette, so it names its own colour and every surface obeys it.
   Theme-independent on purpose — a logo that changes colour with the OS is
   not a logo. components/brand.css is the only consumer. */
:root{
  --brand-mark:#f97316; --brand-mark-ink:#ffffff;
  /* The landing wore a gradient tile while its CTAs carried the --accent
     gradient — a solid ember mark beside them read as a second, competing
     orange. The playful redesign (decision 0015) paints the landing's CTAs
     in the same solid ember as everywhere else, so that rationale is gone
     and the mark is ONE treatment on every surface. The variant token stays
     so the landing can be re-valued, never re-plumbed. */
  --brand-mark-landing:var(--brand-mark);
  --brand-mark-landing-ink:var(--brand-mark-ink);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--bg:#f6f7f9;--panel:#fff;--panel2:#f0f2f6;--line:#e0e4ec;--ink:#1a1d26;--dim:#666e80}
}
:root[data-theme="light"]{--bg:#f6f7f9;--panel:#fff;--panel2:#f0f2f6;--line:#e0e4ec;--ink:#1a1d26;--dim:#666e80}

/* ---- landing-specific tokens (unused by trainer/guide styles) ----------
   -deep variants exist because the light surfaces need darker text-accents
   than the shared brand values to stay readable; in dark they equal the base.
   Chart ramps are machine-validated (dataviz six-checks) per surface — rerun
   the validator before changing them (docs/landing-redesign.md has both). */
:root{
  --card:#12151d; --line2:#3a4152; --mute:#848d9a;
  --accent-soft:rgba(224,83,61,.13); --accent-deep:#e0533d;
  --good-deep:#3ecf8e; --bad-deep:#ff6b6b;
  --hover:rgba(255,255,255,.06);
  --shadow1:rgba(0,0,0,.5); --shadow2:rgba(0,0,0,.6);
  --h0:#7C4237; --h1:#9E5242; --h2:#C0644D; --h3:#DE7757; --h4:#FA8B65;
  --cell:rgba(255,255,255,.04); --shimmer:rgba(255,255,255,.05);
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  /* --display is the voice font: the face that carries headlines, tabs, pills
     and any other short prose that should read as *designed* rather than as
     body copy. It resolves to --mono for Latin, which is where the product's
     character comes from. --mono itself stays what it says on the tin and is
     used only where digits must align.

     Devanagari has no monospace tradition and none of the faces above carry
     it, so a Hindi string set in --mono silently fell back to an arbitrary
     face — the bug that made every Hindi screen look weaker than its English
     twin. The override lives with the locale, below. */
  --display:var(--mono);
  --devanagari:"Kohinoor Devanagari","Noto Sans Devanagari","Mangal",var(--sans);
  /* Kohinoor is Apple's UI Devanagari — drawn for screens, four weights,
     visibly better than the fallbacks; Noto covers Android/Linux, Mangal
     covers Windows. Sangam MN dropped: dated metrics, no real weights. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --card:#ffffff; --line2:#cdd4e0; --mute:#656e7f;
    --accent-soft:rgba(201,68,48,.09); --accent-deep:#c94430;
    --good-deep:#157a4f; --bad-deep:#b23325;
    --hover:rgba(20,30,50,.06);
    --shadow1:rgba(25,35,55,.14); --shadow2:rgba(25,35,55,.2);
    --h0:#E5A183; --h1:#D27A5B; --h2:#B6583C; --h3:#914028; --h4:#672C1B;
    --cell:#eef1f5; --shimmer:rgba(20,30,50,.05);
  }
}
:root[data-theme="light"]{
  --card:#ffffff; --line2:#cdd4e0; --mute:#656e7f;
  --accent-soft:rgba(201,68,48,.09); --accent-deep:#c94430;
  --good-deep:#157a4f; --bad-deep:#b23325;
  --hover:rgba(20,30,50,.06);
  --shadow1:rgba(25,35,55,.14); --shadow2:rgba(25,35,55,.2);
  --h0:#E5A183; --h1:#D27A5B; --h2:#B6583C; --h3:#914028; --h4:#672C1B;
  --cell:#eef1f5; --shimmer:rgba(20,30,50,.05);
}

/* Translucent state tints for right/wrong feedback surfaces. */
:root{ --good-tint:rgba(62,207,142,.08); --bad-tint:rgba(255,107,107,.08) }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --good-tint:rgba(21,122,79,.08); --bad-tint:rgba(178,51,37,.08) }
}
:root[data-theme="light"]{ --good-tint:rgba(21,122,79,.08); --bad-tint:rgba(178,51,37,.08) }

/* ---- planner-page tokens (used only by planner.css) --------------------
   The planner redesign (mockup set, 2026-08) carries its own neutral-black /
   ember-orange palette, warmer and higher-contrast than the shared trainer
   surfaces. Same three-state theme model as everything above.
   --pl-track is the filled-control groove, --pl-faint the barely-there ring
   track behind progress circles. */
:root{
  --pl-base:#000000; --pl-surface:#0a0a0a; --pl-card:#141414; --pl-line:#262626;
  /* #171: #737373 measured 3.89:1 on --pl-card, under the 4.5:1 AA floor for
     the captions it carries. #858585 clears every ember ground (5.1:1 on the
     card) and stays under --dim, which mixes 45% ink into it. */
  --pl-mute:#858585; --pl-ink:#ffffff; --pl-accent:#f97316; --pl-onaccent:#ffffff;
  /* Ink for SMALL glyphs sitting on accent-tinted grounds (the done-goal ✓,
     #136). The raw accent passes on the dark tint (5.65:1 modelled) but
     measured 1.81:1 live on the light one, so the light copies deepen to ember. */
  --pl-accent-deep:#f97316;
  /* Ink for text ON the solid accent fill (#158). The accent is the same
     orange in both themes, so its ink is invariant too — black is 7.49:1
     where white (--pl-onaccent's value) is 2.80:1. --pl-onaccent itself
     serves non-accent fills (the good-green, the switch thumb) whose correct
     inks differ per theme; re-valuing it is #171's palette audit. */
  --pl-accent-ink:#000000;
  --pl-track:#262626; --pl-faint:rgba(255,255,255,.05);
  --pl-good:#22c55e; --pl-good-soft:rgba(34,197,94,.1); --pl-good-line:rgba(34,197,94,.2);
  --pl-danger:#ef4444; --pl-shadow:rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --pl-base:#ffffff; --pl-surface:#f9fafb; --pl-card:#ffffff; --pl-line:#e5e7eb;
    --pl-mute:#6b7280; --pl-ink:#111827;
    --pl-track:#e5e7eb; --pl-faint:#f3f4f6;
    --pl-good:#15803d; --pl-good-soft:#dcfce7; --pl-good-line:#bbf7d0;
    --pl-accent-deep:#9a3412;
    --pl-shadow:rgba(17,24,39,.1);
  }
}
:root[data-theme="light"]{
  --pl-base:#ffffff; --pl-surface:#f9fafb; --pl-card:#ffffff; --pl-line:#e5e7eb;
  --pl-mute:#6b7280; --pl-ink:#111827;
  --pl-track:#e5e7eb; --pl-faint:#f3f4f6;
  --pl-good:#15803d; --pl-good-soft:#dcfce7; --pl-good-line:#bbf7d0;
  --pl-accent-deep:#9a3412;
  --pl-shadow:rgba(17,24,39,.1);
}

/* ---- playful-skin tokens (the game-like redesign, 2026-08) -------------
   The "Bhassa Playful" wireframe set (docs/decisions/0015) trades the calm
   ember dashboard for a hand-drawn game board: warm paper grounds, thick
   ink outlines, one ember accent, chunky offset "edge" shadows instead of
   blur. Consumed only by css/components/playful.css and the pages that opt
   into the skin — nothing else may reference --play-*.

   Same three-state theme model. The wireframes are paper-light; the dark
   copies keep the same ink-outline grammar on a night-paper ground.

   Invariants (deliberately NOT themed):
   --play-accent      the ember — identical to --brand-mark / --pl-accent.
   --play-accent-ink  ink ON the solid accent fill. Near-black measures
                      ~6.9:1 on #f97316 where white is 2.80:1 (#158 taught
                      this once already); the light ink would fail in dark
                      theme, so the token names one invariant colour.
 */
:root{
  --play-bg:#16130f; --play-card:#201b14; --play-paper:#262019; --play-lock:#1d1913;
  /* --play-mute is the caption ink AND, through the trainer's remap, --dim —
     every meta line and stat label reads through it. Light was #8a8073,
     3.8:1 on the card; #736a5d clears 4.5:1 on every paper ground. Both
     palettes are pinned by token-contrast.test.js. */
  --play-ink:#f0e9dd; --play-soft:#6e6456; --play-mute:#a89d8c;
  --play-track:#3a332a; --play-edge:#000000;
  --play-accent:#f97316; --play-accent-ink:#211505; --play-accent-soft:#4a2c12;
  --play-link:#fb8f3d;
  --play-boss:#0d0b08; --play-boss-line:#4a443c; --play-boss-ink:#f0e9dd;
  /* Kanji Mountains' drawn ridge (wireframes 27b dark / 27c light). Three
     deliberately separated values so the massif has mass and the snow cap
     has something to sit on; the ridge line itself is --play-ink. 27c is
     not 27b inverted — in daylight the SKY is the darkest of the three and
     the rock the lightest, because a pale massif on pale paper vanishes. */
  --play-sky:#3a322b; --play-range:#2a2520; --play-massif:#171412;
  /* Tanu's fur (0016): real colour in both themes so the mascot never inverts
     into a negative the way a two-tone face did. Outlines stay --play-ink. */
  --play-fur:#c98a52; --play-fur-deep:#3b2a20; --play-fur-pale:#eddcc4; --play-eye:#f8f1e6;
  --play-display:'Patrick Hand',"Chalkboard SE","Comic Sans MS",var(--devanagari);
  --play-script:'Caveat',"Bradley Hand","Chalkboard SE",var(--devanagari);
  /* The display voice for a field that may hold Japanese (#224): the same
     hand faces, then the Japanese stack ahead of the Devanagari one, so kana
     typed into it get a real face rather than the last-resort fallback. */
  --play-display-jp:'Patrick Hand',"Chalkboard SE","Comic Sans MS",var(--jp),var(--devanagari);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --play-bg:#f0eee9; --play-card:#fffdf8; --play-paper:#faf7f1; --play-lock:#f2efe9;
    --play-ink:#2a2520; --play-soft:#b8afa2; --play-mute:#736a5d;
    --play-track:#e8e2d8; --play-edge:#2a2520;
    --play-accent-soft:#fdd7bb;
    --play-link:#c2570f;
    --play-boss:#2a2520; --play-boss-line:#4a443c; --play-boss-ink:#fffdf8;
    --play-sky:#c8d4da; --play-range:#dee6ea; --play-massif:#fffdf8;
    --play-fur:#d9a066; --play-fur-deep:#4a3326; --play-fur-pale:#f6e7d2; --play-eye:#fffdf8;
  }
}
:root[data-theme="light"]{
  --play-bg:#f0eee9; --play-card:#fffdf8; --play-paper:#faf7f1; --play-lock:#f2efe9;
  --play-ink:#2a2520; --play-soft:#b8afa2; --play-mute:#736a5d;
  --play-track:#e8e2d8; --play-edge:#2a2520;
  --play-accent-soft:#fdd7bb;
  --play-link:#c2570f;
  --play-boss:#2a2520; --play-boss-line:#4a443c; --play-boss-ink:#fffdf8;
  --play-sky:#c8d4da; --play-range:#dee6ea; --play-massif:#fffdf8;
  --play-fur:#d9a066; --play-fur-deep:#4a3326; --play-fur-pale:#f6e7d2; --play-eye:#fffdf8;
}

/* Script-aware display voice. Devanagari sets wider and reads lighter than the
   monospace it replaces, so the weight is nudged up where it is applied — see
   landing.css. Kept in tokens.css so every page inherits one decision. */
:root[lang="hi"]{ --display:var(--devanagari); }