/* ==========================================================================
   Design tokens — lifted from the DC prototype so desktop rendering is
   unchanged, then made fluid so the same values hold down to 320px.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --ink:          #1A1A1A;   /* headings, buttons, dark panels */
  --ink-soft:     #3C3C36;   /* body copy on light, emphasis */
  --body:         #5A5A52;
  --body-soft:    #6A6A62;
  /* Small type on light backgrounds must clear 4.5:1. The prototype's greys
     sat at 2.2–2.8:1, which Lighthouse and real readers both fail. */
  --mute:         #70706A;   /* 4.9:1 on white */
  --mute-soft:    #7A7A70;   /* placeholder text on bone */
  --mute-faint:   #6C6C64;   /* struck-through compare prices — 4.7:1 on bone */
  --mute-on-dark: #9A9A90;   /* the old value, still correct on the dark footer */

  --sage:         #6B7A5A;   /* accent: hovers, meters, large type */
  --sage-text:    #5F6D50;   /* the accent at small sizes — 4.9:1 on bone */
  --sage-deep:    #4C5A40;
  --sage-tint:    #E7EADF;
  --sage-pale:    #C7D2BC;
  --sage-mid:     #A8B49A;

  --bone:         #F2F2F0;   /* section fills, image placeholders */
  --bone-soft:    #FAFAF8;
  --line:         #E4E2DC;
  --line-soft:    #EFEEE9;
  --sand:         #D9D2C4;   /* outline buttons, inputs */
  --sand-deep:    #C9C4B6;
  --white:        #FFFFFF;

  --rust:         #8A5A3A;   /* low stock */
  --dark-line:    #333330;   /* borders inside dark panels */
  --dark-body:    #C4C4BC;   /* body copy on dark */
  --dark-fill:    #2A2A28;

  /* ---- type ---- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid display scale. Upper bound == the prototype's fixed desktop size. */
  --fs-display-xl: clamp(2.75rem, 1.35rem + 5.6vw, 5.5rem);    /* 44 → 88  home h1 */
  --fs-display-lg: clamp(2.5rem,  1.35rem + 4.8vw, 4.875rem);  /* 40 → 78  about h1 */
  --fs-display-md: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);       /* 36 → 64  page h1 */
  --fs-display-sm: clamp(2rem,    1.35rem + 2.8vw, 3.625rem);  /* 32 → 58  shop h1 */
  --fs-h2-xl:      clamp(1.875rem, 1.3rem + 2.4vw, 3rem);      /* 30 → 48 */
  --fs-h2:         clamp(1.625rem, 1.25rem + 1.7vw, 2.625rem); /* 26 → 42 */
  --fs-h2-sm:      clamp(1.5rem,   1.2rem + 1.3vw, 2.375rem);  /* 24 → 38 */
  --fs-h3:         clamp(1.375rem, 1.15rem + 0.9vw, 2rem);     /* 22 → 32 */
  --fs-h4:         clamp(1.25rem,  1.1rem + 0.6vw, 1.75rem);   /* 20 → 28 */
  --fs-h5:         clamp(1.15rem,  1.05rem + 0.4vw, 1.5rem);   /* 18 → 24 */
  --fs-card-title: clamp(1.125rem, 1.03rem + 0.35vw, 1.375rem);/* 18 → 22 */

  --fs-lead:    clamp(1rem,     0.96rem + 0.2vw, 1.1875rem);   /* 16 → 19 */
  --fs-body-lg: clamp(0.9688rem, 0.94rem + 0.15vw, 1.0625rem); /* 15.5 → 17 */
  --fs-body:    1rem;
  --fs-body-sm: 0.9375rem;   /* 15 */
  --fs-sm:      0.875rem;    /* 14 */
  --fs-xs:      0.8125rem;   /* 13 */
  --fs-2xs:     0.75rem;     /* 12 */
  --fs-mono:    0.90625rem;  /* 14.5 — price */
  --fs-eyebrow: 0.65625rem;  /* 10.5 */
  --fs-eyebrow-sm: 0.59375rem;/* 9.5 */

  --lh-tight:  1.06;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;
  --lh-loose:  1.8;

  --ls-display: -0.025em;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.1em;
  --ls-nav:     0.09em;

  /* ---- layout ---- */
  --container: 1400px;
  --container-md: 1240px;
  --container-sm: 1000px;
  --container-xs: 760px;
  --gutter: clamp(1.25rem, 3.4vw, 2.25rem);   /* 20 → 36 */

  --section-y:    clamp(3rem, 6.5vw, 5.5rem); /* 48 → 88 */
  --section-y-sm: clamp(2.25rem, 4.5vw, 4rem);/* 36 → 64 */
  --gap-grid:     clamp(1.125rem, 2vw, 1.75rem);
  --gap-split:    clamp(2rem, 5vw, 4.5rem);

  --header-h: 76px;
  --header-h-mobile: 62px;
  /* Marquee + header + concern bar — the chrome above a full-height hero. */
  --chrome-h: 151px;
  --chrome-h-mobile: 137px;
  --sticky-top: 140px;

  /* ---- form / control ---- */
  --radius-pill: 999px;
  --radius-sm: 2px;
  --control-h: 56px;
  --tap: 44px;                                /* minimum touch target */

  --shadow-drawer: 0 8px 30px rgba(0, 0, 0, .18);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .14);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .22s;
}

/* The prototype is a single fixed light theme; state it explicitly rather than
   inheriting whatever the host page or browser prefers. */
:root { color-scheme: light; }