/* ─────────────────────────────────────────────────────────────────────────
   A13 — brand.css. СОБРАННЫЙ ФАЙЛ, РУКАМИ НЕ ПРАВИТЬ.

   Собран из brand/fonts.css + brand/tokens.css скриптом brand/tools/sync.py.
   Любая правка здесь будет затерта следующей раскладкой и уронит
   `sync.py --check` в гейте деплоя. Менять — в brand/.
   ───────────────────────────────────────────────────────────────────────── */

/* ── из brand/fonts.css ─────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   A13 — типографика. Шрифты лежат у нас, не на чужом CDN.

   Почему: до 26.07.2026 обе поверхности тянули шрифты с fonts.googleapis.com.
   Аудитория — российские проектные бюро; для них этот CDN недоступен или
   медленный, и в этот момент бренд рассыпался в Arial: моно переставал быть
   моно, табличные цифры разъезжались, трекинг заголовков ломался. Своя копия
   снимает и внешнюю зависимость, и утечку посетителей на сторону.

   Гарнитуры и лицензии — brand/fonts/LICENSES.md (обе OFL 1.1, самохостинг
   разрешен). Файлы вариативные: один файл на всю ось насыщенности.

   Подключение: <link rel="stylesheet" href="/fonts.css"> ДО основного CSS,
   плюс preload латинской и кириллической подрезки Golos (остальное грузится
   по факту встреченного символа через unicode-range).
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/golos-text-var-cyrillic.woff2") format("woff2");
  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 600;
  font-display: swap;
  src: url("fonts/golos-text-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/golos-text-var-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: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/golos-text-var-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: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-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: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-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: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-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: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-italic-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: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-italic-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-italic-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: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-italic-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;
}

/* ── из brand/tokens.css ─────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   A13 — ТОКЕНЫ. Единственный источник правды для всех экранных поверхностей.

   v2, 26.07.2026. В v1 здесь был только цвет, а кегли, отступы, толщины линий,
   радиусы и время анимаций каждая поверхность придумывала заново — поэтому
   лендинг и рабочая поверхность разъезжались во всем, кроме цвета.

   КАК ЭТО ПОПАДАЕТ НА ПОВЕРХНОСТЬ. Файл не копируется руками. `brand/tools/
   sync.py` собирает `fonts.css` + этот файл в один `brand.css` и раскладывает
   его в раздаваемые каталоги обеих поверхностей; `sync.py --check` валит
   деплой, если копия разошлась с каноном. Правишь значение здесь — прогоняешь
   sync — оно меняется на обеих поверхностях сразу. Хардкод цвета, кегля или
   отступа вне этого файла считается дефектом.

   Три слоя:
     1) палитра   — сырые цвета, темы не знают;
     2) семантика — роли поверхностей и текста, ПЕРЕКЛЮЧАЮТСЯ темой;
     3) размеры   — типографика, шаг, линии, радиусы, движение. Темы не знают.

   Обоснование оттенков и история решений — landing/docs/design-system.md.
   Правила текста — brand/TOV.md. Что общее и что расходится между
   поверхностями — brand/DESIGN-SYSTEM.md (реестр расхождений).
   ───────────────────────────────────────────────────────────────────────── */

/* ═══ 1. ПАЛИТРА ═══════════════════════════════════════════════════════════
   Значения не трогать без решения основателя: они выверены по контрасту, и
   контраст проверяется машинно (brand/tools/contrast.py). */

:root {
  /* бренд, светлая ось */
  --paper:    #FAFAF8;  /* лист */
  --paper-2:  #F1F1EC;  /* подложки секций */
  --white:    #FFFFFF;
  --line:     #E2E2DC;  /* линии чертежа */
  --ink:      #16110E;  /* тушь: текст, кнопки, штамп */
  --graphite: #5C544E;  /* вторичный текст */
  --ghost:    #726A64;  /* метаданные, номера листов */
  --minium:   #C23D22;  /* сурик, тон 10°, AA 5.0 на бумаге */

  /* тeмные нейтрали (потеплены по той же оси, L* сохранен) */
  --night:      #181311;  /* основной темный холст */
  --night-2:    #1F1C19;  /* поднятое */
  --night-3:    #28221D;  /* утопленное */
  --night-line: #342D28;
  --fog:        #F1EBE6;  /* основной текст на темном */
  --fog-2:      #B2AAA4;  /* вторичный */
  --fog-3:      #938B84;  /* приглушенный. Осветлен 26.07.2026: на #8C847E пара
                             «приглушенный текст на утопленной подложке» давала
                             4,28 и НЕ проходила AA — а канон это утверждал.
                             Нашла машинная проверка (brand/tools/contrast.py),
                             не глаз. Теперь 4,69 на утопленной и 5,50 на холсте
                             — почти точное зеркало светлой темы (4,68 / 5,07). */
  --minium-bright: #E9694A; /* сурик, поднятый по L* под темный фон */
}

/* ═══ 2. СЕМАНТИКА ═════════════════════════════════════════════════════════
   Компонент никогда не берет цвет из палитры напрямую — только роль. Тогда
   темная тема достается бесплатно, а «сделать чуть темнее» правится в одном
   месте. Светлая — по умолчанию. */

:root {
  --canvas:   var(--paper);    /* фон страницы */
  --elevated: var(--white);    /* карточка, модалка, всплывающее меню */
  --sunken:   var(--paper-2);  /* подложка секции, шапка таблицы, вложенный блок */

  --text:   var(--ink);        /* основной */
  --text-2: var(--graphite);   /* вторичный, поясняющий */
  --text-3: var(--ghost);      /* метаданные, номера, единицы */

  --rule:        var(--line);  /* разделители и сетка */
  --rule-strong: var(--ink);   /* контур листа, активная граница */
  /* Граница ОРГАНА УПРАВЛЕНИЯ — поля ввода, кнопки-контуры, переключателя.
     Отдельный токен, потому что у нее другое требование: WCAG 1.4.11 просит
     3:1 к окружению, а --rule (разделитель строк) дает 1,24 и пользователь
     физически не видит, где поле. Держит 3,33 на холсте и 3,07 на утопленной
     подложке. Проверяется brand/tools/contrast.py. */
  --rule-control: #908882;

  --accent:      var(--minium);
  --accent-soft: rgba(194, 61, 34, 0.08);  /* = --minium 8% */

  --btn-bg: var(--ink);        /* кнопка-действие: инверсия, не цвет */
  --btn-fg: var(--white);
  --backdrop: rgba(22, 17, 14, 0.45);      /* = --ink 45% */
  /* Затемнение поверх ФОТОГРАФИИ (действие на аватаре). Тему не переключает
     сознательно: фото светлое в обеих темах, и белая иконка на нем должна
     держаться одинаково. */
  --scrim: rgba(22, 17, 14, 0.55);

  /* Системные цвета статусов. Приглушены под монохром; красный ошибки уведен
     в холодный багрянец (348°), чтобы не путаться с теплым суриком (10°):
     «наше действие» и «ошибка» не имеют права читаться одним красным.
     Сурик системным цветом не бывает. */
  --sys-ok:   #217D40;  --sys-ok-bg:   #EAF6EE;
  --sys-err:  #B12F49;  --sys-err-bg:  #F6EAEC;  --sys-err-on: #FFFFFF;
  --sys-info: #2F6CB1;  --sys-info-bg: #EAEFF6;
  --sys-warn: #896724;  --sys-warn-bg: #F6F2EA;

  color-scheme: light;
}

/* Темная — только для рабочей поверхности. Лендинг темной темы не имеет
   сознательно: клиентская страница — это ЛИСТ, а лист бумаги не бывает
   черным (расхождение № 1 в brand/DESIGN-SYSTEM.md). */
:root[data-theme="dark"] {
  --canvas:   var(--night);
  --elevated: var(--night-2);
  --sunken:   var(--night-3);

  --text:   var(--fog);
  --text-2: var(--fog-2);
  --text-3: var(--fog-3);

  --rule:        var(--night-line);
  --rule-strong: var(--fog);
  --rule-control: #726C67;   /* 3,56 на холсте, 3,03 на утопленной */

  --accent:      var(--minium-bright);
  --accent-soft: rgba(233, 105, 74, 0.14);

  --btn-bg: var(--fog);
  --btn-fg: var(--night);
  --backdrop: rgba(0, 0, 0, 0.6);

  --sys-ok:   #7EDD9E;  --sys-ok-bg:   #254630;
  --sys-err:  #DD7E91;  --sys-err-bg:  #46252C;  --sys-err-on: #181311;
  --sys-info: #7EAADD;  --sys-info-bg: #253446;
  --sys-warn: #DDBD7E;  --sys-warn-bg: #463B25;

  color-scheme: dark;
}

/* Системное предпочтение, когда пользователь не выбирал тему руками. */
@media (prefers-color-scheme: dark) {
  :root[data-theme-auto]:not([data-theme]) {
    --canvas:   var(--night);
    --elevated: var(--night-2);
    --sunken:   var(--night-3);

    --text:   var(--fog);
    --text-2: var(--fog-2);
    --text-3: var(--fog-3);

    --rule:        var(--night-line);
    --rule-strong: var(--fog);
    --rule-control: #726C67;

    --accent:      var(--minium-bright);
    --accent-soft: rgba(233, 105, 74, 0.14);

    --btn-bg: var(--fog);
    --btn-fg: var(--night);
    --backdrop: rgba(0, 0, 0, 0.6);

    --sys-ok:   #7EDD9E;  --sys-ok-bg:   #254630;
    --sys-err:  #DD7E91;  --sys-err-bg:  #46252C;  --sys-err-on: #181311;
    --sys-info: #7EAADD;  --sys-info-bg: #253446;
    --sys-warn: #DDBD7E;  --sys-warn-bg: #463B25;

    color-scheme: dark;
  }
}

/* ═══ 3. РАЗМЕРЫ ═══════════════════════════════════════════════════════════ */

:root {

  /* ── гарнитуры ────────────────────────────────────────────────────────────
     Две, и обе лежат у нас (brand/fonts.css). Системные — только как аварийный
     запас: если до них дошло, бренд уже сломан, но текст читается. */
  --font: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── кегли ────────────────────────────────────────────────────────────────
     Ступени названы по РОЛИ, не по номеру: роль переживает редизайн, «размер 6»
     нет. Две дисплейные ступени резиновые — они живут только на лендинге, где
     заголовок и есть главная графика страницы.
     Правило бренда: любая ЦИФРА, марка раздела, шифр и номер листа набираются
     моно (--font-mono) с tabular-nums, в любой ступени. */
  --t-display:   clamp(2.6rem, min(7vw, 9.5vh), 6.9rem); /* h1 лендинга */
  --t-display-2: clamp(2rem, 4.6vw, 4.2rem);             /* h2 лендинга */
  --t-title:     1.5rem;    /* 24px — заголовок страницы поверхности */
  --t-head:      1.25rem;   /* 20px — заголовок блока, h3 */
  --t-sub:       1.0625rem; /* 17px — подзаголовок, крупная сумма */
  --t-body-lg:   1.0625rem; /* 17px — база лендинга: текст читают один раз, не спеша */
  --t-body:      0.9375rem; /* 15px — база поверхности: текст сканируют весь день */
  --t-small:     0.8125rem; /* 13px — плотные списки, подписи, вторичное */
  --t-micro:     0.6875rem; /* 11px — моно-метки, номера листов, единицы. Ниже не спускаться */

  /* ── интерлиньяж ── */
  --lh-display: 0.98;  /* дисплейные заголовки: строки почти касаются */
  --lh-head:    1.18;
  --lh-body:    1.55;  /* проза */
  --lh-dense:   1.35;  /* строки таблиц и списков */

  /* ── трекинг ── */
  --tr-display:  -0.02em;  /* крупное всегда поджимается */
  --tr-mark:      0.06em;  /* знак, марки разделов */
  --tr-overline:  0.14em;  /* надзаголовки капителью */

  /* ── шаг ──────────────────────────────────────────────────────────────────
     Сетка 4px. Значений вне этой лестницы в поверхностях быть не должно —
     именно из отступов «на глаз» и складывается ощущение, что две страницы
     сделаны разными людьми. */
  --s-hair: 2px;
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── линии ────────────────────────────────────────────────────────────────
     ГОСТ 2.303 задает толщины линий чертежа отношением s : s/2 : s/3. Мы
     наследуем именно отношение 3 : 2 : 1 — это и есть графический язык
     отрасли, взятый по делу, а не как костюм. */
  --line-thin:  1px;  /* сетка, разделители, границы полей */
  --line-main:  2px;  /* активное состояние, подчеркивание, рамка блока */
  --line-thick: 3px;  /* контур листа, рамка штампа */

  /* ── радиусы ──────────────────────────────────────────────────────────────
     Решение основателя 26.07.2026: острые углы скруглить, «островатыми, но
     закругленными». Одно значение на все он же и отклонил — радиус обязан
     масштабироваться по понятному правилу, иначе блоки разного размера не
     выглядят родственниками.

     ПРАВИЛО: радиус — доля шага сетки (--s-1 = 4px), и выбирается по РАЗМЕРУ
     элемента, а не по его виду:

       до 28px  (чип, метка, статус)                 --r-1 = 2px  = ½ шага
       28–56px  (кнопка, поле, вкладка, тумблер)     --r-2 = 4px  = 1 шаг
       от 56px  (карточка, панель, меню, модалка)    --r-3 = 8px  = 2 шага

     ПРАВИЛО ВЛОЖЕННОСТИ: элемент внутри другого берет радиус на ступень
     меньше внешнего. Кнопка (4) в карточке (8) — концентрично; кнопка с тем
     же радиусом, что и карточка, всегда выглядит вклеенной.

     Ноль — у ЧЕРТЕЖНОЙ мебели: основная надпись, рамка листа, спецификация,
     фрагменты чертежей. У документа углы прямые по ГОСТ, и скруглить штамп
     было бы уже не стилем, а ошибкой.

     «Пилюли» (999px) запрещены: статус — это цвет и слово, а не таблетка.
     Круг разрешен двум сущностям, и обе не прямоугольники: аватару человека
     и точке-индикатору. Проверяется brand/tests/test_brand_canon.py. */
  --r-0: 0;      /* чертежная мебель */
  --r-1: 2px;    /* мелкое: чипы, метки, статусы */
  --r-2: 4px;    /* управление: кнопки, поля, вкладки */
  --r-3: 8px;    /* блоки: карточки, панели, меню, модалки */
  --r-round: 50%;

  /* ── движение ─────────────────────────────────────────────────────────────
     Медленнее, чем принято: бюро не суетится. Всё уважает
     prefers-reduced-motion. */
  --m-fast:  140ms;  /* наведение, нажатие */
  --m-base:  240ms;  /* смена состояния, появление меню */
  --m-slow:  400ms;  /* смена темы, разворот блока */
  --m-draw:  900ms;  /* прочерчивание линии чертежа */
  --e-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── слои ── */
  --z-sticky: 100;
  --z-grain:  200;  /* зерно бумаги на лендинге: поверх контента, ниже диалогов */
  --z-modal:  400;
  --z-toast:  500;

  /* ── фокус ────────────────────────────────────────────────────────────────
     Видимый, суриковый, со отступом — иначе на темной границе он исчезает.
     Отступ обязателен: без него рамка сливается с границей поля. */
  --focus-w: 2px;
  --focus-offset: 2px;
}