/* ONYX base — fonts, reset, body defaults, type scale, layout primitives. */

/* ---- self-hosted variable fonts (latin subset) ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/static/fonts/albert-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

/* ---- reset + body ---- */
* { box-sizing: border-box; margin: 0; }

html, body { min-height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  font-size: 14.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; }

/* ---- shared atoms (from the approved tokens file) ---- */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--surface);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex: none;
}

.spark { color: var(--ai); flex: none; }

/* ---- layout ---- */
.app-page {
  max-width: 1280px;
  min-width: 880px;
  margin: 0 auto;
  padding: 26px 32px 80px;
}

/* ---- focus ---- */
:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}