@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --rail-bg: #ffffff;
    --text: oklch(0.22 0.01 260);
    --text-muted: oklch(0.5 0.01 260);
    --border: oklch(0.9 0.004 95);
    --hover: oklch(0.94 0.004 95);
    --accent: oklch(0.58 0.14 260);
    --accent-soft: oklch(0.93 0.03 260);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171717;
    --bg-elevated: #171717;
    --rail-bg: #171717;
    --text: oklch(0.93 0.005 95);
    --text-muted: oklch(0.62 0.01 260);
    --border: oklch(0.3 0.006 260);
    --hover: oklch(0.26 0.006 260);
    --accent: oklch(0.72 0.14 260);
    --accent-soft: oklch(0.3 0.05 260);
  }
}

/* Manual overrides — take precedence over the prefers-color-scheme media
   queries above via higher selector specificity ([data-theme] adds an
   attribute selector). Absent (mode "auto"), the media queries above win. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --rail-bg: #ffffff;
  --text: oklch(0.22 0.01 260);
  --text-muted: oklch(0.5 0.01 260);
  --border: oklch(0.9 0.004 95);
  --hover: oklch(0.94 0.004 95);
  --accent: oklch(0.58 0.14 260);
  --accent-soft: oklch(0.93 0.03 260);
}
:root[data-theme="dark"] {
  --bg: #171717;
  --bg-elevated: #171717;
  --rail-bg: #171717;
  --text: oklch(0.93 0.005 95);
  --text-muted: oklch(0.62 0.01 260);
  --border: oklch(0.3 0.006 260);
  --hover: oklch(0.26 0.006 260);
  --accent: oklch(0.72 0.14 260);
  --accent-soft: oklch(0.3 0.05 260);
}

body { margin: 0; font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); background-clip: padding-box; }
</content>