/* =========================================================================
   base.css — шрифты, токены, сброс, типографика
   Дизайн-система: DESIGN.md (Cyber Defense Framework)

   Три осознанных отклонения от DESIGN.md, каждое ради кириллицы:

   1. Моноширинные лейблы НЕ получают text-transform: uppercase глобально.
      DESIGN.md требует капс для label-sm. На кириллице в 12px капс убивает
      распознавание слова по внешней форме — читатель разбирает его побуквенно.
      Капс остаётся только там, где текст латинский или цифровой (CVSS, PoC,
      MSSP, номера положений) — через явный класс .u-caps.

   2. line-height корпусного текста поднят с 24px до 1.7. Само DESIGN.md
      это и предписывает в примечании к типографике: у кириллицы выше
      вертикальная сложность, строки нужно разводить.

   3. rounded.full (9999px) применяется только к чипам и бейджам. Кнопки и
      карточки держат 4px, как требует раздел Shapes.
   ========================================================================= */

/* ── Шрифты ───────────────────────────────────────────────────────────────
   Inter и JetBrains Mono подключены вариативными файлами: один woff2 на
   весь диапазон весов 100–900, поэтому 400/600/700/800 не стоят ничего
   сверху. Разбивка по трём сабсетам, а не по двум:

     cyrillic   — основной текст
     latin      — латиница, цифры, пунктуация
     latin-ext  — ЗДЕСЬ ЛЕЖИТ ЗНАК РУБЛЯ ₽ (U+20BD, диапазон U+20AD–20C0)

   Без latin-ext таблица цен теряет ₽ в системный фолбэк — знак вылезает
   другим шрифтом прямо посреди строки. Не удалять этот сабсет.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jbmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jbmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jbmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Токены ───────────────────────────────────────────────────────────────
   Значения взяты из DESIGN.md напрямую. Производные (--accent-wash и т.п.)
   рассчитаны от falcon-red и существуют, чтобы красный нигде не появлялся
   «на глаз» в произвольной прозрачности.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Тональные слои. L0 → L3, глубина набирается тоном, а не тенью. */
  --bg: #0d0d0d;
  --panel: #1c1c1c;
  --panel-2: #2a2a2a;
  --panel-3: #353534;
  --void: #0a0a0a;

  /* Границы. Секции разделяются линией, а не отступом. */
  --line: #2a2a2a;
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-glass: rgba(255, 255, 255, 0.1);

  /* Акцент. Falcon Red. Только акцент — никаких больших заливок. */
  --accent: #e31b23;
  --accent-lift: #f4353d;
  --accent-deep: #c00015;
  --accent-wash: rgba(227, 27, 35, 0.12);
  --accent-line: rgba(227, 27, 35, 0.35);
  --accent-glow: rgba(227, 27, 35, 0.28);
  /* Отдельный, более плотный оттенок для линии поля в рейтинге: на 1px
     ширины прозрачность 0.35 сливается с фоном панели и главный элемент
     страницы пропадает. Подчёркивания ссылок при этом должны остаться
     деликатными, поэтому им оставлен --accent-line. */
  --accent-rule: rgba(227, 27, 35, 0.55);

  /* Текст */
  --ink: #ffffff;
  --ink-2: #a0a0a0;
  --ink-3: #6f6f6f;

  /* Гарнитуры */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  /* Радиусы. DESIGN.md: shape language = Soft 0.25rem. */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-pill: 9999px;

  /* Шаг 4px */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Каркас */
  --rail: 320px;
  --shell-max: 1180px;
  --measure: 40rem;
  --topbar: 64px;
  --pad-page: 16px;
  --section: 48px;

  /* Движение */
  --speed: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --pad-page: 48px;
    --section: 72px;
  }
}

/* ── Сброс ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Якорь #rating не должен уезжать под фиксированную мобильную шапку. */
  scroll-padding-top: calc(var(--topbar) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ── Типографика ──────────────────────────────────────────────────────────
   Шкала из DESIGN.md. Мобильные размеры — база, десктопные — в медиазапросе,
   как того требует headline-lg-mobile.
   ───────────────────────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 48px;
    line-height: 1.12;
  }

  h2 {
    font-size: 32px;
    line-height: 1.25;
  }

  h3 {
    font-size: 20px;
  }
}

p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
  /* Не оставляет одиночное слово на последней строке абзаца. В русском тексте
     висячее слово заметнее, чем в английском: слова длиннее, и одно короткое
     на пустой строке выглядит обрывом, а не концом мысли. */
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

/* ── Ссылки ───────────────────────────────────────────────────────────────
   В корпусном тексте ссылка подчёркнута всегда: на тёмном фоне красный
   без подчёркивания читается как выделение, а не как переход.
   ───────────────────────────────────────────────────────────────────────── */

a {
  color: var(--ink);
  text-decoration-color: var(--accent-line);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--speed) var(--ease),
              text-decoration-color var(--speed) var(--ease);
}

a:hover {
  color: var(--accent-lift);
  text-decoration-color: currentColor;
}

a:active {
  color: var(--accent-deep);
}

/* ── Фокус ────────────────────────────────────────────────────────────────
   Обводка отбивается от элемента на 2px, иначе на тёмном фоне красный
   контур сливается с красной же границей активного состояния.
   ───────────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ── Утилиты ──────────────────────────────────────────────────────────────── */

.u-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

/* Капс — только для латиницы, цифр и аббревиатур. См. отклонение №1. */
.u-caps {
  text-transform: uppercase;
}

.u-accent {
  color: var(--accent);
}

.u-dim {
  color: var(--ink-2);
}

.u-visually-hidden {
  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;
}

/* ── Доступность ──────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: calc(-1 * var(--sp-8) - 24px);
  z-index: 200;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-2);
  transition: top var(--speed) var(--ease);
}

.skip-link:focus {
  top: var(--sp-3);
  color: var(--ink);
}

@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;
  }
}