/* Base: reset, typography, focus. Requires tokens.css. Fonts are loaded with a <link> in each page. */

/* Atlas extension (not in tokens.json): state tones a BMS needs besides the single sky accent.
   Used only inside state badges, never as panel fills. */
:root {
  --state-alarm: #f0907a;
  --state-stale: #c9b884;
  --header-h: 64px;
  --gutter: var(--space-gutter);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  overflow-x: hidden;
}
a { color: var(--sky); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.tabular { font-variant-numeric: tabular-nums; }

/* Pages hide content until the auth guard passes (no flash of protected UI). */
html.needs-auth body > :not(noscript) { visibility: hidden; }
html.needs-auth.is-ready body > * { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}