/* ============================================================
   SUPA VAPES DESIGN TOKENS — single source of truth
   Port of the Shopify system: snippets/css-variables.liquid +
   sv-darkmode.liquid (vars flip under html[data-sv-theme=dark])
   Verify every value against _Visual Reference screenshots.
   ============================================================ */
:root {
  /* Brand palette (fixed, mode-independent) */
  --sv-navy: #15233F;          /* headers, dark surfaces, text-on-cream accents */
  --sv-navy-deep: #15171C;     /* alt near-black navy (TV/banner uses) */
  --sv-cream: #FAEEDA;         /* pills/chips background */
  --sv-cream-text: #633806;    /* text on cream */
  --sv-gold: #EF9F27;          /* CTAs, deals, sticker band */
  --sv-nf-green: #35c775;      /* Nicotine-Free identity */
  --sv-nf-green-hover: #4ade80;
  --sv-nf-green-textdark: #08351d;   /* dark text on green (fd chips) */
  --sv-nf-green-textnavy: #0c1426;   /* dark text on green (card chips) */
  --sv-lux-bg: #0d0d10;                    /* luxury near-black */
  --sv-lux-hairline: rgba(198,161,91,.22); /* luxury gold hairline border */
  --sv-lux-gold: #c6a15b;                  /* luxury gold (sheen base) */

  /* Layout */
  --sv-max-width: 1400px;
  --sv-radius-card: 16px;
  --sv-radius-chip: 999px;
  --sv-radius-btn: 8px;
  --sv-font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sv-font-serif: Georgia, 'Times New Roman', serif; /* luxury headings — match zip's exact stack on integration */

  /* LIGHT MODE surface tokens (flipped in dark below) */
  --sv-bg: #ffffff;
  --sv-bg-soft: #f5f5f5;       /* footer/soft sections in light */
  --sv-card: #ffffff;
  --sv-card-grad: #ffffff;     /* dark flips this to a top-lit navy gradient */
  --sv-text: #15233F;
  --sv-text-muted: #5a6474;
  --sv-border: rgba(21,35,63,.12);

  /* HEADER — full-adaptive (Victor 2026-07-09): cream/white bar by day,
     navy by night. Identity nav colors (NF green, Lux gold) are unaffected. */
  --sv-header-bg: #fffdf8;
  --sv-header-text: #15233F;
  --sv-header-muted: #4a5568;
  --sv-header-border: #e7e0d1;
  --sv-header-search-bg: #f4efe4;
  --sv-header-search-border: rgba(21,35,63,.14);
  --sv-logo-accent: #e0244a;   /* "SUPA" */
  --sv-logo-main: #15233F;     /* "VAPES" */

  /* ADAPTIVE BILLBOARD PANEL — the navy gradient cards (starter feature etc.)
     become warm white cards in light mode. The Mix&Match HERO trio stays navy
     in both modes on purpose (brand anchor) and does NOT use these. */
  --sv-panel-bg: #ffffff;
  --sv-panel-border: #e8e2d5;
  --sv-panel-shadow: 0 4px 18px rgba(21,35,63,.07);
  --sv-panel-text: #15233F;
  --sv-panel-muted: #5b6677;
  --sv-panel-line: rgba(21,35,63,.18);   /* hairlines that were white-alpha */
  --sv-panel-soft: rgba(21,35,63,.06);   /* hover fills that were white-alpha */
  --sv-panel-price: #15233F;             /* big price: navy by day, gold by night */

  /* HERO TRIO (Mix&Match + reviews + referral) — light = cream/white cards
     w/ gold accents (Victor-approved mockup 2026-07-09); dark = navy gradients. */
  --sv-hero-bg: #fffdf8;
  --sv-hero-border: #f2ad44;
  --sv-hero-shadow: 0 4px 18px rgba(21,35,63,.08);
  --sv-hero-text: #15233F;
  --sv-hero-muted: #5b6677;
  --sv-hero-eye: #9a6b12;
  --sv-hero-glow: none;
  --sv-rev-bg: #fffdf8;
  --sv-rev-border: #e8e2d5;
  --sv-rev-shadow: 0 3px 14px rgba(21,35,63,.07);
  --sv-rev-hovershadow: 0 10px 26px rgba(21,35,63,.13);
  --sv-rev-num: #15233F;
  --sv-rev-line: rgba(21,35,63,.16);
  --sv-ref-bg: #fdf4e3;
  --sv-ref-border: #f2ad44;

  /* NF homepage BAND — light = soft mint (still "the green corner"); the NF
     PAGES/mega stay deep green in both modes by design. */
  --sv-nfband-bg: #eef9f1;
  --sv-nfband-border: #b7e4c7;
  --sv-nfband-eye: #15803d;
  --sv-nfband-h: #0d3321;
  --sv-nfband-sub: #4d7c5f;
  --sv-nfband-btn-bg: #16a34a;
  --sv-nfband-btn-tx: #ffffff;
  --sv-nfband-tile-bg: #ffffff;
  --sv-nfband-tile-border: #b7e4c7;
  --sv-nfband-t0: #0d3321;
  --sv-nfband-tt: #16a34a;

  /* PAGE TITLE BANDS (collection banners, blog hero, brand directory) —
     light = cream band w/ navy title + gold rule; dark = navy gradient. */
  --sv-band-bg: #fdf4e3;
  --sv-band-border: #f0dfc0;
  --sv-band-text: #15233F;
  --sv-band-sub: #5b6677;
  --sv-band-rule: block;   /* gold underline shows in light only */
}

html[data-sv-theme="dark"] {
  /* TWILIGHT NAVY + CANDLELIGHT — Victor-approved dark palette (2026-07-09).
     One navy world lit warmly: rich navy floor (not grey), top-lit cards with
     gold hairlines, warm off-white text, real amber glow on the billboards.
     Gold hairlines need >=~.24 alpha over navy or the blue channel wins and
     they render as cool grey. Amber glows over navy need ~.26+ (or a lighter
     warmer glow color) for the same reason. */
  --sv-bg: #0C1220;
  --sv-bg-soft: #10182A;
  --sv-card: #1C2643;          /* solid — some rules use it as background-color */
  --sv-card-grad: linear-gradient(180deg, #1D2846 0%, #1A2340 100%); /* top-lit large cards */
  --sv-text: #F4F1E9;          /* warm off-white, not blue-white */
  --sv-text-muted: #C0BBAD;    /* warm greige, not blue-gray */
  --sv-border: rgba(242,173,68,.24);

  --sv-header-bg: var(--sv-navy);
  --sv-header-text: #ffffff;
  --sv-header-muted: #c7d0e0;
  --sv-header-border: transparent;
  --sv-header-search-bg: rgba(255,255,255,.06);
  --sv-header-search-border: rgba(255,255,255,.18);
  --sv-logo-accent: #e35d6a;
  --sv-logo-main: #ffffff;

  --sv-panel-bg: radial-gradient(120% 140% at 100% 0%, rgba(245,180,85,.30) 0%, rgba(0,0,0,0) 52%), linear-gradient(158deg, #26315A 0%, #0C1428 100%);
  --sv-panel-border: rgba(242,173,68,.32);
  --sv-panel-shadow: 0 20px 46px -20px rgba(6,10,26,.65);
  --sv-panel-text: #ffffff;
  --sv-panel-muted: #ccd3e4;
  --sv-panel-line: rgba(255,255,255,.2);
  --sv-panel-soft: rgba(255,255,255,.08);
  --sv-panel-price: #f2ad44;

  --sv-hero-bg: radial-gradient(120% 140% at 0% 0%, rgba(245,180,85,.30) 0%, rgba(0,0,0,0) 52%), linear-gradient(158deg, #26315A 0%, #0C1428 100%);
  --sv-hero-border: rgba(242,173,68,.32);
  --sv-hero-shadow: none;
  --sv-hero-text: #ffffff;
  --sv-hero-muted: #ccd3e4;
  --sv-hero-eye: #f2ad44;
  --sv-hero-glow: radial-gradient(circle at 90% 4%, rgba(245,180,85,.28), rgba(0,0,0,0) 48%);
  --sv-rev-bg: radial-gradient(120% 140% at 50% 0%, rgba(245,180,85,.22) 0%, rgba(0,0,0,0) 55%), linear-gradient(158deg, #26315A 0%, #0C1428 100%);
  --sv-rev-border: rgba(242,173,68,.32);
  --sv-rev-shadow: 0 20px 46px -20px rgba(6,10,26,.65), inset 0 1px 0 rgba(255,255,255,.06);
  --sv-rev-hovershadow: 0 30px 60px -22px rgba(6,10,26,.75);
  --sv-rev-num: #f2ad44;
  --sv-rev-line: rgba(255,255,255,.16);
  --sv-ref-bg: radial-gradient(120% 140% at 50% 0%, rgba(245,180,85,.22) 0%, rgba(0,0,0,0) 55%), linear-gradient(158deg, #26315A 0%, #0C1428 100%);
  --sv-ref-border: rgba(242,173,68,.32);

  --sv-nfband-bg: #0f1a13;
  --sv-nfband-border: rgba(53,199,117,.35);
  --sv-nfband-eye: #4ade80;
  --sv-nfband-h: #eef4ef;
  --sv-nfband-sub: #a9b4ac;
  --sv-nfband-btn-bg: #35c775;
  --sv-nfband-btn-tx: #08351d;
  --sv-nfband-tile-bg: #0b120d;
  --sv-nfband-tile-border: rgba(53,199,117,.25);
  --sv-nfband-t0: #eef4ef;
  --sv-nfband-tt: #35c775;

  --sv-band-bg: radial-gradient(120% 140% at 100% 0%, rgba(245,180,85,.26) 0%, rgba(0,0,0,0) 52%), linear-gradient(158deg, #26315A 0%, #0C1428 100%);
  --sv-band-border: rgba(242,173,68,.30);
  --sv-band-text: #ffffff;
  --sv-band-sub: #c7d0e0;
  --sv-band-rule: none;
}

/* NF corner local palette (both modes — the corner is dark-green themed by design) */
:root {
  --sv-nf-band-bg: #0f1a13;
  --sv-nf-band-border: rgba(53,199,117,.35);
  --sv-nf-tile-bg: #0b120d;
  --sv-nf-tile-border: rgba(53,199,117,.25);
  --sv-nf-text-light: #eef4ef;
  --sv-nf-text-muted: #a9b4ac;
}

/* Base chip/badge geometry — mirrors .svb-tag / .fd__tag from Shopify */
.svb-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font: 600 10.5px/1 var(--sv-font);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--sv-radius-chip);
  pointer-events: none;
}
.svb-tag--stack2 { top: 34px; } /* second chip stacks below the first (0mg option under FREEBASE) */
.svb-tag--type   { background: var(--sv-cream); color: var(--sv-cream-text); }     /* FREEBASE / SALT */
.svb-tag--bogo   { background: var(--sv-gold);  color: var(--sv-navy); }
.svb-tag--save   { background: var(--sv-gold);  color: var(--sv-navy); }
.svb-tag--iced   { background: #7dd3fc; color: #082f49; }  /* VERIFY exact ICED colors vs sv-featured-deals.liquid in zip */
.svb-tag--nf     { background: var(--sv-nf-green); color: var(--sv-nf-green-textnavy); } /* "0mg option" */

/* Luxury card shell — port of .svlx3__card */
.sv-lux-card {
  width: min(var(--sv-max-width), calc(100% - 40px));
  margin: 14px auto 0;
  border: 1px solid var(--sv-lux-hairline);
  border-radius: var(--sv-radius-card);
  background: var(--sv-lux-bg);
  overflow: hidden;
}

/* Gold sheen animation — port of the Luxury nav/price pill sheen */
@keyframes sv-lux-sheen {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
.sv-lux-sheen {
  background-image: linear-gradient(100deg, transparent 20%, rgba(255,236,190,.55) 50%, transparent 80%);
  background-size: 60% 100%; background-repeat: no-repeat;
  animation: sv-lux-sheen 2.8s ease-in-out infinite; /* VERIFY timing vs sv-lux-nav.liquid in zip */
}