/* ============================================================
   КиберОпора — дизайн-токены и база
   Направление: «Опора» — светлый практикум кибергигиены.
   Плакатная графика (рамки 2–3px, радиус 0) сохранена, палитра
   светлая: белый лист, стальной синий акцент, графитовый текст.
   kiberopora.com · Проверь до оплаты. Верни после обмана.

   Брейкпоинты (mobile-first):
     375px  — база, все стили без media
     768px  — @media (min-width: 768px)
     1120px — @media (min-width: 1120px)
   ============================================================ */

:root{
  /* ---------- Цвета: ядро ---------- */
  --ko-paper:       #FFFFFF; /* белый — основной фон */
  --ko-ink:         #17212B; /* графит — текст, рамки, тёмные плашки */
  --ko-brand:       #1D5FBF; /* стальной синий — акцент: плашки, кнопки, киккеры; 6.1:1 на белом */
  --ko-brand-text:  #17509E; /* синий текстовый — мелкий акцентный текст; 7.3:1 на белом */
  --ko-danger:      #C13A2B; /* сигнальный красный — вердикт «платить нельзя», ошибки; 5.4:1 под белый текст */
  --ko-danger-text: #A93226; /* красный текстовый — мелкие тревожные подписи; 6.1:1 на белом */
  --ko-safe:        #1E6B4C; /* глубокий зелёный — вердикт «нарушений не нашли»; 6.2:1 под белый текст */
  --ko-mist:        #F2F6FB; /* холодный светло-голубой — вторичные фоны секций и карточек */
  --ko-warn:        #7C5210; /* охристый «подозрительно» — текст и плашки; 6.6:1 на белом */

  /* ---------- Цвета: производные ---------- */
  --ko-line:         var(--ko-ink);          /* все рамки — сплошной графит */
  --ko-line-inverse: var(--ko-paper);        /* рамки на тёмных плашках */
  --ko-line-faint:   rgba(23, 33, 43, .28);  /* тонкие разделители */
  --ko-bg:           var(--ko-paper);
  --ko-bg-alt:       var(--ko-mist);         /* фон выделенных карточек и подложек */
  --ko-bg-inverse:   var(--ko-ink);          /* служебная строка, шапки блоков */
  --ko-warn-plate:   #EFD27A;                /* светлая охристая плашка, текст на ней — только --ko-ink */
  --ko-hover-bg:     var(--ko-ink);          /* инверсия при наведении */
  --ko-hover-text:   var(--ko-paper);
  --ko-focus-ring:   var(--ko-ink);          /* на тёмных фонах переопределяется на --ko-paper */
  --ko-mark:         #D8E6F8;                /* inset-подсветка «маркером» — единственная разрешённая тень */

  /* ---------- Типографика: гарнитуры ---------- */
  --font-display: 'Manrope', 'Segoe UI', Arial, sans-serif;     /* крупные заголовки и цифры-факты (вес 700–800) */
  --font-text:    'Manrope', 'Segoe UI', Arial, sans-serif;     /* весь текст и интерфейс */
  --font-mono:    ui-monospace, 'Consolas', 'Menlo', monospace; /* технические метки: hex, whois, домены */

  /* ---------- Типографика: шкала 375 → 768 → 1120 ---------- */
  --fs-display: 40px;  --lh-display: 1.05; --ls-display: -.015em; /* цифры-факты, плакатные числа: 40/56/64 */
  --fs-h1:      34px;  --lh-h1:      1.12; --ls-h1:      -.012em; /* H1: 34/44/52 */
  --fs-h2:      26px;  --lh-h2:      1.2;  --ls-h2:      -.008em; /* H2: 26/30/32 */
  --fs-h3:      20px;  --lh-h3:      1.3;                        /* H3: 20/22/22 */
  --fs-lead:    18px;  --lh-lead:    1.5;                        /* лид «короткий ответ»: 18/19/19 */
  --fs-body:    16px;  --lh-body:    1.55;                       /* текст: 16/17/17 */
  --fs-caption: 13px;  --lh-caption: 1.45;                       /* подписи, сноски, дисклеймеры */
  --fs-label:   12px;  --lh-label:   1.3;  --ls-label:   .12em;  /* киккеры и метки, uppercase */
  --fs-mono:    12px;  --ls-mono:    .06em;                      /* моно-метки: домены, даты whois */

  /* ---------- Отступы: база 4px ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  48px;
  --s-9:  64px;
  --s-10: 80px;
  --s-11: 96px;
  --s-12: 128px;

  /* ---------- Рамки ---------- */
  --border-2: 2px; /* внутренние разделители, второстепенные рамки */
  --border-3: 3px; /* внешние рамки блоков, плакатные обводки */

  /* ---------- Контейнер ---------- */
  --container-max: 1180px;
  --container-pad: 20px;
}

@media (min-width: 768px){
  :root{
    --fs-display: 56px;
    --fs-h1:      44px;
    --fs-h2:      30px;
    --fs-h3:      22px;
    --fs-lead:    19px;
    --fs-body:    17px;
    --container-pad: 24px;
  }
}

@media (min-width: 1120px){
  :root{
    --fs-display: 64px;
    --fs-h1:      52px;
    --fs-h2:      32px;
  }
}

/* ============================================================
   База: reset-минимум
   ============================================================ */

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

html{ -webkit-text-size-adjust: 100%; }

body{
  background: var(--ko-bg);
  color: var(--ko-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}

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

button, input, select, textarea{ font: inherit; color: inherit; border-radius: 0; }

/* ---------- Заголовки ---------- */
h1, h2, h3{
  font-family: var(--font-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1{ font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2{ font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3{ font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, h5, h6{ font-family: var(--font-text); font-weight: 700; font-size: var(--fs-body); }

/* Manrope вариативный (ось 200–800): жирный не синтезируем, берём 700 */
b, strong{ font-weight: 700; }

/* ---------- Ссылки ---------- */
a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover{ text-decoration-color: var(--ko-brand); }

/* ---------- Выделение ---------- */
::selection{ background: var(--ko-ink); color: var(--ko-paper); }

/* ---------- Фокус: толстая чёрная обводка ---------- */
:focus-visible{
  outline: 3px solid var(--ko-focus-ring);
  outline-offset: 2px;
}

/* ---------- Подсветка маркером: единственная разрешённая «тень» ---------- */
.mark{
  font-style: normal;
  box-shadow: inset 0 -.38em 0 var(--ko-mark);
}

/* ---------- Скрытый текст для скринридеров ---------- */
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Сниженная анимация ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}