/* ===== Single source of truth for ALL colors ===== */
/* Two themes: dark (default) and light */

:root, [data-theme="dark"] {
  /* --- Base UI --- */
  --bg-primary: #000000;
  --bg-secondary: #0d0d0d;
  --bg-card: #1a1a1a;
  --bg-hover: #2a2a2a;
  --border: #444444;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #888888;
  --accent: #00aaff;
  --accent-dim: #0088cc;
  --danger: #ff0000;
  --success: #00ff00;
  --positive: #00ff00;
  --negative: #ff0000;
  --btn-text: #ffffff;
  --radius: 8px;
  --radius-sm: 4px;

  /* --- Canvas --- */
  --canvas-bg: #000000;
  --tier-frame-border: #333333;
  --tier-divider: #33333388;
  --tier-label: #aaaaaa;
  --label-bg: rgba(0, 0, 0, 0.9);
  --node-label: #dddddd;
  --node-label-hi: #ffffff;
  --node-label-dim: #555555;
  --node-border: #999999;
  --node-border-dim: #444444;
  --edge-dim: #555555;
  --edge-locked: #55555544;
  --amount-text: #bbbbbb;
  --research-text: #888888;
  --research-text-hi: #ffffff;

  /* --- Research node backgrounds --- */
  --research-bg-complete: #003300;
  --research-bg-active: #000033;
  --research-bg-available: #1a1a1a;
  --research-bg-locked: #0d0d0d;

  /* --- Status colors --- */
  --status-complete: #00ff00;
  --status-available: #0088ff;
  --status-lacking: #ff0000;
  --status-paused: #ffff00;

  /* --- Rate colors --- */
  --rate-positive: #00ff00;
  --rate-negative: #ff0000;

  /* --- Energy --- */
  --energy-color: #ffff00;

  /* --- Gold / Prestige --- */
  --gold: #ffcc00;
  --gold-glow: rgba(255, 204, 0, 0.35);
  --gold-bg: rgba(255, 204, 0, 0.12);
  --gold-bg-subtle: rgba(255, 204, 0, 0.06);
  --gold-border-subtle: rgba(255, 204, 0, 0.2);
  --gold-hint-bg: rgba(255, 204, 0, 0.08);
  --gold-hint-border: rgba(255, 204, 0, 0.3);
  --gold-shadow: rgba(255, 204, 0, 0.4);
  --gold-shadow-hover: rgba(255, 204, 0, 0.25);

  /* --- Alert pills --- */
  --alert-energy: #ff0000;
  --alert-energy-bg: rgba(255, 0, 0, 0.15);
  --alert-energy-bg-hi: rgba(255, 0, 0, 0.35);
  --alert-energy-border: rgba(255, 0, 0, 0.5);

  --alert-research: #0088ff;
  --alert-research-bg: rgba(0, 136, 255, 0.12);
  --alert-research-bg-hi: rgba(0, 136, 255, 0.3);
  --alert-research-border: rgba(0, 136, 255, 0.4);

  --alert-storage: #ff8800;
  --alert-storage-bg: rgba(255, 136, 0, 0.12);
  --alert-storage-border: rgba(255, 136, 0, 0.3);

  --alert-shortage: #ffff00;
  --alert-shortage-bg: rgba(255, 255, 0, 0.1);
  --alert-shortage-border: rgba(255, 255, 0, 0.3);

  --alert-ok: #00ff00;
  --alert-ok-bg: rgba(0, 255, 0, 0.06);
  --alert-ok-border: rgba(0, 255, 0, 0.2);

  /* --- Toast --- */
  --toast-warning: #ff8800;

  /* --- Misc canvas/UI --- */
  --highlight-border: #ffffff;
  --arrow-default: #555555;
  --storage-warning: #ffaa00;
  --lacking-glow: rgba(255, 0, 0, 0.3);
  --subtle-bg: rgba(255, 255, 255, 0.06);
  --bar-track: rgba(255, 255, 255, 0.1);
  --boost-bg: rgba(0, 255, 0, 0.08);
  --cost-lacking-bg: rgba(255, 0, 0, 0.12);
  --paused-bg: rgba(255, 255, 0, 0.12);
  --paused-border: rgba(255, 255, 0, 0.4);
  --paused-bg-hover: rgba(255, 255, 0, 0.2);
  --manual-btn-hover: #00cc00;
  --overlay-bg: rgba(0, 0, 0, 0.9);
  --shadow: rgba(0, 0, 0, 0.7);

  /* --- Canvas opacity (dark bg: lower alpha suffices) --- */
  --edge-active-alpha: 0.5;
  --edge-dim-alpha: 0.2;
  --edge-dim-hl-alpha: 0.2;
  --arrow-alpha: 0.5;

  /* --- Science pack text colors --- */
  --sci-red: #ff4444;
  --sci-green: #44cc44;
  --sci-blue: #4488ff;
  --sci-purple: #aa44ff;
  --sci-yellow: #ffcc00;
  --sci-white: #eeeeff;

  /* --- Tier colors --- */
  --tier-0: #8B6B3F;
  --tier-1: #C4A060;
  --tier-2: #708899;
  --tier-3: #4682B4;
  --tier-4: #7AAA32;
  --tier-5: #7B68EE;
  --tier-6: #DAA520;
  --tier-7: #FF6600;
}

[data-theme="light"] {
  /* --- Base UI --- */
  --bg-primary: #f0f0f0;
  --bg-secondary: #e4e4e4;
  --bg-card: #f8f8f8;
  --bg-hover: #d8d8d8;
  --border: #888888;
  --text-primary: #000000;
  --text-secondary: #222222;
  --text-muted: #555555;
  --accent: #0050bb;
  --accent-dim: #0050bb;
  --danger: #cc0000;
  --success: #007700;
  --positive: #007700;
  --negative: #cc0000;
  --btn-text: #ffffff;

  /* --- Canvas --- */
  --canvas-bg: #f0f0f0;
  --tier-frame-border: #999999;
  --tier-divider: #99999988;
  --tier-label: #333333;
  --label-bg: rgba(255, 255, 255, 0.92);
  --node-label: #111111;
  --node-label-hi: #000000;
  --node-label-dim: #999999;
  --node-border: #555555;
  --node-border-dim: #999999;
  --edge-dim: #888888;
  --edge-locked: #88888844;
  --amount-text: #222222;
  --research-text: #555555;
  --research-text-hi: #000000;

  /* --- Research node backgrounds --- */
  --research-bg-complete: #88dd88;
  --research-bg-active: #88bbee;
  --research-bg-available: #d8d8d8;
  --research-bg-locked: #a8a8a8;

  /* --- Status colors --- */
  --status-complete: #007700;
  --status-available: #0044bb;
  --status-lacking: #cc0000;
  --status-paused: #bb7700;

  /* --- Rate colors --- */
  --rate-positive: #007700;
  --rate-negative: #cc0000;

  /* --- Energy --- */
  --energy-color: #997700;

  /* --- Gold / Prestige --- */
  --gold: #886600;
  --gold-glow: rgba(136, 102, 0, 0.35);
  --gold-bg: rgba(136, 102, 0, 0.12);
  --gold-bg-subtle: rgba(136, 102, 0, 0.08);
  --gold-border-subtle: rgba(136, 102, 0, 0.25);
  --gold-hint-bg: rgba(136, 102, 0, 0.1);
  --gold-hint-border: rgba(136, 102, 0, 0.3);
  --gold-shadow: rgba(136, 102, 0, 0.35);
  --gold-shadow-hover: rgba(136, 102, 0, 0.25);

  /* --- Alert pills --- */
  --alert-energy: #cc0000;
  --alert-energy-bg: rgba(204, 0, 0, 0.12);
  --alert-energy-bg-hi: rgba(204, 0, 0, 0.25);
  --alert-energy-border: rgba(204, 0, 0, 0.4);

  --alert-research: #0044aa;
  --alert-research-bg: rgba(0, 68, 170, 0.12);
  --alert-research-bg-hi: rgba(0, 68, 170, 0.25);
  --alert-research-border: rgba(0, 68, 170, 0.4);

  --alert-storage: #bb4400;
  --alert-storage-bg: rgba(187, 68, 0, 0.1);
  --alert-storage-border: rgba(187, 68, 0, 0.3);

  --alert-shortage: #996600;
  --alert-shortage-bg: rgba(153, 102, 0, 0.12);
  --alert-shortage-border: rgba(153, 102, 0, 0.35);

  --alert-ok: #007700;
  --alert-ok-bg: rgba(0, 119, 0, 0.08);
  --alert-ok-border: rgba(0, 119, 0, 0.25);

  /* --- Toast --- */
  --toast-warning: #cc5500;

  /* --- Misc canvas/UI --- */
  --highlight-border: #000000;
  --arrow-default: #777777;
  --storage-warning: #996600;
  --lacking-glow: rgba(204, 0, 0, 0.25);
  --subtle-bg: rgba(0, 0, 0, 0.07);
  --bar-track: rgba(0, 0, 0, 0.12);
  --boost-bg: rgba(0, 119, 0, 0.1);
  --cost-lacking-bg: rgba(204, 0, 0, 0.1);
  --paused-bg: rgba(187, 119, 0, 0.15);
  --paused-border: rgba(187, 119, 0, 0.45);
  --paused-bg-hover: rgba(187, 119, 0, 0.25);
  --manual-btn-hover: #006600;
  --overlay-bg: rgba(0, 0, 0, 0.75);
  --shadow: rgba(0, 0, 0, 0.25);

  /* --- Canvas opacity (light bg: higher alpha needed) --- */
  --edge-active-alpha: 0.7;
  --edge-dim-alpha: 0.35;
  --edge-dim-hl-alpha: 0.35;
  --arrow-alpha: 0.7;

  /* --- Science pack text colors (darker for light bg) --- */
  --sci-red: #cc0000;
  --sci-green: #007700;
  --sci-blue: #0044aa;
  --sci-purple: #6622aa;
  --sci-yellow: #887700;
  --sci-white: #555588;

  /* --- Tier colors --- */
  --tier-0: #7a5a30;
  --tier-1: #aa8840;
  --tier-2: #557788;
  --tier-3: #3366aa;
  --tier-4: #558800;
  --tier-5: #6644cc;
  --tier-6: #bb8800;
  --tier-7: #dd5500;
}