/* =========================================================================
   Sfera — дизайн-токены. Шрифт — Fixel (MacPaw, SIL OFL 1.1, файлы и
   лицензия — app/assets/fonts): Fixel Text — текст, Fixel Display —
   заголовки и крупные числа (AUDIT №449). Акцент — синий #1f5bff (решение
   владельца 28.10, №449), жёлтый #ffd500 и navy-сайдбар светлой темы — бренд.
   Светлая тема — клиентский контур, data-theme="dark" — операторский.
   Контраст (WCAG 2.2 AA, docs/web/ux.md, принцип 9): текст ≥ 4,5:1 на
   --bg и --bg-elevated своей темы, рамки полей, фокус и графики ≥ 3:1.
   Текстовый цвет ссылок — --link, а не --accent: акцент тёмной темы
   (#3d72ff) — фон и заливки, не текст. Основная кнопка — --primary-bg:
   белый на акценте тёмной темы дал бы 4,2:1.
   ========================================================================= */

@font-face { font-family: "Fixel Text"; src: url("/assets/FixelText-Regular-a631d55f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fixel Text"; src: url("/assets/FixelText-Medium-c59fb4f6.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fixel Text"; src: url("/assets/FixelText-SemiBold-4b114e7d.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fixel Text"; src: url("/assets/FixelText-Bold-42de7e02.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fixel Display"; src: url("/assets/FixelDisplay-Medium-8ea05de9.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fixel Display"; src: url("/assets/FixelDisplay-SemiBold-b8d553d6.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fixel Display"; src: url("/assets/FixelDisplay-Bold-627a3b26.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

:root, .theme-scope[data-theme="light"] {
  /* без data-theme (до скрипта темы) — как в системе; с ним — по теме:
     полосы прокрутки, поля дат и автозаполнение не остаются светлыми */
  color-scheme: light dark;
  --accent: #1f5bff;
  --accent-600: #1747c8;
  --accent-soft: rgba(31, 91, 255, 0.08);
  --accent-text: #1747c8;          /* тональные кнопки: текст, фон, рамка */
  --button-bg: #eef3ff;
  --button-bg-hover: #e3ebff;
  --button-border: #cfdcff;
  --primary-bg: #1f5bff;           /* основная кнопка: белый ≥ 4,5:1, и на hover */
  --primary-bg-hover: #1747c8;
  --primary-shadow: 0 8px 18px -10px rgba(31, 91, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --accent-2: #ffd500;             /* жёлтый — искра, активные пункты, детали */
  --chart-bid: #1f5bff;            /* график дня: рекомендация / подано / факт */
  --chart-submitted: #0a9c6b;
  --chart-fact: #16171a;
  --chart-shortfall: #c96f00;      /* бары «недобір» (факт выше заявки) */
  --chart-surplus: #4a85ff;        /* бары «перебір» (оператор) / «надлишок» (клієнт) */
  --chart-band: #4a85ff;           /* коридор сценариев «Прогнозу на місяць» */
  --spark-dot: #a07c00;            /* последняя точка спарклайна табло */
  /* набор графиков UiChartsHelper (docs/web/ux.md, «Графіки»): серии
     различаются и начертанием (сплошная / пунктир / точки), цвет ≥ 3:1 */
  --chart-s1: #1f5bff;             /* Sfera: заявка, похибка */
  --chart-s2: #c96f00;             /* ручна заявка клієнта, недобір */
  --chart-s3: #0a8a5f;             /* факт / третья серия */
  --chart-s4: #7a3fd1;             /* сутки перевода, четвёртая серия */
  --chart-muted: #7d8290;          /* аварийные сутки, «чекає» */
  --chart-grid: #eceef2;           /* сетка — декоративная, порог не нужен */
  --chart-heat-0: #b4c7f2;         /* теплокарта: 5 ступеней от «дёшево»; нижняя ≥ 1,5:1 к фону */
  --chart-heat-1: #8fb0f5;
  --chart-heat-2: #5f8ef0;
  --chart-heat-3: #2f6bff;
  --chart-heat-4: #0a2f8f;
  /* тёплая теплокарта («Де похибка коштує найбільше», «Ціна недобору», №455):
     дороже — темнее; нижняя ≥ 1,5:1 к фону и карточке */
  --chart-warm-0: #eabf88;
  --chart-warm-1: #e3a560;
  --chart-warm-2: #cf7d2e;
  --chart-warm-3: #a65a12;
  --chart-warm-4: #6b3606;
  --chart-mark-outage: rgba(201, 111, 0, 0.05);  /* полоса «відключення» */
  --chart-mark-outage-line: rgba(201, 111, 0, 0.32);  /* её штриховка поверх столбцов и линий — лёгкая, линии читаются (№437) */
  --chart-mark-outage-edge: #b36200;                  /* её кромка */
  --chart-mark-dst: rgba(122, 63, 209, 0.10);    /* полоса «перевід годинника» */
  --danger-solid: #b3263f;         /* сплошная опасная кнопка: белый ≥ 4,5:1 */
  /* фон-холст (приём Омнискора, .app-canvas): мягкое свечение фирменной
     пары только в полях и шапке, карточки непрозрачные */
  --canvas-yellow: rgba(255, 213, 0, 0.20);
  --canvas-blue: rgba(31, 91, 255, 0.09);
  --brand-navy: #1d2963;
  --link: #1f5bff;                 /* текст ссылок */
  --link-hover: #1747c8;
  --focus-ring: #1f5bff;           /* сплошное кольцо :focus-visible */

  /* нейтрали — графит и холодный серый без синевы (№449); navy — только
     сайдбар и знак */
  --bg: #f4f5f8;
  --bg-elevated: #ffffff;
  --bg-sunken: #eff1f5;
  /* Сайдбар — navy в светлой теме (бренд), графит в тёмной; ВСЕ его цвета — эти токены (№449,
     страж — design_tokens_test «сайдбар красится только токенами»): другая
     панель (светлая, графит) — правка значений здесь, а не правил. */
  --sidebar: #1b2764;
  --sidebar-2: #101740;
  --sidebar-item: rgba(255, 255, 255, 0.72);
  --sidebar-item-active: #ffffff;
  --sidebar-muted: #8e9bbb;                      /* статус, организация, бейдж ops */
  --sidebar-line: rgba(255, 255, 255, 0.10);
  --sidebar-line-strong: rgba(255, 255, 255, 0.16);
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: rgba(255, 255, 255, 0.09);
  --sidebar-active-mark: var(--accent-2);        /* полоса активного пункта — жёлтая искра */
  --sidebar-chip: rgba(255, 255, 255, 0.05);     /* переключатели, карточка пользователя */
  --sidebar-chip-active: rgba(255, 255, 255, 0.14);
  --sidebar-pop: #182457;                        /* меню пользователя */
  --sidebar-danger: #ff8fa8;                     /* «Вийти», «не відповідає» */
  --sidebar-danger-soft: rgba(239, 71, 111, 0.16);
  --sidebar-mark-bg: #ffffff;                    /* плашка знака */
  --sidebar-avatar: linear-gradient(145deg, #4a7dff, #1f5bff);
  --sidebar-avatar-text: #ffffff;
  --sidebar-shadow: rgba(0, 0, 0, 0.35);
  --sidebar-edge: transparent;                   /* граница справа (на телефоне — снизу): у navy не нужна */
  /* плитки обленерго в переключателе (SwitcherHelper#tenant_tile): тон по id,
     буква ≥ 4,5:1 к своему фону */
  --tile-1-bg: #e3ebff; --tile-1-fg: #1747c8;
  --tile-2-bg: #fff0d6; --tile-2-fg: #8a5200;
  --tile-3-bg: #e2f4ea; --tile-3-fg: #0b5e3a;
  --tile-4-bg: #efe6fb; --tile-4-fg: #5b2aa8;

  --text: #16171a;
  --text-muted: #5c5f68;
  --text-faint: #686b75;
  --border: #e6e8ed;
  --border-strong: #d4d7de;
  --border-input: #848893;         /* рамка input/select: ≥ 3:1 к фону */

  --ok: #06d6a0;
  --ok-text: #0b5e3a;
  --ok-soft: #e7f5ec;
  --warn: #ff9e00;
  --warn-text: #8a5200;
  --warn-soft: #fff3df;
  --danger: #ef476f;
  --danger-text: #9c1f3d;
  --danger-soft: #fde8ee;

  --shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.04), 0 1px 3px rgba(16, 18, 24, 0.04);
  --shadow-lift: 0 1px 2px rgba(16, 18, 24, 0.04), 0 12px 32px -16px rgba(16, 18, 24, 0.16);  /* всплывающее: меню, выпадающий список */
  --backdrop: rgb(10 11 13 / 50%);  /* затемнение под диалогом и панелью */

  --radius: 14px;
  --radius-lg: 16px;               /* карточки и плитки */
  --radius-sm: 9px;
  --page-max: 1480px;              /* ширина контента: на Full HD таблицы не режутся, дальше — поля холста (№449) */
  --gap: 20px;                     /* шаг 12-колоночной сетки */
  --control-h: 40px;               /* высота поля, select, кнопки и сегментов одной строки (№449) */
  --sidebar-w: 228px;
  /* нижняя панель телефона (< 1024 px, ux.md «На телефоне»): высота без
     safe-area; --app-bottom — панель с safe-area, на неё сдвигается всё, что
     стоит внизу. Без панели (десктоп) — 0. */
  --tabbar-h: 60px;
  --app-bottom: 0px;

  /* Цифры — один переключатель (№449): таблицы, плитки, дельты, графики,
     отсчёт. normal — штатные цифры Fixel, ровные по линии и «чистые» (как в
     демо-кабинете; решение владельца 28.10). tabular-nums у Fixel — с
     перечёркнутым нулём и «7» с чертой («1 Ø55,6»), pnum — старостильные
     (5 и 9 ниже строки): не брать. */
  --nums: normal;
  /* меняющиеся на глазах цифры (отсчёт до срока) — табличные, иначе строка
     прыгает каждую минуту; перечёркнутый ноль в мелком тексте допустим */
  --nums-tick: tabular-nums;
  --font: "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fixel Display", "Fixel Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="light"] { color-scheme: light; }

/* тёмная тема (операторский контур и клиент в тёмной) — графит, и сайдбар
   тоже: графитовый в тон фону с тонкой границей (решение владельца 29.10);
   navy — только в светлой теме */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f11;
  --bg-elevated: #17181b;
  --bg-sunken: #121315;
  --sidebar: #131416;
  --sidebar-2: #111214;
  --sidebar-muted: #9a9da6;
  --sidebar-line: rgba(255, 255, 255, 0.08);
  --sidebar-line-strong: rgba(255, 255, 255, 0.13);
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-active-bg: rgba(255, 255, 255, 0.07);
  --sidebar-chip: rgba(255, 255, 255, 0.04);
  --sidebar-chip-active: rgba(255, 255, 255, 0.11);
  --sidebar-pop: #1d1e22;
  --sidebar-shadow: rgba(0, 0, 0, 0.5);
  --sidebar-edge: #25272c;
  --tile-1-bg: rgba(61, 114, 255, 0.20); --tile-1-fg: #b9ccff;
  --tile-2-bg: rgba(255, 158, 0, 0.18); --tile-2-fg: #ffc46b;
  --tile-3-bg: rgba(6, 214, 160, 0.16); --tile-3-fg: #6fe8c4;
  --tile-4-bg: rgba(201, 167, 255, 0.18); --tile-4-fg: #dcc8ff;
  --text: #f2f3f5;
  --text-muted: #a3a6ae;
  --text-faint: #91949d;
  --border: #25272c;
  --border-strong: #34363c;
  --border-input: #6f737d;
  --link: #7ea2ff;
  --link-hover: #a6bfff;
  --focus-ring: #7ea2ff;
  --accent: #3d72ff;
  --accent-600: #2f62ef;
  --accent-soft: rgba(61, 114, 255, 0.16);
  --accent-text: #dbe5ff;
  --primary-bg: #2f62ef;
  --primary-bg-hover: #2552d4;
  --primary-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --chart-bid: #ffd500;
  --chart-submitted: #06d6a0;
  --chart-fact: #f2f3f5;
  --chart-shortfall: #ff9e00;
  --spark-dot: #ffd500;
  --chart-s1: #5b8bff;
  --chart-s2: #ffb84d;
  --chart-s3: #2fd8a8;
  --chart-s4: #c9a7ff;
  --chart-muted: #80848f;
  --chart-grid: #24262b;
  --chart-heat-0: #2a3d75;
  --chart-heat-1: #3d5aa6;
  --chart-heat-2: #5b8cff;
  --chart-heat-3: #9fbcff;
  --chart-heat-4: #d6e3ff;
  --chart-warm-0: #433850;
  --chart-warm-1: #634560;
  --chart-warm-2: #9a6447;
  --chart-warm-3: #d9893d;
  --chart-warm-4: #ffb84d;
  --chart-mark-outage: rgba(255, 184, 77, 0.05);
  --chart-mark-outage-line: rgba(255, 184, 77, 0.34);
  --chart-mark-outage-edge: #ffb84d;
  --chart-mark-dst: rgba(201, 167, 255, 0.10);
  --canvas-yellow: rgba(255, 213, 0, 0.09);
  --canvas-blue: rgba(61, 114, 255, 0.13);
  --button-bg: #1d2333;
  --button-bg-hover: #252c40;
  --button-border: #343c54;
  --ok-text: #06d6a0;
  --ok-soft: rgba(6, 214, 160, 0.14);
  --warn-text: #ff9e00;
  --warn-soft: rgba(255, 158, 0, 0.14);
  --danger-text: #ff7d9c;
  --danger-soft: rgba(239, 71, 111, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -18px rgba(0, 0, 0, 0.8);
  --backdrop: rgb(0 0 0 / 55%);
}

/* касание — цель не меньше 44 px (WCAG 2.5.5, ux.md принцип 8) */
@media (pointer: coarse) {
  :root { --control-h: 44px; }
}