/* =========================================================
   ZUZU — Foundation tokens
   Source: Figma "Home" (node 985:53573). Loaded right after
   tokens/colors.css and before every other stylesheet.

   Primitives live in colors.css; this file names what they
   are FOR (surface, text, accent…) plus type, space, radius
   and motion. Components only ever reference these roles.
   ========================================================= */

:root {
  /* ---------- Colour roles — neutrals are the base ---------- */
  --zz-surface:          var(--color-neutral-0);    /* page, raised cards on tinted bands */
  --zz-surface-tint:     var(--color-neutral-10);   /* alternating bands, header bar */
  --zz-surface-sunk:     var(--color-neutral-20);   /* wells, skeletons, inputs on tint */
  --zz-surface-inverse:  var(--color-neutral-100);  /* footer, dark bands, solid icon buttons */
  --zz-paper:            #ffffff;                   /* the founder's letter — the only pure white */

  --zz-text:             var(--color-neutral-100);
  --zz-text-muted:       var(--color-neutral-50);
  --zz-text-subtle:      var(--color-neutral-35);
  --zz-text-on-inverse:  var(--color-neutral-0);
  --zz-text-on-image:    #f5f1ea;

  --zz-border:           var(--color-neutral-20);
  --zz-border-strong:    var(--color-neutral-100);

  --zz-accent:           var(--color-oxidised-brick-500); /* primary CTA, announce bar */
  --zz-accent-hover:     color-mix(in srgb, var(--color-oxidised-brick-500) 82%, var(--color-neutral-100));
  --zz-on-accent:        var(--color-neutral-0);
  --zz-badge:            var(--color-vermilion-700);
  --zz-danger:           var(--color-vermilion-700);
  --zz-success:          var(--color-botanical-500);

  --zz-scrim:            rgba(36, 26, 22, 0.6);     /* neutral-100 @ 60% */
  --zz-focus:            var(--color-midnight-blue-500);

  /* ---------- Element tones (packaging labels, Figma) ----------
     paper = the label stock, ink = rules and text, glyph = the mark. */
  --zz-earth-paper: var(--color-botanical-100);   --zz-earth-ink: var(--color-botanical-900);   --zz-earth-glyph: var(--color-botanical-900);
  --zz-water-paper: var(--color-midnight-blue-100); --zz-water-ink: var(--color-midnight-blue-900); --zz-water-glyph: var(--color-midnight-blue-900);
  --zz-fire-paper:  var(--color-vermilion-100);   --zz-fire-ink:  var(--color-vermilion-900);   --zz-fire-glyph:  var(--color-vermilion-500);
  --zz-air-paper:   var(--color-neutral-10);      --zz-air-ink:   var(--color-neutral-100);     --zz-air-glyph:   var(--color-neutral-100);
  --zz-ether-paper: var(--color-dusty-lilac-500); --zz-ether-ink: var(--color-wine-velvet-900); --zz-ether-glyph: var(--color-wine-velvet-900);

  /* ---------- Type ---------- */
  --zz-font-display: 'Funnel Display', 'Funnel Sans', -apple-system, sans-serif;
  --zz-font-body:    'Funnel Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --zz-font-script:  'Ballet', 'Mrs Saint Delafield', cursive;

  /*            size / line-height / tracking   (Figma desktop → fluid) */
  --zz-fs-hero:    clamp(2.75rem, 4.6vw + 1rem, 5.5rem);  /* 88 */
  --zz-lh-hero:    1;
  --zz-ls-hero:    -0.023em;                              /* -2px @ 88 */
  --zz-fs-h2:      clamp(2rem, 2.2vw + 1rem, 3rem);       /* 48 */
  --zz-lh-h2:      1.1;
  --zz-ls-h2:      -0.021em;                              /* -1px @ 48 */
  --zz-fs-h3:      clamp(1.75rem, 1.4vw + 1rem, 2.5rem);  /* 40 */
  --zz-lh-h3:      1;
  --zz-fs-title:   clamp(1.5rem, 0.8vw + 1rem, 2rem);     /* 32 — tile headlines */
  --zz-lh-title:   1.125;
  --zz-fs-lede:    clamp(1.125rem, 0.6vw + 0.9rem, 1.5rem); /* 24 */
  --zz-fs-letter:  clamp(1.0625rem, 0.4vw + 0.95rem, 1.375rem); /* 22 */
  --zz-lh-relaxed: 1.4;
  --zz-ls-tight:   -0.5px;
  --zz-fs-body:    1rem;      /* 16 / 24 */
  --zz-lh-body:    1.5;
  --zz-fs-small:   0.875rem;  /* 14 / 20 */
  --zz-lh-small:   1.43;
  --zz-ls-ui:      -0.25px;
  --zz-fs-micro:   0.625rem;  /* 10 — cart badge */

  /* ---------- Space (Figma item-spacing) ---------- */
  --zz-space-1: 4px;
  --zz-space-2: 8px;
  --zz-space-3: 12px;
  --zz-space-4: 16px;
  --zz-space-5: 24px;
  --zz-space-6: 32px;
  --zz-space-7: 48px;
  --zz-space-8: 64px;
  --zz-space-9: 96px;
  --zz-space-10: 128px;
  --zz-section-y: clamp(64px, 7vw, 96px);
  --zz-wrap: 1320px;
  --zz-gutter: clamp(20px, 3.4vw, 48px);

  /* ---------- Radius ---------- */
  --zz-radius-sm: 12px;
  --zz-radius-md: 16px;   /* header bar */
  --zz-radius-lg: 24px;   /* product card, letter */
  --zz-radius-xl: 32px;   /* category tiles */
  --zz-radius-pill: 999px;

  /* ---------- Lines ---------- */
  --zz-hairline: 1.25px;  /* outline buttons */
  --zz-perf-r: 7px;       /* perforation hole radius — stamps and band edges */
  --zz-perf-pitch: 22px;  /* hole-to-hole distance */

  /* ---------- Motion ---------- */
  --zz-ease: cubic-bezier(.16, 1, .3, 1);      /* settle */
  --zz-ease-io: cubic-bezier(.65, 0, .35, 1);
  --zz-dur-fast: 180ms;
  --zz-dur: 350ms;
  --zz-dur-slow: 700ms;

  /* ---------- Elevation ---------- */
  --zz-shadow-lift: 0 24px 40px -28px rgba(36, 26, 22, 0.45);
  --zz-shadow-float: 0 30px 60px -30px rgba(36, 26, 22, 0.5);
}