/* ==========================================================================
   Spexo — Design Tokens
   Central place for color, radius, and spacing variables used across
   every stylesheet (header, footer, main, pages). Because nearly every
   surface in this project (panels, borders, text, accents) is already
   built on these variables, switching --theme just by overriding this one
   file's tokens re-themes almost the entire site automatically — see
   :root[data-theme="light"] below.
   ========================================================================== */
:root{
  color-scheme: dark;

  /* ---- Dark theme (default) ---- */
  --bg-0:#04060b;
  --panel:rgba(16,24,39,0.55);
  --panel-solid:#0b1120;
  --panel-border:rgba(126,163,255,0.14);
  --panel-border-hi:rgba(126,203,255,0.35);
  --cyan:#2dd9e8;
  --blue:#3f7bff;
  --violet:#8b7bff;
  --text-hi:#eaf1fb;
  --text-mid:#9fb0c9;
  --text-low:#5c6c85;
  --ok:#33e0a1;
  --warn:#ffb454;
  --err:#ff6b6b;

  /* Surface accents that used to be hardcoded rgba(255,255,255,x) values
     scattered across stylesheets — centralized here so they flip cleanly
     between themes instead of "disappearing" on a light background. */
  --header-bg:rgba(4,6,11,0.72);
  --footer-tint:rgba(63,123,255,0.03);
  --hairline:rgba(255,255,255,0.06);
  --hairline-hi:rgba(255,255,255,0.08);
  --surface-hover:rgba(255,255,255,0.04);
  --surface-hover-soft:rgba(255,255,255,0.02);
  --ambient-opacity:0.5;
  --gauge-grad-1:#ffffff;
  --gauge-grad-2:#b9d4ff;
  --scrollbar-track:#0b1120;
  --scrollbar-thumb:#2a3a56;

  /* Fixed, vivid accent pair used ONLY for decorative gradients that carry
     their own fixed dark (#03151a) text on top — buttons, the theme-toggle
     thumb, progress bar. Deliberately NOT overridden in the light theme
     block below, unlike --cyan/--blue (which flip to a darker, text-safe
     shade in light mode). Keeping these separate means a button's
     background stays bright and legible regardless of which theme is
     active, instead of going dim/low-contrast under its own dark label.
  */
  --grad-cyan:#2dd9e8;
  --grad-blue:#3f7bff;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --header-h:76px;
  --content-max:1180px;
}

/* ---- Light theme ---- */
:root[data-theme="light"]{
  color-scheme: light;

  --bg-0:#f3f6fb;
  --panel:rgba(255,255,255,0.72);
  --panel-solid:#ffffff;
  --panel-border:rgba(31,58,110,0.13);
  --panel-border-hi:rgba(31,90,200,0.32);
  --cyan:#0a7f96;
  --blue:#2650c9;
  --violet:#6a4fd0;
  --text-hi:#0f1a2e;
  --text-mid:#45526b;
  --text-low:#707d94;
  --ok:#0f8f5f;
  --warn:#a8630a;
  --err:#c62f44;

  --header-bg:rgba(255,255,255,0.78);
  --footer-tint:rgba(38,80,201,0.05);
  --hairline:rgba(15,23,42,0.08);
  --hairline-hi:rgba(15,23,42,0.12);
  --surface-hover:rgba(15,23,42,0.045);
  --surface-hover-soft:rgba(15,23,42,0.025);
  --ambient-opacity:0.32;
  --gauge-grad-1:#0f1a2e;
  --gauge-grad-2:#1d3a8f;
  --scrollbar-track:#e7edf7;
  --scrollbar-thumb:#b7c4dc;
}

/* Smooth, contained transition between themes — scoped to the specific
   properties that actually change, not `transition: all`, to avoid
   layout jank on unrelated properties during the switch. */
body, .site-header, .site-footer, .card, .panel-like,
.graph-card, .history-card, .contact-card, .sitemap-group,
.faq-item, .cta-box, .spec-card, .prose, table.history-table th{
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}