:root {
  --color-bg: #ffffff;
  --color-fg: #111111;
  --color-accent: #007acc;

  --width-mobile: 32rem;
  --width-content: 48rem;
  --width-max: 60rem;

  --line-height: 1.5;
  --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-fg: #f5f5f5;
    --color-accent: #4dabf7;
  }
}

html {
  font-size: 100%;
  font-family: var(--font-family);
  line-height: var(--line-height);

  background: var(--color-bg);
  color: var(--color-fg);
}

@import "header";