/* VerbaQuest design tokens. Every colour, size, radius, shadow and timing used by
   style.css comes from here.

   Breakpoints (media queries cannot read variables, so these are the agreed values):
     tablet  >= 640px
     desktop >= 960px */
:root {
  /* Brand */
  --green: #064e3b;
  --gold: #d4a72c;
  --ivory: #faf9f4;
  --charcoal: #17201d;
  --sage: #e8f0eb;

  /* Roles */
  --bg: var(--ivory);
  --surface: #ffffff;
  --surface-soft: var(--sage);
  --text: var(--charcoal);
  --text-muted: #5c6b64;
  --border: #e2e7e0;
  --primary: var(--green);
  --primary-hover: #0a6349;
  --on-primary: #ffffff;
  --primary-ink: var(--green);      /* green used as text */
  --reward: var(--gold);
  --reward-soft: #fbf3d9;
  --reward-ink: #7a5c08;            /* gold used as text */
  --success: #0b7a55;
  --success-soft: #e1f3ea;
  --gentle: #b4532a;                /* wrong answers: warm, not alarming */
  --gentle-soft: #fbece4;

  /* Typography */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: 800 2rem/1.15 var(--font);
  --text-h1: 800 1.5rem/1.2 var(--font);
  --text-h2: 700 1.125rem/1.3 var(--font);
  --text-body: 500 1rem/1.55 var(--font);
  --text-small: 500 0.8125rem/1.45 var(--font);
  --text-label: 700 0.6875rem/1.3 var(--font);
  --text-button: 700 0.9375rem/1 var(--font);
  --text-question: 700 1.375rem/1.35 var(--font);
  --text-answer: 600 1rem/1.4 var(--font);
  --text-reference: 600 0.8125rem/1.4 var(--font);
  --text-number: 800 1.375rem/1.1 var(--font);

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

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(23, 32, 29, 0.06);
  --shadow-md: 0 6px 20px rgba(23, 32, 29, 0.08);
  --shadow-lg: 0 16px 40px rgba(23, 32, 29, 0.16);

  /* Motion */
  --fast: 120ms ease-out;
  --base: 220ms ease-out;
  --slow: 600ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --tap: 48px;                      /* minimum touch target */
  --nav-height: 68px;
  color-scheme: light;
}

/* Dark theme: follows the system unless the player has picked light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1411;
    --surface: #151e1a;
    --surface-soft: #1d2a24;
    --text: #edf2ee;
    --text-muted: #9db0a6;
    --border: #27352e;
    --primary: #0f7a5c;
    --primary-hover: #129270;
    --primary-ink: #6fd3ae;
    --reward: #e0b84a;
    --reward-soft: #2e2710;
    --reward-ink: #ecc963;
    --success: #4fc79a;
    --success-soft: #12301f;
    --gentle: #f0936b;
    --gentle-soft: #33201a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1411;
  --surface: #151e1a;
  --surface-soft: #1d2a24;
  --text: #edf2ee;
  --text-muted: #9db0a6;
  --border: #27352e;
  --primary: #0f7a5c;
  --primary-hover: #129270;
  --primary-ink: #6fd3ae;
  --reward: #e0b84a;
  --reward-soft: #2e2710;
  --reward-ink: #ecc963;
  --success: #4fc79a;
  --success-soft: #12301f;
  --gentle: #f0936b;
  --gentle-soft: #33201a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}