/* CSS-переменные: палитра, тени, радиусы, ширина макета */

:root {
  --bg: #000000;
  --surface: #080908;
  --surface-2: #10110f;
  --surface-3: #171814;
  --paper: #f1efe8;
  --paper-muted: #5f625b;
  --steel: #23262a;
  --text: #f6f4ee;
  --muted: #b9b8b1;
  --dim: #777873;
  --line: rgba(246, 244, 238, 0.12);
  --line-strong: rgba(246, 244, 238, 0.22);
  --body: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --accent: #f2c200;
  --accent-rgb: 242, 194, 0;
  --accent-hover: #d9ae00;
  --accent-dark: #2b2200;
  --on-accent: #1a1500;
  /* Вертикальный ритм. Один промежуток владеет всеми границами между секциями:
     секции сами вертикальных паддингов не носят. Значения текучие — совпадают
     с прежними 232px на десктопе и 136px на мобильном, но без скачка на брейкпоинте. */
  --section-gap: clamp(136px, 59px + 12vw, 232px);
  /* После полноэкранного героя визуальный зазор — половина обычного: герой сам
     несёт воздух. Формула учитывает его нижний паддинг 44px; сдвиг translateY
     и отрицательный margin-bottom героя гасят друг друга. */
  --section-gap-hero: calc(var(--section-gap) / 2 - 44px);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  --radius: 8px;
  --max: 1040px;
}