/* IT-Кузница: токены стиля и режим «программа». Скопировано из Studio Site/design/tokens.css и app.css (переменные).
   Значения здесь не правим: нужен новый оттенок — меняем в дизайн-системе и копируем заново. */
:root {
  color-scheme: light;
  /* Цвета */
  --bg: #fffaf4; /* Фон страницы, тёплый кремовый. На нём читаются text, muted и ember-deep */
  --bg-soft: #fff1e3; /* Чередующиеся полосы секций, мягкие плитки, лента показателей */
  --bg-card: #ffffff; /* Карточки, поля ввода, окна-примеры, второстепенные кнопки */
  --line: #ecdccb; /* Тонкие границы карточек и разделители, только оформление */
  --line-strong: #dcc7b2; /* Границы управляющих элементов: кнопки, чипы, поля. Контраст ниже 3:1, поэтому состояние дублируйте заливкой и подписью */
  --text: #2b1d14; /* Основной текст и заголовки на bg, bg-soft и bg-card (не ниже 14,7:1) */
  --muted: #6f5d4f; /* Вторичный текст и подписи на bg, bg-soft и bg-card (не ниже 5,6:1) */
  --ember: #f0522d; /* Жар: фирменная заливка (точки, полосы, рамка выбранного, второй цвет градиента). Не для обычного текста */
  --ember-deep: #c9360f; /* Акцентный текст и ссылки (не ниже 4,7:1), слово «Кузница» в логотипе, кольцо фокуса */
  --glow: #ff9a3c; /* Светлый конец жара: градиенты, полосы, искры. Не для текста */
  --avocado: #a3b94f; /* Авокадо: спокойная вторичная заливка (номера шагов, точки, левая рамка выноски). Текст на ней только --text (7,5:1). Не для кнопок и не для статусов */
  --avocado-deep: #4a6a1c; /* Тёмный авокадо: текст и значки на bg, bg-soft, bg-card и avocado-soft (не ниже 5,5:1) */
  --avocado-soft: #eef3d8; /* Подложка спокойных секций, плитки значков, плашки. Текст text и muted читаются на ней (не ниже 5,5:1) */
  --avocado-line: #d6e0ad; /* Тонкие границы на подложке avocado-soft, только оформление */
  --on-ember: #2b0f05; /* Текст на заливках жара: основная кнопка и плитки с градиентом (5,1:1 и выше). Белый на них не ставим */
  --ok: #17703f; /* Положительный статус: текст и значок (не ниже 5,5:1) */
  --ok-bg: rgba(31, 138, 85, 0.12); /* Подложка положительного статуса, под текстом ok */
  --warn: #9a5b00; /* Предупреждение: текст на warn-bg (4,8:1), всегда со словом */
  --warn-bg: #fff0d6; /* Подложка предупреждения */
  --bad: #b3321a; /* Ошибка или просрочка: текст на bad-bg (5,1:1), всегда со словом или знаком */
  --bad-bg: #fde3dd; /* Подложка ошибки */
  --info: #2c4f9e; /* Нейтральный статус «в процессе»: текст на info-bg (6,7:1). Единственный холодный цвет */
  --info-bg: #e8f0ff; /* Подложка нейтрального статуса */
  /* Скругления */
  --radius: 14px; /* Плитки значков, лента показателей, вопросы */
  --radius-lg: 22px; /* Карточки, окна-примеры, диалоги */
  --radius-pill: 999px; /* Кнопки, чипы, пункты выбора, плашки, переключатели */
  /* Тени */
  --shadow: 0 30px 60px -32px rgba(120, 60, 20, 0.45), 0 2px 6px rgba(120, 60, 20, 0.06); /* Окно-пример на первом экране */
  --shadow-lift: 0 18px 36px -22px rgba(120, 60, 20, 0.45); /* Карточка при наведении, вместе со сдвигом на 3px вверх */
  --shadow-ember: 0 10px 26px -10px rgba(240, 82, 45, 0.7); /* Основная кнопка в покое */
  --shadow-ember-hover: 0 12px 32px -8px rgba(240, 82, 45, 0.85); /* Основная кнопка при наведении */
  /* Раскладка */
  --gutter: 16px; /* Боковое поле страницы на телефоне (с 1360px 32px и больше) */
  --max: 1160px; /* Ширина контейнера по умолчанию (на больших экранах растёт по ступеням) */
  /* Шрифт */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Шкала отступов */
  --space-1: 4px; /* Зазор между мелкими частями (точка и подпись) */
  --space-2: 8px; /* Зазор между чипами и пунктами выбора, внутри кнопки */
  --space-3: 12px; /* Зазор между рядами в списках */
  --space-4: 16px; /* Боковое поле страницы на телефоне, зазор сетки карточек */
  --space-5: 24px; /* Внутренний отступ карточки, горизонтальный отступ кнопки */
  --space-6: 32px; /* Зазор между заголовком секции и содержимым */
  --space-7: 40px; /* Зазор между колонками первого экрана на планшете */
  --space-8: 64px; /* Вертикальный отступ секции (с 1600px 84px, с 1920px 100px) */
}

.mode-app, [data-mode="app"] {
  --bg: #f5f4f2; /* Нейтральный светло-серый фон вместо тёплого кремового: глаза меньше устают за весь день */
  --bg-soft: #ecebe7; /* Мягкие плитки, шапки таблиц, ленты: нейтрально-серый вместо персикового */
  --bg-card: #ffffff; /* Рабочие области остаются белыми */
  --line: #e2dfda; /* Границы и разделители нейтральные */
  --line-strong: #cbc6bf; /* Границы полей и кнопок чуть темнее */
  --text: #231c17; /* Основной текст почти тот же, без тёплого оттенка */
  --muted: #675f58; /* Вторичный текст нейтрально-серый */
  --ember: #b8431b; /* Один акцент: приглушённый кирпичный вместо яркого оранжево-красного. Только главная кнопка, ссылки, выбранное и прогресс */
  --ember-deep: #a03815; /* Наведение и акцентный текст, темнее акцента */
  --glow: #b8431b; /* Совпадает с --ember, поэтому все градиенты «жара» становятся плоскими */
  --on-ember: #ffffff; /* На кирпичном акценте читается белый текст (5,4:1 и выше) */
  --ok: #2d6a49; /* Приглушённый зелёный статус */
  --ok-bg: rgba(45, 106, 73, 0.1); /* Подложка тише */
  --warn: #85570d; /* Приглушённый янтарный статус */
  --warn-bg: #f3e9d3; /* Подложка тише */
  --bad: #a63a28; /* Ошибка темнее и спокойнее */
  --bad-bg: #f4e2de; /* Подложка тише */
  --info: #3b588a; /* Нейтральный синий статус */
  --info-bg: #e4eaf3; /* Подложка тише */
  --avocado: #8d9b64; /* Авокадо приглушён и почти не используется (в программе только как тонкая деталь) */
  --avocado-deep: #4a5c27; /* Текст на авокадо-подложке */
  --avocado-soft: #eceee2; /* Подложка почти нейтральная */
  --avocado-line: #dadfc8; /* Граница на ней */
  --radius: 10px; /* Скругления меньше: интерфейс строже */
  --radius-lg: 12px; /* Карточки и окна */
  --radius-pill: 8px; /* Кнопки, чипы и плашки: мягкие квадраты вместо овалов */
  --shadow: 0 1px 2px rgba(35, 28, 23, 0.06), 0 12px 28px -18px rgba(35, 28, 23, 0.25); /* Нейтральная лёгкая тень без тёплого оттенка */
  --shadow-lift: 0 1px 2px rgba(35, 28, 23, 0.06), 0 10px 22px -16px rgba(35, 28, 23, 0.22); /* Карточка при наведении, без смещения */
  --shadow-ember: none; /* Основная кнопка без цветной тени */
  --shadow-ember-hover: none; /* Основная кнопка без цветной тени */
}