/* No Brainer Water Co. - design tokens
   Foundation of the Intake-structure rebuild (site-rebuild/INTAKE_TEARDOWN.md).
   Scale/rhythm values measured from the reference build (refs/intake-mirror):
   Inter only, headings weight 500 (not bold - size does the work), tight
   text scale, black/white section alternation with one loud accent.
   Colours are NBW's own: report navy family replaces black; water cyan is
   the working accent (swap point marked - Mason reacts to the visual). */

:root {
  /* type - one family, two weights */
  --font: 'Inter', -apple-system, sans-serif;
  --w-regular: 400;
  --w-medium: 500;            /* headings use THIS, never 700 */
  --text-xs: 0.6875rem;       /* kickers, microcopy */
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;     /* body (0.875rem under 1000px) */
  --text-lg: 1.1875rem;
  /* display sizes are set per-section in layout.css; the reference holds
     hero display around clamp(2.5rem, 6vw, 4.5rem), leading ~1.05 */

  /* colour - NBW mapping of the dark/light alternation */
  --ink: 2 28 70;             /* #021c46 deep report navy = "black" sections */
  --ink-2: 3 38 97;           /* #032661 gradient partner */
  --paper: 255 255 255;
  --paper-dim: 246 247 249;   /* off-white alternation sections */
  --accent: 55 214 229;       /* water cyan - WORKING VALUE, swap point */
  --accent-ink: 2 28 70;      /* text on accent */
  --chip-blue: 35 84 180;     /* #2354B4 BRAINER chip heritage */
  --announce: 61 156 178;     /* announcement bar teal-adjacent, navy-shifted */

  /* buttons - pill geometry, inverted per section */
  --btn-radius: 999px;
  --btn-pad: 0.9rem 1.9rem;

  /* header */
  --header-bg: rgb(var(--ink));
  --header-blur: 20px;
  --logo-h: 24px;             /* 34px >=1000px, matches reference rhythm */

  /* section rhythm */
  --section-pad-block: clamp(3.5rem, 9vw, 7.5rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius-card: 16px;
  --radius-media: 20px;

  /* sticky product bar (the signature element) */
  --bar-bg: rgb(2 28 70 / 0.88);
  --bar-blur: 14px;
  --bar-radius: 999px;
}

/* usage rules (enforced in review, not just here):
   - no em-dashes in any rendered copy, hyphens only
   - headings: font-weight var(--w-medium); scale carries hierarchy
   - sections alternate rgb(var(--ink)) and rgb(var(--paper))/rgb(var(--paper-dim))
   - exactly ONE accent usage per section max (highlight word, chip, or dot)
   - scroll-reveal: sections start opacity 0 / translateY(24px), reveal once
     via IntersectionObserver, 500ms ease-out, respects prefers-reduced-motion */