/* ═══════════════════════════════════════════════════════════════
   FLUM VAPE — Direction "Bright" Design System (DNA-A)
   flum-vape.com · Greenwood IN warehouse · Authorized US Distributor
   2026-05-23 rebuild — replaces Phase-1 Soft & Casual coral placeholder.

   - Tiffany aqua signal (anchored to brand wordmark)
   - Bricolage Grotesque display + Inter Tight body + JetBrains Mono
   - Soft radii (6/10/16/24), lifted shadows, never pure white bg
   - All tokens scoped under .fl.fl-dna-a (legacy --fl-* aliases kept for
     existing njk components / Alpine references)
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   Direction-independent root tokens (spacing, type scale, motion)
   ──────────────────────────────────────────────────────────────── */
:root {
  /* spacing — 4px base grid */
  --fl-sp-4: 4px;   --fl-sp-8: 8px;   --fl-sp-12: 12px;
  --fl-sp-16: 16px; --fl-sp-20: 20px; --fl-sp-24: 24px;
  --fl-sp-32: 32px; --fl-sp-40: 40px; --fl-sp-56: 56px;
  --fl-sp-80: 80px; --fl-sp-120: 120px; --fl-sp-160: 160px;

  /* containers */
  --fl-cont-narrow:  720px;
  --fl-cont-content: 1120px;
  --fl-cont-wide:    1280px;

  /* type scale — direction picks family in .fl-dna-a scope */
  --fl-fs-mono-xs:   11px;
  --fl-fs-mono:      13px;
  --fl-fs-body-sm:   14px;
  --fl-fs-body:      15px;
  --fl-fs-body-lg:   19px;
  --fl-fs-h4:        17px;
  --fl-fs-h3:        24px;
  --fl-fs-h2:        40px;
  --fl-fs-h2-sm:     32px;
  --fl-fs-h1:        68px;
  --fl-fs-h1-huge:   96px;

  /* line-height */
  --fl-lh-tight:  1.02;
  --fl-lh-snug:   1.18;
  --fl-lh-normal: 1.5;
  --fl-lh-loose:  1.72;

  /* tracking */
  --fl-ls-mono-lo: 0.06em;
  --fl-ls-mono-hi: 0.14em;
  --fl-ls-eyebrow: 0.18em;
  --fl-ls-headline: -0.025em;

  /* radii */
  --fl-rad-0:  0;
  --fl-rad-1:  6px;
  --fl-rad-2:  10px;
  --fl-rad-3:  16px;
  --fl-rad-4:  24px;
  --fl-rad-pill: 999px;

  /* shadows */
  --fl-sh-micro:   0 2px 6px rgba(10,32,36,0.04);
  --fl-sh-card:    0 6px 24px -10px rgba(10,32,36,0.10), 0 1px 0 rgba(214,236,234,1);
  --fl-sh-card-lg: 0 24px 60px -30px rgba(10,32,36,0.18), 0 1px 0 rgba(214,236,234,1);
  --fl-sh-tiffany: 0 12px 32px -16px rgba(58,205,200,0.45);
  --fl-sh-hard:    3px 3px 0 0 rgba(10,32,36,1);

  /* motion */
  --fl-dur-fast: 120ms;
  --fl-dur-base: 200ms;
  --fl-dur-slow: 320ms;
  --fl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ────────────────────────────────────────────────────────────────
   Direction "Bright" — Tiffany blue palette scoped to .fl-dna-a
   .fl is the base reset (always present); .fl-dna-a layers visual
   identity. Pages opt-in by wrapping body in `<div class="fl fl-dna-a">`
   via base.njk.
   ──────────────────────────────────────────────────────────────── */
.fl-dna-a {
  /* palette — anchored to brand wordmark */
  --bg:        #ffffff;
  --bg-soft:   #f0fbfa;   /* washed tiffany — section panels */
  --bg-tint:   #f7fdfc;   /* faintest tiffany */
  --bg-cream:  #ece5d8;   /* page outer band */
  --ink:       #0a2024;   /* deep teal-black, never pure */
  --ink-2:     #2f5258;   /* secondary ink */
  --ink-3:     #6a8a8e;   /* tertiary, captions */
  --rule:      #d6ecea;   /* hairline aqua */
  --rule-2:    #bfdfdb;   /* stronger hairline */
  --signal:    #3acdc8;   /* tiffany aqua — primary brand */
  --signal-dk: #1a8e8a;   /* deep tiffany — hovers, prices */
  --signal-bg: #e6faf8;   /* signal tint background */
  --warm:      #ff6f47;   /* coral — secondary energy / Tank B */
  --warm-dk:   #d84a23;
  --warm-bg:   #fff1ec;
  --sun:       #ffd23f;   /* sunshine highlight, sparing */
  --good:      #2dba8c;
  --warn:      #ff9f1c;

  /* family hues — for flavor chips */
  --fam-fruit:     #ff9f4a;
  --fam-fruit-ice: #5ec9d1;
  --fam-berry:     #e85a8c;
  --fam-berry-ice: #6aa8e0;
  --fam-mint:      #6ed3a8;
  --fam-tropical:  #ffb84a;
  --fam-candy:     #f06aa0;
  --fam-floral:    #d099d5;
  --fam-tobacco:   #b08a5e;

  /* typography */
  --f-display: "Bricolage Grotesque", "Funnel Display", "Inter Tight", system-ui, sans-serif;
  --f-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

/* ────────────────────────────────────────────────────────────────
   Backwards-compat aliases — Phase-1 components (cart-store.js /
   stockwatch / livechat / wpforms-rehydrate / promo-twin) reference
   --fl-paper, --fl-accent, --fl-ink, --fl-font-sans etc.
   Map them to new Direction A tokens so legacy refs don't crash before
   we finish rewriting every component.
   ──────────────────────────────────────────────────────────────── */
:root,
.fl-dna-a {
  --fl-paper:       #f7fdfc;
  --fl-paper-2:     #ffffff;
  --fl-paper-3:     #e6faf8;
  --fl-ink:         #0a2024;
  --fl-ink-2:       #2f5258;
  --fl-ink-muted:   #6a8a8e;
  --fl-rule:        #d6ecea;
  --fl-rule-lite:   #ebf6f4;
  --fl-accent:      #1a8e8a;
  --fl-accent-soft: #e6faf8;
  --fl-accent-dark: #0d6f6b;
  --fl-accent-grad: linear-gradient(135deg, #3acdc8, #1a8e8a);
  --fl-success:     #2dba8c;
  --fl-success-soft:#dcf5ea;
  --fl-accent-cool: #6aa8e0;
  --fl-red:         #ff6f47;
  --fl-red-dark:    #d84a23;
  --fl-warm:        #fff1ec;
  --fl-ok:          #2dba8c;
  --fl-warn:        #ff9f1c;
  --fl-err:         #d84a23;

  --fl-font-display: "Bricolage Grotesque", "Funnel Display", "Inter Tight", system-ui, sans-serif;
  --fl-font-sans:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --fl-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --fl-font-serif:   "Inter Tight", Georgia, serif;

  --fl-fs-xs:    10px;
  --fl-fs-sm:    12px;
  --fl-fs-base:  15px;
  --fl-fs-md:    16px;
  --fl-fs-lg:    18px;
  --fl-fs-xl:    22px;
  --fl-fs-2xl:   28px;
  --fl-fs-3xl:   36px;
  --fl-fs-4xl:   48px;
  --fl-fs-5xl:   64px;
  --fl-fs-6xl:   80px;
  --fl-lh:       1.5;
  --fl-lh-tight: 1.18;
  --fl-lh-display: 1.02;

  --fl-r-xs:   4px;
  --fl-r-sm:   6px;
  --fl-r-md:   10px;
  --fl-r-lg:   16px;
  --fl-r-xl:   16px;
  --fl-r-2xl:  24px;
  --fl-r-pill: 999px;

  --fl-s-1:    4px;
  --fl-s-2:    8px;
  --fl-s-3:    12px;
  --fl-s-4:    16px;
  --fl-s-5:    24px;
  --fl-s-6:    32px;
  --fl-s-7:    40px;
  --fl-s-8:    48px;
  --fl-s-9:    56px;
  --fl-s-10:   64px;
  --fl-s-12:   80px;
  --fl-s-14:   96px;

  --fl-max-w:     1280px;
  --fl-max-w-nb:  720px;
  --fl-pad-x:     28px;

  --fl-bd:        1px solid #d6ecea;
  --fl-bd-lite:   1px solid #ebf6f4;
  --fl-bd-accent: 1px solid #3acdc8;

  --fl-h2-track:  -0.025em;
  --fl-label-track: 0.1em;

  --fl-shadow-sm: 0 2px 6px rgba(10,32,36,0.04);
  --fl-shadow-md: 0 6px 24px -10px rgba(10,32,36,0.10);
  --fl-shadow-lg: 0 24px 60px -30px rgba(10,32,36,0.18);
}

/* ────────────────────────────────────────────────────────────────
   Global reset (applies to all pages)
   ──────────────────────────────────────────────────────────────── */
html, body {
  background: #ffffff;
  color: #0a2024;
  font-family: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
}
* { box-sizing: border-box; }
img, svg { max-width: 100%; height: auto; display: block; }
[x-cloak] { display: none !important; }
::selection { background: #e6faf8; color: #0a2024; }