/* ==========================================================================
   02 · База: reset, типографика, примитивы
   Здесь только то, что используется на странице. Ни одного значения «своим
   числом» — только токены из tokens.css.
   ========================================================================== */

@layer base {
  /* --- Reset ----------------------------------------------------------- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    /* Якоря не заезжают под закреплённую шапку */
    scroll-padding-top: calc(var(--header-h) + var(--sp-2));
    text-underline-offset: 0.15em;
  }

  body {
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  a {
    color: var(--c-red-dark);
  }

  /* --- Типографика ----------------------------------------------------- */
  /* `.display` — та же роль крупной надписи, но для не-заголовков:
     например подпись поверх кадра карусели. Один набор правил на всех. */
  h1,
  h2,
  h3,
  h4,
  .display {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: var(--lh-h2);
    text-wrap: balance;
  }

  h1,
  .display {
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
    text-transform: uppercase;
  }

  h2 {
    font-size: var(--fs-h2);
    text-transform: uppercase;
  }

  h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h3);
  }

  p {
    max-width: var(--measure);
  }

  /* --- Фокус ----------------------------------------------------------- */
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* --- Примитивы ------------------------------------------------------- */
  .container {
    width: 100%;
    max-width: var(--w-content);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }

  /* Инлайн-спрайт SVG: лежит в потоке, но не занимает места */
  .sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: var(--z-skip);
    transform: translateY(-200%);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-white);
    color: var(--c-ink);
    border: 2px solid var(--c-red);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease);
  }

  .skip-link:focus {
    transform: none;
  }
}

/* Анимации отключаются полностью — требование spec/01 §4 и доступности.
   Блок вне @layer, поэтому по каскаду он сильнее любого слоя и `!important` не нужен. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}