/* ============================================================================
   Base — сброс, базовая типографика и примитивы раскладки (container/section).
   Всё значимое берётся из токенов; магических литералов здесь нет.
   ============================================================================ */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    line-height: 1.55;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;                 /* фоновые «сияния» не должны рождать горизонтальный скролл */
  }

  a { color: inherit; text-decoration: none; }
  img, svg { max-width: 100%; height: auto; display: block; }
  ul { margin: 0; padding: 0; list-style: none; }

  h1, h2, h3, h4, p { margin: 0; }

  /* ---- Раскладка ----------------------------------------------------- */
  .container { width: min(var(--container), calc(100% - var(--space-6))); margin-inline: auto; }

  .section { padding-block: var(--space-section); position: relative; }
  .section--alt { background: var(--bg-alt); }
  .section--dark { background: var(--gradient-dark); color: var(--on-dark); }

  /* Тонкая разделительная линия между соседними светлыми секциями */
  .section + .section:not(.section--dark)::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline), transparent);
  }

  /* ---- Заголовки и типографические роли ------------------------------ */
  .headline { font-family: var(--font-display); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
  .h1 { font-size: var(--fs-900); }
  .h2 { font-size: var(--fs-800); }
  .h3 { font-size: var(--fs-600); }
  .text-gradient {
    background: var(--gradient-brand-2);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .lead { font-size: var(--fs-500); color: var(--ink-soft); max-width: 60ch; }
  .section--dark .lead { color: var(--on-dark-muted); }
  .muted { color: var(--muted); }

  /* Блок «заголовок секции + лид» */
  .section-head { max-width: 46ch; margin-bottom: var(--space-7); }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head .lead { margin-top: var(--space-3); }

  /* ---- Доступность ---------------------------------------------------- */
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
  .section--dark :focus-visible { outline-color: #fff; }

  .skip-link {
    position: absolute; left: var(--space-3); top: -80px; z-index: 300;
    background: var(--surface); color: var(--primary);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
    box-shadow: var(--shadow-card); font-weight: 700; transition: top .2s var(--ease);
  }
  .skip-link:focus { top: var(--space-3); }

  .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;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}