:root {
  --color-bg: #ffffff;
  --color-muted: #666666;
  --color-surface: #f8f8f8;
  --color-text: #000000;
  --font-mono:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --font-rounded:
    ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
  --font-sans:
    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --padding-page: 1rem;
  --radius-lg: 1.25rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;
  --transition-base: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111111;
    --color-muted: #999999;
    --color-surface: #222222;
    --color-text: #f0f0f0;
  }
}

:root[data-theme="dark"] {
  --color-bg: #111111;
  --color-muted: #999999;
  --color-surface: #222222;
  --color-text: #f0f0f0;
}

:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-muted: #666666;
  --color-surface: #f8f8f8;
  --color-text: #000000;
}