/* =========================================================================
   HeartFelt Kids Design System — Tokens
   The watercolor storybook world: sunny sky over a green meadow, warm cream
   paper, rainbow accents, and storybook wood for the music player.
   Change a brand value once, here, and it propagates everywhere.
   Mirrors the approved Figma mockups exactly.
   ========================================================================= */

:root {
  /* ---- Color: sky and meadow (the world) ------------------------------ */
  --sky:         #7EC4E8; /* sky backgrounds, soft accents */
  --sky-deep:    #4A9FD8; /* buttons, links, active nav */
  --sky-soft:    #E6F4FB; /* icon plates, tints */
  --meadow:      #8FCB6B; /* grass, nature accents */
  --meadow-deep: #5FA84A; /* success, checkmarks, labels */
  --meadow-soft: #EAF6DC; /* section tints */

  /* ---- Color: rainbow accents ----------------------------------------- */
  --coral:       #F27D72; /* rainbow red, warm accents */
  --sun:         #FFD45E; /* primary buttons, the sun, stickers */
  --sun-deep:    #E9A100; /* yellow label bars, warm text */
  --sun-soft:    #FFF3CE; /* warm tints, highlight boxes */
  --lav:         #B9A8E4; /* bedtime, dreamy accents */
  --lav-deep:    #7A63B8; /* lavender labels */
  --lav-soft:    #EFEAFB; /* lavender tints */
  --heart:       #F2668B; /* THE LOGO HEART, love notes, Melody */
  --heart-soft:  #FDE4EC; /* heart tints */

  /* ---- Color: storybook wood (music player, frames) ------------------- */
  --wood:        #D99646; /* player frame, wood label bars */
  --wood-deep:   #815232; /* player text, warm headings */
  --wood-soft:   #F7E6CE; /* player interior, wood tints */

  /* ---- Color: neutrals (warm, never gray) ----------------------------- */
  --cream:       #FFF9EF; /* page background */
  --panel:       #FFFFFF; /* the white storybook panels, cards */
  --line:        #F0E4D2; /* borders and dividers */
  --ink:         #3D5A75; /* headings, footer, night scenes */
  --body:        #5C6B7A; /* paragraph text */
  --soft:        #93A0AC; /* captions, placeholders */

  /* ---- Color: status --------------------------------------------------- */
  --success:     #5FA84A;
  --danger:      #E06A5A;

  /* ---- Typography: families ------------------------------------------- */
  --font-head: "Baloo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Typography: scale (size / line-height) -------------------------- */
  --t-display-size: 54px; --t-display-lh: 1.1;
  --t-h1-size: 50px;      --t-h1-lh: 1.1;
  --t-h2-size: 34px;      --t-h2-lh: 1.18;
  --t-h3-size: 21px;      --t-h3-lh: 1.3;
  --t-h4-size: 17px;      --t-h4-lh: 1.4;
  --t-lead-size: 19px;    --t-lead-lh: 1.6;
  --t-body-size: 17px;    --t-body-lh: 1.65;
  --t-small-size: 14px;   --t-small-lh: 1.5;
  --t-eyebrow-size: 13px; --t-eyebrow-lh: 1.3; --t-eyebrow-ls: 1.6px;

  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* ---- Layout & grid --------------------------------------------------- */
  --max-width: 1440px;  /* full page frame */
  --content: 1200px;    /* content column */
  --gutter: 120px;      /* side padding, desktop */

  /* ---- Spacing scale (8px base) --------------------------------------- */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-section: 84px; /* section vertical rhythm */

  /* ---- Borders & radius (storybook rounded) --------------------------- */
  --border: 1px solid var(--line);
  --radius-sm: 12px;  /* inputs, small labels */
  --radius: 18px;     /* small cards */
  --radius-lg: 28px;  /* tiles, large cards */
  --radius-xl: 40px;  /* panels and bands */
  --pill: 999px;      /* every button */

  /* ---- Soft shadows (blue, never black) ------------------------------- */
  --shadow-sm: 0 3px 10px rgba(61, 90, 117, 0.08);
  --shadow:    0 12px 30px rgba(61, 90, 117, 0.12);
  --shadow-lg: 0 24px 55px rgba(61, 90, 117, 0.16);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: 0.2s ease;
}

/* Tablet: ease the side gutters and section rhythm */
@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
    --space-section: 64px;
    --t-display-size: 42px;
    --t-h1-size: 38px;
    --t-h2-size: 28px;
  }
}

/* Mobile: tighter margins, calmer type scale */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --space-section: 52px;
    --t-display-size: 32px;
    --t-h1-size: 30px;
    --t-h2-size: 25px;
    --t-h3-size: 19px;
    --t-lead-size: 17px;
  }
}