/* Default theme: clean, readable, light + dark.
   To make your own theme: copy this file to <name>.css, change the values,
   then set "theme": "<name>" in src/_data/site.json. */

:root {
  --bg: #ffffff;
  --fg: #1c2230;
  --muted: #5b6577;
  --accent: #3b5bdb;
  --accent-hover: #2b44b0;
  --accent-contrast: #ffffff;
  --border: #e3e7ee;
  --code-bg: #f4f6fa;
  --header-bg: transparent;
  --radius: 8px;
  --measure: 44rem;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tok-comment: #7a8599;
  --tok-punct: #4b5563;
  --tok-keyword: #a626a4;
  --tok-string: #2e7d32;
  --tok-number: #b45309;
  --tok-function: #1d4ed8;
}

/* Dark: follows the OS unless the user picked a theme with the toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f131a;
    --fg: #e5e9f0;
    --muted: #98a2b3;
    --accent: #8ea2ff;
    --accent-hover: #b4c0ff;
    --accent-contrast: #0f131a;
    --border: #232b38;
    --code-bg: #171d28;
    --tok-comment: #6b7688;
    --tok-punct: #aab4c5;
    --tok-keyword: #d19cf5;
    --tok-string: #8fd694;
    --tok-number: #f0b36a;
    --tok-function: #8ab4ff;
  }
}

:root[data-theme="dark"] {
  --bg: #0f131a;
  --fg: #e5e9f0;
  --muted: #98a2b3;
  --accent: #8ea2ff;
  --accent-hover: #b4c0ff;
  --accent-contrast: #0f131a;
  --border: #232b38;
  --code-bg: #171d28;
  --tok-comment: #6b7688;
  --tok-punct: #aab4c5;
  --tok-keyword: #d19cf5;
  --tok-string: #8fd694;
  --tok-number: #f0b36a;
  --tok-function: #8ab4ff;
}