/* ==========================================================================
   OH MOMMY! — Design tokens
   Single source of truth. Nothing in site.css uses a raw value.
   ========================================================================== */

:root {
  /* ---- Colour: core -------------------------------------------------- */
  /* Sampled from the packaging artwork and design deck, then tuned so every
     foreground/background pair in the system clears WCAG AA (4.5:1).
     The pack itself sets ink on orange, so the site does the same. */
  --c-orange:        #F04A12;  /* brand primary — fills, CTAs, orange theme  */
  --c-orange-deep:   #B2350B;  /* small text / eyebrows on cream and sky     */
  --c-chilli:        #B93425;  /* secondary — harissa lid, heat meter        */
  --c-almond:        #F5A82E;  /* mascot fill — accents on dark only         */

  --c-cream:         #F6E7D6;  /* primary page surface                 */
  --c-cream-light:   #FBF2E7;  /* raised cards on cream                */
  --c-cream-deep:    #EDD8C0;  /* rules, wells, inactive states        */

  --c-sky:           #BEE7F7;  /* the blue band from the mockup        */
  --c-sky-light:     #DCF4FE;  /* product plinths                      */

  --c-ink:           #22120C;  /* warm near-black — all body copy      */
  --c-ink-soft:      #6B564A;  /* secondary copy, captions             */
  --c-ink-faint:     #7E6A5B;  /* meta, legal, placeholders            */
  --c-white:         #FFFFFF;

  /* ---- Colour: semantic ---------------------------------------------- */
  --surface:            var(--c-cream);
  --surface-raised:     var(--c-cream-light);
  --surface-invert:     var(--c-ink);
  --surface-accent:     var(--c-orange);
  --surface-cool:       var(--c-sky);

  --text:               var(--c-ink);
  --text-muted:         var(--c-ink-soft);
  --text-on-accent:     var(--c-ink);
  --text-on-invert:     var(--c-cream);

  --border:             color-mix(in srgb, var(--c-ink) 14%, transparent);
  --border-strong:      color-mix(in srgb, var(--c-ink) 90%, transparent);

  --focus:              var(--c-orange-deep);
  --focus-ring:         0 0 0 3px var(--c-cream), 0 0 0 6px var(--focus);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-text:    "Satoshi", "Inter", system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Fluid scale. Minor third on mobile, perfect fourth at the top end,
     so headlines get more dramatic as the canvas grows. */
  --t-display:  clamp(3.25rem, 1.2rem + 9.2vw, 8.5rem);
  --t-h1:       clamp(2.5rem,  1.4rem + 4.8vw, 5rem);
  --t-h2:       clamp(1.9rem,  1.3rem + 2.6vw, 3.25rem);
  --t-h3:       clamp(1.4rem,  1.15rem + 1.1vw, 2rem);
  --t-h4:       clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-lead:     clamp(1.1rem,  1.0rem + 0.55vw, 1.4rem);
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-micro:    0.75rem;

  --lh-tight:   0.92;   /* display only            */
  --lh-snug:    1.08;   /* headings                */
  --lh-normal:  1.35;   /* subheads, leads         */
  --lh-relaxed: 1.65;   /* body copy               */

  --ls-display: -0.03em;
  --ls-heading: -0.015em;
  --ls-body:     0;
  --ls-caps:     0.14em;

  --measure:     62ch;  /* max line length for body */
  --measure-tight: 46ch;

  /* ---- Spacing: 4px base, doubling rhythm ----------------------------- */
  --sp-1:   0.25rem;   /*   4 */
  --sp-2:   0.5rem;    /*   8 */
  --sp-3:   0.75rem;   /*  12 */
  --sp-4:   1rem;      /*  16 */
  --sp-5:   1.5rem;    /*  24 */
  --sp-6:   2rem;      /*  32 */
  --sp-7:   3rem;      /*  48 */
  --sp-8:   4rem;      /*  64 */
  --sp-9:   6rem;      /*  96 */
  --sp-10:  8rem;      /* 128 */
  --sp-11: 10rem;      /* 160 */

  /* Section rhythm collapses on small screens rather than scaling linearly,
     so the page never feels sparse on a phone. */
  --section-y:      clamp(var(--sp-8), 3.5rem + 5vw, var(--sp-10));
  --section-y-tight: clamp(var(--sp-7), 2.5rem + 4vw, var(--sp-9));

  /* ---- Layout --------------------------------------------------------- */
  --container:      82.5rem;  /* 1320 */
  --container-text: 46rem;    /*  736 */
  --gutter:         clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --grid-cols:      12;
  --grid-gap:       clamp(1rem, 0.5rem + 1.5vw, 2rem);

  /* The header height is deliberately constant. Shrinking it on scroll moves
     every nav item a few pixels and re-bases scroll-padding-top mid-scroll,
     which reads as a jitter. The scrolled state changes surface only. */
  --header-h:       4.25rem;

  /* ---- Radius --------------------------------------------------------- */
  /* Echoes the rounded logotype and the tub lid. Nothing is square. */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.75rem;
  --r-xl:   2.5rem;
  --r-pill: 62.5rem;

  /* ---- Elevation ------------------------------------------------------ */
  /* Warm, low-opacity shadows — a neutral grey shadow reads cheap on cream. */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--c-ink) 8%, transparent);
  --sh-2: 0 4px 14px color-mix(in srgb, var(--c-ink) 10%, transparent);
  --sh-3: 0 12px 34px color-mix(in srgb, var(--c-ink) 14%, transparent);
  --sh-4: 0 24px 60px color-mix(in srgb, var(--c-ink) 18%, transparent);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:  140ms;
  --dur-base:  260ms;
  --dur-slow:  520ms;

  /* ---- Texture -------------------------------------------------------- */
  /* Fine fractal grain, used at very low opacity over photography.
     Inline SVG so it costs no request and scales to any DPR. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Z-index ladder -------------------------------------------------- */
  --z-mascot:  0;    /* sits *behind* opaque sections, revealed by the footer */
  --z-base:    1;
  --z-sticky:  50;
  --z-header:  100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}