:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #f0f0f5;
  --text: #1a1a23;
  --text-muted: #5a5a6a;
  --border: #e2e2ea;
  --accent: #4f46e5;
  --accent-text: #ffffff;
  --correct: #16a34a;
  --correct-bg: #dcfce7;
  --wrong: #dc2626;
  --wrong-bg: #fee2e2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  --radius: 12px;
  --radius-sm: 8px;
}

:root[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #181b24;
  --surface-2: #21242f;
  --text: #e6e8ef;
  --text-muted: #9ba0ad;
  --border: #2a2e3a;
  --accent: #8b85ff;
  --accent-text: #0f1117;
  --correct: #4ade80;
  --correct-bg: #14321f;
  --wrong: #f87171;
  --wrong-bg: #3a1717;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] .theme-icon-light,
:root:not([data-theme="dark"]) .theme-icon-dark {
  display: none;
}