/* ============================================================ typography.css — базовые стили элементов + типографические роли Подключать после tokens.css. Шрифты (IBM Plex Serif / Sans / Mono) грузить в : ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; margin: 0; } h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); } h2 { font-size: var(--text-xl); line-height: var(--lh-xl); } h3 { font-size: var(--text-lg); line-height: var(--lh-lg); } h4 { font-size: var(--text-md); line-height: var(--lh-md); font-weight: var(--weight-medium); } p { margin: 0; max-width: var(--measure); } .tw-display { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-tight); text-wrap: balance; } .tw-lead { font-size: var(--text-md); line-height: var(--lh-md); color: var(--ink-soft); max-width: var(--measure); } .tw-small { font-size: var(--text-sm); line-height: var(--lh-sm); } .tw-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-faint); } .tw-mono { font-family: var(--font-mono); font-size: 0.9em; } a { color: var(--accent-ink); text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }