/* TopGun — Shared Design Tokens
   Single source of truth for all CSS custom properties.
   Linked by all site pages to prevent token drift. */

/* ───── DESIGN TOKENS — DARK (default) ───── */
:root,[data-theme="dark"]{
  --bg-page:#09090e;
  --bg-card:#111118;
  --bg-card-hover:#17171f;
  --bg-code:#0d0d14;
  --bg-hero:linear-gradient(160deg,#050507 0%,#09090f 25%,#0d0d18 48%,#0f0f1c 62%,#0a0a14 80%,#060608 100%);
  --accent:#f59e0b;
  --accent-light:#fbbf24;
  --accent-glow:rgba(245,158,11,0.18);
  --accent2:#d97706;
  --accent3:#b45309;
  --gradient-brand:linear-gradient(135deg,#b45309,#d97706,#f59e0b,#fbbf24);
  --gradient-btn:linear-gradient(135deg,#92400e 0%,#b45309 35%,#d97706 65%,#92400e 100%);
  --gradient-btn-hover:linear-gradient(135deg,#b45309 0%,#d97706 35%,#f59e0b 65%,#b45309 100%);
  --chrome-gradient:linear-gradient(90deg,#f59e0b 0%,#fde68a 9%,#f59e0b 18%,#d97706 27%,#fbbf24 36%,#fde68a 43%,#f59e0b 51%,#d97706 59%,#fbbf24 68%,#f59e0b 76%,#d97706 86%,#b45309 100%);
  --green:#059669;
  --amber:#f59e0b;
  --red:#dc2626;
  --cyan:#0891b2;
  --text-primary:#f1f5f9;
  --text-secondary:#c0cfde;
  --text-dim:#64748b;
  --border:#1e1e2e;
  --border-hover:#3d3d5e;
  --radius:12px;
  --radius-lg:20px;
  --radius-sm:8px;
  --font-heading:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,sans-serif;
  --font-sans:var(--font-body);
  --font-mono:'Roboto Mono',monospace;
  --shadow-lg:0 20px 60px rgba(0,0,0,.7);
  --shadow-glow:0 0 40px rgba(245,158,11,0.08);
  --shadow-btn:0 4px 20px rgba(245,158,11,0.3);
  --shadow-btn-hover:0 8px 30px rgba(245,158,11,0.45);
  --nav-bg:rgba(9,9,14,.92);
  --nav-mobile-bg:rgba(9,9,14,.99);
  --section-alt:rgba(17,17,24,.7);
  --card-top:rgba(245,158,11,0.6);
  --hero-glow:rgba(245,158,11,0.06);
  --grad-1:#92400e;
  --grad-2:#b45309;
  --grad-3:#d97706;
  --grad-4:#f59e0b;
  --accent-a03:rgba(245,158,11,.03);
  --accent-a06:rgba(245,158,11,.06);
  --accent-a10:rgba(245,158,11,.10);
  --accent-a15:rgba(245,158,11,.15);
  --accent-a20:rgba(245,158,11,.20);
  --accent-a25:rgba(245,158,11,.25);
  --accent-a30:rgba(245,158,11,.30);
  --accent-a40:rgba(245,158,11,.40);
  --amber-a08:rgba(245,158,11,.08);
  --amber-a12:rgba(245,158,11,.12);
  --amber-a15:rgba(245,158,11,.15);
  --amber-a20:rgba(245,158,11,.20);
  --accent2-a08:rgba(217,119,6,.08);
  --accent2-a25:rgba(217,119,6,.25);
  --red-a08:rgba(220,38,38,.08);
  --red-a12:rgba(220,38,38,.12);
  --red-a20:rgba(220,38,38,.20);
  --green-a06:rgba(5,150,105,.06);
  --green-a12:rgba(5,150,105,.12);
  --green-a20:rgba(5,150,105,.20);
  --cyan-a12:rgba(8,145,178,.12);
}

/* ───── LIGHT THEME ───── */
[data-theme="light"]{
  --bg-page:#fafaf7;
  --bg-card:#ffffff;
  --bg-card-hover:#f5f5ef;
  --bg-code:#f0f0e8;
  --bg-hero:linear-gradient(160deg,#f5f5ef 0%,#f8f8f2 25%,#fafaf5 48%,#fcfcf8 62%,#f8f8f2 80%,#f2f2ec 100%);
  --accent:#b45309;
  --accent-light:#92400e;
  --accent-glow:rgba(180,83,9,0.1);
  --accent2:#d97706;
  --accent3:#f59e0b;
  --chrome-gradient:linear-gradient(90deg,#92400e 0%,#d97706 9%,#b45309 18%,#78350f 27%,#d97706 36%,#f59e0b 43%,#b45309 51%,#92400e 59%,#d97706 68%,#b45309 76%,#78350f 86%,#92400e 100%);
  --green:#059669;
  --amber:#b45309;
  --red:#dc2626;
  --cyan:#0891b2;
  --text-primary:#1a1a0e;
  --text-secondary:#44440a;
  --text-dim:#78786a;
  --border:#e5e5d0;
  --border-hover:#c8a870;
  --nav-bg:rgba(250,250,247,.92);
  --nav-mobile-bg:rgba(250,250,247,.99);
  --section-alt:rgba(240,240,232,.6);
  --shadow-lg:0 20px 60px rgba(0,0,0,.10);
  --shadow-glow:0 0 40px rgba(180,83,9,0.08);
  --shadow-btn:0 4px 20px rgba(180,83,9,0.25);
  --shadow-btn-hover:0 8px 30px rgba(180,83,9,0.35);
  --grad-1:#78350f;
  --grad-2:#92400e;
  --grad-3:#b45309;
  --grad-4:#d97706;
  --hero-glow:rgba(180,83,9,0.04);
  --card-top:rgba(180,83,9,0.45);
  --gradient-btn:linear-gradient(135deg,#78350f 0%,#92400e 35%,#b45309 65%,#78350f 100%);
  --gradient-btn-hover:linear-gradient(135deg,#92400e 0%,#b45309 35%,#d97706 65%,#92400e 100%);
  --accent-a03:rgba(180,83,9,.03);
  --accent-a06:rgba(180,83,9,.06);
  --accent-a10:rgba(180,83,9,.10);
  --accent-a15:rgba(180,83,9,.15);
  --accent-a20:rgba(180,83,9,.20);
  --accent-a25:rgba(180,83,9,.25);
  --accent-a30:rgba(180,83,9,.30);
  --accent-a40:rgba(180,83,9,.40);
  --amber-a08:rgba(180,83,9,.08);
  --amber-a12:rgba(180,83,9,.12);
  --amber-a15:rgba(180,83,9,.15);
  --amber-a20:rgba(180,83,9,.20);
  --accent2-a08:rgba(180,83,9,.08);
  --accent2-a25:rgba(180,83,9,.25);
  --red-a08:rgba(220,38,38,.08);
  --red-a12:rgba(220,38,38,.12);
  --red-a20:rgba(220,38,38,.20);
  --green-a06:rgba(5,150,105,.06);
  --green-a12:rgba(5,150,105,.12);
  --green-a20:rgba(5,150,105,.20);
  --cyan-a12:rgba(8,145,178,.12);
}

/* ───── THEME TRANSITION ───── */
body,nav,section,.feature-card,.layer-card,.install-block,.code-block,.callout{
  transition:background .25s,background-color .25s,border-color .25s,color .25s,box-shadow .25s;
}