/* ============================================================
   AURA · BASE — фундамент после токенов (Спринт B1, SPEC §5)
   Подключается СТРОГО между assets/tokens.css и assets/aura.css:

       <link rel="stylesheet" href="assets/tokens.css">
       <link rel="stylesheet" href="assets/base.css">   ← этот файл
       <link rel="stylesheet" href="assets/aura.css">
       <link rel="stylesheet" href="assets/theme-sun.css">

   ЧТО ЗДЕСЬ ЕСТЬ И ЧЕГО ЗДЕСЬ НЕТ
   Слой B1 задаёт систему, а не внешний вид: он объявляет переменные и
   контракты, но не переопределяет ни одного действующего правила.
   Поэтому подключение base.css не меняет ни одного вычисленного стиля —
   это проверяется замером до/после (см. отчёт B1).

   ПЕРЕМЕННЫЕ ЗДЕСЬ РАБОТАЮТ: подстановка var() разрешается в момент
   вычисления, поэтому значения из base.css видны правилам из aura.css и
   theme-sun.css, объявленным позже.

   ВСЁ, ЧТО МЕНЯЕТ ВИД СТРАНИЦЫ, ЖИВЁТ В СПРИНТЕ B2: замена 1188 цветовых
   литералов, 713 значений отступов, 66 размеров шрифта и 28 чисел z-index
   на токены ниже. B2 выполняется отдельным исполнителем, файлы — aura.css
   и theme-sun.css; base.css при этом не переписывается.
   ============================================================ */

:root{

  /* ---------- СЕТКА И РИТМ СТРАНИЦЫ ----------
     Замерено до правок: .wrap — max-width 1280px, padding 24px;
     .sec — padding-top 49,824px. Значения ниже — то же самое,
     но выраженное одним источником вместо литералов в двух файлах. */
  --wrap-max:       1280px;
  --wrap-pad:       24px;
  --section-gap:    48px;   /* .sec--grey{margin-top:34px} → шаг ритма */
  --section-pad-y:  50px;
  --grid-gap:       20px;

  /* Мобильный ритм: те же имена, меньшие значения (SPEC: брейкпоинт 768) */
  --section-gap-sm:   28px;
  --section-pad-y-sm: 32px;
  --grid-gap-sm:      12px;

  /* ---------- ТЕКСТОВЫЕ РОЛИ ----------
     Роль = размер + интерлиньяж + насыщенность + трекинг в одной ссылке.
     Компоненты используют роль, а не набор из четырёх литералов. */
  --text-caption:  var(--fw-semibold) var(--fs-xs)/var(--lh-snug) var(--font-sans);
  --text-note:     var(--fw-regular)  var(--fs-xs)/var(--lh-snug) var(--font-sans);
  --text-small:    var(--fw-regular)  var(--fs-sm)/var(--lh-body) var(--font-sans);
  --text-body:     var(--fw-regular)  var(--fs-md)/var(--lh-body) var(--font-sans);
  --text-lead:     var(--fw-regular)  var(--fs-lg)/var(--lh-body) var(--font-sans);
  --text-h3:       var(--fw-semibold) var(--fs-xl)/var(--lh-tight) var(--font-head);
  --text-h2:       var(--fw-semibold) var(--fs-2xl)/var(--lh-tight) var(--font-head);
  --text-h1:       var(--fw-semibold) var(--fs-3xl)/var(--lh-tight) var(--font-head);
  --text-display:  var(--fw-semibold) var(--fs-display)/1.05 var(--font-head);

  /* ---------- ФОКУС ----------
     Действующее правило — aura.css:18:
        :focus-visible{outline:2.5px solid var(--emerald);outline-offset:2px}
     (--emerald = #000000, контраст 21:1 на белом и 18,76:1 на #F2F2F2).
     Контракт переносится в токены, значение не меняется: B2 переводит
     aura.css:18 на эти имена, не подбирая числа заново. */
  --focus-width:    2.5px;
  --focus-offset:   2px;

  /* ---------- ДВИЖЕНИЕ ----------
     aura.css:19 и theme-sun.css:1141/1207/1236/1338 уже гасят анимации
     при prefers-reduced-motion. Здесь — только длительности, чтобы B2
     не заводил новые литералы .18s/.9s/.55s. */
  --dur-hover:      .18s;
  --dur-reveal:     .9s;
  --dur-modal:      .25s;

  /* ---------- ГРАНИЦЫ И ЛИНИИ ---------- */
  --border-w:        1px;
  --border-w-strong: 1.5px;
}

/* ---------- СЛУЖЕБНЫЕ КЛАССЫ ----------
   Префикс u- и нулевая специфичность через :where() — класс срабатывает
   только там, где его явно поставили в разметке, и не может перебить
   существующие правила. Аналогичных имён в проекте нет (проверено grep). */

/* Фокусная обводка единым контрактом. Для случаев, когда элемент вне
   общего правила aura.css:18 — например новый узел, добавленный скриптом. */
:where(.u-focus-ring):focus-visible{
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-0);
}

/* Текст, скрытый визуально, но читаемый скринридером. Замена инлайновым
   конструкциям вида style="position:absolute;width:1px;height:1px…" */
:where(.u-sr-only){
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Минимальный размер текста по SPEC §3: не мельче 12px. Класс для узлов,
   которым B2/B3 будут назначать роль, вместо литералов 10/10.5/11/11.5px. */
:where(.u-text-min){
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
}

/* Ссылка, растянутая на весь контейнер: увеличивает область нажатия
   карточки до 44 × 44 px, не меняя её вид (SPEC §3 «Тап-таргеты»). */
:where(.u-tap-target)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-raised);
}

/* Пропуск меню с клавиатуры: ссылка видна только при фокусе (аудит, п.8).
   Селектор без :where() — у :where() нулевая специфичность, и цвет текста
   перебивался общим правилом для ссылок. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:var(--z-overlay);
  padding:12px 18px;
  background:#000;
  color:#fff;
  font-size:14px;
  text-decoration:none;
}
.skip-link:focus{
  left:12px;
  top:12px;
  outline:2px solid #fff;
  outline-offset:2px;
}

/* Элементы форм наследуют шрифт страницы. Без этого правила кнопки и поля без
   собственного font-size берут системный шрифт браузера — 13,3333px Arial,
   чужой кегль и чужая гарнитура (аудит, п.4: в бургер-кнопке и в кнопке поиска
   так и было). Размеры и отступы кнопок правило не меняет. */
button,
input,
select,
textarea{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}