/* ============================================================
   VABO VPN — база: шрифт, сброс, типографика, раскладка.
   Зависит только от tokens.css.
   ============================================================ */

/* Порядок слоёв объявлен один раз и задаёт приоритет:
   утилиты всегда перебивают компоненты, компоненты — базу. */
@layer tokens, base, components, utilities;

/* ── Шрифт ────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter var";
  src: url("/static/fonts/inter-var.woff2") format("woff2-variations"),
       url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  /* Кириллица + латиница + ₽ № ✓ — ровно то, что есть в сабсете */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0300-0304, U+0308-0309,
                 U+0323, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1,
                 U+2000-206F, U+20AC, U+20BD, U+2116, U+2122, U+2190-2193,
                 U+2212, U+2215, U+2713, U+FEFF, U+FFFD;
}

@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
    margin: 0;
  }

  :where(ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Якоря не уезжают под липкую шапку */
    scroll-padding-top: calc(var(--header-h) + var(--space-5));
  }

  body {
    min-height: 100svh;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-base);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--text);
    /* iOS: контент не лезет под вырез и домашнюю полоску */
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    overflow-x: clip;
  }

  /* ── Типографика ────────────────────────────────────────── */
  h1, h2, h3, h4 {
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.021em;
    text-wrap: balance;
    color: var(--text);
  }
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-lg); letter-spacing: -0.014em; }
  h4 { font-size: var(--text-md); letter-spacing: -0.010em; }

  p { text-wrap: pretty; }

  a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dur-fast) var(--ease-out);
  }
  a:hover { color: var(--text); }

  strong, b { font-weight: var(--weight-semibold); }

  small { font-size: var(--text-sm); }

  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--surface-2);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.35em;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: var(--space-6);
  }

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

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

  /* ── Фокус ──────────────────────────────────────────────── */
  :focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  /* Мышь не должна рисовать рамку, клавиатура — должна */
  :focus:not(:focus-visible) { outline: none; }

  ::selection {
    background: var(--accent-soft);
    color: var(--text);
  }

  /* ── Раскладка ──────────────────────────────────────────── */
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-width: var(--container-narrow); }

  .section {
    padding-block: clamp(var(--space-7), 5vw, var(--space-9));
  }
  .section + .section { border-top: 1px solid var(--border); }

  .section__head {
    max-width: 48ch;
    margin-bottom: var(--space-6);
  }
  .section__label {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--space-2);
  }
  .section__lead {
    margin-top: var(--space-3);
    font-size: var(--text-md);
    color: var(--text-muted);
    max-width: 58ch;
  }

  /* ── Доступность ────────────────────────────────────────── */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  /* Видно скринридеру, не видно глазом */
  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── Движение ───────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── Повышенный контраст ────────────────────────────────── */
  @media (prefers-contrast: more) {
    :root {
      --text-muted: var(--text);
      --border: var(--border-strong);
    }
  }

  /* ── Печать ─────────────────────────────────────────────── */
  @media print {
    .site-header, .site-footer, .theme-toggle, .nav-toggle { display: none; }
    body { background: #fff; color: #000; }
  }
}

@layer utilities {
  .stack > * + * { margin-block-start: var(--flow, var(--space-4)); }
  .text-muted { color: var(--text-muted); }
  .text-faint { color: var(--text-faint); }
  .text-center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .tabular { font-variant-numeric: tabular-nums; }
  /* Тяжёлые секции ниже первого экрана не считаются при первой отрисовке.
     На главной НЕ применяется: Lighthouse снимает вычисленные стили,
     пока поддерево не отрисовано, и получает цвета браузера по умолчанию —
     ложное нарушение контраста ценой 4 баллов доступности. Выигрыш
     в скорости при нынешних 92 КБ не стоит того. Класс оставлен
     для страниц, где контента действительно много. */
  .defer-paint {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}