/* ==========================================================================
   Hotbox Academy — Base styles
   Reset, typography, layout primitives. Depends on tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--neon); color: #ffffff; }

* { scrollbar-width: thin; scrollbar-color: rgba(154, 163, 173, 0.3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(154, 163, 173, 0.3); border-radius: var(--r-pill); border: 3px solid var(--bg-0); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Typography ----
   Display: Archivo condensed, heavy, tight. The voice of machine signage.
   Body: Archivo at normal width. Printed numbers: Courier Prime. */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2, .display {
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.94;
}
h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(2.2rem, 3.8vw, 3rem); }
h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0; }
p + p { margin-top: var(--s-4); }
a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-fast); }
a:hover { text-decoration-color: var(--fg); }
strong { font-weight: 600; color: var(--fg); }
small { font-size: var(--t-sm); color: var(--fg-dim); }
ul, ol { margin: 0; padding-left: 1.25rem; }
li + li { margin-top: var(--s-2); }
code, kbd { font-family: var(--font-mono); font-size: 0.95em; }

/* Small label: sentence case, semi-expanded, quiet. Carries information, not decoration. */
.label {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--t-xs); font-weight: 600; font-stretch: var(--wide-stretch);
  color: var(--fg-dim); letter-spacing: 0.01em;
}
.label--accent { color: var(--neon-hot); }
.label--fg { color: var(--fg); }

/* Status dot. The live one glows like an LED. */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); display: inline-block; flex: none; }
.dot--live { background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.9); }
.dot--ok { background: var(--ok); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.measure { max-width: var(--measure); }
.num { font-variant-numeric: tabular-nums; }
.lede { font-size: var(--t-lg); color: var(--fg-dim); line-height: 1.5; max-width: 54ch; }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid > * { min-width: 0; }

:focus-visible { outline: 2px solid var(--neon-hot); outline-offset: 3px; }

.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; }

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