/* ==========================================================================
   Design System — base.css (generic)
   Reset · типографика (антиква Source Serif 4 + гротеск Spora Sans + JetBrains Mono)
   · контейнер · секции · сетки · точечный фон
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  background: var(--bg); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-base), color var(--duration-base);
}
img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--border); }
ul.list-reset, ol.list-reset { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
::selection { background: rgba(178,107,245,.28); color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- Typography ---------- */
.display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-display); }
h1, .h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-h1); }
h2, .h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-h2); }
h3, .h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--weight-h3); }
h4, .h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-h4); font-weight: var(--weight-h4); }
h5, .h5 { font-size: var(--text-h5); line-height: var(--leading-h5); letter-spacing: var(--tracking-h5); font-weight: var(--weight-h5); }
.h1, .h2, .h3, .h4, .h5 { font-family: var(--font-display); }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--text-secondary); max-width: 36em; }
.body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.small, small { font-size: var(--text-small); line-height: var(--leading-small); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-tertiary); }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: 0; }
/* Моно-лейбл: КАПС с широким трекингом — фирменный приём */
.label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); font-weight: var(--weight-label); text-transform: uppercase; color: var(--text-secondary); }
.mono-xs { font-family: var(--font-mono); font-size: var(--text-mono-xs); line-height: var(--leading-mono-xs); letter-spacing: var(--tracking-mono-xs); font-weight: var(--weight-mono-xs); text-transform: uppercase; }
.serif, .display-font { font-family: var(--font-display); }
.muted { color: var(--text-secondary); }
.subtle { color: var(--text-tertiary); }

/* Prose */
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--text-secondary); max-width: var(--container-narrow); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--text-h3); line-height: 1.2; margin-top: 1.8em; color: var(--text-primary); }
.prose h3 { font-size: var(--text-h4); margin-top: 1.5em; color: var(--text-primary); }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--accent-text); }
.prose blockquote { font-family: var(--font-display); font-size: var(--text-h5); line-height: 1.45; color: var(--text-primary); padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); }
.prose :not(pre) > code { background: var(--surface-sunken); border: 1px solid var(--border); padding: .08em .38em; border-radius: var(--radius-xs); font-size: .84em; color: var(--text-primary); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--alt { background: var(--bg-alt); }
.section--soft { background: var(--bg-soft); }
.section--line { border-top: 1px solid var(--border); }

.grid { display: grid; gap: var(--grid-gap, var(--space-4)); }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid > *, .split > *, .docs > *, .app > *, .catalog > *, .play > * { min-width: 0; }
.split { display: grid; gap: 40px; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .split--even { grid-template-columns: 1fr 1fr; } }
.stack { display: grid; gap: var(--stack-gap, 16px); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, 8px); align-items: center; }

/* ---------- A11y ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; background: var(--accent); color: var(--accent-fg); padding: 10px 14px; border-radius: var(--radius-md); font-weight: 600; transition: top var(--duration-fast); }
.skip-link:focus { top: 12px; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--xs { width: 12px; height: 12px; } .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 20px; height: 20px; } .icon--xl { width: 24px; height: 24px; }

/* Tooltip (data-tooltip) */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); background: var(--surface-inverse); color: var(--text-inverse); font: 500 12px/1.3 var(--font-sans); letter-spacing: 0; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast), transform var(--duration-fast); z-index: var(--z-tooltip); }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-tooltip]:not(:focus-visible)::after { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }