/* Дизайн-токены «Зентум.Задачи». Единственный источник цвета, шрифта и размеров.
 *
 * ⚠️Файл лежит в public/, а не в src/, НАМЕРЕННО: им пользуются и приложение, и 34
 * статических рекламных страницы. Собери его сборщиком в бандл — у лендингов не
 * осталось бы способа его подключить, и появилась бы вторая копия палитры, которая
 * однажды разойдётся с первой молча. Одна лишняя загрузка дешевле такого расхождения.
 *
 * ⚠️В коде не должно остаться ни одного цветового литерала. Если нужного оттенка
 * здесь нет — добавлять СЮДА, а не подставлять hex на месте.
 *
 * Значения взяты из раздела 4 техзадания дословно. Отступления помечены ⚠️ и объяснены.
 */

/* ─────────────────────────── ШРИФТ ─────────────────────────── */

/* ⚠️Один переменный файл вместо трёх статических: 40 КБ против 116 КБ и одна
 * загрузка вместо трёх. Ось веса ОБРЕЗАНА до 400–600 при сборке файла — техзадание
 * запрещает начертания толще 600, и физически неспособный к 700 файл надёжнее
 * договорённости «не писать 700». Проверить можно: font-weight: 800 даст ту же
 * насыщенность, что и 600. */
@font-face {
  font-family: 'Golos Text';
  src: url('/fonts/golos-text-400-600.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --zt-font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --zt-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Шкала кегля (px). 15 — базовый. */
  --zt-fs-caption: 11px;   /* подпись */
  --zt-fs-small: 12px;     /* мелкий */
  --zt-fs-ui: 13px;        /* основной интерфейсный */
  --zt-fs-ui-strong: 14px; /* усиленный */
  --zt-fs-base: 15px;      /* базовый, body */
  --zt-fs-lead: 17px;      /* крупный текст */
  --zt-fs-panel: 20px;     /* заголовок панели */
  --zt-fs-section: 30px;   /* заголовок раздела */
  --zt-fs-hero: 56px;      /* герой лендинга */

  --zt-lh-tight: 1.02;     /* самый крупный кегль */
  --zt-lh-head: 1.15;      /* заголовки */
  --zt-lh-text: 1.55;      /* текст */
  --zt-ls-head: -0.02em;   /* трекинг заголовков */
  --zt-ls-label: 0.09em;   /* разрядка мелких рубрик */

  /* ─────────────────────── ЦВЕТ: ТЁМНАЯ ТЕМА ─────────────────────── */
  /* Тёмная — основная, поэтому она же значения по умолчанию. */
  --zt-bg: #161826;
  --zt-bg2: #1b1d2c;
  --zt-surf: #232532;
  --zt-surf2: #2b2d3b;
  --zt-line: #3f424d;
  --zt-line-soft: #2f323d;
  --zt-text: #e9e9ed;
  --zt-mut: #9397ab;
  /* ⚠️Было #75798c из макета — 3,52 на --zt-surf при норме 4,5. Осветлено до
     минимального проходящего. ⚠️На --zt-surf2 даёт 4,20 и выше не поднять:
     сравняется с --zt-mut (у того на surf2 всего 4,71) и ярусы схлопнутся.
     Значит на --zt-surf2 текстом ставить --zt-mut, а не --zt-mut-2. */
  --zt-mut-2: #8a8ea2;

  /* Единственный акцент. White-label меняет РОВНО эту переменную. */
  --zt-accent: #ef7622;
  --zt-accent-ink: #ffe6d2;
  --zt-accent-deep: #5b2d10;
  --zt-on-accent: #1b1006;

  /* ⚠️ОТСТУПЛЕНИЕ ОТ РАЗДЕЛА 4: этого токена в техзадании нет, он добавлен по
   * измерению на живой странице.
   * Фирменный #ef7622 как ЦВЕТ ТЕКСТА даёт на светлой поверхности контраст 2.79:1
   * при требуемых 4.5 — нечитаемо. Под это попали все ссылки: «Забыли пароль?»,
   * «Зарегистрироваться», «Оферту», «Политику конфиденциальности». Само ТЗ
   * предупреждает «оранжевый не использовать для мелкого текста», но ссылку надо
   * чем-то красить, и она обязана оставаться акцентной по смыслу.
   * Решение: заливки и крупные элементы держат --zt-accent, ТЕКСТ берёт этот токен.
   * На тёмной теме они совпадают: там #ef7622 даёт 5.27:1 и правки не требует.
   * ⚠️Согласовать с дизайнером вместе с цветами статусов на светлой теме. */
  /* На тёмной теме акцент читается сам: 5,27 / 6,11 / 5,79 / 4,73 на четырёх
     поверхностях. ⚠️Единственное сочетание, где он не проходит, — поверх
     --zt-accent-deep (3,99). Но там и не место: на акцентной подложке парный
     цвет текста — --zt-accent-ink. */
  --zt-accent-text: #ef7622;

  /* Заливка первичной кнопки и цвет надписи на ней.
     ⚠️Не сам --zt-accent: белая надпись на #ef7622 — 2,88:1, ниже нормы даже для
     крупного текста, поэтому надпись приходилось делать почти чёрной, и она
     читалась как чёрная (замечание владельца 04.09.2026). Затемняем ЗАЛИВКУ:
     на #b8560f белый даёт 4,8:1. Кнопка остаётся оранжевой, но глубокого тона. */
  --zt-knopka: #b8560f;
  --zt-na-knopke: #ffffff;

  --zt-navy: #0f2038;
  --zt-on-navy: #e9e9ed;
  --zt-on-navy-mut: #b2b6ca;

  --zt-ok: #4fae7c;
  --zt-warn: #d8a13a;
  --zt-late: #d2604b;

  /* Подложки статусов. Значения из раздела 4 даны ДЛЯ ТЁМНОЙ темы. */
  --zt-ok-bg: rgba(79, 174, 124, .16);
  --zt-ok-fg: #8ecba9;
  --zt-warn-bg: rgba(216, 161, 58, .16);
  --zt-warn-fg: #e0bd7c;
  --zt-late-bg: rgba(210, 96, 75, .16);
  --zt-late-fg: #e79683;

  /* Подложки строк таблицы с отклонением. */
  --zt-row-late: rgba(210, 96, 75, .06);
  --zt-row-attention: rgba(239, 118, 34, .05);
  /* Цель перетаскивания на канбане. */
  --zt-drop-bg: rgba(239, 118, 34, .06);

  /* ─────────────────────── РАЗМЕРЫ ─────────────────────── */
  /* Шаг сетки 4px. */
  --zt-sp-1: 4px;   --zt-sp-2: 6px;   --zt-sp-3: 8px;   --zt-sp-4: 10px;
  --zt-sp-5: 12px;  --zt-sp-6: 14px;  --zt-sp-7: 16px;  --zt-sp-8: 20px;
  --zt-sp-9: 24px;  --zt-sp-10: 32px; --zt-sp-11: 44px; --zt-sp-12: 56px;
  --zt-sp-13: 76px;

  --zt-r-chip: 6px;    /* мелкие чипы */
  --zt-r: 8px;         /* кнопки, поля, карточки */

  /* Высота верхней полосы. ⚠️Одним числом на весь продукт: то же значение нужно
     распорке под шапкой и липкой колонке в настройках, а тремя копиями они
     разъезжались — колонка прилипала выше или ниже края. */
  --zt-shapka: 48px;
  --zt-r-panel: 12px;  /* крупные панели */
  --zt-r-frame: 14px;  /* внешняя рамка экрана */
  --zt-r-mobile: 28px; /* мобильный корпус */
  --zt-r-round: 50%;   /* аватары */

  /* Границы вместо теней — тени только для всплывающего. */
  --zt-ring: 0 0 0 1px var(--zt-line-soft);
  --zt-ring-accent: 0 0 0 1px var(--zt-accent);
  --zt-shadow-modal: 0 20px 50px rgba(0, 0, 0, .55);
  --zt-shadow-frame: 0 30px 80px rgba(0, 0, 0, .55);

  /* Высоты элементов управления. */
  --zt-h-compact: 32px;
  --zt-h: 36px;
  --zt-h-primary: 44px;
  --zt-h-touch: 44px;  /* минимальная зона нажатия на мобильном */

  --zt-anim: 160ms;    /* 120–200 мс */
  --zt-ease: ease-out;

  color-scheme: dark;
}

/* ─────────────────────── ЦВЕТ: СВЕТЛАЯ ТЕМА ─────────────────────── */
:root[data-theme='light'] {
  --zt-bg: #f6f6fa;
  --zt-bg2: #f0f2f8;
  --zt-surf: #fbfbfe;
  --zt-surf2: #e1e5f2;
  --zt-line: #dcdfeb;
  --zt-line-soft: #e4e7f5;
  --zt-text: #1f2130;
  --zt-mut: #5b5f70;
  /* ⚠️Было #6b6f80 — 4,39 на --zt-bg2, чуть ниже нормы. Бледнее --zt-mut,
     как и должно, но уже проходит на всех светлых поверхностях. */
  --zt-mut-2: #646b78;
  --zt-accent-ink: #3a1a06;
  --zt-accent-deep: #ffe0c9;
  /* ⚠️Тот же тон, темнее. Было #bc550e — 4,58 на карточке, но всего 3,76 на
     приглушённой подложке --zt-surf2 и на --zt-accent-deep. А акцентный текст
     живёт ровно там: подписи в справке, счётчики в плитках, метки на чипах.
     #a8490c проходит на ВСЕХ светлых поверхностях: 5,61 / 5,38 / 5,18 / 4,61 / 4,62.
     ⚠️Проверять новое значение надо на самой ТЁМНОЙ светлой подложке (--zt-surf2),
     а не на белой карточке: на белой проходит почти всё. */
  --zt-accent-text: #a8490c;

  /* ⚠️ОТСТУПЛЕНИЕ ОТ ТЕХЗАДАНИЯ, сделано осознанно. Раздел 4 задаёт подложки и текст
   * статусов только для ТЁМНОЙ темы и говорит «остальные переменные не меняются».
   * Но текст #8ecba9 на светлом #fbfbfe даёт контраст около 1.9:1 — это нечитаемо
   * и не проходит требование самого же ТЗ (раздел 5: основной текст ≥ 4.5:1).
   * Поэтому на светлой теме текст статуса берётся насыщенный, а подложка — плотнее.
   * ⚠️Значения подобраны мной, в разделе 4 их нет. Проверить измерением на этапе 5
   * и согласовать с дизайнером. */
  --zt-ok-bg: rgba(79, 174, 124, .14);
  --zt-ok-fg: #1f6b45;
  --zt-warn-bg: rgba(216, 161, 58, .16);
  --zt-warn-fg: #7a5410;
  --zt-late-bg: rgba(210, 96, 75, .12);
  --zt-late-fg: #8f2f1e;

  --zt-row-late: rgba(210, 96, 75, .05);
  --zt-row-attention: rgba(239, 118, 34, .06);

  /* Тени на светлой теме мягче: те же значения выглядят грязным пятном. */
  --zt-shadow-modal: 0 20px 50px rgba(31, 33, 48, .18);
  --zt-shadow-frame: 0 30px 80px rgba(31, 33, 48, .22);

  color-scheme: light;
}

/* ⚠️СВЕТЛАЯ ТЕМА ПО НАСТРОЙКЕ СИСТЕМЫ.
   Набор построен «тёмным по умолчанию»: светлая включалась ТОЛЬКО атрибутом
   data-theme='light', который ставит скрипт в шапке приложения. У 26 статических
   рекламных страниц такого скрипта нет — и они показывались тёмными кому угодно,
   даже человеку со светлой системой. Замер: на такой странице текст цвета
   --zt-accent-deep давал 1,45:1.
   ⚠️Условие :not([data-theme='dark']) обязательно: без него системная настройка
   перебивала бы ЯВНЫЙ выбор человека, и переключатель в кабинете перестал бы
   работать на светлых системах. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
  --zt-bg: #f6f6fa;
  --zt-bg2: #f0f2f8;
  --zt-surf: #fbfbfe;
  --zt-surf2: #e1e5f2;
  --zt-line: #dcdfeb;
  --zt-line-soft: #e4e7f5;
  --zt-text: #1f2130;
  --zt-mut: #5b5f70;
  /* ⚠️Было #6b6f80 — 4,39 на --zt-bg2, чуть ниже нормы. Бледнее --zt-mut,
     как и должно, но уже проходит на всех светлых поверхностях. */
  --zt-mut-2: #646b78;
  --zt-accent-ink: #3a1a06;
  --zt-accent-deep: #ffe0c9;
  /* ⚠️Тот же тон, темнее. Было #bc550e — 4,58 на карточке, но всего 3,76 на
     приглушённой подложке --zt-surf2 и на --zt-accent-deep. А акцентный текст
     живёт ровно там: подписи в справке, счётчики в плитках, метки на чипах.
     #a8490c проходит на ВСЕХ светлых поверхностях: 5,61 / 5,38 / 5,18 / 4,61 / 4,62.
     ⚠️Проверять новое значение надо на самой ТЁМНОЙ светлой подложке (--zt-surf2),
     а не на белой карточке: на белой проходит почти всё. */
  --zt-accent-text: #a8490c;

  /* ⚠️ОТСТУПЛЕНИЕ ОТ ТЕХЗАДАНИЯ, сделано осознанно. Раздел 4 задаёт подложки и текст
   * статусов только для ТЁМНОЙ темы и говорит «остальные переменные не меняются».
   * Но текст #8ecba9 на светлом #fbfbfe даёт контраст около 1.9:1 — это нечитаемо
   * и не проходит требование самого же ТЗ (раздел 5: основной текст ≥ 4.5:1).
   * Поэтому на светлой теме текст статуса берётся насыщенный, а подложка — плотнее.
   * ⚠️Значения подобраны мной, в разделе 4 их нет. Проверить измерением на этапе 5
   * и согласовать с дизайнером. */
  --zt-ok-bg: rgba(79, 174, 124, .14);
  --zt-ok-fg: #1f6b45;
  --zt-warn-bg: rgba(216, 161, 58, .16);
  --zt-warn-fg: #7a5410;
  --zt-late-bg: rgba(210, 96, 75, .12);
  --zt-late-fg: #8f2f1e;

  --zt-row-late: rgba(210, 96, 75, .05);
  --zt-row-attention: rgba(239, 118, 34, .06);

  /* Тени на светлой теме мягче: те же значения выглядят грязным пятном. */
  --zt-shadow-modal: 0 20px 50px rgba(31, 33, 48, .18);
  --zt-shadow-frame: 0 30px 80px rgba(31, 33, 48, .22);

  color-scheme: light;
  }
}


/* ─────────────────────── РЕЖИМ ДЛЯ СЛАБОВИДЯЩИХ ─────────────────────── */
/* Поверх любой темы. Базовый кегль поднимается с 15 до 17. */
:root[data-contrast='high'] {
  --zt-fs-base: 17px;
  --zt-text: #ffffff;
  --zt-mut: #cfd3e5;
  --zt-mut-2: #b2b6ca;
  --zt-line: #8b90a3;
  --zt-line-soft: #6f7488;
  /* Текст на тёмно-синей подложке (шапка, боковая колонка) в режиме для
     слабовидящих. Значения взяты из макета: базовых #e9e9ed/#b2b6ca на синем
     не хватает, когда человеку нужен усиленный контраст. */
  --zt-on-navy: #f3f5fe;
  --zt-on-navy-mut: #dfe2f0;
}

:root[data-theme='light'][data-contrast='high'] {
  --zt-text: #101120;
  --zt-mut: #3f424d;
  --zt-mut-2: #3f424d;
  --zt-line: #8d92a6;
  --zt-line-soft: #a7abbd;
  --zt-surf2: #d2d7e8;
  /* Ещё темнее: в режиме для слабовидящих 4.5 недостаточно, целимся в 7:1. */
  --zt-accent-text: #8f3f06;
}

/* ─────────────────────── ОБЩЕЕ ─────────────────────── */

html {
  font-size: var(--zt-fs-base);
  background: var(--zt-bg);
}

body {
  margin: 0;
  font-family: var(--zt-font);
  font-size: var(--zt-fs-base);
  line-height: var(--zt-lh-text);
  color: var(--zt-text);
  background: var(--zt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ⚠️Фокус с клавиатуры обязателен ВЕЗДЕ. Синее кольцо браузера убираем не для
 * красоты: оно синее, а синего в продукте больше нет. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--zt-accent);
  outline-offset: 2px;
  border-radius: var(--zt-r-chip);
}

::selection {
  background: var(--zt-accent-deep);
  color: var(--zt-accent-ink);
}

a {
  /* ⚠️Именно accent-text, а не accent: ссылка — это мелкий текст, и на светлой теме
   * фирменный оранжевый её делает нечитаемой. */
  color: var(--zt-accent-text);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Заголовки: толще 600 не бывает — файл шрифта этого и не умеет. */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  letter-spacing: var(--zt-ls-head);
  line-height: var(--zt-lh-head);
  text-wrap: balance;
  margin: 0;
}
:where(p) { text-wrap: pretty; }

/* Мелкие рубрики и метки колонок. */
.zt-label {
  font-size: var(--zt-fs-caption);
  letter-spacing: var(--zt-ls-label);
  text-transform: uppercase;
  color: var(--zt-mut-2);
  font-weight: 500;
}

/* Технические значения — только моноширинным. */
.zt-mono {
  font-family: var(--zt-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ⚠️Уважаем просьбу системы не двигать: анимации у нас короткие, но при reduce
 * их не должно быть вовсе, и автоплей карусели лендинга не запускается. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}