/* ============================================================
   CAMO ENERGY — themes.css
   Five design systems, switched via html[data-style="1..5"].
   Each sets the base tokens + a few structural/decorative moves.
   3 SAFE: 1 Engineered · 2 Retail Bold · 3 Editorial
   2 BOLD: 4 Dual Split · 5 Proof HUD
   ============================================================ */

/* ============================================================
   STYLE 1 — ENGINEERED  (SAFE) — dark, technical, spec-panel
   ============================================================ */
html[data-style="1"]{
  --bg:#070908; --surface:#0d100d; --surface-2:#12160f;
  --ink:#eef3ea; --ink-2:#8c968b; --ink-3:#59614f;
  --accent:#4FE82E; --accent-ink:#04120a; --accent-2:#E8B93A; --accent-2-ink:#1a1305;
  --line:#1e2419; --line-2:#2a3122; --chrome:#B8B8B8;
  --font-display:800 1em/1 system-ui,"Helvetica Neue",Arial,sans-serif;
  --dspace:-.03em; --dcase:none; --radius:12px; --btn-radius:8px; --wm-case:uppercase; --wm-space:.16em;
  --edge-bg:linear-gradient(160deg,#0c130a,#050705); --edge-ink:#eef3ea;
  --glow-bg:linear-gradient(160deg,#12160f,#0a0d08); --glow-ink:#eae3d2;
}
html[data-style="1"] .cross-glow .eyebrow{color:var(--accent-2)}
html[data-style="1"] .cross-glow h2,html[data-style="1"] .cross-glow p{color:var(--glow-ink)}
html[data-style="1"] .eyebrow::before{content:"// "}
html[data-style="1"] .hero .decor,html[data-style="1"] .section.alt .decor{
  background:radial-gradient(60% 80% at 85% 8%,rgba(79,232,46,.12),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.02) 38px 39px)}

/* ============================================================
   STYLE 2 — RETAIL BOLD  (SAFE) — bright, big, conversion-first
   ============================================================ */
html[data-style="2"]{
  --bg:#ffffff; --surface:#f4f5f2; --surface-2:#eef0ea;
  --ink:#0d0f0e; --ink-2:#5a615b; --ink-3:#8b918a;
  --accent:#2AA815; --accent-ink:#ffffff; --accent-2:#C9962E; --accent-2-ink:#ffffff;
  --line:#e4e6e0; --line-2:#d4d7cf; --chrome:#9aa08f;
  --font-display:900 1em/.95 "Arial Black","Helvetica Neue",system-ui,sans-serif;
  --dspace:-.04em; --dcase:uppercase; --radius:22px; --btn-radius:999px; --wm-case:uppercase; --wm-space:-.02em;
  --edge-bg:linear-gradient(140deg,#2AA815,#0f7a06); --edge-ink:#ffffff;
  --glow-bg:linear-gradient(140deg,#F4E9D8,#e9d9bd); --glow-ink:#3a2f14;
}
html[data-style="2"] .site-nav .cart{color:#fff; background:#0d0f0e}
html[data-style="2"] .cross-edge .eyebrow{color:#eaffe3}
html[data-style="2"] .cross-glow .eyebrow{color:#8a6a12}
html[data-style="2"] .btn{box-shadow:0 10px 24px -10px rgba(42,168,21,.55)}
html[data-style="2"] .pcard{border:none; color:#fff}
html[data-style="2"] .pcard.edge{background:linear-gradient(140deg,#2AA815,#0f7a06)}
html[data-style="2"] .pcard.glow{background:linear-gradient(140deg,#F4E9D8,#e9d9bd); color:#3a2f14}
html[data-style="2"] .pcard.glow .plabel{color:#8a6a12}
html[data-style="2"] .pcard.glow p{color:#6b5a34}
html[data-style="2"] .hero .decor{background:radial-gradient(70% 90% at 100% 0%,rgba(42,168,21,.1),transparent 55%)}

/* ============================================================
   STYLE 3 — EDITORIAL  (SAFE) — light, serif, airy, premium
   ============================================================ */
html[data-style="3"]{
  --bg:#efece4; --surface:#f7f5ee; --surface-2:#f0ede4;
  --ink:#1e211c; --ink-2:#5c6153; --ink-3:#8a8d7e;
  --accent:#8a6a12; --accent-ink:#f7f5ee; --accent-2:#b98a2a; --accent-2-ink:#26200f;
  --line:#dcd8cc; --line-2:#cec9ba; --chrome:#a59d88;
  --font-display:600 1em/1.02 Georgia,"Times New Roman",serif;
  --dspace:-.01em; --dcase:none; --radius:4px; --btn-radius:2px; --wm-case:uppercase; --wm-space:.2em;
  --edge-bg:linear-gradient(160deg,#23261f,#171a14); --edge-ink:#f2f0e6;
  --glow-bg:linear-gradient(160deg,#f7f2e8,#ece2d0); --glow-ink:#241a10;
}
html[data-style="3"] .site-nav .cart,html[data-style="3"] .btn{background:#1e211c; color:#f7f5ee}
html[data-style="3"] .btn.ghost{background:transparent; color:#1e211c; border-color:#1e211c}
html[data-style="3"] .cross-edge .eyebrow{color:#c9b06a}
html[data-style="3"] .stat .v{color:var(--ink)}
html[data-style="3"] .hero{padding-top:clamp(64px,10vw,110px)}

/* ============================================================
   STYLE 4 — DUAL SPLIT  (BOLD) — the Edge/Glow duality as layout
   ============================================================ */
html[data-style="4"]{
  --bg:#0a0a0a; --surface:#111; --surface-2:#151515;
  --ink:#f4f4f2; --ink-2:#a6a29a; --ink-3:#6a665e;
  --accent:#4FE82E; --accent-ink:#04120a; --accent-2:#E8B93A; --accent-2-ink:#1a1305;
  --line:#242424; --line-2:#333; --chrome:#B8B8B8;
  --font-display:800 1em/.98 system-ui,"Helvetica Neue",Arial,sans-serif;
  --dspace:-.03em; --dcase:none; --radius:0px; --btn-radius:0px; --wm-case:uppercase; --wm-space:.16em;
  --edge-bg:linear-gradient(160deg,#0c130a,#050705); --edge-ink:#eef3ea;
  --glow-bg:linear-gradient(160deg,#faf3ea,#efe2cd); --glow-ink:#241a10;
}
/* amplify the split: taller, hard seam, hover-expand */
html[data-style="4"] .crossroads{min-height:min(84vh,860px)}
html[data-style="4"] .cross-side{transition:flex-grow .45s ease}
html[data-style="4"] .crossroads:hover .cross-edge{flex-grow:.85}
html[data-style="4"] .crossroads:hover .cross-glow{flex-grow:.85}
html[data-style="4"] .crossroads .cross-side:hover{flex-grow:1.3}
html[data-style="4"] .seam span{border-radius:0; font-weight:800}
/* dual product cards become full-bleed halves */
html[data-style="4"] .duo{gap:0}
html[data-style="4"] .pcard{border-radius:0; border:none}
html[data-style="4"] .pcard.edge{background:#0c130a}
html[data-style="4"] .pcard.glow{background:#faf3ea; color:#241a10}
html[data-style="4"] .pcard.glow .plabel{color:#8a6a12}
html[data-style="4"] .pcard.glow p{color:#6b5a3f}
html[data-style="4"] .section .sub{margin-left:auto;margin-right:auto}
html[data-style="4"] .stats{max-width:960px;margin:0 auto}
@media(prefers-reduced-motion:reduce){html[data-style="4"] .cross-side{transition:none}}

/* ============================================================
   STYLE 5 — PROOF HUD  (BOLD) — performance heads-up display
   ============================================================ */
html[data-style="5"]{
  --bg:#04070a; --surface:#070d12; --surface-2:#0a1218;
  --ink:#d6f5e6; --ink-2:#5f8a77; --ink-3:#3f5b4e;
  --accent:#39ffa0; --accent-ink:#031008; --accent-2:#ffcf4d; --accent-2-ink:#1a1305;
  --line:#123024; --line-2:#1c4633; --chrome:#39ffa0;
  --font-display:700 1em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-body:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --dspace:.02em; --dcase:uppercase; --radius:6px; --btn-radius:6px; --wm-case:uppercase; --wm-space:.3em;
  --edge-bg:linear-gradient(160deg,#06120c,#04070a); --edge-ink:#d6f5e6;
  --glow-bg:linear-gradient(160deg,#0d0f06,#080a05); --glow-ink:#ffe9a8;
}
html[data-style="5"] body{position:relative}
html[data-style="5"] body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(rgba(57,255,160,.035) 1px,transparent 1px) 0 0/100% 3px,
    radial-gradient(90% 60% at 50% -10%,rgba(57,255,160,.07),transparent 60%)}
html[data-style="5"] .wrap,html[data-style="5"] .crossroads{position:relative;z-index:1}
html[data-style="5"] .site-nav .wm::before{content:"◉ "}
html[data-style="5"] .eyebrow::before{content:"▸ SYS.READY // "}
html[data-style="5"] .cross-glow .eyebrow{color:var(--accent-2)}
html[data-style="5"] .cross-glow h2,html[data-style="5"] .cross-glow p{color:var(--glow-ink)}
html[data-style="5"] .hero h1,html[data-style="5"] .cross-side h2{text-shadow:0 0 24px rgba(57,255,160,.3)}
html[data-style="5"] .pcard,html[data-style="5"] .stat,html[data-style="5"] .buy{
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2),0 0 34px -20px var(--accent)}
html[data-style="5"] .stat::before{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);animation:camo-blip 1.6s infinite}
html[data-style="5"] .stat .v{text-shadow:0 0 14px rgba(57,255,160,.4)}
@keyframes camo-blip{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){html[data-style="5"] .stat::before{animation:none}}

/* ---------- split hero per-style tweaks ---------- */
/* Style 3 accent is a brown-gold; keep EDGE wordmark green for legibility on video */
html[data-style="3"] .split-edge{--hero-edge:#3fd424}
html[data-style="3"] .split-glow{--hero-glow:#e8b93a}
html[data-style="3"] .nav3 .nav-cart{background:#1e211c; color:#f7f5ee}
html[data-style="2"] .nav3 .nav-cart{color:#fff; background:#0d0f0e}
html[data-style="4"] .split-hero{height:calc(100svh - var(--nav-h)); min-height:660px}
html[data-style="4"] .split-seam{width:3px}
html[data-style="5"] .split-word{letter-spacing:.02em}
html[data-style="5"] .split-sub,html[data-style="5"] .split-label{font-family:var(--font-mono)}
html[data-style="5"] .nav3{position:relative;z-index:1}
html[data-style="5"] .split-hero{position:relative;z-index:1}