:root {
  /* ---- Color ---------------------------------------------------------- */
  --sand:        #E7D8C3;  /* page background, light sections */
  --sand-deep:   #DFCFB6;  /* product-tile background behind packshots */
  --ink:         #2A2018;  /* espresso — dark sections, body text on sand */
  --cream:       #F7EFE2;  /* text on dark, buttons on dark */
  --amber:       #A86A2E;  /* accent: link underlines, selection */
  --white:       #FFFFFF;  /* link hover on dark only */

  /* Hairlines (never a solid color) */
  --rule-on-sand:  rgba(42,32,24,0.16);
  --rule-on-sand-2:rgba(42,32,24,0.12);
  --rule-on-ink:   rgba(247,239,226,0.40);
  --rule-on-ink-2: rgba(247,239,226,0.20);

  /* Scrims. Hero uses TWO stacked gradients, bottom-up + left-in. */
  --scrim-hero-v: linear-gradient(0deg, rgba(40,24,10,0.82) 0%, rgba(40,24,10,0.52) 26%, rgba(40,24,10,0.12) 52%, rgba(40,24,10,0) 70%);
  --scrim-hero-h: linear-gradient(90deg, rgba(46,28,12,0.66) 0%, rgba(46,28,12,0.26) 46%, rgba(46,28,12,0) 72%);
  --scrim-tile:   linear-gradient(180deg, rgba(30,18,8,0.12) 30%, rgba(30,18,8,0.78) 100%);
  --scrim-header: linear-gradient(180deg, rgba(26,16,8,0.62) 0%, rgba(26,16,8,0.28) 62%, rgba(26,16,8,0) 100%);
  --scrim-flat:   rgba(34,22,12,0.62);   /* over the amber-vials band */
  --scrim-modal:  rgba(30,20,12,0.55);

  /* ---- Type ----------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;  /* 300, 300 italic */
  --font-ui:      'Jost', system-ui, sans-serif;          /* 300, 400 */

  /* Display scale — fluid by design, keep the clamps verbatim */
  --t-hero:     clamp(58px, 15.5vw, 463px);  /* line-height .80 */
  --t-hero-alt: clamp(48px, 12vw,   365px);  /* italic second line, lh .86 */
  --t-d1:       clamp(64px, 11.5vw, 338px);  /* lh .94 */
  --t-d2:       clamp(44px, 9vw,    267px);  /* lh .88 */
  --t-d3:       clamp(40px, 7vw,    214px);  /* lh .90 */
  --t-quote:    clamp(38px, 7.4vw,  235px);  /* lh .94 */
  --t-marquee:  clamp(40px, 7vw,    196px);  /* lh 1 */
  --t-tile:     clamp(42px, 5.6vw,  153px);  /* lh .90 */
  --t-logo:     clamp(38px, 4.4vw,  114px);  /* lh 1.02 */
  --t-h-card:   clamp(24px, 2.4vw,   61px);
  --t-name:     clamp(22px, 2vw,     50px);

  /* UI scale */
  --t-body:     clamp(15px, 0.95vw, 26px);   /* lh 1.75 */
  --t-body-lg:  clamp(16px, 1.35vw, 34px);   /* lh 1.75 */
  --t-body-sm:  clamp(14px, 0.88vw, 25px);   /* lh 1.65–1.70 */
  --t-meta:     clamp(13px, 0.81vw, 23px);
  --t-micro:    clamp(12px, 0.75vw, 21px);
  --t-caps:     clamp(10px, 0.63vw, 18px);   /* all tracked caps labels */
  --t-caps-xs:  clamp(9px,  0.56vw, 16px);

  /* Tracking — the brand's whole signature. Caps text is ALWAYS tracked. */
  --track-eyebrow: 0.44em;  /* hero eyebrow */
  --track-label:   0.36em;  /* section eyebrows */
  --track-logo:    0.38em;  /* "BOTANICALS" */
  --track-nav:     0.28em;  /* nav, bag, footer labels */
  --track-tagline: 0.26em;  /* "REST · RESTORE · RESET", text links */
  --track-btn:     0.22em;  /* buttons */
  --track-display: 0.01em;  /* caps display headings */

  /* ---- Space ---------------------------------------------------------- */
  --pad-x:      clamp(24px, 4vw, 70px);   /* section horizontal */
  --pad-x-edge: clamp(18px, 3vw, 40px);   /* header / hero horizontal */
  --pad-y:      clamp(46px, 6vw, 100px);  /* section vertical */
  --pad-y-lg:   clamp(64px, 10vw, 150px); /* maker-quote band */
  --gap-grid:   clamp(14px, 2vw, 26px);   /* product grid */
  --gap-cols:   clamp(20px, 3vw, 44px);   /* ingredient columns */
  --gap-tile:   clamp(22px, 2.6vw, 40px); /* inside ritual tiles */

  /* Section min-heights: hero 100vh, split 92vh, ritual 96vh, inside 96vh */

  /* ---- Motion --------------------------------------------------------- */
  --ease:        cubic-bezier(.2,.8,.2,1);
  --dur-reveal:  900ms;
  --dur-zoom:    900ms;   /* editorial photos, scale 1.06–1.07 */
  --dur-zoom-sm: 700ms;   /* product tiles, scale 1.07 */
  --dur-btn:     260ms;   /* background/color on buttons */
  --stagger:     90ms;    /* per item, modulo 4, within a revealed group */
  --reveal-y:    46px;
  --parallax-hero: 0.22;  /* data-par on hero image wrapper */
  --parallax-band: 0.16;  /* data-par on amber-vials */

  /* Radius: none. Every corner in this design is square. Shadows: none. */
}