:root {
  /* Background (Light default) */
  --bg-primary: #F8F8FC;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F0F0F5;
  --bg-card: rgba(0, 0, 0, 0.03);
  --bg-card-hover: rgba(0, 0, 0, 0.06);

  /* Text */
  --text-primary: #1A1A2E;
  --text-secondary: #555577;
  --text-muted: #8888AA;

  /* Accents (toned for light bg) */
  --accent-green: #00B85E;
  --accent-green-dim: #00994D;
  --accent-green-glow: rgba(0, 184, 94, 0.15);
  --accent-amber: #D49B00;
  --accent-amber-glow: rgba(212, 155, 0, 0.12);
  --accent-red: #E02040;
  --accent-red-glow: rgba(224, 32, 64, 0.12);

  /* Brand verticals */
  --brand-systems: #8BA83B;
  --brand-systems-glow: rgba(139, 168, 59, 0.12);
  --brand-media: #F26522;
  --brand-media-glow: rgba(242, 101, 34, 0.12);
  --brand-terra: #2A9D8F;
  --brand-terra-glow: rgba(42, 157, 143, 0.12);

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-active: rgba(0, 184, 94, 0.3);

  /* Utility: theme-sensitive colors */
  --bg-navbar-glass: rgba(248, 248, 252, 0.85);
  --bg-grid-line: rgba(0, 0, 0, 0.04);
  --bg-translucent: rgba(0, 0, 0, 0.02);
  --bg-translucent-hover: rgba(0, 0, 0, 0.04);
  --border-ghost: rgba(0, 0, 0, 0.12);
  --border-ghost-hover: rgba(0, 0, 0, 0.2);
  --shadow-heavy: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.06);
  --noise-opacity: 0.03;
  --bg-terminal: #1A1A2E;
  --bg-terminal-alt: #1E1E32;
  --selection-bg: rgba(0, 184, 94, 0.2);

  /* Syntax highlighting */
  --syntax-keyword: #7C3AED;
  --syntax-string: #059669;

  /* Section-specific tints */
  --tint-red: rgba(224, 32, 64, 0.04);
  --tint-green: rgba(0, 184, 94, 0.03);
  --tint-green-subtle: rgba(0, 184, 94, 0.02);
  --tint-orange: rgba(242, 101, 34, 0.04);
  --tint-teal: rgba(42, 157, 143, 0.04);
  --tint-green-case: rgba(0, 184, 94, 0.04);
  --tint-green-pricing: rgba(0, 184, 94, 0.05);

  /* Card icon borders (per-brand) */
  --border-media-card: rgba(242, 101, 34, 0.25);
  --border-terra-card: rgba(42, 157, 143, 0.25);
  --border-media-hover: rgba(242, 101, 34, 0.4);
  --border-terra-hover: rgba(42, 157, 143, 0.4);
  --border-red-hover: rgba(224, 32, 64, 0.3);
  --border-amber-hover: rgba(212, 155, 0, 0.3);
  --border-green-featured: rgba(0, 184, 94, 0.3);
  --border-green-pricing: rgba(0, 184, 94, 0.25);

  /* Chat sim */
  --bg-chat-out: rgba(0, 184, 94, 0.1);
  --border-chat-out: rgba(0, 184, 94, 0.15);
  --bg-chat-in: rgba(0, 0, 0, 0.03);

  /* Anomaly/solutions section backgrounds */
  --anomaly-bg-mid: #F0F0F5;
  --anomaly-bg-deep: #EAEAF0;
  --solutions-bg-mid: #F0F0F5;

  /* Media poster border */
  --border-media-poster: rgba(242, 101, 34, 0.25);
  --border-media-poster-hover: rgba(242, 101, 34, 0.5);
  --shadow-media-poster: rgba(242, 101, 34, 0.1);

  /* Alert / badge backgrounds */
  --bg-alert-red: rgba(224, 32, 64, 0.1);
  --border-alert-red: rgba(224, 32, 64, 0.25);
  --bg-badge-green: rgba(0, 184, 94, 0.12);
  --border-badge-green: rgba(0, 184, 94, 0.25);
  --bg-badge-amber: rgba(212, 155, 0, 0.12);
  --bg-badge-teal: rgba(42, 157, 143, 0.12);
  --bg-badge-orange: rgba(242, 101, 34, 0.08);

  /* Route viz */
  --bg-route-pill: rgba(0, 184, 94, 0.1);
  --border-route-pill: rgba(0, 184, 94, 0.25);
  --bg-route-engine: rgba(0, 184, 94, 0.08);
  --bg-orbit-center: rgba(0, 184, 94, 0.08);
  --tint-orbit: rgba(0, 184, 94, 0.04);

  /* Comparison table row hover */
  --bg-table-row-hover: rgba(0, 0, 0, 0.02);

  /* Score bar / bar chart */
  --bg-bar-empty: rgba(0, 0, 0, 0.06);
  --bg-bar-dim: rgba(0, 0, 0, 0.08);

  /* Scan line overlay */
  --scanline-stripe: rgba(0, 0, 0, 0.02);

  /* API latency badge */
  --bg-latency: rgba(0, 184, 94, 0.12);

  /* Industry featured */
  --bg-featured: rgba(0, 184, 94, 0.04);

  /* Glow orbs */
  --glow-green: rgba(0, 184, 94, 0.08);
  --glow-blue: rgba(60, 100, 255, 0.06);
  --glow-red: rgba(224, 32, 64, 0.05);
  --glow-orange: rgba(242, 101, 34, 0.06);
  --glow-teal: rgba(42, 157, 143, 0.06);

  /* Typography */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --section-padding: clamp(38px, 6.4vw, 89px);
  --container-max: 1280px;
  --container-padding: clamp(20px, 5vw, 40px);
  --card-radius: 16px;
  --card-blur: 12px;

  /* Animation */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 200ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;
  --stagger-delay: 100ms;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

html[data-theme="dark"] {
  /* Background */
  --bg-primary: #08080E;
  --bg-secondary: #0E0E16;
  --bg-tertiary: #14141E;
  --bg-card: rgba(255, 255, 255, 0.025);
  --bg-card-hover: rgba(255, 255, 255, 0.05);

  /* Text */
  --text-primary: #F0F0F5;
  --text-secondary: #8888AA;
  --text-muted: #555566;

  /* Accents (vivid for dark bg) */
  --accent-green: #00FF88;
  --accent-green-dim: #00CC6A;
  --accent-green-glow: rgba(0, 255, 136, 0.12);
  --accent-amber: #FFB800;
  --accent-amber-glow: rgba(255, 184, 0, 0.12);
  --accent-red: #FF3344;
  --accent-red-glow: rgba(255, 51, 68, 0.12);

  /* Brand verticals */
  --brand-systems-glow: rgba(139, 168, 59, 0.15);
  --brand-media-glow: rgba(242, 101, 34, 0.15);
  --brand-terra-glow: rgba(42, 157, 143, 0.15);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-active: rgba(0, 255, 136, 0.3);

  /* Utility */
  --bg-navbar-glass: rgba(8, 8, 14, 0.85);
  --bg-grid-line: rgba(255, 255, 255, 0.025);
  --bg-translucent: rgba(255, 255, 255, 0.03);
  --bg-translucent-hover: rgba(255, 255, 255, 0.06);
  --border-ghost: rgba(255, 255, 255, 0.2);
  --border-ghost-hover: rgba(255, 255, 255, 0.4);
  --shadow-heavy: rgba(0, 0, 0, 0.5);
  --shadow-medium: rgba(0, 0, 0, 0.3);
  --noise-opacity: 0.02;
  --bg-terminal: #0a0a12;
  --bg-terminal-alt: #0c0c14;
  --selection-bg: rgba(0, 255, 136, 0.2);

  /* Syntax highlighting */
  --syntax-keyword: #c792ea;
  --syntax-string: #c3e88d;

  /* Section tints */
  --tint-red: rgba(255, 51, 68, 0.03);
  --tint-green: rgba(0, 255, 136, 0.02);
  --tint-green-subtle: rgba(0, 255, 136, 0.015);
  --tint-orange: rgba(242, 101, 34, 0.025);
  --tint-teal: rgba(42, 157, 143, 0.025);
  --tint-green-case: rgba(0, 255, 136, 0.03);
  --tint-green-pricing: rgba(0, 255, 136, 0.04);

  /* Card icon borders */
  --border-media-card: rgba(242, 101, 34, 0.2);
  --border-terra-card: rgba(42, 157, 143, 0.2);
  --border-media-hover: rgba(242, 101, 34, 0.3);
  --border-terra-hover: rgba(42, 157, 143, 0.3);
  --border-red-hover: rgba(255, 51, 68, 0.3);
  --border-amber-hover: rgba(255, 184, 0, 0.3);
  --border-green-featured: rgba(0, 255, 136, 0.3);
  --border-green-pricing: rgba(0, 255, 136, 0.2);

  /* Chat sim */
  --bg-chat-out: rgba(0, 255, 136, 0.08);
  --border-chat-out: rgba(0, 255, 136, 0.12);
  --bg-chat-in: rgba(255, 255, 255, 0.03);

  /* Anomaly/solutions section backgrounds */
  --anomaly-bg-mid: #080814;
  --anomaly-bg-deep: #0a0a1a;
  --solutions-bg-mid: #0a0a14;

  /* Media poster */
  --border-media-poster: rgba(242, 101, 34, 0.2);
  --border-media-poster-hover: rgba(242, 101, 34, 0.5);
  --shadow-media-poster: rgba(242, 101, 34, 0.08);

  /* Alerts / badges */
  --bg-alert-red: rgba(255, 51, 68, 0.15);
  --border-alert-red: rgba(255, 51, 68, 0.3);
  --bg-badge-green: rgba(0, 255, 136, 0.15);
  --border-badge-green: rgba(0, 255, 136, 0.3);
  --bg-badge-amber: rgba(255, 184, 0, 0.15);
  --bg-badge-teal: rgba(42, 157, 143, 0.15);
  --bg-badge-orange: rgba(242, 101, 34, 0.1);

  /* Route viz */
  --bg-route-pill: rgba(0, 255, 136, 0.08);
  --border-route-pill: rgba(0, 255, 136, 0.2);
  --bg-route-engine: rgba(0, 255, 136, 0.06);
  --bg-orbit-center: rgba(0, 255, 136, 0.06);
  --tint-orbit: rgba(0, 255, 136, 0.03);

  /* Comparison table */
  --bg-table-row-hover: rgba(255, 255, 255, 0.015);

  /* Bars */
  --bg-bar-empty: rgba(255, 255, 255, 0.05);
  --bg-bar-dim: rgba(255, 255, 255, 0.08);

  /* Scan line */
  --scanline-stripe: rgba(0, 0, 0, 0.03);

  /* API latency */
  --bg-latency: rgba(0, 255, 136, 0.1);

  /* Industry featured */
  --bg-featured: rgba(0, 255, 136, 0.02);

  /* Glow orbs */
  --glow-green: rgba(0, 255, 136, 0.06);
  --glow-blue: rgba(60, 100, 255, 0.04);
  --glow-red: rgba(255, 51, 68, 0.04);
  --glow-orange: rgba(242, 101, 34, 0.05);
  --glow-teal: rgba(42, 157, 143, 0.05);
}