/* theme.css — the single owner of the 8xQuant metrics theme tokens.
 *
 * Light is the default and lives on :root, so the pages stay themed even when
 * JavaScript is disabled. Dark is an opt-in override on <html data-theme="dark">.
 * A tiny inline script in each page's <head> sets that attribute before first
 * paint (from localStorage key gx8theme), so there is no color flash.
 *
 * Every color on every page comes from a token here. Do not hardcode a color in
 * a page or in nav.css/gate.css; add a token instead.
 */
:root {
  color-scheme: light;

  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f1f1ee;
  --surface-3: #ecece8;
  --text: #0a0a0a;
  --text-2: #2a2a28;
  --muted: #5c5b55;
  --dim: #8a8a85;
  --line: rgba(0, 0, 0, .12);
  --line-2: rgba(0, 0, 0, .07);
  --line-strong: rgba(0, 0, 0, .24);

  --accent: #ec011c;
  --accent-ink: #ffffff;
  --banner-ink: #ffffff;
  --good: #0f8a3d;
  --bad: #ec011c;
  --err: #c4000f;

  --eq-grid: rgba(0, 0, 0, .08);
  --eq-vgrid: #ecece8;
  --eq-base: rgba(0, 0, 0, .25);
  --eq-axis: #5c5b55;
  --eq-foot: #8a8a85;
  --dot-ring: #ffffff;
  --tip-bg: #0a0a0a;
  --tip-ink: #f2f0ea;

  --shadow: 0 18px 50px rgba(0, 0, 0, .16);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, .22);

  --nav-bg: rgba(255, 255, 255, .78);
  --nav-solid: rgba(255, 255, 255, .97);
  --nav-line: rgba(0, 0, 0, .08);
  --nav-brand: #0a0a0a;
  --nav-link: #5c5b55;
  --nav-hover: #0a0a0a;
  --nav-active: #ec011c;
  --nav-ctl-line: rgba(0, 0, 0, .18);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #111110;
  --surface-3: #141414;
  --text: #f2f0ea;
  --text-2: #e8e6e1;
  --muted: #a3a3a0;
  --dim: #6b6b68;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .22);

  --accent: #ec011c;
  --accent-ink: #0a0a0a;
  --banner-ink: #0a0a0a;
  --good: #2ecc71;
  --bad: #ec011c;
  --err: #ff5c5c;

  --eq-grid: rgba(255, 255, 255, .06);
  --eq-vgrid: #141414;
  --eq-base: rgba(255, 255, 255, .22);
  --eq-axis: #a3a3a0;
  --eq-foot: #6b6b68;
  --dot-ring: #0a0a0a;
  --tip-bg: #f2f0ea;
  --tip-ink: #0a0a0a;

  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --shadow-hover: 0 18px 50px rgba(0, 0, 0, .7);

  --nav-bg: rgba(5, 5, 5, .55);
  --nav-solid: rgba(5, 5, 5, .96);
  --nav-line: rgba(255, 255, 255, .08);
  --nav-brand: #f2f0ea;
  --nav-link: #a3a3a0;
  --nav-hover: #f2f0ea;
  --nav-active: #ec011c;
  --nav-ctl-line: rgba(255, 255, 255, .18);
}