/* Основа: шрифт, сброс, типографика, фокус, контейнер, каркас страницы.
   Все значения — токены из tokens.css. План: docs/Визуальный-план-v3.md, разделы 5, 6, 8, 12. */

/* 1. Шрифт Golos Text: 400 и 600, кириллица + латиница, лежит в проекте.
   Лицензия OFL — static/fonts/OFL-Golos-Text.txt */
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-400.c21e8dd49aaf.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-600.9b2f72e0d8f2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2. Сброс */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* 3. Основа */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

/* Зерно (8.1): статичный шум только на фоне, под фигурами и контентом.
   Плитка из scripts/make_grain.py рисуется один раз и не перерисовывается при прокрутке.
   Не движется, поэтому остаётся и при «уменьшить движение». */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: url("../img/grain.377411bac0af.png") repeat;
  background-size: var(--grain-size) var(--grain-size);
  opacity: var(--grain-opacity);
}

/* 4. Типографика: иерархия размером и разрядкой, не жирностью */
h1, h2, h3, h4 { font-weight: var(--fw-semibold); color: var(--text); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h1, h2 { text-wrap: balance; }

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }
.prose { max-width: var(--measure); }

/* Цифры в таблицах, баллах, счётчиках */
.num { font-variant-numeric: tabular-nums; }

a { color: var(--text); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

/* 5. Фокус с клавиатуры: виден на всём интерактивном */
:focus-visible {
  outline: var(--border-strong) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Ссылка «Перейти к содержимому»: видна только при фокусе */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-small);
  transform: translateY(calc(-100% - var(--sp-4)));
}
.skip-link:focus-visible { transform: none; color: var(--on-accent); }

/* Атрибут hidden побеждает display из классов (.btn, flex и т. п.) */
[hidden] { display: none !important; }

/* Текст только для программ чтения с экрана */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 6. Контейнер: ширина до 1200 px, поля 16 / 24 / 48 px. Сетка и композиции — в layout.css */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 7. Шапка и меню телефона — в components.css */

/* 8. Основная часть */
.main {
  flex: 1;
  padding-block: var(--sp-7);
}
.main > * + * { margin-top: var(--sp-5); }

/* 9. Подвал */
.footer {
  color: var(--text-2);
  font-size: var(--fs-small);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--text); }