/* Design Tokens — CSS Custom Properties
   STATUS: FINALIZED — Based on kindergarten-friendly design language.
   See docs/DESIGN-SYSTEM.md for full specification.
   All activities use these variables. NEVER hard-code colors/fonts/spacing. */

:root {
  /* ─── Primary Colors ─── */
  --color-primary: #8B5CF6;         /* Soft purple — main theme, headings, speaker */
  --color-secondary: #FF6B6B;       /* Coral red — accents, highlights */
  --color-correct: #80ED99;         /* Mint green — correct answer feedback */
  --color-encourage: #FFD166;       /* Warm yellow — encouragement, stars */
  --color-sky-blue: #4CC9F0;        /* Sky blue — decorative accents */

  /* ─── Background Colors ─── */
  --color-bg: #F0EAFF;              /* Light lavender — fallback for gradient */
  --color-bg-gradient: linear-gradient(135deg, #F0EAFF 0%, #E8E0FF 50%, #F5F0FF 100%);
  --color-bg-light: #F5F0FF;        /* Lighter lavender — alt card bg */
  --color-bg-card: #FFFFFF;         /* White — main card, option cards */

  /* ─── Text Colors ─── */
  --color-text: #2D3436;            /* Near-black — dev text, headings */
  --color-text-light: #636E72;      /* Gray — secondary text */
  --color-text-on-primary: #FFFFFF; /* White — text on colored buttons */

  /* ─── Star Rating ─── */
  --color-star-filled: #FFD166;     /* Warm yellow — filled star */
  --color-star-empty: #E0D5F5;      /* Light purple-gray — empty star */

  /* ─── Decorative Colors (for background particles) ─── */
  --color-deco-purple: #C4B5FD;
  --color-deco-pink: #FBBFCA;
  --color-deco-yellow: #FDE68A;
  --color-deco-blue: #A5F3FC;
  --color-deco-green: #A7F3D0;

  /* ─── Option Card Border (soft pastel blue from reference) ─── */
  --color-option-border: #C7E2FF;

  /* ─── Typography ─── */
  --font-family: 'Quicksand', system-ui, sans-serif;
  --font-size-xxl: 3rem;
  --font-size-xl: 2.5rem;
  --font-size-lg: 2rem;
  --font-size-md: 1.5rem;
  --font-size-sm: 1.125rem;
  --font-size-xs: 0.875rem;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --letter-spacing: 0.02em;

  /* ─── Spacing (4px base) ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;

  /* ─── Border Radius (extra rounded for child-friendly feel) ─── */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 9999px;

  /* ─── Shadows (subtle flat depth — no heavy realism) ─── */
  --shadow-sm: 0 2px 8px rgba(139, 92, 246, 0.08);
  --shadow-md: 0 4px 16px rgba(139, 92, 246, 0.12);
  --shadow-lg: 0 8px 32px rgba(139, 92, 246, 0.16);
  --shadow-glow-correct: 0 0 20px rgba(128, 237, 153, 0.5);
  --shadow-glow-star: 0 0 16px rgba(255, 209, 102, 0.5);

  /* ─── Animation ─── */
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.6s;
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Click Target Minimums ─── */
  --min-target-size: 80px;
  --min-target-gap: 16px;
}