/* Dark-first: these are the defaults with no OS preference match (fallback = dark). */
:root {
  --color-bg: #121212;
  --color-fg: #ededed;
  --color-fg-muted: #a3a3a3;
  --color-fg-lighted: rgba(245,245,245,0.1);
  --color-accent: #00bbf9;
  --color-border: #2a2a2a;

  /* Fluid scale functions, no fixed breakpoints needed for most spacing/type. */
  --space-s: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --space-m: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --space-l: clamp(2.5rem, 2rem + 2vw, 4rem);

  --font-size-body: 1.15rem;

  --font-family: "Mozilla Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max-width: 620px;
  --radius: 0.5rem;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: #efefef;
    --color-fg: #171717;
    --color-fg-muted: #595959;
  --color-fg-lighted: rgba(23,23,23,0.1);
    --color-accent: #0745cb;
    --color-border: #e2e2e2;
  }
}

:root[data-theme="light"] {
  --color-bg: #efefef;
  --color-fg: #171717;
  --color-fg-muted: #595959;
  --color-fg-lighted: rgba(23,23,23,0.1);
  --color-accent: #0745cb;
  --color-border: #e2e2e2;
}