/* sing v2 — design tokens. Source of truth: docs/DESIGN-V2.md §2–§4, §6.
   Every color literal in the app lives in this file (theme-kid included). */

:root {
  /* §2 backgrounds & surfaces */
  --bg: #0B0D14;
  --bg-raised: #10131B;
  --surface: #161A23;
  --surface-2: #1C2130;
  --line: rgba(233, 237, 247, 0.08);

  /* §2 text (contrast verified vs --bg, WCAG) */
  --text: #E9EDF7;
  --text-dim: #9AA6C0;
  --text-faint: #7A86A2;

  /* §2 meaning colors */
  --gold: #F6C453;
  --gold-soft: #FFDF9E;
  --gold-deep: #E8A93E;
  --on-gold: #1A1408;
  --mint: #6FEBB2;
  --coral: #FF8E7E;
  --peri: #95A9FF;
  --lavender: #C9A7FF;

  /* §2 glows — sparing, never full opacity, never on text */
  --glow-gold: rgba(246, 196, 83, 0.35);
  --glow-mint: rgba(111, 235, 178, 0.4);

  /* §2/§4 washes and glass, as composable layers */
  --wash-gold: rgba(246, 196, 83, 0.04);
  --wash-lavender: rgba(201, 167, 255, 0.03);
  --sheen: linear-gradient(180deg, rgba(233, 237, 247, 0.05), rgba(233, 237, 247, 0.01));
  --gold-grad: linear-gradient(180deg, var(--gold), var(--gold-deep));

  /* §3 type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fs-micro: 12px;
  --fs-caption: 13px;
  --fs-secondary: 15px;
  --fs-body: 17px;
  --fs-h3: 22px;
  --fs-h2: 28px;
  --fs-h1: 34px;
  --fs-display: 56px;
  --lh-body: 1.5;
  --lh-heading: 1.2;
  --lh-display: 1;
  --ls-tight: -0.01em;

  /* §4 space (4-pt grid), radius */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --r-chip: 12px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-pill: 999px;

  /* §6 motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --dur-hero: 600ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* §2/§3 kid track: warmer gold, lavender secondary, radius +4, one step up */
body.theme-kid {
  --gold: #FFCF6E;
  --gold-deep: #EBAE4E;
  --gold-soft: #FFE3AD;
  --lavender: #C9A7FF; /* secondary accent for kid surfaces */
  --glow-gold: rgba(255, 207, 110, 0.35);
  --wash-gold: rgba(255, 207, 110, 0.04);
  --gold-grad: linear-gradient(180deg, var(--gold), var(--gold-deep));

  --fs-micro: 13px;
  --fs-caption: 14px;
  --fs-secondary: 16px;
  --fs-body: 19px;
  --fs-h3: 24px;
  --fs-h2: 30px;
  --fs-h1: 38px;
  --fs-display: 60px;

  --r-chip: 16px;
  --r-card: 20px;
  --r-panel: 24px;
}