/* variables.css — design tokens. Dark is the primary identity; light is a
   deliberately separate, subtler palette ([data-theme="light"]).
   Header, footer and hero are intentionally always dark (--chrome-*) so the
   official logo (opaque black background) is shown untouched on its own color. */
:root{
  --bg:#070b14; --surface:#0d1424; --surface-2:#131c33; --border:#223052;
  --text:#f3f6fb; --muted:#a8b3c8; --faint:#8190ad;

  --primary:#2f8fff; --primary-hover:#5aa8ff; --on-primary:#04101f;
  --cyan:#19d3ff; --violet:#9b73ff; --teal:#19d3c5; --amber:#ffb020; --coral:#ff6b87; --green:#34d399;
  --grad-brand:linear-gradient(135deg,#2f8fff 0%,#19d3ff 100%);
  --grad-hot:linear-gradient(135deg,#2f8fff 0%,#9b73ff 55%,#ff6b87 100%);
  --glow:0 8px 30px rgba(47,143,255,.38);
  --shadow:0 18px 50px rgba(0,0,0,.45);

  --danger:#ff7a8a; --success:#34d399;

  /* always-dark chrome */
  --chrome-bg:#000000; --chrome-text:#f3f6fb; --chrome-muted:#a8b3c8; --chrome-border:#1b2742;

  --font-display:"Exo 2","Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --fs-100:.8125rem; --fs-200:.9375rem; --fs-300:1.0625rem; --fs-400:1.1875rem;
  --fs-500:1.5rem; --fs-600:2rem; --fs-700:2.75rem; --fs-800:3.75rem;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem; --sp-9:6.5rem;
  --max:1200px; --r-sm:8px; --r-md:14px; --r-lg:22px;
  --ease:cubic-bezier(.4,0,.2,1);
}
:root[data-theme="light"]{
  --bg:#f3f6fc; --surface:#ffffff; --surface-2:#e9eff9; --border:#d3dcee;
  --text:#0d1526; --muted:#46557a; --faint:#5b6a8c;
  --primary:#0b63d6; --primary-hover:#0850b0; --on-primary:#ffffff;
  --cyan:#0a7ea4; --violet:#6636d9; --teal:#0b7f77; --amber:#935d00; --coral:#c2314f; --green:#127753;
  --grad-brand:linear-gradient(135deg,#0b63d6 0%,#0877a6 100%);
  --glow:0 8px 24px rgba(11,99,214,.25);
  --shadow:0 14px 40px rgba(13,21,38,.10);
  --danger:#c2314f; --success:#127753;
}

/* Always-dark surfaces (header, footer, hero, bands) keep the dark palette in
   BOTH themes, so accent colors keep their contrast on these backgrounds. */
.site-header,.site-footer,.utility-bar,.mobile-menu,.hero,.page-hero,.video-band,.cta-band{
  --bg:#070b14; --surface:#0d1424; --surface-2:#131c33; --border:#223052;
  --text:#f3f6fb; --muted:#a8b3c8; --faint:#8190ad;
  --primary:#2f8fff; --cyan:#19d3ff; --violet:#9b73ff; --teal:#19d3c5; --amber:#ffb020; --coral:#ff6b87;
}