/* Дизайн-токены направления «Пульт» (выбрано 19.09.2026).
   Первая версия повторяла макет на дизайн-системе Organic: пилюли, скругления
   14–22, карточки-острова с тенями. Для справочника, где на экране сотня
   строк с MAC и серийниками, это не работало — экран разваливался на
   плавающие острова, а одинаковая форма у кнопки, фильтра, поля ввода и
   бейджа не давала понять, что нажимается.
   Здесь: одна рабочая плоскость, границы вместо теней, малые радиусы,
   плотная сетка. Имена переменных сохранены — на них ссылаются шаблоны. */

:root {
  color-scheme: light;

  /* Подложки */
  --color-bg: #f5f7f9;       /* фон рабочей области */
  --color-surface: #eef1f5;  /* «тихие» плашки внутри панелей */
  --card: #ffffff;           /* панели */
  --line: #e6eaef;           /* граница панели, шапка таблицы */
  --line-control: #dde2e9;   /* граница поля ввода и кнопки */
  --accent-wash: #f7f9ff;    /* подложка блока ККТ и выделенной строки */
  --line-soft: #f1f4f7;      /* линия между строками списка */

  /* Текст. Три смысловые ступени; четвёртая — только для несмыслового
     (прочерки, разделители): на белом она даёт 3:1 и читать её не нужно. */
  --color-text: #101828;
  --ink-2: #3d4757;
  --ink-3: #5f6c7f;
  --ink-4: #8794a8;

  /* Акцент — синий. Им помечается одно главное действие и то, что выбрано. */
  --color-accent: #2f5bd7;
  --color-accent-100: #eaf0ff;
  --color-accent-200: #d6e2ff;
  --color-accent-700: #1e3f9e;
  --color-accent-800: #173178;
  /* Заливка кнопок и плашек под белый текст. Отдельно от --color-accent
     (им красят ссылки): в тёмной теме ссылке нужен светлый тон, а заливке —
     тёмный, иначе белый текст на кнопке пропадает. */
  --accent-fill: var(--color-accent);
  --accent-fill-hover: var(--color-accent-700);

  /* Второй акцент — зелёный, на «всё в порядке» */
  --color-accent-2-100: #e8f4ee;
  --color-accent-2-300: #a9d3bd;
  --color-accent-2-500: #3f8f68;


  /* Статусы */
  --ok-bg: #e8f4ee;
  --ok: #1d5b3c;
  --warn-bg: #fdf3e2;
  --warn: #8a5308;
  --warn-track: #f0dcb8;
  --bad: #b42318;
  --bad-bg: #fdf1f0;
  --bad-line: #f4cdc8;
  /* Состояния наведения и мелкие серые — раньше числами в app.css */
  --hover-bg: #f8fafc;        /* наведение на кнопку, чип, строку */
  --hover-warn-bg: #fdf8ec;   /* наведение на строку с предупреждением */
  --hover-bad-bg: #fdeeec;    /* наведение на строку с проблемой */
  --bad-hover: #99200f;       /* тёмно-красная кнопка при наведении */
  --line-sep: #c3cbd6;        /* разделитель в крошках */
  --dot-off: #b0b9c6;         /* точка «списано» */

  /* Подсветка проблемной строки: заливка едва заметная, работу делает
     полоска слева — иначе список из сотни строк выглядит пожаром. */
  --row-bad-bg: #fff9f8;
  --row-warn-bg: #fffdf7;
  --stripe-ok: var(--color-accent-2-500);
  --stripe-warn: #d9962a;
  --stripe-bad: var(--bad);
  --bad-fill: var(--bad);     /* заливка под белый текст, см. --accent-fill */
  --warn-fill: var(--warn);

  /* Тёмный рельс. Светлые ступени посчитаны на подложке --nav-bg:
     --nav-ink 6.7:1, --nav-ink-2 4.7:1, --nav-link 6.4:1 — выше нормы 4.5. */
  --nav-bg: #101828;
  --nav-ink: #96a2b6;
  --nav-ink-2: #7c8aa3;
  --nav-ink-3: #cfd7e5;
  --nav-link: #7aa0f5;
  --nav-line: rgba(255, 255, 255, .09);
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-on: rgba(255, 255, 255, .11);

  /* Шрифты. Onest вместо Figtree из макета: у Figtree нет кириллицы.
     Моноширинный — только идентификаторы: MAC, IP, серийники, суммы, даты. */
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Шкала размеров. Раньше её не было вовсе: 88 из 95 значений мельче 16,
     дробные 12.5/13.5/15.5 стояли прямо в разметке, и между заголовком 34
     и текстом 13.5 зияла пустота. */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 22px;

  /* Геометрия: почти прямые углы. Круглым остаётся только то, что круглое
     по смыслу — точка состояния и аватар. */
  --r: 6px;
  --r-panel: 8px;
  --r-mobile: 10px;
  --pill: 999px;

  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);

  /* Сетка */
  --gap-panel: 12px;
  --rail-w: 212px;
  --topbar-h: 52px;
  --content-max: 1680px;
  --content-pad: 20px;

  /* Плотность строк списка. Шапка таблицы берёт эти же значения — иначе
     подписи колонок уезжают от содержимого. */
  --row-gap: 12px;
  --row-pad-x: 8px;
  --row-pad-y: 9px;

  /* Высоты элементов управления: одна на все кнопки, поля и выпадашки. */
  --h-control: 32px;
  --h-control-lg: 36px;
}

/* Тёмная тема: следует за настройкой системы (телефон ночью, ноутбук с
   тёмной темой). Переключателя нет — выбирать нечего. Все пары «текст на
   подложке» посчитаны: не ниже 4.5:1 (норма WCAG AA для обычного текста).
     --color-text на --card 14.9, --ink-2 11.0, --ink-3 7.3; ссылка
     --color-accent на --card 7.5; --ok / --warn / --bad на своих подложках
     8.2 / 8.5 / 7.6; белый на заливках: accent 5.8, bad 6.6, warn 6.3.
   Тёмный рельс (--nav-*) такой же и в светлой теме — не трогаем. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg: #0d1117;
    --color-surface: #1a212c;
    --card: #141a23;
    --line: #263042;
    --line-control: #364255;
    --accent-wash: #172036;
    --line-soft: #1c2430;

    --color-text: #e8edf5;
    --ink-2: #c5cedc;
    --ink-3: #9ba8bb;
    --ink-4: #6b788d;

    --color-accent: #86a8ff;
    --color-accent-100: #1b2a4d;
    --color-accent-200: #26396b;
    --color-accent-700: #a9c1ff;
    --color-accent-800: #bcd0ff;
    --accent-fill: #2f5bd7;
    --accent-fill-hover: #244bc0;

    --color-accent-2-100: #14291f;
    --color-accent-2-300: #2f6b4d;
    --color-accent-2-500: #3f8f68;

    --ok-bg: #14291f;
    --ok: #6fd0a0;
    --warn-bg: #2d2111;
    --warn: #f0b35a;
    --warn-track: #4a3718;
    --warn-fill: #8a5308;
    --bad: #ff8f84;
    --bad-bg: #2e1715;
    --bad-line: #5c2b27;
    --bad-fill: #b42318;
    --hover-bg: #1b2330;
    --hover-warn-bg: #2a2214;
    --hover-bad-bg: #331a18;
    --bad-hover: #8f1d12;
    --line-sep: #4a566a;
    --dot-off: #5b667a;

    --row-bad-bg: #231517;
    --row-warn-bg: #221c12;

    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  }
}