/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Colours follow DESIGN.md (light and dark tokens). System fonts only, so the
   site loads nothing from third parties. */
:root {
  --background: #e3e6eb;
  --card: #ffffff;
  --foreground: #161a20;
  --muted-foreground: #444b56;
  --border: #747b87;
  --link: #2452ad;
  --warning: #8a5a00;
  --warning-soft: #fdf1d6;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0d0f12;
    --card: #1f2228;
    --foreground: #e9ecf0;
    --muted-foreground: #aab0ba;
    --border: #7a818d;
    --link: #9ab5ee;
    --warning: #e6b450;
    --warning-soft: #33290f;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font:
    16px/1.6 "IBM Plex Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

main {
  max-width: 44rem;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

header,
footer {
  max-width: 44rem;
  margin: 1.5rem auto;
  padding: 0 1rem;
  color: var(--muted-foreground);
}

header a.brand {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--foreground);
  text-decoration: none;
}

a {
  color: var(--link);
}

h1 {
  line-height: 1.25;
}

.draft {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 600;
}

@media (max-width: 40rem) {
  main {
    margin: 1rem;
    padding: 1.25rem;
  }
}