/*
  Bound Research — design tokens
  ================================
  Extracted from /protypes and reconciled against the canonical values in
  CLAUDE.md §5 (Type / Color tokens / Surfaces / Motion).

  Reconciliation note: `storefront-vault-v8-scrolldir.html` (the homepage
  prototype) predates the other two prototypes and uses a different type
  pairing (Space Grotesk / Manrope) and slightly different color values
  (--ink:#0E2233, --copper:#C08552, --line:#D3E5F0, etc). `policy-pages.html`
  and `product-detail-page-v3-apple.html` both use Inter Tight / Inter and
  color values that match CLAUDE.md §5 exactly. CLAUDE.md is the build spec
  and explicitly states its rules override design considerations, so the
  tokens below follow CLAUDE.md + the two aligned prototypes. The homepage
  prototype's *choreography* (scroll-driven vial stage, weighted background
  blend, independent per-vial float) is still the source of truth for
  motion/behavior when it is ported in build task 3 — only its color/type
  values are superseded.

  Do not hardcode any of these values in component or page CSS — reference
  the custom property.
*/

:root{
  /* ---------- Color ---------- */
  --ink:      #0B1B27;
  --ink-2:    #5F7382;
  --ink-3:    #8A9BA8;

  --line:       #DCE7EE;
  --line-soft:  #EDF3F7;

  --blue:       #1E8FC4;
  --blue-deep:  #0B6D9E;
  --copper:     #B57F4E; /* RETIRED 2026-08-26 — no longer used anywhere on the live site (brackets, bullets, seal dots, RUO/kicker text all moved to blue). Left defined only so nothing that still references it breaks; do not reach for it in new work. See README.md "Copper removed". */
  --ok:         #1E9E76;

  /* Internal/dev-only — flags an unreviewed compound page per CLAUDE.md §2.5.
     Not a customer-facing UI color: §2.1 permits exactly one designation
     (RUO tag) + footer + checkout attestation, no extra warning banners. */
  --flag-internal: #B4531F;

  --surface:      #FFFFFF;
  --surface-a78:  rgba(255,255,255,.78);  /* frosted card fill */
  --surface-a94:  rgba(255,255,255,.94);  /* vial label fill */
  --surface-a72:  rgba(251,253,255,.72);  /* nav fill */

  --page-grad: linear-gradient(180deg,#FBFDFF,#E4F1F9 55%,#F7FBFD);

  /* ---------- Type ---------- */
  /* Figtree — chosen 2026-08-24 as a free stand-in for Aeonik Soft (CoType
     Foundry, cotypefoundry.com/our-fonts/aeonik-soft), a paid font the
     business doesn't hold a license for. Aeonik Soft's defining trait is a
     geometric neo-grotesque structure with softened/rounded terminals;
     Figtree is the closest match on Google Fonts for that specific
     softness (checked against Onest and Plus Jakarta Sans first — both
     read flatter/more neutral). One family for everything, display and
     body alike, per the same decision that dropped the separate Space Mono
     accent — see README.md "Type change" for the full history, including
     the earlier Space Grotesk/Sora/Space Mono pass this replaces.
     If the business licenses actual Aeonik Soft later, swap the src here
     to self-hosted @font-face files — the token name stays the same. */
  --font-display: 'Figtree', sans-serif;
  --font-body:    'Figtree', sans-serif;

  --fs-body: 17px;
  --lh-body: 1.55;
  --ls-body: -0.011em;

  --lh-display: 1.05;
  --ls-display: -0.035em;
  --fw-display-max: 600; /* no weight above 600 anywhere — hierarchy comes from size/space */

  --fs-h1-hero: clamp(34px, 8vw, 52px);   /* page hero (policy pages, homepage opener) */
  --fs-h1-pdp:  clamp(40px, 9vw, 58px);   /* product title, larger */
  --fs-h2:      clamp(22px, 6.4vw, 30px);
  --fs-h3:      19px;
  --fs-small:   15px;
  --fs-tiny:    13px;
  --fs-micro:   11.5px;
  --fs-nano:    10px;

  /* ---------- Radius ---------- */
  --radius-pill: 980px;
  --radius-lg:   18px; /* frosted cards */
  --radius-md:   12px; /* size/option buttons, inputs */
  --radius-sm:   9px;  /* nav links, small chips */
  --radius-xs:   4px;  /* vial label, spec chip */

  /* ---------- Shadow ---------- */
  --shadow-card:      0 2px 8px rgba(11,60,90,.07);
  --shadow-float:      0 8px 22px rgba(11,60,90,.10);
  --shadow-btn-primary: 0 8px 20px rgba(30,143,196,.35);
  --shadow-vial-shadow: 0 0 0 rgba(0,0,0,0); /* placeholder — see .vial-shadow radial in components.css */

  /* ---------- Blur (frosted surfaces) ---------- */
  --blur-card: blur(10px);
  --blur-nav:  saturate(180%) blur(20px);

  /* ---------- Spacing scale ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 26px;
  --space-7: 34px;
  --space-8: 44px;
  --space-9: 64px;

  /* ---------- Motion ---------- */
  --dur-fast: .15s;
  --dur-base: .2s;
  --dur-slow: .4s;
  --ease-standard: ease;

  /* ---------- Z-index ---------- */
  --z-nav: 60;
  --z-stage-head: 5;
  --z-stage-rail: 6;
}

/* Reduced motion is honored per-component (each animation gets a
   prefers-reduced-motion override or a JS `reduced` check — see
   components.css and the ported homepage script), never globally
   disabled here, so intent stays visible at each call site. */