/* ============================================================
   DESIGN TOKENS — single source of truth. :root only, nothing
   else lives in this file. Layer 1: PRIMITIVES (raw scales),
   never referenced directly by components — only by the
   semantic aliases in Layer 2 below.
   ============================================================ */
:root {
  /* --- Primitive: grey ramp (one neutral scale for the whole product) --- */
  --gray-0:   #ffffff;
  --gray-200: #dcdcdc;
  --gray-400: #a0a0a0;
  --gray-500: #767676;
  --gray-600: #565656;
  --gray-700: #3d3d3d;
  --gray-900: #111111;
  /* caption-tier grey used only by membership's feature-caption — its own
     literal (not #666 forced onto --gray-600/#565656, a visibly different
     value) so it can still be a token instead of a bare hex in the rule */
  --gray-666: #666666;

  /* --- Primitive: brand ramp (built off the original MUTA pink) --- */
  --brand-100: #f6e4e4;
  --brand-500: #c76367;
  --brand-700: #9e4649;

  /* --- Primitive: marketing accents (ribbon) --- */
  --accent-blue: #6e9ac7;

  /* --- Primitive: danger state (the only rung ever wired to a semantic
     alias — the rest of the red/green/amber/blue state-ramp system was
     speculative and never consumed by anything, removed) --- */
  --red-700: #b23b3b;

  /* --- Primitive: spacing (base-4). Fixed, non-responsive — reserved
     for micro-adjustments that should never move regardless of viewport
     (icon-to-label gaps, border widths), per the type-system audit.
     Anything that reads as "a gap between two pieces of content" belongs
     in the fluid scale below instead, not here. --- */
  --space-05: 4px;
  --space-2:  12px;
  --space-3:  16px;
  --space-4:  24px;

  /* --- Primitive: fluid spacing scale (large, responsive section-internal
     gap). final-inner and membership-grid's mobile/base gap were the one
     genuinely-identical duplicate found in the CSS audit (verified against
     the original source, not assumed) — every other "duplicate" the audit
     flagged turned out to use a different vw/svh factor or cap on closer
     inspection, so those stay as their own per-section literal clamp()
     rather than being force-fit onto a token that doesn't actually match
     (same reasoning as --text-caption not being folded onto a nearby-
     but-different existing step). Smaller rhythm tokens (s2/s3) are
     defined further down, unchanged from before. --- */
  --s4: clamp(28px, 5svh, 52px);  /* final-inner, membership-grid (mobile/base) */

  /* --- Fluid spacing tiers (type-system audit) — three MORE genuine
     duplicates turned up on a second pass, each repeated verbatim across
     3-5 files with nothing to distinguish the copies (not a "close but
     different" case like the ones --s4's own note above already ruled
     out — these matched to the pixel). Named by weight, not by call
     site, so new spacing decisions reach for a tier by what it should
     feel like, not by copying whatever the nearest section did. */
  --space-fluid-tight:    clamp(16px, 2.5svh, 28px); /* caps row-gap, final-cta founding-note margin — 2 exact matches */
  --space-fluid-standard: clamp(24px, 4svh, 40px);   /* transparency/final-cta/story/footer-controls — 4 exact matches + membership's 3.5svh variant, folded in */
  --space-fluid-generous: clamp(28px, 4.5svh, 44px); /* final-cta lead margin — one tier up from standard */

  /* --- Primitive: radius (one scale) --- */
  --radius-md:   14px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* --- Primitive: control sizing (reserve email field + button) --- */
  --control-h-lg: 64px; /* desktop */
  --control-h-sm: 58px; /* mobile */

  /* --- Primitive: chrome sizing — the fixed announcement bar above the
     main nav. Identical on every breakpoint by design (not a clamp). --- */
  --topbar-h: 28px;

  /* --- Primitive: focus (a role, not elevation) --- */
  --focus-ring: 0 0 0 3px rgba(17,17,17,0.10);

  /* --- Primitive: motion --- */
  --duration-fast: 150ms;
  --duration:      250ms;
  /* the two additional durations found genuinely duplicated across files
     (same number, used more than once) — --duration-slow's easing still
     varies per call site (nav.css's frosting fade uses the `ease` keyword,
     hero.css's dock uses --ease-standard; these are visually different
     curves, so only the shared NUMBER is tokenized, not the whole
     transition) */
  --duration-slow: 300ms; /* nav frosting fade, hero-cta-dock show/hide */
  --duration-fade: 0.8s;  /* body opacity fade-in, product-figure crossfade — both plain `ease` */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     Layer 2: SEMANTIC aliases (what components reference)
     ============================================================ */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500); /* AA on white at Body-S+ (was #8a8a8a, sub-AA) */
  --text-disabled:  var(--gray-400);
  --text-inverse:   var(--gray-0);
  --text-caption:   var(--gray-666); /* membership feature-caption only */
  --bg-primary:     var(--gray-0);
  --bg-surface:     var(--gray-0);
  --border-default: var(--gray-200);
  --primary-hover:  var(--brand-700);
  --primary-subtle: var(--brand-100);
  --danger:         var(--red-700);

  /* --- Semantic: scrims — the "nothing unnecessary" gallery's soft
     off-white fade (dark text sits on top, Aesop/Muji-style, not a
     dark-photo-with-white-text scrim), the story photo's dark gradient,
     and the CTA dock's light upward fade --- */
  --scrim-card:  linear-gradient(to top, rgba(250,250,248,0.96) 0%, rgba(250,250,248,0.6) 42%, rgba(250,250,248,0) 70%);
  --scrim-story: linear-gradient(to top, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.42) 28%, rgba(10,10,10,0) 58%);
  --scrim-fade-light: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);

  /* --- Semantic: product-figure sizing scale — names the distinct
     bottle/pouch clamp formulas so product-figure.css reads as data,
     not one-off math. Desktop (height-driven) + mobile (width-driven)
     variants, per the mobile sizing rule documented at each call site.
     Transparency's cropped back-label figure (.product-figure-crop)
     reuses --figure-hero-h directly (no separate crop token) — it's
     meant to read exactly as large/prominent as the hero bottle.

     --figure-hero-h was originally a bare calc() with no ceiling —
     every other figure here is a clamp() with an explicit max. Back
     when the hero used a position:absolute layout, an uncapped bottle
     could grow tall enough to physically overlap the headline text on
     tall displays; the hero is now a normal 2-column grid (its own
     column, can't overlap the copy column), so that specific risk is
     gone, but the 1035px ceiling is kept anyway as a plain sanity limit
     so the bottle can't grow arbitrarily large on an unusually tall
     viewport — comfortably above the ~978px it already reaches at
     1080p, so nothing changes at any common viewport height. --- */
  --figure-hero-h:  min(calc((100svh - 64px) * 0.9775), 1035px);
  --figure-pouch-h: clamp(260px, 40svh, 460px);
  --figure-hero-w-mobile:  clamp(240px, 80vw,  380px);
  --figure-crop-w-mobile:  clamp(300px, 96vw,  460px);
  --figure-pouch-w-mobile: clamp(280px, 108vw, 460px);

  /* ============================================================
     Layer 2: TYPE scale — snapped onto the v2 size steps
     (Overline 11 / Caption 12 / Body 13-16 / H3 20 / H2 28 /
      Display 56). Hero headline kept as marketing display.
     ============================================================ */
  --t-label:    clamp(12px, 1.4vw, 12px);   /* Caption 12 */
  --t-body:     clamp(14px, 1.3vw, 16px);   /* Body 14-16 — one/two steps below H3 */
  --t-desc:     clamp(14px, 1.8vw, 20px);   /* Body → H3 tier */
  /* shared "feature label" typography (count-word / ingredient-list li /
     card-title) — the fluid variant; membership's feature-title is
     deliberately its own fixed-14px rule, NOT this token (see
     components/benefit-row.css for why) */
  --t-feature-label: clamp(13px, 1.6vw, 21px);

  /* --- Display / Headline — the single formula every section sharing
     .hero-headline draws from (desktop only; mobile and short-landscape
     get their own tighter overrides in hero.css, same as before).
     Two roles, not one: Hero is the page's one Display moment (its own
     larger ceiling + a genuine vw fallback, since its column is the
     widest on the page); every other section using the same shared class
     — Simplicity, Transparency, Story, Products, Membership, Caps, Final
     CTA — is one step down, Headline. Both end in `cqw`, resolved
     against that SECTION's OWN copy column (each has its own
     `container-type: inline-size` ancestor) — this is what lets the
     ceiling track each column's real width instead of the full viewport,
     which is what the 1728px+ overflow bug (headline running into/behind
     the product photo on large monitors) turned out to actually be.
     Previously each of Hero/Transparency/Membership carried its own
     hand-added font-size override with its own slightly-different cqw
     number — three copies of one idea, and the reason two of this
     session's own earlier fixes silently cancelled each other via CSS
     specificity on landscape phones (see hero.css's landscape block).
     One token, one place to tune it, no more per-section drift. */
  --type-display:  min(clamp(56px, 8.4svh, 100px), 11vw, 13cqw); /* Hero only */
  --type-headline: min(clamp(48px, 7.2svh, 88px), 13cqw);        /* every other shared-class section */

  /* --- Named copy-column widths (type-system audit) — six sections each
     independently invented their own "flat px cap + %" pair for what is,
     conceptually, one decision: how wide should the text column be next
     to a product figure. Two named tiers, applied where they're an exact
     match (Hero, Simplicity) — Transparency/Membership/Caps keep their
     own bespoke values on purpose: their figures are meant to read as
     larger/more dominant than Hero's, which means a NARROWER copy column
     than --col-copy-wide, not the same one, and forcing them onto either
     named tier would change that balance without a design review to back
     it up. Not every column has to be one of two sizes — these tokens
     exist for the cases that already agree, not to erase real
     compositional differences. */
  --col-copy-wide:   min(620px, 55%); /* Hero */
  --col-copy-narrow: min(460px, 40%); /* Simplicity */

  /* ============================================================
     Back-compat semantic aliases — existing call sites resolve
     through these to the v2 tokens above, so the migration is a
     repoint here rather than a sweep across every file.
     ============================================================ */
  --ink:       var(--text-primary);
  --paper:     var(--bg-primary);
  --hairline:  var(--border-default);

  /* --- rhythm tokens (fluid, panel-fit-critical): kept, snapped to base-4 ceilings --- */
  --s2: clamp(9px,  1.4svh, 12px);   /* → space-2 */
  --s3: clamp(14px, 2.2svh, 20px);   /* → space-3/4 */

  /* --- grid tokens —
     "shrink to fit, cap at a max", never a fixed narrow max-width that
     forces headlines to wrap every 1-2 words. Redefined at the tablet/
     mobile breakpoints below (same name, just a flatter side-inset
     since there's no long line length to protect against on a narrower
     screen). Used as a `width` directly (not max-width) since
     min()/calc() already encode the cap. */
  --container:        min(100% - 80px, 1120px); /* standard content column + header */
  --bottle-gap: clamp(18px, 3.6vw, 64px); /* ~0.35x a bottle's width — hero row, pinned stage, page 5 trio */

  /* ============================================================
     L3 float shadow — two-stop soft shadow for large floating
     objects (used by .story-photo-frame). Part of a warm studio-
     lighting system originally applied to product photography too
     (L1 glow, L2 contact); those layers were dropped when product
     PNGs moved to flat white-background photography (muta2).
     ============================================================ */
  --shadow-float:
      drop-shadow(0 24px 48px rgba(90, 72, 50, 0.08))
      drop-shadow(0 60px 120px rgba(90, 72, 50, 0.04));
}

/* ---- content containers — flatten to a simple side-inset once there's no
   long line length left to protect (tablet/mobile); desktop keeps the
   min(100% - Npx, cap) shrink-or-cap defined in :root above ---- */
@media (max-width: 1024px) {
  :root {
    --container: calc(100% - 64px);
  }
}
@media (max-width: 767px) {
  :root {
    --container: calc(100% - 40px);
  }
}
/* ultra-wide monitors (1728px+ laptops, 1920/2560 desktop displays) — the
   flat 1120px cap above was tuned against ordinary laptop widths and
   never revisited for anything wider, so past ~1127px viewport width
   (where the cap actually starts binding) the whole page simply stops
   growing: measured 42% of the screen as bare margin at 1920px wide,
   56% at 2560px. This doesn't fully close that gap (a real fix is a
   deliberate wide-viewport art direction — larger hero/product imagery,
   not just a wider text column) but a second, taller cap gives the page
   meaningfully more presence on large displays without touching any of
   the proportional (%-based) column splits inside it, which already
   handle a range of widths correctly. */
@media (min-width: 1600px) {
  :root {
    --container: min(100% - 120px, 1440px);
    /* the "larger hero/product imagery" half of the wide-viewport art
       direction the comment above called for (the container widening was
       only the first half). The hero bottle is height-driven and caps at
       1035px; on a tall wide display (2560x1440) that cap binds, leaving
       the aspect-locked bottle just ~391px wide inside a very wide column
       — a skinny object stranded in horizontal dead air (measured 262px
       of empty space between the headline and the bottle, per the
       optical-composition audit). Raising the cap here lets the bottle
       grow into a genuinely dominant object on large displays: at
       2560x1440 it reaches ~1240px tall / ~468px wide, extending toward
       the headline and reading as the confident hero image an Apple
       product page would show, rather than a fixed-size island. No effect
       below 1600px wide, and none on shorter wide displays like 1920x1080
       where the bottle is already viewport-height-limited to ~993px (the
       cap never binds there) — this only engages where there's genuine
       vertical room the old cap was leaving unused. --figure-hero-h is
       consumed only by the hero bottle in practice, so nothing else
       moves. */
    --figure-hero-h: min(calc((100svh - 64px) * 0.9775), 1240px);
  }
}