/* Submagic Design System — Base / Reset / Typography
 * Requires tokens.css loaded first.
 */

/* Self-hosted fonts (first-party, latin subset) — no third-party font CDN at runtime.
 * One variable woff2 per family carries the full 400-800 weight axis.
 * Files live in design-system/fonts/. To refresh: python3 design-system/fetch-fonts.py. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/archivo.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: var(--sm-font-size-root);
}

body {
  margin: 0;
  color: var(--sm-fg);
  background: var(--sm-bg);
  font-family: var(--sm-font-body);
  font-size: 1rem;  /* 16px accessibility baseline — independent of --sm-fs-body (Submagic-matched at 14.4px for .sm-text) */
  line-height: var(--sm-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sm-space-4);
  color: var(--sm-fg-strong);
  font-family: var(--sm-font-display);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--sm-lh-tight);
  letter-spacing: var(--sm-tracking-tight);
}

h1 { font-size: var(--sm-fs-hero); font-weight: var(--sm-fw-bold); }
h2 { font-size: var(--sm-fs-title); }
h3 { font-size: 1.5rem; }
h4 { font-size: var(--sm-fs-subtitle); }
h5 { font-size: var(--sm-fs-body-lg); }
h6 { font-size: var(--sm-fs-body); }

p  { margin: 0 0 var(--sm-space-4); line-height: var(--sm-lh-text); }
a  { color: var(--sm-brand); text-decoration: none; transition: color var(--sm-duration-fast) var(--sm-ease); }
a:hover   { text-decoration: underline; }
strong    { font-weight: var(--sm-fw-heavy); color: var(--sm-fg-strong); }
img, svg  { max-width: 100%; height: auto; display: block; }
button    { font: inherit; cursor: pointer; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }