/* ==========================================================================
   Laarish Design Tokens
   Source of truth: SPEC.md §4
   Do not hard-code colors, type sizes, or spacing in other files.
   ========================================================================== */

:root {
  /* ---- Brand colors (locked) -------------------------------------------- */
  --color-yellow: #FFD200;
  --color-navy:   #1A1433;
  --color-teal:   #00C9A7;
  --color-orange: #FF6B2B;
  --color-purple: #9B7FE8;
  --color-green:  #5BC470;
  --color-cream:  #FFF8E7;
  --color-white:  #FFFFFF;

  /* Tints/shades for hover states (slight darken — no gradients) */
  --color-yellow-700: #E6BD00;
  --color-teal-700:   #00A488;
  --color-orange-700: #E55A1F;
  --color-navy-700:   #0F0B22;

  /* ---- Semantic aliases ------------------------------------------------- */
  --bg-page:          var(--color-cream);
  --bg-card:          var(--color-white);
  --text-primary:     var(--color-navy);
  --text-muted:       #4A4360;
  --text-on-dark:     var(--color-white);
  --border-soft:      rgba(26, 20, 51, 0.12);

  --cta-primary-bg:   var(--color-yellow);
  --cta-primary-fg:   var(--color-navy);
  --cta-primary-hover-bg: var(--color-yellow-700);

  --cta-secondary-bg: var(--color-teal);
  --cta-secondary-fg: var(--color-white);
  --cta-secondary-hover-bg: var(--color-teal-700);

  --cta-orange-bg:    var(--color-orange);
  --cta-orange-fg:    var(--color-white);
  --cta-orange-hover-bg: var(--color-orange-700);

  /* ---- Stage lead colors ------------------------------------------------ */
  --stage-toddlers:     var(--color-orange);
  --stage-dream-makers: var(--color-yellow);
  --stage-mini-makers:  var(--color-teal);
  --stage-inventors:    var(--color-purple);
  --stage-legends:      var(--color-navy);

  /* ---- Typography ------------------------------------------------------- */
  --font-heading: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-accent:  'Playfair Display', Georgia, 'Times New Roman', serif;

  --fs-h1:      clamp(2.5rem, 5vw, 4.5rem);     /* 40–72px */
  --fs-h2:      clamp(2rem, 3.5vw, 3rem);       /* 32–48px */
  --fs-h3:      clamp(1.5rem, 2.5vw, 2rem);     /* 24–32px */
  --fs-body:    1rem;                            /* 16px */
  --fs-body-lg: 1.125rem;                        /* 18px */
  --fs-button:  1rem;
  --fs-caption: 0.875rem;                        /* 14px */
  --fs-quote:   clamp(1.25rem, 2vw, 1.5rem);     /* 20–24px */

  --lh-tight: 1.2;
  --lh-body:  1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* ---- Spacing ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --header-height: 4.5rem;        /* 72px */

  /* ---- Radius / shadow -------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --shadow-card: 0 4px 20px rgba(26, 20, 51, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(26, 20, 51, 0.14);

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast:   120ms ease-out;
  --t-base:   200ms ease-out;
  --t-slow:   320ms ease-out;
}

/* Breakpoints are expressed via @media (min-width: ...) — these tokens are
   for documentation and JS reference. Do not consume in CSS. */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}