/* ==========================================================================
   HyperFacility — дизайн-токены (скилл apple-style-ui, assets/tokens.css; README 6.1).
   ЕДИНСТВЕННЫЙ файл с цветами: в остальных CSS, шаблонах и JS — только var(--…)
   (тест test_tokens.py ловит hex, rgb()/hsl() и имена цветов вне этого файла).
   Палитра «Slate / Teal» (решение владельца 2026-10-23): 212A31 · 2E3944 · 124E66 · 748D92 · D3D9D4 —
   бирюзовая главная кнопка, тёмная цветная зона --nav-bg у сайдбара и шапки ui-hero, акцент УК точечно.
   Подключать ПЕРВЫМ, до components.css.

   Тема:   auto по prefers-color-scheme; принудительно — <html data-theme="light|dark"> (User.theme, этап 12).
           Каждый цветовой токен объявлен в обеих темах (тест).
   Акцент: base.html кладёт <style nonce>:root{--brand:…;--accent-light:…;--accent-dark:…;--accent-nav:…}</style>
           (значения считает apps/core/accent.py; атрибут style на <html> запрещён CSP). Блок со своим акцентом
           (styleguide, предпросмотр цвета УК) — класс ui-accent-scope и те же переменные на нём.

   Цвета палитры и тёмной зоны — из assets/tokens.css скилла как есть. Отличия от скилла (этап 6):
   - @font-face вариативной Inter из static/fonts/ (без Google Fonts — CSP);
   - текстовая шкала --fs-headline … --fs-tab на 1 px крупнее скилла (решение владельца по эталону; заголовки и
     line-height — скилла), цели касания на телефоне 36 / 44 px, на десктопе — скилла 28 / 36;
   - цветовые литералы components.css скилла вынесены в токены обеих тем: --shadow-segment, --shadow-switch,
     --backdrop (--switch-thumb-on в скилле уже есть);
   - --nav-accent берёт --accent-nav: вариант цвета УК, подобранный accent.py к тёмной зоне (контраст ≥ 3:1, как
     у --accent-light/--accent-dark); без него — смесь скилла (color-mix 40 % с D3D9D4);
   - --theme-light-only / --theme-dark-only — картинка одной темы (логотип для тёмной темы);
   - размеры компонентов проекта (drawer, тост, таб-бар, навбар) — в блоке :root;
   - TODO(q:64) тёмная тема, контраст текста ≥ 4.5:1 (тест test_contrast.py): --danger #FF453A → #FF9791 (на --surface #2E3944
     было 3,45:1, на --surface-elevated — ниже), --primary-hover #2589AE → #1C6E8C (белый текст кнопки при наведении
     был 3,99:1; наведение теперь темнее, а не светлее);
   - тёмная палитра данных перепроверена на #2E3944 (раздел «Данные и графики» ниже).
   assets/ скилла не менялись.
   ========================================================================== */

/* ---- Inter 4.x (OFL, static/fonts/OFL.txt) — для не-Apple устройств; SF не встраивается (лицензия Apple). ----
   Вариативная: @fontsource-variable/inter 5.2.5, `make vendor-inter` (SHA-384 каждого файла сверяется).
   Одна грань на подмножество покрывает все начертания 100–900. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-cyrillic-wght.06ab411342ac.woff2") format("woff2-variations"), url("../fonts/inter-cyrillic-wght.06ab411342ac.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext-wght.ad4eb06671be.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-wght.ad4eb06671be.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght.8e433c0592f7.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght.8e433c0592f7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---- Шрифты (лицензионно чисто: SF не встраивается, берётся из системы) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Акцент УК ---- */
  --brand: #124E66;                 /* fallback, если УК не задала цвет — бирюзовый палитры (accent.DEFAULT_BRAND) */
  --accent-light: var(--brand);     /* подобран под светлую тему (контраст ≥ 3:1) */
  --accent-dark: color-mix(in srgb, var(--brand) 50%, #D3D9D4); /* подобран под тёмную тему (контраст ≥ 3:1) */
  --accent-nav: color-mix(in srgb, var(--brand) 40%, #D3D9D4);  /* подобран под тёмную зону (контраст ≥ 3:1) */

  /* ---- Типографика: mobile-first ---- */
  --fs-large-title: 34px;  --lh-large-title: 1.2;
  --fs-title-1: 28px;      --lh-title-1: 1.2;
  --fs-title-2: 22px;      --lh-title-2: 1.27;
  --fs-title-3: 20px;      --lh-title-3: 1.25;
  /* Текстовые размеры — на 1 px крупнее скилла; заголовки и line-height — скилла. */
  --fs-headline: 18px;     --lh-headline: 1.3;
  --fs-body: 18px;         --lh-body: 1.47;
  --fs-callout: 17px;      --lh-callout: 1.4;
  --fs-subhead: 16px;      --lh-subhead: 1.35;
  --fs-footnote: 14px;     --lh-footnote: 1.38;
  --fs-caption: 13px;      --lh-caption: 1.33;
  --fs-tab: 11px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-display: -0.022em;  /* ≥ 28px */
  --tracking-title: -0.015em;    /* 20–24px */
  --tracking-body: -0.01em;      /* 15–17px */
  --tracking-caps: 0.02em;       /* UPPERCASE подписи групп */

  /* ---- Отступы (сетка 4) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --gutter: 16px;                 /* поле экрана; на десктопе 24–32 */

  /* ---- Скругления ---- */
  --radius-xs: 6px;    /* бейджи */
  --radius-sm: 8px;    /* пункты сайдбара, иконки-кнопки */
  --radius-md: 10px;   /* поля, кнопки 36px */
  --radius-lg: 14px;   /* списки, плитки */
  --radius-xl: 20px;   /* карточки, модальные окна */
  --radius-pill: 999px;

  /* ---- Размеры ---- */
  /* Телефон первым (исполнитель и арендатор, README 6.2): на < 1024 px главные цели касания ≥ 44 px, вторичные
     (фильтры, сегменты, маленькие кнопки) ≥ 36 px; на десктопе — размеры скилла 28 / 36. */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 44px;   /* минимальная цель касания на mobile */
  --row-height: 44px;
  --sidebar-width: 240px;
  --content-max: 760px;

  /* ---- Движение ---- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 350ms;

  /* ---- Материал (полупрозрачные панели) ---- */
  --blur: saturate(180%) blur(20px);

  /* ---- Компоненты проекта ---- */
  --drawer-width: 480px;    /* форма справа; на телефоне — лист снизу (README 6.2) */
  --toast-width: 380px;
  --tabbar-height: 84px;    /* место под таб-бар на < 1024 px */
  --navbar-height: 44px;    /* навбар шапки ui-hero на < 1024 px (SKILL.md раздел 6) */
}

/* Десктоп: компактнее шрифт, шире поля */
@media (min-width: 1024px) {
  :root {
    --fs-large-title: 28px;
    --fs-title-1: 24px;
    --fs-title-2: 20px;
    --fs-title-3: 17px;
    --fs-headline: 16px;
    --fs-body: 16px;
    --fs-callout: 15px;
    --fs-subhead: 14px;
    --fs-footnote: 13px;
    --fs-caption: 12px;
    --gutter: 24px;
    --row-height: 36px;
    --control-sm: 28px;
    --control-md: 36px;
  }
}

/* ==========================================================================
   Светлая тема (по умолчанию)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;
  /* Картинка одной темы (логотип для тёмной темы): display по теме ближайшего блока. */
  --theme-light-only: block;
  --theme-dark-only: none;

  --bg: #F1F4F2;                     /* основной фон */
  --bg-secondary: #D3D9D4;           /* фон под карточками */
  --bg-grouped: #E2E8E4;             /* фон под inset-grouped списками */
  --surface: #FFFFFF;                /* карточки, списки */
  --surface-elevated: #FFFFFF;       /* поповеры, модалки (+тень) */
  --material: rgba(241, 244, 242, 0.8);

  --fill: rgba(18, 78, 102, 0.08);   /* вторичные кнопки, поля, сегмент-трек */
  --fill-hover: rgba(18, 78, 102, 0.12);
  --fill-strong: rgba(18, 78, 102, 0.16); /* выбранный пункт / строка */
  --separator: rgba(33, 42, 49, 0.12);
  --border: rgba(33, 42, 49, 0.18);  /* обводка полей */

  --text: #212A31;                   /* основной текст (14:1 на #FFF) */
  --text-secondary: #46575E;         /* вторичный текст (≥ 4.5:1 на #D3D9D4) */
  --text-tertiary: #748D92;          /* только плейсхолдеры, disabled */
  --text-quaternary: #A9B7B9;        /* шевроны, декоративные иконки */

  --primary: #124E66;                /* главная кнопка — БИРЮЗОВАЯ */
  --primary-hover: #0D3D51;
  --on-primary: #FFFFFF;
  --segment-thumb: #FFFFFF;
  --switch-on: #124E66;
  --switch-thumb: #FFFFFF;
  --switch-thumb-on: #FFFFFF;

  --danger: #D70015;                 /* только деструктивные действия */

  --shadow-sm: 0 1px 2px rgba(33, 42, 49, 0.06);
  --shadow-md: 0 1px 2px rgba(33, 42, 49, 0.06), 0 8px 24px rgba(33, 42, 49, 0.12);
  --shadow-lg: 0 2px 4px rgba(33, 42, 49, 0.06), 0 16px 48px rgba(33, 42, 49, 0.2);

  /* Литералы components.css скилла, вынесенные в токены (тени сегмента и переключателя, подложка окна) */
  --shadow-segment: 0 1px 3px rgba(33, 42, 49, 0.12), 0 0 0 0.5px rgba(33, 42, 49, 0.04);
  --shadow-switch: 0 3px 8px rgba(33, 42, 49, 0.15), 0 1px 1px rgba(33, 42, 49, 0.16);
  --backdrop: rgba(33, 42, 49, 0.32);

  /* Тёмная цветная зона: сайдбар, шапка экрана (ui-sidebar, ui-hero) */
  --nav-bg: #212A31;

  --accent: var(--accent-light);
}

/* Токены внутри тёмной цветной зоны — одинаковы в обеих темах */
:root,
[data-theme] {
  --nav-text: #E6EBE7;
  --nav-text-secondary: #A9BCC0;
  --nav-text-tertiary: #8FA5AA;
  --nav-fill: rgba(211, 217, 212, 0.1);
  --nav-fill-hover: rgba(211, 217, 212, 0.14);
  --nav-fill-strong: rgba(211, 217, 212, 0.16);
  --nav-accent: var(--accent-nav);
  /* «луна» в шапке: единственное свечение, только в ui-hero */
  --hero-glow: rgba(211, 217, 212, 0.38);
  --hero-glow-edge: rgba(116, 141, 146, 0.22);
}

/* ==========================================================================
   Тёмная тема
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --theme-light-only: none;
    --theme-dark-only: block;
    --bg: #212A31;
    --bg-secondary: #1A2228;
    --bg-grouped: #212A31;
    --surface: #2E3944;
    --surface-elevated: #3A4754;
    --material: rgba(33, 42, 49, 0.8);
    --fill: rgba(116, 141, 146, 0.16);
    --fill-hover: rgba(116, 141, 146, 0.22);
    --fill-strong: rgba(116, 141, 146, 0.3);
    --separator: rgba(211, 217, 212, 0.12);
    --border: rgba(211, 217, 212, 0.2);
    --text: #E6EBE7;
    --text-secondary: #A9BCC0;
    --text-tertiary: #748D92;
    --text-quaternary: #4E5E68;
    --primary: #1F7A9C;
    --primary-hover: #1C6E8C;
    --on-primary: #FFFFFF;
    --segment-thumb: #4E5E68;
    --switch-on: #1F7A9C;
    --switch-thumb: #FFFFFF;
    --switch-thumb-on: #FFFFFF;
    --danger: #FF9791;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    --shadow-switch: 0 3px 8px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
    --backdrop: rgba(26, 34, 40, 0.6);
    --nav-bg: #12384A;
    --accent: var(--accent-dark);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --theme-light-only: none;
  --theme-dark-only: block;
  --bg: #212A31;
  --bg-secondary: #1A2228;
  --bg-grouped: #212A31;
  --surface: #2E3944;
  --surface-elevated: #3A4754;
  --material: rgba(33, 42, 49, 0.8);
  --fill: rgba(116, 141, 146, 0.16);
  --fill-hover: rgba(116, 141, 146, 0.22);
  --fill-strong: rgba(116, 141, 146, 0.3);
  --separator: rgba(211, 217, 212, 0.12);
  --border: rgba(211, 217, 212, 0.2);
  --text: #E6EBE7;
  --text-secondary: #A9BCC0;
  --text-tertiary: #748D92;
  --text-quaternary: #4E5E68;
  --primary: #1F7A9C;
  --primary-hover: #1C6E8C;
  --on-primary: #FFFFFF;
  --segment-thumb: #4E5E68;
  --switch-on: #1F7A9C;
  --switch-thumb: #FFFFFF;
  --switch-thumb-on: #FFFFFF;
  --danger: #FF9791;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  --shadow-switch: 0 3px 8px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.3);
  --backdrop: rgba(26, 34, 40, 0.6);
  --nav-bg: #12384A;
  --accent: var(--accent-dark);
}

/* ==========================================================================
   Данные и графики (дашборд, отчёты)
   Цвет УК здесь НЕ используется. Палитра проверена валидатором (tests/viz_palette.py, тест
   test_viz_palette.py) на поверхностях #FFFFFF и #2E3944: все пары слотов 1–4 и соседние слоты 4–8 —
   ΔE2000 ≥ 15 при нормальном зрении и ≥ 8 при протанопии, дейтеранопии и тританопии; порядок слотов фиксирован.
   Этап 6 (тёмная поверхность скилла стала #2E3944): --viz-4 #c98500 → #cf941f (дейтеранопия: слоты 2 и 4
   сливались, ΔE 5,3), --viz-5 #d55181 → #d55382 и --viz-6 #008300 → #269626 (контраст к #2E3944 был 2,98 и 2,38),
   --delta-down #FF6961 → #FF847D (текст: 4,17 → 4,96). В тёмной теме все слоты ≥ 3:1 к поверхности; в светлой
   слоты 3–5 ниже 3:1 → у таких серий обязательны подписи значений или таблица.
   ========================================================================== */
:root,
[data-theme="light"] {
  --viz-1: #2a78d6;   /* синий   — первая серия */
  --viz-2: #eb6834;   /* оранжевый */
  --viz-3: #1baf7a;   /* аква */
  --viz-4: #eda100;   /* жёлтый */
  --viz-5: #e87ba4;   /* маджента */
  --viz-6: #008300;   /* зелёный */
  --viz-7: #6250d6;   /* фиолетовый */
  --viz-8: #e34948;   /* красный */
  --viz-other: #AEAEB2;     /* «Прочее», «Без ответа», приглушённые серии */
  --viz-grid: rgba(0, 0, 0, 0.07);
  --viz-axis: rgba(0, 0, 0, 0.22);
  --viz-label: #6E6E73;
  --delta-up: #006300;      /* текст «рост — хорошо» */
  --delta-down: #C4161C;    /* текст «падение — плохо» */
  /* последовательная шкала (одна величина): синий, светлый → тёмный */
  --viz-seq-1: #b7d3f6; --viz-seq-2: #86b6ef; --viz-seq-3: #5598e7;
  --viz-seq-4: #2a78d6; --viz-seq-5: #1c5cab; --viz-seq-6: #104281;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #cf941f;
    --viz-5: #d55382; --viz-6: #269626; --viz-7: #9085e9; --viz-8: #e66767;
    --viz-other: #636366;
    --viz-grid: rgba(255, 255, 255, 0.08);
    --viz-axis: rgba(255, 255, 255, 0.24);
    --viz-label: #A1A1A6;
    --delta-up: #30D158;
    --delta-down: #FF847D;
    --viz-seq-1: #184f95; --viz-seq-2: #1c5cab; --viz-seq-3: #256abf;
    --viz-seq-4: #3987e5; --viz-seq-5: #6da7ec; --viz-seq-6: #9ec5f4;
  }
}
[data-theme="dark"] {
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #cf941f;
  --viz-5: #d55382; --viz-6: #269626; --viz-7: #9085e9; --viz-8: #e66767;
  --viz-other: #636366;
  --viz-grid: rgba(255, 255, 255, 0.08);
  --viz-axis: rgba(255, 255, 255, 0.24);
  --viz-label: #A1A1A6;
  --delta-up: #30D158;
  --delta-down: #FF847D;
  --viz-seq-1: #184f95; --viz-seq-2: #1c5cab; --viz-seq-3: #256abf;
  --viz-seq-4: #3987e5; --viz-seq-5: #6da7ec; --viz-seq-6: #9ec5f4;
}
/* Статусы (одинаковы в обеих темах; всегда вместе с иконкой и подписью) */
:root {
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
}

/* Блок со своим акцентом (styleguide, предпросмотр цвета УК): --accent и производные пересчитываются на нём,
   а не наследуются готовыми от :root. */
.ui-accent-scope { --accent: var(--accent-light); --nav-accent: var(--accent-nav); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-accent-scope { --accent: var(--accent-dark); }
}
[data-theme="dark"] .ui-accent-scope { --accent: var(--accent-dark); }
/* Блок со своей темой (предпросмотр бренда в светлой и тёмной теме рядом): тема блока важнее темы страницы и
   системы — специфичность выше правил выше, порядок после них. */
:root .ui-accent-scope[data-theme="light"] { --accent: var(--accent-light); }
:root .ui-accent-scope[data-theme="dark"] { --accent: var(--accent-dark); }

/* Производные от акцента — НЕ использовать --accent напрямую для заливок */
:root,
[data-theme],
.ui-accent-scope {
  --accent-ring: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-selection: color-mix(in srgb, var(--accent) 22%, transparent);
}