/* Shared design tokens for all mandarin-daily apps.
 *
 * The Hub and Writing Practice already used custom properties; Character Quiz,
 * Listening Drill and Pinyin Decipher hardcoded their own near-miss shades
 * (#a03a2b / #BE3A26 instead of #B5432C, #f7f4ee / #EDE8DA instead of #F4EFE4,
 * DM Sans and IBM Plex instead of Space Grotesk). Everything now points here,
 * so the palette is uniform and the Hub's dark-mode toggle reaches all five.
 *
 * The first block is the Hub's original set, unchanged. The rest are shades the
 * other apps needed that the Hub never had a name for.
 */
:root {
  /* Tells the browser which way to paint the parts it owns: scrollbars, the
     autofill background on the Hub's sign-in inputs, caret and selection
     defaults, the textarea resize grip. Without it those stay light while
     everything around them goes dark. Set here rather than per-app so it can
     never drift from the palette it describes. */
  color-scheme: light;

  /* Hub's original tokens — values unchanged. */
  --bg1: #FBF7EE; --bg2: #F4EFE4; --card: #FDFBF4; --soft: #F2ECDD;
  --line: #E7DECB; --line2: #EFE7D6; --ink: #241C12; --sub: #7A6E58; --dim: #9A8C74;
  --red: #B5432C; --redInk: #FFF6EA; --green: #4B8A5F; --gold: #C9A24B;

  /* Text between --ink and --sub. */
  --ink2: #504A41;
  /* Inverted chip / dark badge background. */
  --inkChip: #3A2E1E;

  /* Panel surfaces, one step warmer than --card. */
  --panel: #FAF7F0; --panel2: #FFFDF6;
  --panelLine: #D8D1BE; --rule: #E6DFCC; --wash: #F4EFE2;
  --lineDeep: #C9C1B3; --track: #E7E0D3;

  /* Accent family: pressed state, accent-tinted text, tinted borders and fills. */
  --redDeep: #8E3421; --redMid: #B4522E; --redDim: #C08573;
  --redLine: #E8C4B8; --redWash: #FBEDE8;

  /* Success family, used by the drill's answer feedback. */
  --greenDeep: #2E7A58; --greenDim: #A8D4BC;
  --greenLine: #A8D4BC; --greenWash: #EAF3EC;
  --greenInk: #F0FAF4;   /* light foreground ON green */
  --greenText: #1F4A30;  /* dark foreground on --greenWash */

  --goldInk: #8A6A1A; --goldDim: #9C8A5F; --goldWash: #FDF7E7;

  /* Toggle knob. Stays light in both themes: it rides both an accent track
     (when on) and a --line track (when off), and only a light knob reads
     against both in dark mode. */
  --knob: #FFFDF8;

  /* Four-step intensity ramp for the quiz's per-word heat cells. */
  --heat1: #CFE0D3; --heat2: #8FBB9F; --heat3: #5F9C74; --heat4: #3D7A52;

  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-cjk: 'Noto Serif SC', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg1: #1B1710; --bg2: #14110C; --card: #221D15; --soft: #2A241A;
  --line: #3A3226; --line2: #332C21; --ink: #F4EFE4; --sub: #B0A28A; --dim: #8A7D68;
  --red: #D9583C; --redInk: #1B1710; --green: #6FAE84; --gold: #DFBC6A;

  --ink2: #C9BEA8;
  --inkChip: #2A241A;

  --panel: #221D15; --panel2: #2A241A;
  --panelLine: #3A3226; --rule: #332C21; --wash: #2A241A;
  --lineDeep: #4A4133; --track: #332C21;

  --redDeep: #E86B4E; --redMid: #E08163; --redDim: #B5806D;
  --redLine: #5A3A30; --redWash: #2E1C16;

  --greenDeep: #4E9E77; --greenDim: #4E7A63;
  --greenLine: #3C6350; --greenWash: #17251C;
  --greenInk: #E8F5EC;
  --greenText: #8FD3A8;

  --goldInk: #DFBC6A; --goldDim: #B49A62; --goldWash: #2A2416;

  --knob: #EFE7D6;

  --heat1: #2C4434; --heat2: #3F6B4E; --heat3: #55916B; --heat4: #6FAE84;
}