/* Токены панели (блок Э-0.6a). Единственное место, где живут цвета, размеры,
   отступы и радиусы. Правило блока: цвет или отступ хардкодом вне этого файла
   — ошибка, её ловит гейт (tests/ui.mjs).

   Палитра выбрана заново, а не перенесена из рулетки: золото + тёмно-синий —
   брендинг киоска для покупателей (праздник, крупные элементы, взгляд на
   секунды). Панель — рабочий инструмент, в котором сидят весь день с рабочего
   ПК: нейтральный холодный серый фон, графитовая шапка, один сине-стальной
   акцент на действия и ссылки. Акцент намеренно не яркий: на плотной таблице
   в 200 строк насыщенный цвет утомляет к обеду.

   Тёмная тема не заводится: половина токенов ушла бы на второй набор, который
   некому проверить. color-scheme: light объявлен явно, чтобы браузер с тёмной
   системной темой не перекрашивал поля ввода сам.

   Размеры — в rem и относительных единицах. Жёстких пиксельных ширин нет
   сознательно: «мой график» и «мои показатели» (0.6b) должны читаться с
   телефона, а выкорчёвывать фиксированную сетку дороже, чем не заводить её. */

:root {
  color-scheme: light;

  /* ── Поверхности и границы ──────────────────────────────────────────────── */
  --c-bg:            #eef0f4;  /* фон рабочей области */
  --c-surface:       #ffffff;  /* карточка, таблица, сайдбар */
  --c-surface-sunken: #f5f6f9; /* шапка таблицы, тулбар — «утоплено» */
  --c-surface-hover: #eff1f6;  /* строка таблицы и пункт меню под курсором */
  --c-border:        #dde1e9;
  --c-border-strong: #c2c8d4;  /* поля ввода: граница слабее фона неразличима */

  /* ── Текст ──────────────────────────────────────────────────────────────── */
  --c-text:       #171a21;
  --c-text-muted: #5c6373;  /* подписи, вторичные строки — контраст ≥ 4.5:1 */
  --c-text-faint: #858c9b;  /* только для 11–12px заголовков колонок и секций */

  /* ── Акцент ─────────────────────────────────────────────────────────────── */
  --c-accent:       #2f6fae;
  --c-accent-hover: #275d93;
  --c-accent-soft:  #e8f0f8;  /* фон активного пункта меню, выбранного среза */
  --c-on-accent:    #ffffff;

  /* ── Шапка ──────────────────────────────────────────────────────────────── */
  --c-header-bg:     #272b35;
  --c-header-text:   #f2f4f8;
  --c-header-muted:  #a7aebc;
  --c-header-border: #3c4250;

  /* ── Статусы. Мягкий фон — для pill и баннеров, основной цвет — для текста ─ */
  --c-ok:          #2c7a51;
  --c-ok-soft:     #e6f3ec;
  --c-warn:        #8a5a00;
  --c-warn-soft:   #fbf1de;
  --c-danger:      #b3261e;
  --c-danger-soft: #fbeae9;

  /* ── Типографика ────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;

  --fs-xs:   0.6875rem;  /* 11px — заголовки колонок, метки секций меню */
  --fs-sm:   0.8125rem;  /* 13px — таблица, подписи, кнопки */
  --fs-base: 0.875rem;   /* 14px — основной текст панели */
  --fs-md:   1rem;       /* 16px — поля ввода: меньше 16px iOS зумит форму */
  --fs-lg:   1.25rem;    /* 20px — заголовок экрана */
  --fs-xl:   1.5rem;

  --lh-tight: 1.25;
  --lh:       1.45;

  /* ── Плотность. Шаг 4px; таблица живёт на --sp-1/--sp-2 ─────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* ── Форма ──────────────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(23, 26, 33, 0.06);
  --focus-ring: 2px solid var(--c-accent);

  /* ── Раскладка ──────────────────────────────────────────────────────────── */
  --sidebar-w: 13.5rem;
  --content-max: 82rem;   /* дальше строка таблицы становится нечитаемо длинной */
  --field-w: 18rem;       /* поле поиска и поля форм 0.6b */
  --z-sticky: 10;         /* липкая шапка таблицы */
  --z-header: 20;

  /* Высота прокручиваемой области таблицы. Считается от окна, а не задана
     числом: на 13" и на 27" мониторе видно разное число строк, но липкая
     шапка и тулбар остаются на месте в обоих случаях.

     Вычитаемое подтянуто с 20rem до 15rem по замеру на первом настоящем
     экране (цены, Ф1.3): над таблицей стоят шапка, заголовок экрана, подпись
     и тулбар — вместе 215 px, то есть 13.5rem. При 20rem под таблицей
     оставалось 105 px пустоты, и на ноутбучном экране из 170 позиций было
     видно десять строк вместо двадцати. 15rem = те же 13.5rem плюс нижний
     отступ рабочей области. */
  --table-max-h: clamp(18rem, calc(100vh - 15rem), 62rem);
}