/* BoboEdu: theme.css
   Shared design tokens. theme.js selects the initial palette before the page paints.
   Status fills have dedicated foreground colours so feedback stays readable in both themes. */

:root {
  --bg: #fffff3; /* the desk */
  --surface: #fdfbe9; /* paper */
  --ink: #0f1021; /* biro */
  --ink-edge: #0b0d24; /* the pressable edge under ink buttons */
  --muted: #5b5f80;
  --line: #dde1ec;
  --line-strong: #858ba1;
  --accent: #121fb3;
  --accent-soft: #e7e9fb;
  --good: #137447;
  --good-soft: #dff3e8;
  --on-good: #ffffff;
  --bad: #bd302d;
  --bad-soft: #fbe6e4;
  --on-bad: #ffffff;
  --warn: #9a5b00;
  --warn-soft: #fcefd8;
  --on-warn: #ffffff;
  --flame: #f05a28;
  /* highlighters: text on them is always dark ink */
  --hl: #ffe45c;
  --hl-psychology: #fd85bf;
  --hl-sociology: #85cdfa;
  --hl-soft: #fff1a8; /* a light swipe of highlighter, e.g. your row on the leaderboard */
  --on-hl: #1d2042;
  --tint: var(--hl);
  --shadow: 0 1px 0 rgba(29, 32, 66, 0.06), 0 12px 32px rgba(29, 32, 66, 0.14);
  --rule: #cfdcf3; /* index-card lines */
  --margin-line: #f2a7a7;
  --font-display:
    'Bricolage Grotesque', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto,
    Arial, sans-serif;
  --font-ui:
    'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: var(--font-display);
  --radius: 16px;
  --auth-bg: var(--hl);
  --heading-highlight-strength: 100%;
  --status-stripe: rgba(255, 255, 255, 0.18);
  color-scheme: light;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
}

:root[data-theme='dark'] {
  --bg: #16152a;
  --surface: #201f38;
  --ink: #ecebfa;
  --ink-edge: #b9b7d6;
  --muted: #b4b2d0;
  --line: #403d5e;
  --line-strong: #827da3;
  --accent: #aab2ff;
  --accent-soft: #272a55;
  --good: #5fd39b;
  --good-soft: #15352a;
  --on-good: #10291e;
  --bad: #ff8a80;
  --bad-soft: #3e1f28;
  --on-bad: #361513;
  --warn: #f2b65a;
  --warn-soft: #3a2c14;
  --on-warn: #34220c;
  --flame: #ff7a45;
  --hl: #f6d94b;
  --hl-psychology: #f48cc1;
  --hl-sociology: #79c5f6;
  --hl-soft: #f6d94b;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.45);
  --rule: #34345a;
  --margin-line: #7a3b4d;
  --auth-bg: var(--bg);
  --heading-highlight-strength: 22%;
  --status-stripe: rgba(0, 0, 0, 0.08);
  color-scheme: dark;
}