/* @font-face declarations */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/vendor/fonts/AtkinsonHyperlegible-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/vendor/fonts/AtkinsonHyperlegible-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/static/vendor/fonts/OpenDyslexic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/static/vendor/fonts/OpenDyslexic-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/vendor/fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

code, kbd, pre, samp, .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.35; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
p { margin: 0 0 var(--s-3); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Focus ring — accent color, consistent everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* scrollbar — dark but visible */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
::-webkit-scrollbar-track { background: transparent; }

/* utility classes used by shell */
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }