/* Токены дизайн-системы портала Fit Meal Office.
 *
 * Единственное место, где заданы цвета, радиусы и отступы. Грузится ПЕРВЫМ
 * на каждой странице, до всех остальных стилей. Значения — из DESIGN.md.
 *
 * Правило: в стилях страниц не должно быть литеральных цветов и радиусов,
 * только var(--…). Новых цветов не выдумываем.
 */
:root {
  /* --- Поверхности и текст ------------------------------------------- */
  --color-canvas:         #F7F8F8;  /* фон приложения (раньше был бежевый) */
  --color-surface:        #FFFFFF;  /* карточки, таблицы, поля */
  --color-surface-2:      #F1F3F3;  /* zebra-строки, hover */
  --color-border:         #E3E6E6;  /* границы, разделители */
  --color-text:           #1C1F1E;  /* основной текст */
  --color-text-secondary: #5B6360;  /* подписи */
  --color-text-muted:     #9AA0A0;  /* плейсхолдеры, вспомогательное */

  /* --- Бренд (единственный акцент) ------------------------------------ */
  --brand:                #7AB648;  /* фирменный зелёный Fit Meal */
  --brand-hover:          #5E9432;
  --brand-soft:           #EBF5DF;  /* фон активного пункта меню, выбранного */

  /* --- Семантика ------------------------------------------------------ */
  --success:              #2E7D32;
  --danger:               #C0392B;
  --danger-soft:          #FBEAE7;
  --warning:              #B8860B;
  --warning-soft:         #FBF2DD;

  /* --- Радиусы. Больше 12px не бывает. -------------------------------- */
  --radius-sm:            6px;      /* кнопки, поля, чипы, бейджи */
  --radius-md:            8px;      /* карточки, секции */

  /* --- Тень (скупо) --------------------------------------------------- */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, .06);

  /* --- Отступы -------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* --- Типографика ---------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Моноширинный: коды, ключи, порядок множителей — там, где важно, что
     символы стоят строго друг под другом. До этого его выписывали строкой
     в трёх местах: витрина, «Рационы» в разметке и в своих стилях. */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-caption: 11.5px; /* подписи, шапки таблиц */
  --fs-body:    12.5px; /* тело — как пункт меню */
  --fs-table:   12px;  /* таблицы: на полпункта мельче тела (владелец 19.09.2026) */
  --fs-dense:   10.5px; /* сводка, где колонок больше десяти и --fs-table
                           уже не помещается. Не для текста — только
                           для чисел в плотной таблице. */
  --fs-input:   16px;  /* поля ввода на узком экране: ниже 16px iOS зумит */
  --fs-section: 18px;  /* заголовок секции */

  /* --- Мера строки ------------------------------------------------------
   * Ширину формы задаёт не окно, а глаз. Поле в метр шириной читается
   * тяжело независимо от кегля: взгляд теряет начало следующей строки,
   * а короткое значение в длинном поле выглядит потерянным. 560px — это
   * примерно 70 знаков, дальше читаемость не растёт. */
  --measure-form: 560px;   /* форма в одну колонку */
  --measure-wide: 760px;   /* форма, внутри которой таблица или карта */

  /* --- Палитра рядов на графиках --------------------------------------
   * Категориальная шкала: столько цветов, сколько рядов на одном графике
   * (источники лидов — семь). Ведёт брендовый зелёный, дальше — приглушённые
   * оттенки, различимые рядом друг с другом.
   *
   * Красный и жёлтый сюда НЕ входят намеренно: за ними в портале закреплён
   * смысл (ошибка, проверка), и ряд «WhatsApp» красным читался бы как
   * авария. Графики берут цвета отсюда, а не из палитры Chart.js по
   * умолчанию — иначе на экране появляется чужая гамма.
   */
  --chart-1: #5E9432;  /* брендовый тёмный — главный ряд */
  --chart-2: #A8C98A;  /* светлый зелёный */
  --chart-3: #2F6484;  /* синевато-серый */
  --chart-4: #C77A18;  /* охра */
  --chart-5: #7E6BA8;  /* приглушённый фиолетовый */
  --chart-6: #4C8C8C;  /* бирюзовый */
  --chart-7: #9AA0A0;  /* нейтральный — «Другое» */

  /* Прошлый период и сетка осей — нейтральные, не спорят с рядами. */
  --chart-past: #C6CBCB;
  --chart-grid: #E3E6E6;

  /* --- Оболочка ------------------------------------------------------- */
  /* sidebar-modernization:start */
  --sidebar-w:  232px;
  --sidebar-compact-w: 68px;
  --sidebar-green-light: #7AB648;
  --sidebar-green-mid: #5E9432;
  --sidebar-green-deep: #315C32;
  --sidebar-ink: #F8FCF5;
  --sidebar-ink-muted: rgba(248, 252, 245, .72);
  /* sidebar-modernization:end */
  --header-h:   56px;   /* компактный хедер; в него же вписан логотип 30px */

  /* ===================================================================
   * Мост со старыми именами.
   *
   * Экраны портала написаны на переменных --green / --bg / --r-card и
   * так далее, и переписывать их все разом — это Фаза 3. Пока сопоставляем
   * старые имена новым токенам: переведённый на оболочку экран получает
   * новую палитру и радиусы, не трогая ни строчки своих правил.
   *
   * Непереведённые экраны объявляют свой :root инлайном и перебивают этот
   * блок по каскаду — они остаются в прежнем виде до своей очереди.
   * По мере перевода экранов эти алиасы удаляются.
   * =================================================================== */
  --green:       var(--brand);
  --green-dark:  var(--brand-hover);
  --green-light: var(--brand-soft);
  --bg:          var(--color-canvas);
  --card:        var(--color-surface);
  --text:        var(--color-text);
  --text-2:      var(--color-text-secondary);
  --text-3:      var(--color-text-muted);
  --border:      var(--color-border);
  --danger-bg:   var(--danger-soft);
  --r-card:      var(--radius-md);
  --r-btn:       var(--radius-sm);
  --r-sm:        var(--radius-sm);
  --shadow:      var(--shadow-sm);
}

/* Фокус — брендовый на весь портал. Убирает синий браузерный ринг.
 * Здесь, а не в components.css: это часть каркаса, работает сразу. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Одна строка чинит все синие чекбоксы портала. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}