/* VerdIQ — base styles. Tokens live in tokens.css (from docs/design/tokens.css).
   Plain CSS, BEM-ish blocks, no inline styles (PLAN §1, §8). */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-md); font-weight: 600; }

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

strong { font-weight: 600; }

.mono, .ref { font-family: var(--font-mono); }

/* Wordmark: "Verd" 500 + "IQ" 700 in the accent; layouts recolour IQ on brand-deep. */
.wordmark { font-family: var(--font-sans); font-weight: 500; letter-spacing: -.02em; }
.wordmark__iq { font-weight: 700; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }

/* Components set display; the hidden attribute must still win. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }