/* ===================================================================
   variables.css — design tokens
   Aesthetic: "chalkboard workbook" — deep chalkboard green-black canvas,
   chalk-cream ink, hand-drawn dashed rules instead of soft shadows.
   Numerals set in a mono face so every question reads like it was
   chalked mid-calculation; UI chrome set in a geometric grotesk.
   =================================================================== */

:root {
  /* -- dark (default) chalkboard palette -- */
  --bg: #12201b;
  --bg-raised: #1b2e27;
  --bg-raised-2: #23392f;
  --ink: #f3efe1;
  --ink-dim: #a7b8ae;
  --ink-faint: #6f8079;
  --rule: rgba(243, 239, 225, 0.16);
  --rule-strong: rgba(243, 239, 225, 0.3);

  --accent-yellow: #e4be5c;
  --accent-yellow-ink: #2a2210;
  --accent-teal: #6fa8a0;
  --accent-teal-ink: #0f2422;
  --accent-coral: #cc6b49;
  --accent-coral-ink: #2a140c;
  --accent-green: #86b37b;
  --accent-green-ink: #12200e;

  --correct: #86b37b;
  --incorrect: #cc6b49;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f4efe1;
  --bg-raised: #fffdf8;
  --bg-raised-2: #ece2c9;
  --ink: #24312b;
  --ink-dim: #5c6b62;
  --ink-faint: #8a978f;
  --rule: rgba(36, 49, 43, 0.16);
  --rule-strong: rgba(36, 49, 43, 0.32);

  --accent-yellow: #b9862a;
  --accent-yellow-ink: #fffaf0;
  --accent-teal: #3f7a72;
  --accent-teal-ink: #f2fbf9;
  --accent-coral: #a8492c;
  --accent-coral-ink: #fff4ef;
  --accent-green: #4f7d43;
  --accent-green-ink: #f2fbef;

  --correct: #4f7d43;
  --incorrect: #a8492c;

  color-scheme: light;
}