/* ============================================================
   MUFFINBERRY STUDIOS — design tokens (blueprint §14)
   Locked brand palette. Every color on the site derives
   from these variables. Do not introduce ad-hoc colors.
   ============================================================ */

:root {
  /* --- Core palette (locked) --- */
  --cream:        #FFF9EF;  /* Warm Cream — page base */
  --cream-2:      #FBF0DC;  /* deeper cream — calm sections */
  --pink:         #E9407E;  /* Berry Pink */
  --pink-deep:    #C9316A;  /* Berry Pink pressed / AA text-on-white pairs */
  --purple:       #8A4FC8;  /* Muffinberry Purple */
  --purple-deep:  #5B2E91;  /* headings, footer base */
  --purple-ink:   #472573;  /* darkest purple accents */
  --sun:          #FFC53D;  /* Sunshine Yellow */
  --tangerine:    #FF8F3C;
  --sky:          #4AAFF0;  /* Sky Blue */
  --sky-soft:     #CDE9FC;
  --leaf:         #7DC242;  /* Leaf Green */
  --leaf-deep:    #4E8F1F;
  --teal:         #43C6A0;

  /* --- Text --- */
  --ink:          #43325E;  /* body text on cream (≈10:1) */
  --ink-soft:     #6A5990;  /* secondary text (≈5.6:1 on cream) */

  /* --- Character accents (tints of the core palette) --- */
  --c-milo:  var(--sun);
  --c-lulu:  var(--pink);
  --c-poppy: var(--tangerine);
  --c-zuri:  var(--purple);
  --c-bibi:  #D98E32;
  --c-tiko:  var(--leaf);
  --c-pip:   var(--sky);
  --c-nana:  #A98BD6;
  --c-boop:  #FFD84D;

  /* --- Category accents --- */
  --cat-mornings: var(--sun);
  --cat-playtime: var(--sky);
  --cat-lessons:  var(--leaf);
  --cat-feelings: var(--pink);
  --cat-bedtime:  var(--purple);

  /* --- Type --- */
  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero:  clamp(2.5rem, 5.6vw, 4.1rem);
  --fs-h1:    clamp(2.1rem, 4.4vw, 3.2rem);
  --fs-h2:    clamp(1.7rem, 3.2vw, 2.35rem);
  --fs-h3:    clamp(1.2rem, 2vw, 1.45rem);
  --fs-body:  clamp(1.02rem, 1.3vw, 1.13rem);
  --fs-small: 0.92rem;

  /* --- Shape & depth (soft, tactile, sticker-like) --- */
  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-pill: 999px;
  --sticker-border: 5px solid #fff;
  --shadow-sticker: 0 5px 0 rgba(91, 46, 145, 0.10), 0 16px 34px rgba(91, 46, 145, 0.14);
  --shadow-soft:    0 8px 24px rgba(91, 46, 145, 0.10);
  --shadow-lift:    0 10px 0 rgba(91, 46, 145, 0.10), 0 24px 44px rgba(91, 46, 145, 0.18);

  /* --- Layout --- */
  --page-max: 1160px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-pad: clamp(52px, 8vw, 96px);

  /* --- Motion --- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --speed: 200ms;
}