/**
 * Learning Style Quiz — design tokens (Phase 1 v2)
 * docs/DESIGN.md
 */

:root {
  --ink: #0b1220;
  --snow: #ffffff;
  --mist: #eaf1f8;
  --line: #c5d0dc;
  --teal: #0f766e;
  --spark: #ff4d1a;
  --school: #1d4ed8;
  --work: #0f766e;

  --ink-soft: color-mix(in srgb, var(--ink) 68%, var(--snow));
  --ink-faint: color-mix(in srgb, var(--ink) 42%, var(--snow));
  --spark-text: #fff7f4;
  --focus: var(--teal);

  --font-display: "Source Serif 4", "Georgia", "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --display-xl: clamp(2.75rem, 6vw, 4.25rem);
  --display-xl-lh: 0.98;
  --display-l: clamp(1.85rem, 3.5vw, 2.75rem);
  --display-l-lh: 1.1;
  --title-m: 1.35rem;
  --title-m-lh: 1.3;
  --body: 1.125rem;
  --body-lh: 1.6;
  --body-sm: 1rem;
  --body-sm-lh: 1.5;
  --label: 0.75rem;
  --label-lh: 1.3;
  --label-tracking: 0.08em;

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

  --pad-x: clamp(1.1rem, 4vw, 2.75rem);
  --max: 70rem;
  --header-h: 4rem;
  --radius: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --channel-visual: #1a5f8a;
  --channel-auditory: #2f6b45;
  --channel-kinesthetic: #8a5a1e;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
  }
}