/* ============================================================================
 * base.css — Reset + базовые элементы на токенах.
 * Подключать ПОСЛЕ tokens.css и skins.css, ПЕРЕД компонентами.
 * Содержит: modern reset, типографику, layout-хелперы, focus-visible, .btn.
 * ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--ambient);            /* амбиентное свечение по углам */
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--brand); }
ul, ol { padding-left: var(--s-5); }
hr { border: none; border-top: var(--hairline); margin-block: var(--s-6); }
::selection { background: var(--brand-soft); color: var(--text); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--text); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--t-h4); font-weight: var(--fw-semi); }
small { font-size: var(--t-small); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

.eyebrow { font-size: var(--t-tiny); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); font-weight: var(--fw-semi); }
.lede { font-size: var(--t-h4); line-height: var(--lh-loose); color: var(--text-dim); }
.muted { color: var(--text-mute); }

/* ---------- Layout helpers ---------- */
.container       { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--prose{ max-width: var(--container-prose); }
.section         { padding-block: var(--s-8); }
.section--tight  { padding-block: var(--s-6); }
.section--alt    { background: var(--bg-2); }
.section--deep   { background: var(--bg-3); }
.stack > * + *   { margin-top: var(--s-4); }
.cluster         { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- Focus-visible (a11y) ---------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-soft); }
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link { position: absolute; left: var(--s-3); top: -120%; z-index: var(--z-toast); background: var(--surface); color: var(--text); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.skip-link:focus { top: var(--s-3); }

/* Visually-hidden but screen-reader available */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons (примитив, наследуется CTA-блоками) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); padding: 0 var(--s-5);
  font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--t-small);
  line-height: 1; text-decoration: none; white-space: nowrap;
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: transform var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background-color: var(--brand); background-image: var(--grad-brand); color: var(--on-brand); box-shadow: var(--shadow-glow), 0 1px 2px rgba(0,0,0,.18); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 46px -10px color-mix(in srgb, var(--brand) 55%, transparent), 0 6px 16px -6px rgba(0,0,0,.28); }
.btn--ghost { background: var(--brand-soft); color: var(--brand); }
.btn--ghost:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.btn--outline:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn--lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--t-body); }
.btn--sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--t-tiny); }
.btn--block { display: flex; width: 100%; }

/* ---------- Surface primitive (карточки наследуют) ---------- */
.surface { background-color: var(--surface); background-image: var(--surface-grad); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* Стекло (frosted) — утилита для оверлеев/панелей/sticky-баров */
.glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-card); }