/* ============================================================
   tokens.css — Design tokens for stepping / Speech AI
   Single source of truth for colour, type, space, radius, shadow.
   Edit here to re-theme the whole site.
   ============================================================ */

:root {
  /* ---- Brand purple ---- */
  --purple-700: #5a3ce6;
  --purple-600: #6c4df6;   /* primary brand */
  --purple-500: #7c5cfc;
  --purple-400: #9b7bff;
  --purple-300: #b9a3ff;

  /* ---- Lavender surfaces ---- */
  --lavender-50:  #fbfaff;  /* page background */
  --lavender-100: #f3f0ff;  /* soft section background */
  --lavender-200: #e9e3ff;  /* cards / tints */
  --lavender-300: #ddd3ff;

  /* ---- Kid accent pops ---- */
  --teal:  #2fd3c0;
  --teal-soft:  #d6f7f2;
  --sun:   #ffc94d;
  --sun-soft:   #fff1cf;
  --coral: #ff8c9b;
  --coral-soft: #ffe0e5;
  --sky:   #5bb8ff;
  --sky-soft:   #dcefff;
  --mint:  #7ed957;
  --mint-soft:  #e6f8dc;

  /* ---- Ink / text ---- */
  --ink:       #2a2350;  /* deep purple-navy headings */
  --ink-soft:  #5b5680;  /* body text */
  --ink-faint: #8e89ad;  /* muted captions */
  --white:     #ffffff;
  --line:      #ece8fb;  /* hairline borders */

  /* ---- Semantic ---- */
  --bg:        var(--lavender-50);
  --surface:   var(--white);
  --brand:     var(--purple-600);
  --brand-ink: var(--purple-700);

  /* ---- Typography ---- */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.3rem, 6vw, 4.6rem);
  --fs-h1:   clamp(2.1rem, 4.5vw, 3.3rem);
  --fs-h2:   clamp(1.7rem, 3.4vw, 2.5rem);
  --fs-h3:   clamp(1.25rem, 2vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1.02rem;
  --fs-sm:   0.9rem;
  --fs-xs:   0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  /* ---- Spacing scale ---- */
  --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: 6rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows (purple-tinted) ---- */
  --shadow-xs: 0 2px 8px rgba(108, 77, 246, 0.08);
  --shadow-sm: 0 6px 18px rgba(108, 77, 246, 0.10);
  --shadow-md: 0 14px 34px rgba(108, 77, 246, 0.14);
  --shadow-lg: 0 28px 60px rgba(108, 77, 246, 0.18);
  --shadow-coral: 0 16px 34px rgba(255, 140, 155, 0.30);
  --shadow-brand: 0 16px 34px rgba(108, 77, 246, 0.32);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-fab: 90;
  --z-overlay: 200;
}