/* ========================================================================
   VAPE LAB — Design Tokens (matched to approved HTML references)
   ======================================================================== */
:root {
  /* Colors */
  --ink:    #181719;
  --paper: #f7f4f0;
  --surface-warm: #fffdfa;
  --surface-soft: #f6f1ed;
  --accent: #d94444;
  --accent-action: #c9363d;
  --accent-hover: #b82f35;
  --accent-text: #c9363d;
  --accent-on-dark: #e85d5d;
  --on-ink-subtle: #8a8a8a;
  --neutral:#f7f4f0;
  --card:   #ffffff;
  --muted:  #687386;
  --text-muted: #687386;
  --text:   #344054;
  --border: #e9e1dc;
  --border-strong: #d8ccc5;
  --field-border: var(--border-strong);
  --success: #15803d;
  --success-bg: #ecfdf3;
  --warning: #9a6700;
  --warning-bg: #fff8df;
  --error: #b42318;
  --error-bg: #fff0ee;
  --info: #285c9a;
  --info-bg: #edf6ff;
  --success-text: #047857;
  --border-dark: rgba(255,255,255,.08);

  /* Order/status chips (account, thank-you, admin-facing states) */
  --status-ok-bg: #dcfce7;
  --status-ok-text: #166534;
  --status-info-bg: #e0e7ff;
  --status-info-text: #3730a3;
  --status-warn-bg: #fee2e2;
  --status-warn-text: #991b1b;
  --rating-star: #f5a623;
  --link-hover: #e8823c;

  /* Fonts */
  --heading: 'Unbounded', sans-serif;
  --body: 'Work Sans', sans-serif;
  --font-h: var(--heading);
  --font-b: var(--body);

  /* Backward-compatible aliases used by page-specific CSS files */
  --vl-ink: var(--ink);
  --vl-accent: var(--accent-action);
  --vl-accent-hover: var(--accent-hover);
  --vl-bg: var(--paper);
  --vl-card: var(--card);
  --vl-white: var(--card);
  --vl-muted: var(--text-muted);
  --vl-text: var(--text);
  --vl-border: var(--border);
  --vl-font-heading: var(--font-h);
  --vl-font-body: var(--font-b);
  --vl-on-ink-muted: var(--border-strong);
  --vl-accent-text: var(--accent-text);
  --vl-accent-on-dark: var(--accent-on-dark);

  /* Fluid clamp typography (375→1200px viewport) */
  --fs-display: clamp(2rem, 1.55rem + 1.8vw, 3.5rem);
  --fs-hero: var(--fs-display);
  --fs-h1: clamp(1.65rem, 1.22rem + 1.7vw, 2.8rem);
  --fs-h2: clamp(1.3rem, 1.03rem + 1.05vw, 2rem);
  --fs-h3: clamp(1rem, .87rem + .52vw, 1.35rem);
  --fs-h4:   clamp(0.875rem, 0.691rem + 0.490vw, 1.000rem);
  --fs-h6:   clamp(0.813rem, 0.628rem + 0.490vw, 0.938rem);
  --fs-body: clamp(.9rem, .86rem + .16vw, 1rem);
  --fs-small: clamp(.75rem, .72rem + .12vw, .82rem);
  --fs-label: clamp(.66rem, .63rem + .12vw, .74rem);
  --fs-badge:clamp(0.625rem, 0.543rem + 0.218vw, 0.688rem);
  --fs-price: clamp(1rem, .9rem + .38vw, 1.28rem);
  --fs-price-card: var(--fs-price);
  --fs-price-pdp:  clamp(1.375rem, 0.882rem + 1.314vw, 1.750rem);
  --fs-btn:  clamp(0.813rem, 0.628rem + 0.490vw, 0.938rem);
  --fs-nav:  clamp(0.750rem, 0.668rem + 0.218vw, 0.813rem);

  /* Layout */
  --max: 1200px;
  --content-max: var(--max);
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --header-h: 76px;
  --r-sm: .45rem;
  --r-md: .65rem;
  --r-card: .8rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-round: 999rem;
  --r-full: 9999rem;
  --r-btn: 6px;
  --lh-body: 1.6;

  /* Elevation — Soft Lift scale (DESIGN.md). One recipe per tier. */
  --shadow-1: 0 2px 10px rgba(74,48,40,.05);
  --shadow-2: 0 12px 30px rgba(74,48,40,.11);
  --shadow-3: 0 24px 64px rgba(74,48,40,.18);
  --shadow-card: var(--shadow-1);
  --shadow-card-hover: var(--shadow-2);
  --shadow-overlay: var(--shadow-3);
}