/* ═══════════════════════════════════════════
   WV DESIGN TOKENS — FROZEN
   ═══════════════════════════════════════════
   Authoritative source: Woodstock Vitamins Website Style Guide
   Designer sign-off: April 2026
   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.

   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 */

  /* ── 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-text-inverse:   #F8F5EC;   /* Cream — text on dark/colored BGs */
  --wv-color-overlay:        rgba(0, 0, 0, 0.5); /* Modal/drawer backdrop */

  /* ── 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 ── */
  --wv-color-primary:        #B65F54;   /* Quiz pill, primary CTA buttons */
  --wv-color-primary-hover:  #A35349;   /* Quiz button hover */

  /* ── 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 ── */
  --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 — 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 */
  --wv-header-padding: 80px;    /* Desktop — 40px tablet, 16px mobile */
  --wv-container-max:  1440px;  /* Matches Figma artboard width */
  --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 */

  /* ── 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-header:   0 1px 3px rgba(0, 0, 0, 0.08);
  --wv-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* ── 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;

}