/* Design tokens: the only place UI colors, spacing, type, radii and motion are defined. */
:root {
  --font-body: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', ui-rounded, system-ui, sans-serif;

  --color-bg: #fff4fa;
  --color-bg-alt: #f1eaff;
  --color-surface: #ffffff;
  --color-surface-muted: #fbf7ff;
  --color-border: #f2dcea;
  --color-text: #3d2b3d;
  --color-text-muted: #8a7690;

  --color-primary: #ff6fa8;
  --color-primary-strong: #dc4f8a;
  --color-on-primary: #ffffff;
  --color-secondary: #9b7bf0;
  --color-secondary-strong: #7a5bd6;
  --color-on-secondary: #ffffff;
  --color-accent: #ffd84d;
  --color-accent-strong: #e0b400;
  --color-focus: #4c9bf0;

  --color-correct: #2fbf7f;
  --color-correct-soft: #dcf8eb;
  --color-miss: #b9adc2;
  --color-miss-soft: #f1edf4;

  --color-rarity-common: #7cbcf5;
  --color-rarity-rare: #b67ff5;
  --color-rarity-super: #ffaa1d;

  --color-locked: #e4dbe9;
  --color-mastery-new: #efe9f3;
  --color-mastery-learning: #ffc9d9;
  --color-mastery-good: #ffe9a3;
  --color-mastery-mastered: #9fe7c4;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --text-xs: 0.8rem;
  --text-sm: 0.95rem;
  --text-md: 1.15rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-xxl: clamp(2.25rem, 6vw, 3.25rem);
  --text-question: clamp(3rem, 11vw, 6.5rem);
  --text-choice: clamp(1.9rem, 5.5vw, 3rem);

  --weight-regular: 500;
  --weight-bold: 700;
  --weight-black: 800;
  --tracking-wide: 0.12em;

  --tap-min: 3.5rem;
  /* Space reserved for panels that fill in after a network call, so nothing jumps. */
  --size-account-panel: 12rem;
  --size-google-button: 3.5rem;
  --size-prize-panel: 8rem;
  --guide-size: 5.5rem;
  --guide-size-lg: 9rem;
  --content-max: 60rem;

  --shadow-card: 0 0.3rem 0 rgba(61, 43, 61, 0.08), 0 0.6rem 1.5rem rgba(61, 43, 61, 0.06);
  --shadow-press: 0 0.3rem 0 var(--btn-shade, rgba(61, 43, 61, 0.2));
  --shadow-glow: 0 0 0 0.35rem rgba(255, 111, 168, 0.25);

  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #231a2d;
    --color-bg-alt: #2c2140;
    --color-surface: #33273f;
    --color-surface-muted: #2b2136;
    --color-border: #4b3b5c;
    --color-text: #fbefff;
    --color-text-muted: #c4b1cf;
    --color-correct-soft: #1f4a3a;
    --color-miss-soft: #3d3347;
    --color-locked: #4a3e55;
    --color-mastery-new: #3d3347;
    --color-mastery-learning: #7a3953;
    --color-mastery-good: #7a6a2a;
    --color-mastery-mastered: #2b7155;
    --shadow-card: 0 0.3rem 0 rgba(0, 0, 0, 0.25), 0 0.6rem 1.5rem rgba(0, 0, 0, 0.2);
  }
}