/* Colours and type from docs/design/screens/tokens.css (light and dark --background, --card, --border,
   --title-, --body-, --meta-foreground; --font-sans). */
:root {
  --background: oklch(0.9609 0.0012 285.786);
  --card: oklch(1 0 0);
  --border: oklch(0.141 0.005 285.823 / 0.1);
  --title-foreground: oklch(0.249 0.005 286);
  --body-foreground: oklch(0.429 0.005 286);
  --meta-foreground: oklch(0.553 0.005 286);
  --font-sans: "Inter Variable", "Inter", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.147 0.004 49.25);
    --card: oklch(0.216 0.006 56.043);
    --border: oklch(0.268 0.007 34.298);
    --title-foreground: oklch(0.97 0.002 106);
    --body-foreground: oklch(0.76 0.005 60);
    --meta-foreground: oklch(0.62 0.005 60);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--body-foreground);
  font: 16px/1.55 var(--font-sans);
}
main {
  max-width: 40rem;
  margin: 12vh auto 4rem;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
@media (max-width: 44rem) {
  main { margin: 1rem; padding: 1.25rem; }
}
h1 { color: var(--title-foreground); font-size: 1.75rem; line-height: 1.2; margin: 0 0 0.75rem; }
nav, .meta { color: var(--meta-foreground); font-size: 0.875rem; }
nav { margin-top: 2rem; display: flex; gap: 1.25rem; }
a { color: var(--title-foreground); }
form.signin { display: grid; gap: 0.5rem; margin: 1.5rem 0 0; }
form.signin input { font: inherit; padding: 0.5rem 0.625rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--background); color: var(--title-foreground); }
form.signin button { font: inherit; justify-self: start; margin-top: 0.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--title-foreground); color: var(--card);
  cursor: pointer; }
form.signin button:disabled { opacity: 0.6; cursor: default; }