/* Наш слой токенов ПОВЕРХ IDS.
   Подключается первым среди components/*.css — всё остальное опирается только на него
   и на токены --ids__*. Цветовых литералов в компонентах быть не должно: цвет меняется
   в одном месте. Тёмной темы на сайте нет (решение владельца, 2026-10-30).

   Зачем свой слой вообще. IDS отдаёт наружу ровно три семантических цвета текста и
   поверхностей (--ids__text, --ids__text-caption, --ids__surface) и одно семейство
   шрифта (Inter). Стиль сайта — по мотивам bureau.ru (ветка bureau, 2026-10-29): жирный
   гротеск, один красный акцент, цветовые зоны типов работ и антиква для длинного текста.
   Всё это добавляется здесь, один раз, а не в каждом компоненте.

   Префикс --site__, а не --ids__: свои токены обязаны быть отличимы от системных,
   иначе при обновлении снапшота IDS невозможно понять, что наше, а что их. */

/* PT Serif — вендорится (assets/main/fonts, лицензия OFL — PT-Serif-OFL.txt), как Inter в IDS:
   без запросов к Google Fonts. Только кириллица и латиница, 400 и 700 — длинный текст
   и его выделения. До вендоринга засечки брались из системы: на macOS PT Serif есть,
   на Windows и Android заголовки уходили в Georgia и выглядели иначе. */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pt-serif-400-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pt-serif-400-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: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/pt-serif-700-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/pt-serif-700-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;
}

/* Golos Text — основной гротеск сайта (заголовки, интерфейс, текст). Вендорится так же, как
   PT Serif (assets/main/fonts, OFL — Golos-Text-OFL.txt): вариативный файл, веса 400–900 в одном,
   из npm-пакета @fontsource-variable/golos-text 5.3.0. Замена собственного Bureausans бюро
   Горбунова, на стиль которого ориентирован сайт (bureau.ru): та же роль — жирный крупный
   гротеск в заголовках и спокойный в тексте, хорошая кириллица (шрифт от Paratype). */
@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/golos-text-latin.woff2") format("woff2-variations");
    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;
}

:root {
    /* Пара гарнитур, как у бюро: гротеск — заголовки и интерфейс, антиква — длинный текст
       (основной текст кейса, «Информация»). Смена гарнитуры отделяет «читать» от «смотреть». */
    --site__font-sans: "Golos Text", "Helvetica Neue", Arial, sans-serif;
    --site__font-serif: "PT Serif", Georgia, "Times New Roman", serif;

    /* Подложка обложек и тихих блоков. Обложки в архиве — в основном логотипы и скриншоты на
       белом: на светлой подложке картинка лежит как оттиск на бумаге. */
    /* Еле заметная (решение владельца, 2026-10-30): серые плашки под обложками спорили с картинками. */
    --site__surface-paper: #f9f9f8;
    --site__surface-paper-strong: #f1f0ee;
    --site__ink-on-paper: #111;

    /* Волосяная линия: разделители строк реестра, рамки полей. От цвета текста. */
    --site__hairline: color-mix(in srgb, var(--ids__text) 14%, transparent);
    --site__hairline-strong: color-mix(in srgb, var(--ids__text) 35%, transparent);

    /* Единственный акцент сайта: главная кнопка, наведение, отметка текущего раздела. Красный —
       от бюро, но свой оттенок. Белый текст на нём — 5.1:1 (WCAG AA). */
    --site__accent: #d81e2c;
    --site__action: var(--site__accent);
    --site__action-hover: #b5141f;
    --site__action-text: #fff;
    /* Зелёная кнопка призыва (.btn--positive). */
    --site__positive: #0b7a55;
    --site__positive-hover: #08603f;
    /* Текст поверх фото, цветных зон и тёмных подложек — белый в любой теме. */
    --site__on-media: #fff;

    /* Цветовые зоны типов работ — фон страницы типа, шапка кейса, плитка без обложки.
       Ключ — слаг типа (body[data-zone], site.css). Каждый цвет даёт с белым текстом ≥5.3:1, а с подписью (белый 92%) ≥4.79:1,
       Работа без типа и новый тип без своего цвета
       получают графитовую зону по умолчанию. */
    --site__zone-default: #2b2b2b;
    --site__zone-site: #1f5bd6;
    --site__zone-interface: #0b7a55;
    --site__zone-graphic: #b3247a;
    --site__zone-presentations: #6b3fc0;
    --site__zone-banner: #b04300;
    --site__zone-icons: #a4331f;

    /* Заголовки — не чёрным, а тёмно-серым: крупный жирный кегль чистым чёрным выглядит жёстко
       (решение владельца, 2026-10-30). На цветных зонах переопределяется белым (site.css). */
    --site__heading: #333;

    /* Заголовки плотные: крупный жирный гротеск с разреженным трекингом выглядит рыхлым. */
    --site__heading-tracking: -0.025em;
    --site__display-tracking: -0.04em;

    --site__shadow-card: 0 11px 42px rgb(0 0 0 / 25%), 0 1px rgb(0 0 0 / 4%);
    --site__shadow-ambient: 0 0 40px rgb(0 0 0 / 4%);
}

body.ids {
    font-family: var(--site__font-sans);
}

/* Заголовки — жирным гротеском и плотно. Одно правило вместо повторения в каждом компоненте. */
.ids h1,
.ids h2,
.ids h3 {
    color: var(--site__heading);
    font-family: var(--site__font-sans);
    font-weight: 750;
    letter-spacing: var(--site__heading-tracking);
}

.ids h1 {
    font-weight: 800;
    letter-spacing: var(--site__display-tracking);
    line-height: 0.95;
}

/* Фокус виден только при навигации с клавиатуры: обычный :focus гасится, потому что
   рамка вокруг только что нажатой мышью кнопки выглядит как ошибка. Приём с kirill.green.
   Здесь, а не в компонентах: правило одно на весь сайт. */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--site__accent);
    outline-offset: 2px;
}