/* ─────────────────────────────────────────────────────────────────────────
 * vapesvozol.com · tokens.css — "Citrus Energy" DNA (Direction D)
 *
 * Visual system delivered 2026-05-19, applied to all 14 archetypes.
 *
 *   • Signal teal       #0fa3b1 (with deep #0a7b87, pale #cfeef1, mist #ebf8fa)
 *   • Ink               #12181c (cool carbon — not pure black)
 *   • Cool paper        #f5f7f8 (page background)
 *   • Paper             #ffffff (cards on cream)
 *   • Display           Inter 800-900 italic — wordmark signature
 *   • Body              Inter 400-700
 *   • Mono              IBM Plex Mono 400-600 — eyebrows, labels, prices, lots
 *   • Radii             14 / 18 / 22 / 28 px (soft rounded), 999 px pills
 *   • Shadows           teal-tinted on primary CTA, micro on cards
 *   • Family hues       9 distinct colors for the flavor families
 *
 * tokens.css is the single source of brand colour / font / scale.
 * core.css and njk templates reference these — never hardcode brand values.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── SIGNAL ORANGE (the citrus heart) ──────────────────────── */
  --vz-signal:       #0fa3b1;
  --vz-signal-deep:       #0a7b87;
  --vz-signal-pale:       #cfeef1;
  --vz-signal-mist:       #ebf8fa;

  /* ── SUBSTRATE ─────────────────────────────────────────────── */
  --vz-cream:       #f5f7f8;
  --vz-paper:       #ffffff;
  --vz-paper-deep:       #eef2f4;

  /* ── INK ───────────────────────────────────────────────────── */
  --vz-ink:       #12181c;
  --vz-ink-2:       #47535b;
  --vz-ink-3:       #7a868e;
  --vz-ink-4:       #a9b3b9;
  --vz-rule:       #dfe5e8;
  /* Aliases — checkout/order-received/age-verify CSS references these names;
     map to canonical tokens so those pages render styled (P5 fix). */
  --vz-accent:       #0fa3b1;
  --vz-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --vz-ink-muted:       #7a868e;
  --vz-paper-2:       #ffffff;
  --vz-rule-lite:       #dfe5e8;
  --vz-yellow:       #f5b62e;
  --vz-hair:         rgba(26, 22, 18, 0.10);
  --vz-hair-2:       rgba(26, 22, 18, 0.18);

  /* ── BACKWARD-COMPAT BRAND ALIASES (preserve existing JS refs) ─ */
  --vz-brand:       #0fa3b1;
  --vz-brand-deep:       #0a7b87;
  --vz-brand-soft:       #cfeef1;
  --vz-red:       #0fa3b1;
  --vz-red-deep:       #0a7b87;
  --vz-paper-warm:       #ebf8fa;

  /* ── SIGNAL ────────────────────────────────────────────────── */
  --vz-signal-ok:    #2d9c5a;
  --vz-signal-warn:  #d4870a;
  --vz-signal-err:   #c73b3b;
  --vz-signal-info:  #1fa4ff;

  /* ── TYPE STACKS — Inter display + Plex Mono labels ────────── */
  --vz-font-display: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --vz-font-body:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --vz-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── TYPE SCALE ────────────────────────────────────────────── */
  --vz-fs-mono-xs:   10px;
  --vz-fs-mono-sm:   11px;
  --vz-fs-mono:      12px;
  --vz-fs-micro:     11px;
  --vz-fs-small:     13px;
  --vz-fs-body-sm:   14px;
  --vz-fs-body:      15px;
  --vz-fs-body-lg:   17px;
  --vz-fs-lead:      18px;
  --vz-fs-h4:        20px;
  --vz-fs-h3:        24px;
  --vz-fs-h2:        36px;
  --vz-fs-h2-lg:     48px;
  --vz-fs-h1:        56px;
  --vz-fs-h1-lg:     76px;
  --vz-fs-h1-hero:   92px;
  --vz-fs-h1-cinematic: 130px;

  /* ── LINE HEIGHTS ──────────────────────────────────────────── */
  --vz-lh-tight: 0.92;
  --vz-lh-snug:  1.05;
  --vz-lh-body:  1.55;
  --vz-lh-loose: 1.72;

  /* ── TRACKING ──────────────────────────────────────────────── */
  --vz-tr-display:        -0.03em;
  --vz-tr-display-tight:  -0.035em;
  --vz-tr-display-loose:  -0.022em;
  --vz-tr-body:            0;
  --vz-tr-mono-lo:         0.06em;
  --vz-tr-mono:            0.14em;
  --vz-tr-eyebrow:         0.18em;

  /* ── WEIGHTS ───────────────────────────────────────────────── */
  --vz-w-regular:  400;
  --vz-w-medium:   500;
  --vz-w-semibold: 600;
  --vz-w-bold:     700;
  --vz-w-extrabold: 800;
  --vz-w-black:    900;

  /* ── RADII (soft rounded — Direction D) ────────────────────── */
  --vz-r-xs:  4px;
  --vz-r-sm:  8px;
  --vz-r-md:  14px;
  --vz-r-lg:  18px;
  --vz-r-xl:  22px;
  --vz-r-2xl: 28px;
  --vz-r-pill: 999px;

  /* ── SPACING SCALE (4px base) ──────────────────────────────── */
  --vz-s-1:   4px;
  --vz-s-2:   8px;
  --vz-s-3:  12px;
  --vz-s-4:  16px;
  --vz-s-5:  20px;
  --vz-s-6:  24px;
  --vz-s-8:  32px;
  --vz-s-10: 40px;
  --vz-s-12: 48px;
  --vz-s-14: 56px;
  --vz-s-16: 64px;
  --vz-s-20: 80px;
  --vz-s-24: 96px;

  /* ── LAYOUT WIDTHS ─────────────────────────────────────────── */
  --vz-max-w:        1280px;
  --vz-max-w-wide:   1280px;
  --vz-max-w-nb:     760px;     /* long-form reading column */
  --vz-container-max: 1280px;
  --vz-pad-x:        64px;       /* desktop */
  --vz-pad-x-md:     32px;
  --vz-pad-x-sm:     20px;       /* mobile */

  /* ── ELEVATION ─────────────────────────────────────────────── */
  --vz-elev-1: 0 8px 24px -16px rgba(20,16,12,0.18);
  --vz-elev-2: 0 16px 36px -24px rgba(20,16,12,0.18);
  --vz-elev-3: 0 32px 64px -24px rgba(20,16,12,0.22);
  --vz-elev-orange: 0 12px 28px -12px rgba(255,122,26,0.55);
  --vz-elev-orange-lg: 0 32px 64px -24px rgba(255,122,26,0.4);

  /* ── MOTION ────────────────────────────────────────────────── */
  --vz-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --vz-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --vz-dur-fast:    160ms;
  --vz-dur-base:    220ms;
  --vz-dur-slow:    320ms;

  /* ── Z-LAYERS ──────────────────────────────────────────────── */
  --vz-z-base:    0;
  --vz-z-sticky:  30;
  --vz-z-overlay: 40;
  --vz-z-modal:   60;
  --vz-z-toast:   80;

  /* ── FLAVOR FAMILY HUES (9 designed families) ────────────────
     Two naming aliases — both refer to same hex.
     --vz-fam-* used by core.css directly.
     --vz-f-*   used by hueOfFlavor() helper in vozol.js (njk inline style). */
  --vz-fam-tropical:  #F2A85B;  --vz-fam-tropical-deep:  #7A4815;
  --vz-fam-dessert:   #9E7549;  --vz-fam-dessert-deep:   #4D331A;
  --vz-fam-candy:     #E55BA7;  --vz-fam-candy-deep:     #5C1A4A;
  --vz-fam-mint:      #9DBFA3;  --vz-fam-mint-deep:      #3F5E47;
  --vz-fam-berry:     #C44A75;  --vz-fam-berry-deep:     #5C1A30;
  --vz-fam-berry-ice: #7BB6D9;  --vz-fam-berry-ice-deep: #1F4B68;
  --vz-fam-fruit-ice: #A8D8DC;  --vz-fam-fruit-ice-deep: #3E6F73;
  --vz-fam-fruit:     #E2A86A;  --vz-fam-fruit-deep:     #73441C;
  --vz-fam-sour-ice:  #C8D636;  --vz-fam-sour-ice-deep:  #5C6A14;

  --vz-f-tropical:  #F2A85B;
  --vz-f-dessert:   #9E7549;
  --vz-f-candy:     #E55BA7;
  --vz-f-mint:      #9DBFA3;
  --vz-f-berry:     #C44A75;
  --vz-f-berry-ice: #7BB6D9;
  --vz-f-fruit-ice: #A8D8DC;
  --vz-f-fruit:     #E2A86A;
  --vz-f-sour-ice:  #C8D636;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vz-dur-fast: 0ms;
    --vz-dur-base: 0ms;
    --vz-dur-slow: 0ms;
  }
}

/* ── reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--vz-cream); }
body {
  margin: 0;
  background: var(--vz-cream);
  color: var(--vz-ink);
  font: var(--vz-w-regular) var(--vz-fs-body) / var(--vz-lh-body) var(--vz-font-body);
  letter-spacing: var(--vz-tr-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }

/* ── breakpoints (engineering reference) ─────────────────────────
   --vz-bp-sm:  375px  · mobile baseline
   --vz-bp-md:  768px  · tablet
   --vz-bp-lg:  1024px · desktop entry
   --vz-bp-xl:  1280px · canonical desktop
*/