/* ─────────────────────────────────────────────────────────────────────────
 * nexavapes.com · tokens.css — "Citrus Energy" DNA (Direction D)
 *
 * Visual system delivered 2026-05-19, applied to all 14 archetypes.
 *
 *   • Signal orange     #ff7a1a (with deep #e0590a, pale #ffe6cf, mist #fff3e6)
 *   • Ink               #1a1612 (warm carbon — not pure black)
 *   • Cream             #faf7f2 (warm paper bg)
 *   • 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           orange-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) ──────────────────────── */
  --nx-orange:       #ff7a1a;
  --nx-orange-deep:  #e0590a;
  --nx-orange-pale:  #ffe6cf;
  --nx-orange-mist:  #fff3e6;

  /* ── SUBSTRATE ─────────────────────────────────────────────── */
  --nx-cream:        #faf7f2;
  --nx-paper:        #ffffff;
  --nx-paper-deep:   #f7f8fa;

  /* ── INK ───────────────────────────────────────────────────── */
  --nx-ink:          #1a1612;
  --nx-ink-2:        #5a4f45;
  --nx-ink-3:        #8a7e72;
  --nx-ink-4:        #b8ada0;
  --nx-rule:         #ebe4d8;
  /* Aliases — checkout/order-received/age-verify CSS references these names;
     map to canonical tokens so those pages render styled (P5 fix). */
  --nx-accent:       #ff7a1a;
  --nx-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nx-ink-muted:    #8a7e72;
  --nx-paper-2:      #ffffff;
  --nx-rule-lite:    #ebe4d8;
  --nx-yellow:       #ffce3a;
  --nx-hair:         rgba(26, 22, 18, 0.10);
  --nx-hair-2:       rgba(26, 22, 18, 0.18);

  /* ── BACKWARD-COMPAT BRAND ALIASES (preserve existing JS refs) ─ */
  --nx-brand:        #ff7a1a;
  --nx-brand-deep:   #e0590a;
  --nx-brand-soft:   #ffe6cf;
  --nx-red:          #ff7a1a;
  --nx-red-deep:     #e0590a;
  --nx-paper-warm:   #fff3e6;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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