/* Shared by both static sites; the publish step copies it (and fonts/, config.json) to each site root.
   Look source: docs/design/system.md. No external requests: fonts are bundled files. */
@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-Variable.ttf') format('truetype'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-Variable.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark light;
  --night: #121830; --panel: #1B2240; --text: #EEF0FA; --muted: #98A1C8; --ring: #2A3361;
  --alert: #FF5A3C; --on-alert: #1A0A06; --panel-hi: #262F55;
}
@media (prefers-color-scheme: light) {
  :root { --night: #F1F4FB; --panel: #FFFFFF; --text: #141A33; --muted: #555E88; --ring: #C9D0E8; --alert: #D93A1B; --on-alert: #040201; --panel-hi: #E8ECF7; }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: var(--night); color: var(--text); font: 400 16px/1.5 'Public Sans', system-ui, sans-serif; }
main { width: 100%; max-width: 420px; }
.brand { font: 800 30px/1 'Archivo', system-ui, sans-serif; font-stretch: 68%; letter-spacing: .02em; margin: 0 0 16px; }
.card { background: var(--panel); border: 1px solid var(--ring); border-radius: 20px; padding: 24px; }
h1 { font: 700 22px/1.2 'Archivo', system-ui, sans-serif; font-stretch: 75%; margin: 0 0 12px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.note { background: var(--panel-hi); border-radius: 12px; padding: 12px 16px; }
.btn { display: block; min-height: 48px; padding: 12px 16px; margin: 12px 0 0; border-radius: 12px; text-align: center; text-decoration: none;
  font: 700 16px/1.3 'Archivo', system-ui, sans-serif; font-stretch: 85%; background: var(--panel-hi); color: var(--text); }
.btn.primary { background: var(--alert); color: var(--on-alert); }
a { color: var(--text); }
a:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }