/* ==========================================================================
   Pryme Research — design tokens

   Colour discipline, stated once:

   A compound's colour appears at THREE strengths, and which one you may use
   depends entirely on how much area it covers.

     --peptide-wash   ~94% lightness   large areas: card grounds, panels
     --peptide        the true pastel  small areas: chips, dots, rules, marks
     --peptide-deep   dark             text, icons, focus rings, hover fills

   Large flat fields of saturated pastel are what made the first pass read as a
   swatch dump. Big areas get the wash; saturation is rationed to small marks.
   The product photography is where full colour actually lives.
   ========================================================================== */

:root {
  /* --- Ground ------------------------------------------------------------ */
  --paper: #ffffff;
  --paper-sunk: #fafafa;

  /* Section ground tints.

     One OKLCH lightness (0.968) and one chroma (0.018) with seven hues taken
     from the eyebrow palette, so choosing a ground changes the page's hue and
     nothing else — the brightness rhythm down the page is identical whichever
     tints the client picks. Coral and sky clip a fraction at the sRGB boundary
     and so carry marginally less chroma than the other five.

     Fixed rather than settings-driven, unlike --paper: these are derived
     values, and letting them drift apart in the editor would break the equal
     lightness that is the whole point. Verified against the shipped
     #FBFBFC / #F2F3F6 grounds and against --ink (15.6-15.8:1) and
     --text-soft (>= 4.68:1), both AA. In OKLCH they sit between paper (0.988)
     and recessed (0.964), so a tint reads as a ground in its own right rather
     than as an off-white. */
  --ground-apricot: #FCF3E7;
  --ground-butter: #F6F5E8;
  --ground-coral: #FFF0F0;
  --ground-sage: #EDF8EE;
  --ground-sky: #ECF6FF;
  --ground-lilac: #FCF0FA;
  --ground-mint: #EBF8F0;
  --paper-raised: #ffffff;

  --ink: #131315;
  --ink-soft: #52525b;
  --ink-faint: #a1a1aa;


  --rule: #ececee;
  --rule-strong: #e0e0e3;

  /* Dark ground. Used sparingly — one or two bands per page to break up all
     the white, which is what gives a long page its rhythm. */
  --ink-ground: #16181c;
  --ink-ground-soft: #a8adb8;
  --ink-ground-rule: #2b2f36;

  /* --- Compound accent ---------------------------------------------------
     Overridden per product. The default is Pryme's house blue. */
  --peptide: #cbe5fc;
  --peptide-deep: #2f5b80;
  --peptide-wash: #f2f8fe;

  /* --- Signal ------------------------------------------------------------ */
  --signal-ok: #2f6f4f;
  --signal-warn: #8a6b1e;
  --signal-stop: #be123c;

  /* Headline emphasis fill. Solid compound pastel at full strength; sections
     that own a compound override it with their own colour. */
  --em-color: #f8d7a7;

  /* --- Type -------------------------------------------------------------- */
  --font-display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Type roles. Familjen (display) is a headline face: its irregular curves
     are character at 40px and read as a glitch at 16px, so names and small
     titles use Hanken at a heavier weight instead (--font-title). Data —
     prices, lots, spec values, table heads, labels — is Hanken with tabular
     figures, which lines digits up like a monospace without the stretched
     width; Martian Mono is kept only where the letterforms are the point
     (--font-code: discount codes, the drawn certificate, the receipt slip). */
  --font-title: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Italic only, one weight, for the single emphasised word in a headline. */
  --font-emphasis: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;

  --size-xs: 0.8rem;
  --size-sm: 0.9375rem;
  --size-base: 1.0625rem;
  --size-md: 1.3125rem;
  --size-lg: 1.625rem;
  --size-xl: 2.0625rem;
  --size-2xl: 2.5rem;
  --size-3xl: 3.25rem;
  --size-4xl: 4.25rem;

  /* 1.02 collided with the emphasis pill, whose padded background overlapped
     the line above it. Display type needs room for its own decoration. */
  --leading-tight: 1.12;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-loose: 1.72;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.12em;

  --measure: 64ch;

  /* --- Space -------------------------------------------------------------
     Deliberately airier than the first pass. Whitespace is doing the work
     that flat colour was wrongly asked to do. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;
  --space-4xl: 11rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure-page: 93.75rem;

  /* Distance from the viewport edge to the container's text. Any full-bleed
     element that must still line its content up with contained sections pads
     itself by this. Percentage-free on purpose: a percentage resolves against
     different boxes in padding versus scroll-padding. */
  /* --scrollbar is published from the head script; the fallback keeps this
     valid if JavaScript never runs. Subtracting it is what makes a full-bleed
     element's padded content land on exactly the same line as a
     percentage-based container. */
  --edge: max(
    var(--gutter),
    calc(
      (100vw - var(--scrollbar, 0px) - var(--measure-page)) / 2 + var(--gutter)
    )
  );

  /* The header and hero once used a separate, wider measure. That produced two
     alignment lines on one page — the hero headline began 82px left of the
     assurance figures directly beneath it. There is now one measure; these
     remain as aliases so the header and hero keep reading their own names. */
  --measure-wide: var(--measure-page);
  --edge-wide: var(--edge);

  /* --- Shape -------------------------------------------------------------
     Soft, not crisp. The wordmark is monoline with rounded joints and the
     labels use rounded pills; the interface should agree with the packaging. */
  --radius-control: 999px;
  --radius-surface: 24px;
  --radius-panel: 32px;
  --radius-small: 12px;

  /* --- Elevation ---------------------------------------------------------
     Barely there. Cards lift on a whisper, not a drop shadow. */
  --lift-card: 0 1px 2px rgb(19 19 21 / 4%), 0 8px 24px -12px rgb(19 19 21 / 10%);
  --lift-drawer: 0 1px 3px rgb(19 19 21 / 6%), 0 20px 60px -20px rgb(19 19 21 / 18%);
  --lift-popover: 0 1px 2px rgb(19 19 21 / 5%), 0 10px 30px -12px rgb(19 19 21 / 12%);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --focus-ring: 2px solid var(--peptide-deep);
  --focus-offset: 3px;

  --header-height: 4.75rem;
  --z-header: 100;
  /* Over the page, under the cart drawer. Someone who has opened the cart is
     further along than the offer, so the offer never covers it. */
  --z-offer: 150;
  --z-drawer: 200;
  --z-gate: 300;
}

@media (max-width: 48rem) {
  :root {
    --size-3xl: 2.5rem;
    --size-4xl: 2.875rem;
    --header-height: 4.25rem;
    --radius-surface: 20px;
    --radius-panel: 24px;
  }
}

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