/*
 * UI-chrome tokens — component-level values for interactive/UI text and spacing that sit on
 * their own scale in the source (Gentle Botanica.dc.html), distinct from the frozen CONTENT
 * type scale (H1/H2/H3/body — those stay untouched, see DESIGN_RULES.md §3). Introduced
 * 2026-07-22 per the source-priority audit: the repeated final desktop screens consistently
 * use smaller, component-specific sizes for nav/buttons/badges/meta text than the body-size
 * token, and several components use exact pixel values (10px/13px/14px/18px/etc.) that don't
 * land on the generic 4px spacing scale. These are documented here as named tokens instead of
 * being forced onto --space-* or --font-size-body, per DECISIONS.md.
 *
 * Values sourced from the REPEATED final markup only (source-priority rule #1) — the t2
 * canonical desktop header (also reused verbatim on the Fragrance Guide page) was treated as
 * the source of truth over the one-off t3 Collection/Checkout header variant.
 */
:root {
  /* ---- UI-chrome typography ---- */
  --font-size-nav: 12px;         /* header nav links (desktop) — repeated t2 header */
  --font-size-button: 13px;      /* all primary/outline button labels */
  --font-size-badge: 10px;       /* NEW/BESTSELLER pill text */
  --font-size-meta: 12px;        /* cart-item variant/size, footer links, drawer notes */
  --font-size-ui-label: 11px;    /* small uppercase eyebrows/labels distinct from --font-size-label content use */
  --font-size-mobile-wordmark: 13px;
  --letter-spacing-mobile-wordmark: 0.18em;
  --letter-spacing-button: 0.03em;
  /* Product-card compaction pass (2026-09-12, explicit request): the card title was using the
     frozen --font-size-h3 (24px, tokens.css) directly — reduced ~12.5% here as a dedicated
     product-card override so every OTHER h3 use sitewide stays untouched. Descriptor drops from
     --font-size-body (16px) to a clearly secondary size, matching how --font-size-meta reads
     next to body text elsewhere. */
  --font-size-product-card-title: 21px;
  --font-size-product-card-descriptor: 13px;
  /* Blog templates (2026-09-12) — Gentle Botanica.dc.html "BLOG ARTICLE PAGE"'s italic lead
     paragraph size; doesn't land on the frozen content type scale (16/24/38/64) so it gets its
     own named token, same convention as the product-card pair above. */
  --font-size-article-lead: 19px;
  /* Single Product Page compaction pass (2026-09-12, explicit request): the product title was
     using the frozen --font-size-h1 (64px, tokens.css) directly — "dramatically oversized,"
     reduced to ~50% here as a dedicated override so every other H1 use sitewide (Shop page title,
     etc.) stays untouched. */
  --font-size-product-title: 32px;

  /* ---- Component-level spacing (exact source values, not forced onto the 4px scale) ---- */
  /* Header size pass 2026-08-13 (reference: flamingoestate.com), final correction: earlier passes
     in this series (22px -> 8px -> 2px -> 0px) were fighting a redundant min-height on
     .site-header__inner rather than removing it (see header.css) — that min-height, not this
     padding, was the thing keeping the row taller than intended. With min-height removed, a small
     amount of padding reads as "little breathing room around a large logo" (the reference site's
     actual feel); 0px read as the logo touching the border, which visually crops it. Logo itself
     is untouched at 300px/~97px throughout every pass — only ever a spacing value. */
  /* Header redesign 2026-09-11, sized against a real reference (gentlehabits.com.au, measured
     live): its logo row is 62px tall — an 8px top/bottom pad around a 46px-tall logo image, not a
     large padding around a small logo. The 32px value from the previous pass over-compensated for
     an undersized logo instead of fixing the logo's own size (see .site-header__logo-img); now
     that the logo is sized to match, the padding goes back down to match too. Only consumer is
     .site-header__brand-row (header.css), so safe to change directly. */
  /* Single-row pass (2026-09-11): the logo, nav, and actions now share ONE row instead of the
     logo having its own standalone band — 30px top/bottom against the row's tallest child (the
     40px account/cart touch targets) lands the whole header at ~100px, inside the requested
     90-110px range. Only consumer is .site-header__brand-row (header.css). */
  --space-header-padding-y: 30px;
  --space-header-nav-gap: 20px;        /* t2 nav link gap */
  --space-header-actions-gap: 18px;    /* t2 gap between Search/Cart action items */
  --space-header-icon-text-gap: 6px;   /* t2 gap between icon and its label */
  --space-btn-padding: 14px;           /* uniform padding on primary filled buttons (sticky ATC / cart checkout) */
  --space-btn-outline-padding-y: 15px; /* homepage hero outline CTA */
  --space-drawer-header-padding-y: 18px;
  --space-toast-padding-y: 13px;
  --space-toast-gap: 10px;
  /* Art-direction pass 2026-08-13: footer spacing roughly doubled — "closing page of a printed
     publication" needs real air around the columns, not a compact utility footer. Widened again
     2026-08-14 per the Flamingo Estate editorial-brief pass ("footer should feel more premium,
     increase vertical padding, more breathing room"). */
  --footer-column-gap: 88px;
  --footer-padding-bottom: 100px;
  /* Major section-to-section rhythm, desktop. Was clamp(64px,5vw,80px) (2026-07-23 correction) —
     widened further for the art-direction pass: the mockups' whole point is visual pauses between
     editorial "chapters," and 64-80px reads as component spacing, not a page turn. 8vw scales
     ~102px at 1280px to 140px (capped) at 1600px+. */
  --space-section-gap-desktop: clamp(96px, 8vw, 140px);
  --qty-control-size: 36px;            /* visual size of qty +/- buttons in cart/PDP-sticky contexts */
  /* Blog List/related grid gap — Gentle Botanica.dc.html's own 40px value, between --space-7
     (32px) and --space-8 (48px) on the generic scale. */
  --space-blog-grid-gap: 40px;
  /* Homepage Brand Statement (2026-09-12) — explicit request for ~72-90px above / ~80-100px
     below, deliberately asymmetric and not on the generic 4px scale (--space-9 tops out at 60px);
     a "short editorial pause," not the full --space-section-gap-desktop rhythm used between every
     other homepage section. Mobile collapses to one shared value for both sides. */
  --space-brand-statement-top: 80px;
  --space-brand-statement-bottom: 88px;
  --space-brand-statement-mobile: 56px;
}