/* Design tokens — spec §6 (spacing/shape/motion), §7 (color), §8 (type) */

:root {
  /* spacing (4pt grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* radius */
  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px;

  /* motion */
  --t-micro: 120ms cubic-bezier(0, 0, 0.2, 1);
  --t-standard: 250ms cubic-bezier(0.33, 1, 0.68, 1);
  --t-flip: 300ms cubic-bezier(0.2, 0.8, 0.3, 1);
  --t-celebrate: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* type scale */
  --font: 'Inter', 'SF Pro Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  --fs-display: 34px; --fs-title1: 28px; --fs-title2: 22px;
  --fs-headline: 17px; --fs-body: 17px; --fs-callout: 15px;
  --fs-footnote: 13px; --fs-caption: 11px;

  /* light palette (§7) */
  --bg: #F7F7FA;
  --surface: #FFFFFF;
  --surface-alt: #F0F0F5;
  --text-primary: #101015;
  --text-secondary: #6E6E78;
  --accent: #6C5CE7;
  --accent-soft: #EDEAFF;
  --success: #2ECC71;
  --good: #3B82F6;
  --warn: #F59E0B;
  --danger: #EF4444;
  --streak-flame: #FF6B35;
  --xp-gold: #F2B01E;
  --hairline: rgba(0, 0, 0, 0.06);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* Chart ramp — one hue, light→dark, for magnitude and for the ordered
     new→learning→review lifecycle. Steps are not eyeballed: they clear
     monotone lightness, ΔL ≥ 0.06 per step and light-end contrast on this
     surface. Re-run the validator before changing any of them. */
  --ramp-1: #B8AAF7;
  --ramp-2: #9580EE;
  --ramp-3: #7160D9;
  --ramp-4: #5340C4;
  /* Ink for a label sitting *inside* a fill: chosen per step by measured
     contrast, not by assumption. Plain white fails badly on the light steps
     (2.07:1 on --ramp-1). Every pairing below clears 4.5:1. */
  --ramp-1-ink: #17162B;
  --ramp-2-ink: #17162B;
  --ramp-3-ink: #FFFFFF;
  --ramp-4-ink: #FFFFFF;
  --muted-ink: #FFFFFF;
  /* Status fills (danger/warn/good/success) are light enough that dark ink
     wins on all four in BOTH themes — measured, min 4.70:1 — so this one
     needs no dark-mode override. */
  --status-ink: #17162B;
  --grid: rgba(0, 0, 0, 0.10);
}

/* The dark palette lives in css/theme-dark.css, linked with a `media`
   attribute. Keeping it in its own file (instead of a @media block here) is
   what lets the host app force a theme: hosted inside Distance of Life the
   module must follow DoL's own light/dark switch, not the OS, and flipping
   that one link's `media` does it without a second copy of the palette. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: 0ms linear;
    --t-standard: 0ms linear;
    --t-flip: 0ms linear;
    --t-celebrate: 0ms linear;
  }
}