:root {
  color-scheme: light dark;
  --bg: #f7f7f8;
  --bg-elev: #ffffff;
  --border: #e2e2e6;
  --text: #1c1c1f;
  --text-dim: #63636c;
  --accent: #6d4aff;
  --accent-ink: #ffffff;
  --code-bg: #f0eefc;
  --shadow: 0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --bg-elev: #1e1e24;
    --border: #302f38;
    --text: #eeeef2;
    --text-dim: #a3a2ad;
    --accent: #a78bff;
    --accent-ink: #16161a;
    --code-bg: #232030;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"] {
  --bg: #16161a;
  --bg-elev: #1e1e24;
  --border: #302f38;
  --text: #eeeef2;
  --text-dim: #a3a2ad;
  --accent: #a78bff;
  --accent-ink: #16161a;
  --code-bg: #232030;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

:root[data-theme="light"] {
  --bg: #f7f7f8;
  --bg-elev: #ffffff;
  --border: #e2e2e6;
  --text: #1c1c1f;
  --text-dim: #63636c;
  --accent: #6d4aff;
  --accent-ink: #ffffff;
  --code-bg: #f0eefc;
  --shadow: 0 1px 2px rgba(20,20,30,.05), 0 8px 24px rgba(20,20,30,.04);
}