/* ═══════════════════════════════════════════ WV DESIGN TOKENS — FROZEN ═══════════════════════════════════════════ Authoritative source: Woodstock Vitamins Website Style Guide Designer sign-off: April 2026 (latest amendment: 2026-05-26) Figma file: https://www.figma.com/design/TDmusPee3cmOmF0mnlrtLZ/Woodstock-Vitamins--Website This file is READ-ONLY during all build sessions. Do not edit during page or component builds. Changes require designer approval. When a change is approved, increment the date comment above, document what changed, and update wv-context.md to match. AMENDMENTS ────────── 2026-06-08: Added --wv-color-amber (#C77700) — a caution color for the stale-cart low-stock chip (no amber existed; --wv-color-warning is red, reserved for errors). Named by color, not use, per the token-naming convention. Pair with dark text for contrast. Approved by user 2026-06-08. 2026-06-04: Quiz coral token renamed — decouple semantics from color. Old (removed): --wv-color-primary / --wv-color-primary-hover New: --wv-color-quiz / --wv-color-quiz-hover Values unchanged (#B65F54 / #A35349). Five-commit pass: (1) dual-write tokens, (2) migrate quiz consumers to new names, (3) migrate non-quiz consumers (NEVER DO rule violations) to --wv-color-accent / --wv-color-olive-dark, (4) remove the deprecated --wv-color-primary tokens [this commit], (5) update docs. The PDP sale price (.wv-pdp-generic__price--sale) is the one documented non-quiz coral use — explicitly approved by user 2026-06-04 and intentionally remains on --wv-color-quiz. 2026-06-04: Responsive typography refactor — Pass 1 + Pass 2. Pass 1: Added per-class font-size tokens (--wv-fs-h1 … --wv-fs-label-legal, 19 tokens) under a new "Typography — Per-class font sizes" block. wv-typography.css class rules swapped from hardcoded px to var(--wv-fs-*) references; zero behavior change. Pass 2: :root now holds the MOBILE baseline. Added two @media (min-width: 768px) and @media (min-width: 1280px) :root overrides at the bottom of this file stepping the nine SCALING tokens up to tablet and desktop tiers. Ten tokens are LOCKED at a single value across all viewports — see the rationale comment in :root. Scaling math: mobile = desktop × 0.65, tablet = desktop × 0.85, rounded to 1px. h5 hand-tuned (20/22/24) to stay distinct from locked h6 (16). Existing t-shirt --wv-text-xs/sm/base/ md/lg/xl/label scale is untouched and continues to serve non-typography-class consumers. 2026-06-03: Bleed-pair primitive tokens introduced. Two design tokens for the standardized "upper section + lower section with bleeding image" pattern used by F5 Orientation (Foundation Feels + Put You First) and F5 PDP (Comparison Table + Meet Dr. Neal): --wv-bleed-pair-upper 510px (upper section h) --wv-bleed-pair-lower 765px (lower section h) Total combined visible zone is the sum (1275px) — the bleeding image's height at desktop. Designer-spec'd 2026-06-03 after the ad-hoc bleed implementations were causing resize chaos. See PLAN-migration.md "RR. Bleed-Pair Primitive" for the full pattern and manifest. 2026-06-02: Introduced 3-tier section content width system. --wv-page-content-max retitled from 1060 → 1280 (the new mid tier, matches Tailwind xl / common content-max standard). Added --wv-page-content-tight at 1024px (classic iPad-landscape width) for sections that need the previous tighter cap. Existing consumers of --wv-page-content-max (about, article, rewards, quiz-results, shop-benefit, dr-neal, two PDP sections, etc.) intentionally widen from 1060 → 1280; Learn Hub opts into --wv-page-content-tight to preserve its current visual width. The 768px --wv-content-max (narrow article reading column) stays unchanged. 2026-06-02: Renamed --wv-header-padding → --wv-page-gutter and shrank the desktop value from 80px to 48px. The old name was a misnomer — the token had grown into the de-facto "page- edge gutter" used by 8 surfaces (header, footer, first5 LP, your-practice, F5 orientation, account, quiz results, buy bar). Shop page was the outlier, using a separate clamp(16,4vw,48) — aligning its 48px max to the token and updating every other consumer to 48px desktop unifies every page surface's horizontal edge gutter. Tier values stay 16 mobile / 40 tablet / 48 desktop (desktop only changed). Container/Content max tokens unchanged (1440 / 1060). See wv-components.css v52 changelog for the coordinated consumer rename. 2026-06-01: Added --wv-shadow-card (0 4px 4px 0 rgba(0,0,0,0.25)). Promoted from the hardcoded literal previously repeated on .wv-card__image + .wv-card__info in wv-components.css. Used by the Product Card sub-cards and by the new Ingredient Card (mimics product card structure). Distinct from --wv-shadow-md (softer / 12px blur, used by product tile) — this is the sharp 4px-blur card-stack shadow specifically. 2026-06-01: Added --wv-color-mist (#B2B9C0). Cool misty gray sampled from the top edge of the F5 Orientation "Put You First" background image (img-put-you-first-bg.webp). Used as section background on Foundation Feels Like at mobile + tablet to blend the abrupt transition into the bleeding image below. Transparent at desktop (>= 1280) where the existing margin-top: -240px bleed coordination governs. NOT in the original style guide palette — added per implementation need; flag for designer review at next pass. 2026-05-26: Added --wv-page-content-max (1060px) for section content inner widths. Distinct from --wv-container-max (1440px, outer artboard / full-bleed frame). Replaces the magic number 1060px previously repeated across page CSS files. 2026-04-23: Added --wv-shadow-lifted (raised card elements — Comparison Table olive column). AUTHORITATIVE COLOR PALETTE: the style guide image is the only source of truth for colors. Variables not shown in the style guide image do not belong in this file. Contains: CSS custom properties only. No selectors other than :root. No component styles. No classes. ═══════════════════════════════════════════ */ :root { /* ── Core Palette ── */ --wv-color-background: #F8F5EC; /* Base background — all pages */ --wv-color-surface: #DDDEC7; /* Section BGs, footer, mega menu */ --wv-color-surface-2: #95967D; /* Muted/faded — strikethrough prices, secondary surfaces */ --wv-color-text-primary: #2A2B14; /* Main text, icons on light BGs */ --wv-color-text-secondary: #555543; /* Subdued / secondary text */ --wv-color-placeholder: #D9D9D9; /* Placeholder boxes, FDA disclaimer bg */ --wv-color-mist: #B2B9C0; /* Cool misty gray — F5 Orientation Foundation Feels bg blend, < 1280 only */ /* ── Primary Accents — Olive / Green family ── */ --wv-color-accent: #939740; /* ATC buttons, hero CTA — olive */ --wv-color-olive-dark: #767933; /* Filled stars, review count, ATC hover */ --wv-color-star-empty: #BEC18C; /* Unearned / empty stars */ /* ── UI & Functional ── */ --wv-color-border: #DDDEC7; /* Default border */ --wv-color-badge-purple: #9B8FB3; /* Select badges */ --wv-color-badge-bg: #767933; /* Cart count badge background */ --wv-color-card-bg: #FFFFFF; /* Product card background, white surfaces */ --wv-color-warning: #C3200B; /* Warnings, error icons */ --wv-color-amber: #C77700; /* Caution chips (e.g. low-stock) — pair with dark text */ --wv-color-text-inverse: #F8F5EC; /* Cream — text on dark/colored BGs */ --wv-color-overlay: rgba(0, 0, 0, 0.5); /* Modal/drawer backdrop */ --wv-color-atc-hover: #7a7e32; /* Add to Cart button hover */ /* ── First5 Product Accent Colors ── */ /* Main colors only — used on First5 LPs and product cards */ --wv-color-omega-main: #E37769; --wv-color-probiotic-main: #89AEBE; --wv-color-collagen-main: #4A6FAE; --wv-color-calcium-main: #CEA233; --wv-color-multi-main: #7E4752; /* ── Quiz Accents — Coral / Terracotta family ── RESERVED for quiz UI only. The .wv-pdp-generic__price--sale rule in wv-pdp-hero-info.css is the one documented exception, expressly authorized by user 2026-06-04. Do not introduce additional non-quiz consumers without a comparable approval. */ --wv-color-quiz: #B65F54; --wv-color-quiz-hover: #A35349; /* ── Typography — Font Families ── */ /* Self-hosted in assets/fonts/ — do not load from Google Fonts */ --wv-font-primary: 'General Grotesque', sans-serif; /* Nav, body, buttons */ --wv-font-mono: 'General Grotesque Mono', monospace; /* Badges, labels, trust bar */ --wv-font-serif: 'Office Times Round', serif; /* Quiz card, display headings */ /* Inter weight 400 loaded from Google Fonts for footer legal text only */ /* ── Typography — Font Sizes (t-shirt scale) ── Used by non-typography-class consumers (component-local font sizing). The per-class --wv-fs-* tokens below drive the global .wv-h*/.wv-body*/ .wv-label* classes; this t-shirt scale is parallel and additive. */ --wv-text-xs: 11px; /* FDA warning, copyright, legal text */ --wv-text-sm: 15px; /* Nav links, footer links, buttons */ --wv-text-base: 16px; /* Base body size */ --wv-text-md: 18px; /* Body text, subheadings */ --wv-text-lg: 21px; /* Newsletter heading */ --wv-text-xl: 27px; /* Section headings */ --wv-text-label: 12px; /* Trust bar, badges, mono labels */ /* ── Typography — Per-class font sizes ── One token per global typography class in wv-typography.css. Each token is independently dial-able per breakpoint — no shared scale factor across classes. Mobile-first cascade. The values declared inside :root are the mobile baseline. @media (min-width: 768px) and (min-width: 1280px) overrides at the bottom of this file step up to tablet and desktop tiers. ── LOCKED tokens (no @media override at any breakpoint) ── The ten tokens below stay at a single value at every viewport. Locked intentionally because: - .wv-h6 / .wv-body-lg / .wv-body / .wv-body-bold / .wv-body-sm are already at mobile-comfortable sizes — shrinking them further harms legibility, growing them disrupts in-page typographic hierarchy at desktop. - .wv-label-reg / .wv-label-small / .wv-label-nav / .wv-label-btn are UI-chrome sizes (badges, pills, buttons, nav). UI labels should not scale with viewport; touch-target/scan rules apply uniformly. - .wv-label-legal is governed by FDA 21 CFR 101.93. 11px is the compliance floor — cannot shrink, growth would violate the designer-specified "compact compliance" treatment. */ --wv-fs-h6: 16px; --wv-fs-body-lg: 18px; --wv-fs-body: 14px; --wv-fs-body-bold: 18px; /* tied to body-lg — bold variant of large body */ --wv-fs-body-sm: 12px; --wv-fs-label-reg: 12px; /* .wv-label-reg, .wv-label (alias) */ --wv-fs-label-small: 12px; /* .wv-label-small, .wv-label-small--active */ --wv-fs-label-nav: 15px; --wv-fs-label-btn: 15px; --wv-fs-label-legal: 11px; /* FDA-mandated minimum */ /* ── SCALING tokens — mobile baseline ── The nine tokens below step up at tablet (768px+) and again at desktop (1280px+) — see @media blocks at the bottom of this file. Mobile values were generated by desktop × 0.65 rounded to 1px (h5 manually tuned 20 vs math's 16 to keep distinct from h6 16). Tablet values: desktop × 0.85 rounded (h5 hand-set 22). */ --wv-fs-h1: 46px; /* desktop 70 */ --wv-fs-h2: 26px; /* desktop 40 */ --wv-fs-h3: 26px; /* desktop 40 */ --wv-fs-h4: 33px; /* desktop 50 */ --wv-fs-h5: 20px; /* desktop 24 — hand-tuned */ --wv-fs-h-serif: 36px; /* desktop 55 */ --wv-fs-h-serif-lg: 52px; /* desktop 80 */ --wv-fs-h-serif-sm: 23px; /* desktop 36 */ --wv-fs-h-quiz: 31px; /* desktop 48 */ /* ── Typography — Font Weights ── */ --wv-weight-regular: 400; --wv-weight-medium: 500; --wv-weight-semibold: 600; --wv-weight-bold: 700; /* ── Typography — Line Heights ── */ --wv-leading-tight: 1.0; /* Headings */ --wv-leading-normal: 1.52; /* Body text */ --wv-leading-loose: 1.8; /* Small body, descriptions */ /* ── Typography — Letter Spacing ── */ --wv-tracking-tight: -0.03em; /* All headings */ --wv-tracking-normal: 0em; --wv-tracking-wide: 0.14em; /* Eyebrow labels, uppercase nav */ /* ── Layout ── */ --wv-header-height: 81px; /* Desktop — 48px mobile via :root override */ /* Page edge gutter — distance from viewport edge to content. Used by every major page surface (header, footer, shop, F5 LP, your- practice, account, etc.) so they all align. Tiered via mobile- first overrides in wv-components.css: 16 mobile / 40 tablet / 48 desktop. Renamed from --wv-header-padding 2026-06-02 to better reflect its actual role. */ --wv-page-gutter: 48px; /* Desktop — 40px tablet, 16px mobile */ --wv-container-max: 1440px; /* Matches Figma artboard width */ --wv-page-content-max: 1280px; /* Section content (mid). Default cap for in-section text + content columns. Sits between --wv-container-max (1440, outer frame) and --wv-page-content-tight (1024, tight reading width). */ --wv-page-content-tight: 1024px; /* Section content (tight). For sections needing a more constrained reading column without going all the way down to the 768 article cap. Used by Learn Hub. */ --wv-content-max: 768px; /* Article body, narrow content columns */ --wv-grid-gap: 26px; /* Product grid column gap */ --wv-grid-gap-sm: 16px; /* Product grid gap — mobile */ /* ── Bleed-pair primitive (desktop section heights) ── The standardized "upper + lower section, image bleeds from lower up through upper" pattern. Image total visible height = sum of both. See PLAN-migration.md "RR. Bleed-Pair Primitive". */ --wv-bleed-pair-upper: 510px; --wv-bleed-pair-lower: 765px; /* ── Border Radius ── */ --wv-radius-sm: 15px; /* Card image frame, inputs, pills */ --wv-radius-md: 16px; /* Cards, dropdowns */ --wv-radius-lg: 20px; /* Large cards, quiz CTA */ --wv-radius-pill: 999px; /* Quiz button, count pill, qty selector */ /* ── Shadows ── */ --wv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --wv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); /* Card-stack shadow — sharp short-distance drop. Used by Product Card (.wv-card__image + .wv-card__info) and the new Ingredient Card. */ --wv-shadow-card: 0 4px 4px 0 rgba(0, 0, 0, 0.25); /* Lifted shadow for raised card elements. Designer-tuned from Figma 2026-04-23 for the Comparison Table olive card. */ --wv-shadow-lifted: 9px 10px 8px 4px rgba(0, 0, 0, 0.18); /* ── Transitions ── */ --wv-transition-fast: 150ms ease; --wv-transition-base: 200ms ease; --wv-transition-slow: 300ms ease; --wv-transition-color: color 200ms ease, background-color 200ms ease; } /* ═══════════════════════════════════════════ RESPONSIVE TYPOGRAPHY OVERRIDES ─────────────────────────────────────────── Mobile-first cascade. :root above holds the mobile baseline. The blocks below step the SCALING tokens up at tablet and desktop. LOCKED tokens (h6, body, body-lg, body-bold, body-sm, label-*) are NOT redeclared here — they intentionally stay at the :root value across every viewport. See the "LOCKED tokens" block in :root for rationale. Each scaling token is independently dial-able — add/remove a line here to change a single class's behavior at a tier without touching the others. ═══════════════════════════════════════════ */ /* ── Tablet (768px+) ─── desktop × 0.85, rounded to 1px ── */ @media (min-width: 768px) { :root { --wv-fs-h1: 60px; /* mobile 46 → tablet 60 → desktop 70 */ --wv-fs-h2: 34px; /* mobile 26 → tablet 34 → desktop 40 */ --wv-fs-h3: 34px; --wv-fs-h4: 43px; /* mobile 33 → tablet 43 → desktop 50 */ --wv-fs-h5: 22px; /* mobile 20 → tablet 22 → desktop 24 (hand-tuned) */ --wv-fs-h-serif: 47px; --wv-fs-h-serif-lg: 68px; --wv-fs-h-serif-sm: 31px; --wv-fs-h-quiz: 41px; } } /* ── Desktop (1280px+) ─── designer-spec'd target values ── */ @media (min-width: 1280px) { :root { --wv-fs-h1: 70px; --wv-fs-h2: 40px; --wv-fs-h3: 40px; --wv-fs-h4: 50px; --wv-fs-h5: 24px; --wv-fs-h-serif: 55px; --wv-fs-h-serif-lg: 80px; --wv-fs-h-serif-sm: 36px; --wv-fs-h-quiz: 48px; } }