:root {
  color-scheme: dark;

  --bg-deep: #030712;
  --bg: #050a17;
  --bg2: #0a1228;
  --bg3: #0f1a35;
  --surface: rgba(12, 20, 44, 0.8);
  --surface-strong: rgba(16, 28, 56, 0.94);
  --surface-solid: #111d3d;
  --card: rgba(255,255,255, 0.055);
  --card-hover: rgba(255,255,255, 0.088);
  --card-strong: rgba(255,255,255, 0.11);
  --text: #f0f4ff;
  --text-soft: #d4e0ff;
  --text-muted: #8899c4;
  --text-dim: #56658a;
  --cyan: #3de8ff;
  --cyan-dim: rgba(61,232,255, 0.16);
  --cyan-glow: rgba(61,232,255, 0.42);
  --violet: #8b4eff;
  --violet-dim: rgba(139,78,255, 0.14);
  --violet-glow: rgba(139,78,255, 0.36);
  --magenta: #ff3cc7;
  --magenta-dim: rgba(255,60,199, 0.14);
  --lime: #a8ff5a;
  --amber: #ffc944;
  --danger: #ff5678;
  --teal: #1ee6cc;
  --line: rgba(255,255,255, 0.1);
  --line-strong: rgba(255,255,255, 0.16);

  --gradient-brand: linear-gradient(135deg, var(--cyan), var(--violet), var(--magenta));
  --gradient-progress: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--lime));
  --gradient-score: linear-gradient(90deg, var(--danger), var(--amber), var(--lime));
  --gradient-card: linear-gradient(90deg, var(--cyan-dim), var(--violet-dim));
  --gradient-hero: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 40%, var(--bg) 100%);

  --page-bg: linear-gradient(180deg, var(--bg), var(--bg2));
  --hero-bg: linear-gradient(180deg, var(--surface-strong), var(--surface));
  --panel-bg: color-mix(in srgb, var(--surface-solid) 80%, transparent);
  --control-bg: color-mix(in srgb, var(--card-strong) 68%, transparent);
  --input-bg: color-mix(in srgb, var(--bg-deep) 72%, transparent);
  --focus-ring: rgba(61,232,255, 0.48);
  --overlay-bg: rgba(3, 7, 18, 0.92);
  --copy-bg: rgba(3, 7, 18, 0.54);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --leading: 1.65;
  --tracking: 0;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 64px;
  --space-10: 80px;

  --radius-1: 6px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0,0,0, 0.22);
  --shadow-md: 0 8px 32px rgba(0,0,0, 0.38);
  --shadow-lg: 0 24px 90px rgba(0,0,0, 0.5);
  --shadow-glow-cyan: 0 0 28px var(--cyan-glow);
  --shadow-glow-violet: 0 14px 44px rgba(139,78,255, 0.32);
  --shadow-glow-magenta: 0 10px 36px rgba(255,60,199, 0.24);

  --max-width: 1200px;
  --max-width-narrow: 900px;
  --header-height: 72px;
}

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

  --bg-deep: #eef3ff;
  --bg: #f4f7ff;
  --bg2: #e6eeff;
  --bg3: #dae4f8;
  --surface: rgba(255,255,255, 0.78);
  --surface-strong: rgba(255,255,255, 0.94);
  --surface-solid: #ffffff;
  --card: rgba(8,14,34, 0.042);
  --card-hover: rgba(8,14,34, 0.074);
  --card-strong: rgba(8,14,34, 0.1);
  --text: #070e1c;
  --text-soft: #162040;
  --text-muted: #404d6e;
  --text-dim: #6e7ca0;
  --line: rgba(8,14,34, 0.1);
  --line-strong: rgba(8,14,34, 0.16);
  --panel-bg: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  --input-bg: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  --overlay-bg: rgba(244, 247, 255, 0.94);
  --copy-bg: rgba(244, 247, 255, 0.76);
  --shadow-sm: 0 2px 8px rgba(24,44,96, 0.07);
  --shadow-md: 0 8px 28px rgba(24,44,96, 0.1);
  --shadow-lg: 0 22px 68px rgba(24,44,96, 0.16);
  --shadow-glow-cyan: 0 0 16px rgba(0,140,200, 0.2);
  --shadow-glow-violet: 0 10px 32px rgba(110,50,210, 0.22);
  --shadow-glow-magenta: 0 8px 28px rgba(200,40,140, 0.18);
}