[data-theme="dark"] {
  --bg-dark: #0a0a0f;
  --bg-gradient: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0f 70%);
  --text-primary: #e0e0e0;
  --text-muted: #666;
  --canvas-bg-inner: #1a1a2e;
  --canvas-bg-outer: #0a0a0f;
  --highlight-color: rgba(255, 255, 255, 0.5);
  --graph-bg: rgba(10, 10, 15, 0.9);
  --graph-grid: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] {
  --bg-dark: #d0d0dc;
  --bg-gradient: radial-gradient(ellipse at center, #e8e8f0 0%, #d0d0dc 70%);
  --text-primary: #1a1a2e;
  --text-muted: #888;
  --canvas-bg-inner: #e8e8f0;
  --canvas-bg-outer: #d0d0dc;
  --highlight-color: rgba(0, 0, 0, 0.3);
  --graph-bg: rgba(220, 220, 230, 0.9);
  --graph-grid: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body {
  background: var(--bg-gradient);
}

[data-theme="light"] .wizard,
[data-theme="light"] .container {
  color: var(--text-primary);
}

[data-theme="light"] canvas {
  background: radial-gradient(circle at 30% 30%, var(--canvas-bg-inner) 0%, var(--canvas-bg-outer) 100%);
}

[data-theme="light"] .canvas-wrapper {
  box-shadow:
    0 0 60px rgba(0, 100, 120, 0.2),
    0 0 120px rgba(100, 0, 80, 0.1),
    inset 0 0 60px rgba(255, 255, 255, 0.3);
}

[data-theme="light"] button {
  background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] button.secondary {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .keyboard-hints {
  color: var(--text-muted);
}

[data-theme="light"] input,
[data-theme="light"] select {
  background: rgba(255, 255, 255, 0.8);
  color: #1a1a2e;
}