/*
 * Type. 14px body on the system sans stack; mono only for ids, hashes
 * and numbers. Helpers (.muted .mono .num) live here because they are
 * typographic, not component-specific.
 */
html, body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh);
    min-height: 100vh;
}
h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-xl);  line-height: var(--lh-tight); font-weight: 600; }
h3 { font-size: var(--fs-md);  line-height: var(--lh-tight); font-weight: 600; }
p  { margin: 0; }

code, pre, kbd, .code-block {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
code {
    padding: 1px var(--sp-1);
    border-radius: var(--radius-sm);
    background: var(--color-surface-hi);
}
pre code { padding: 0; background: none; }
.code-block {
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    overflow: auto;
    color: var(--color-text-muted);
}

a { color: inherit; }
a:hover { color: var(--color-primary-hi); }
/* Prose links (inside copy, not chrome) read as links. */
.link { color: var(--color-primary-hi); }
.link:hover { text-decoration: underline; }

/* ── Helpers ─────────────────────────────────────────────────────── */
/* Secondary copy — small by default (table cells, captions, notes).
   Add .muted--base where it sits in prose. */
.muted       { color: var(--color-text-muted); font-size: var(--fs-xs); }
.muted--base { font-size: inherit; }
.dim         { color: var(--color-text-dim); }
.mono        { font-family: var(--font-mono); }
.num         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-muted  { color: var(--color-text-muted); }
.text-success{ color: var(--color-success); }
.text-warning{ color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.nowrap      { white-space: nowrap; }
.break       { overflow-wrap: anywhere; }

/* main.js copies the attribute's text on click; show it is tappable. */
[data-copy-text] { cursor: pointer; }
[data-copy-text]:hover { color: var(--color-primary-hi); }