:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0b1120;
  --color-bg: #0f172a;
  --color-surface: #020617;
  --color-surface-2: #0b1220;
  --color-text: #e5e7eb;
  --color-muted: #94a3b8;
  --color-border: #1f2937;
  --color-primary: #60a5fa;
  --color-primary-soft: #1d4ed8;
  --color-on-primary: #0f172a;
  --color-scrim: rgba(2, 6, 23, 0.6);
  --color-success: #22c55e;
  --color-danger: #f87171;
  --bg-aurora-1: rgba(56, 189, 248, 0.16);
  --bg-aurora-2: rgba(34, 197, 94, 0.12);
  --bg-aurora-3: rgba(250, 204, 21, 0.14);
  --bg-grid-base: #0b1220;
  --bg-grid-line: rgba(148, 163, 184, 0.2);
  --bg-grid-dot: rgba(191, 219, 254, 0.2);
  --bg-grid-dark-base: #0b1020;
  --bg-grid-dark-line: rgba(224, 231, 255, 0.2);
  --bg-grid-dark-dot: rgba(224, 231, 255, 0.28);
  --bg-dash-light-base: #e2e8f0;
  --bg-dash-light-ink: rgba(30, 41, 59, 0.26);
  --bg-dash-light-ink-strong: rgba(30, 41, 59, 0.38);
  --bg-dash-dark-base: #0b1020;
  --bg-dash-dark-ink: rgba(224, 231, 255, 0.32);
  --bg-dash-dark-ink-strong: rgba(224, 231, 255, 0.46);
  --bg-dash-grid-base: #0b1120;
  --bg-dash-grid-ink: rgba(224, 231, 255, 0.32);
  --bg-glass-base: #0b1220;
  --bg-glass-ink: rgba(96, 165, 250, 0.22);
  --bg-glass-edge: rgba(148, 163, 184, 0.3);
  --bg-bento-base: #0b1120;
  --bg-bento-card: rgba(30, 41, 59, 0.9);
  --bg-bento-border: rgba(148, 163, 184, 0.18);
  --bg-bento-ink: rgba(148, 163, 184, 0.14);
  --bg-aurora-fog-base: #070b16;
  --bg-aurora-fog-slate: rgba(100, 116, 139, 0.22);
  --bg-aurora-fog-blue: rgba(37, 99, 235, 0.32);
  --bg-aurora-fog-glow: rgba(59, 130, 246, 0.26);
  --bg-mesh-1: rgba(59, 130, 246, 0.18);
  --bg-mesh-2: rgba(16, 185, 129, 0.16);
  --bg-mesh-3: rgba(250, 204, 21, 0.14);
  --bg-strata-1: #0b1220;
  --bg-strata-2: #0f172a;
  --bg-strata-3: #111827;
  --bg-orbit: rgba(129, 140, 248, 0.18);
  --bg-image-opacity: 0.12;
  --header-bg: rgba(15, 23, 42, 0.72);
  --header-border: rgba(148, 163, 184, 0.18);
  --header-shadow: 0 12px 32px rgba(2, 6, 23, 0.6);
  --header-blur: 16px;
  --header-bg-scrolled: rgba(15, 23, 42, 0.86);
  --header-border-scrolled: rgba(148, 163, 184, 0.28);
  --header-shadow-scrolled: 0 16px 36px rgba(2, 6, 23, 0.72);
}