/* ─────────────────────────────────────────────────────────────────────────
 * foggers-vape.com · tokens.css — "Citrus Energy" DNA (Direction D)
 *
 * Visual system delivered 2026-05-19, applied to all 14 archetypes.
 *
 *   • Signal teal       #e8a317 (with deep #a8730a, pale #fbe7b8, mist #fdf3dc)
 *   • Ink               #1d2126 (cool carbon — not pure black)
 *   • Cool paper        #fbfaf7 (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) ──────────────────────── */
  --fq-signal:       #e8a317;
  --fq-signal-deep:       #a8730a;
  --fq-signal-pale:       #fbe7b8;
  --fq-signal-mist:       #fdf3dc;

  /* ── SUBSTRATE ─────────────────────────────────────────────── */
  --fq-cream:       #fbfaf7;
  --fq-paper:       #ffffff;
  --fq-paper-deep:       #f2efe7;

  /* ── INK ───────────────────────────────────────────────────── */
  --fq-ink:       #1d2126;
  --fq-ink-2:       #4a525b;
  --fq-ink-3:       #7b838c;
  --fq-ink-4:       #a9b3b9;
  --fq-rule:       #e3e0d8;
  /* Aliases — checkout/order-received/age-verify CSS references these names;
     map to canonical tokens so those pages render styled (P5 fix). */
  --fq-accent:       #e8a317;
  --fq-font-sans:    "Source Sans 3", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fq-ink-muted:       #7b838c;
  --fq-paper-2:       #ffffff;
  --fq-rule-lite:       #e3e0d8;
  --fq-yellow:       #f5b62e;
  --fq-hair:         rgba(26, 22, 18, 0.10);
  --fq-hair-2:       rgba(26, 22, 18, 0.18);

  /* ── BACKWARD-COMPAT BRAND ALIASES (preserve existing JS refs) ─ */
  --fq-brand:       #e8a317;
  --fq-brand-deep:       #a8730a;
  --fq-brand-soft:       #fbe7b8;
  --fq-red:       #e8a317;
  --fq-red-deep:       #a8730a;
  --fq-paper-warm:       #fdf3dc;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fq-cream); }
body {
  margin: 0;
  background: var(--fq-cream);
  color: var(--fq-ink);
  font: var(--fq-w-regular) var(--fq-fs-body) / var(--fq-lh-body) var(--fq-font-body);
  letter-spacing: var(--fq-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) ─────────────────────────
   --fq-bp-sm:  375px  · mobile baseline
   --fq-bp-md:  768px  · tablet
   --fq-bp-lg:  1024px · desktop entry
   --fq-bp-xl:  1280px · canonical desktop
*/