/* ==========================================================================
   VideoReview — дизайн-токены (скилл apple-style-ui, assets/tokens.css; README 6.1).
   ЕДИНСТВЕННЫЙ файл с цветами: в остальных CSS, шаблонах и JS — только var(--…)
   (тест test_tokens.py ловит hex, rgb()/hsl() и имена цветов вне этого файла).
   Монохромная база (чёрный / серый / белый) + приглушённый акцент компании.
   Подключать ПЕРВЫМ, до components.css.

   Тема:   auto по prefers-color-scheme; принудительно — <html data-theme="light|dark">
           (User.theme, этап 24б). Каждый цветовой токен объявлен в обеих темах (тест).
   Акцент: base.html кладёт <style nonce>:root{--brand:…;--accent-light:…;--accent-dark:…}</style>
           (значения считает apps/core/accent.py; атрибут style на <html> запрещён CSP).
           Блок со своим акцентом (styleguide, предпросмотр цвета компании) — класс ui-accent-scope
           и те же три переменные на нём.
   Отличия от скилла: @font-face вариативной Inter из static/fonts/ (без Google Fonts — CSP); пять цветовых литералов
   из components.css скилла вынесены в токены (--shadow-segment, --shadow-switch, --switch-thumb-on,
   --backdrop); размеры компонентов проекта (drawer, тост, таб-бар) — в блоке :root.
   ========================================================================== */

/* ---- Inter 4.x (OFL, static/fonts/OFL.txt) — для не-Apple устройств; SF не встраивается (лицензия Apple). ----
   Вариативная: @fontsource-variable/inter 5.2.5, `make vendor-inter` (SHA-384 каждого файла сверяется, вопрос №93).
   Одна грань на подмножество покрывает все начертания 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: #6e6e73;                 /* по умолчанию (accent.DEFAULT_BRAND, тест сверяет) */
  --accent-light: var(--brand);     /* подобран под светлую тему (контраст ≥ 3:1) */
  --accent-dark: var(--brand);      /* подобран под тёмную тему (контраст ≥ 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;
  --fs-headline: 17px;     --lh-headline: 1.3;
  --fs-body: 17px;         --lh-body: 1.47;
  --fs-callout: 16px;      --lh-callout: 1.4;
  --fs-subhead: 15px;      --lh-subhead: 1.35;
  --fs-footnote: 13px;     --lh-footnote: 1.38;
  --fs-caption: 12px;      --lh-caption: 1.33;
  --fs-tab: 10px;

  --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;

  /* ---- Размеры ---- */
  /* Телефон первым (вопрос №94, CTO 2026-10-18): цели касания на < 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);

  /* ---- Компоненты проекта (этап 24б) ---- */
  --drawer-width: 480px;    /* форма справа; на телефоне — лист снизу */
  --toast-width: 380px;
  --tabbar-height: 84px;    /* место под таб-бар на < 1024 px */
  --client-max: 640px;      /* колонка клиентской страницы на десктопе (README 6.3, этап 28) */
  --navbar-height: 44px;    /* навбар админки на < 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: 15px;
    --fs-body: 15px;
    --fs-callout: 14px;
    --fs-subhead: 13px;
    --fs-footnote: 12px;
    --fs-caption: 11px;
    --gutter: 24px;
    --row-height: 36px;
    --control-sm: 28px;
    --control-md: 36px;
  }
}

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

  --bg: #FFFFFF;                     /* основной фон */
  --bg-secondary: #F5F5F7;           /* фон страницы под карточками, сайдбар */
  --bg-grouped: #F5F5F7;             /* фон под inset-grouped списками */
  --surface: #FFFFFF;                /* карточки, списки */
  --surface-elevated: #FFFFFF;       /* поповеры, модалки (+тень) */
  --material: rgba(250, 250, 252, 0.78);

  --fill: rgba(0, 0, 0, 0.05);       /* вторичные кнопки, поля, сегмент-трек */
  --fill-hover: rgba(0, 0, 0, 0.07);
  --fill-strong: rgba(0, 0, 0, 0.09);/* выбранный пункт / строка */
  --separator: rgba(0, 0, 0, 0.1);
  --border: rgba(0, 0, 0, 0.14);     /* обводка полей */

  --text: #1D1D1F;                   /* основной текст (15.9:1) */
  --text-secondary: #6E6E73;         /* вторичный текст (5.1:1) */
  --text-tertiary: #86868B;          /* только плейсхолдеры, disabled, ≥17px (3.6:1) */
  --text-quaternary: #C7C7CC;        /* шевроны, декоративные иконки */

  --primary: #1D1D1F;                /* главная кнопка — ЧЁРНАЯ */
  --primary-hover: #000000;
  --on-primary: #FFFFFF;
  --segment-thumb: #FFFFFF;
  --switch-on: #1D1D1F;
  --switch-thumb: #FFFFFF;

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

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 48px rgba(0, 0, 0, 0.16);

  /* Литералы components.css скилла, вынесенные в токены (этап 24б) */
  --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-switch: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  --switch-thumb-on: #FFFFFF;
  --backdrop: rgba(0, 0, 0, 0.32);
  /* Плеер видео (этап 29): видео всегда на тёмной подложке; кнопка запуска — светлый круг, время — светлым */
  --player-bg: #3A3A3C;
  --player-control: rgba(255, 255, 255, 0.86);
  --on-player-control: #1D1D1F;
  --on-player: #FFFFFF;
  --player-chip: rgba(0, 0, 0, 0.5);
  /* Рекордер (этап 40): экран съёмки всегда тёмный в обеих темах — кадр камеры, белые элементы управления */
  --camera-bg: #000000;
  --camera-fg: #FFFFFF;
  --camera-fg-secondary: rgba(255, 255, 255, 0.72);
  --camera-scrim: rgba(0, 0, 0, 0.5);
  --camera-scrim-strong: rgba(0, 0, 0, 0.88);
  --camera-fill: rgba(255, 255, 255, 0.12);
  --camera-fill-strong: rgba(255, 255, 255, 0.24);
  --camera-border: rgba(255, 255, 255, 0.3);
  --camera-pulse: rgba(255, 255, 255, 0.45);

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

/* ==========================================================================
   Тёмная тема
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --bg-secondary: #161617;
    --bg-grouped: #000000;
    --surface: #1C1C1E;
    --surface-elevated: #2C2C2E;
    --material: rgba(28, 28, 30, 0.78);
    --fill: rgba(255, 255, 255, 0.08);
    --fill-hover: rgba(255, 255, 255, 0.11);
    --fill-strong: rgba(255, 255, 255, 0.14);
    --separator: rgba(255, 255, 255, 0.12);
    --border: rgba(255, 255, 255, 0.16);
    --text: #F5F5F7;
    --text-secondary: #A1A1A6;
    --text-tertiary: #6E6E73;
    --text-quaternary: #48484A;
    --primary: #F5F5F7;
    --primary-hover: #FFFFFF;
    --on-primary: #1D1D1F;
    --segment-thumb: #636366;
    --switch-on: #F5F5F7;
    --switch-thumb: #FFFFFF;
    --danger: #FF453A;
    --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);
    --switch-thumb-on: #1D1D1F;
    --backdrop: rgba(0, 0, 0, 0.5);
    --player-bg: #2C2C2E;
    --player-control: rgba(255, 255, 255, 0.86);
    --on-player-control: #1D1D1F;
    --on-player: #FFFFFF;
    --player-chip: rgba(0, 0, 0, 0.5);
    /* Рекордер (этап 40): экран съёмки всегда тёмный в обеих темах — кадр камеры, белые элементы управления */
    --camera-bg: #000000;
    --camera-fg: #FFFFFF;
    --camera-fg-secondary: rgba(255, 255, 255, 0.72);
    --camera-scrim: rgba(0, 0, 0, 0.5);
    --camera-scrim-strong: rgba(0, 0, 0, 0.88);
    --camera-fill: rgba(255, 255, 255, 0.12);
    --camera-fill-strong: rgba(255, 255, 255, 0.24);
    --camera-border: rgba(255, 255, 255, 0.3);
    --camera-pulse: rgba(255, 255, 255, 0.45);
    --accent: var(--accent-dark);
    --theme-light-only: none;
    --theme-dark-only: block;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-secondary: #161617;
  --bg-grouped: #000000;
  --surface: #1C1C1E;
  --surface-elevated: #2C2C2E;
  --material: rgba(28, 28, 30, 0.78);
  --fill: rgba(255, 255, 255, 0.08);
  --fill-hover: rgba(255, 255, 255, 0.11);
  --fill-strong: rgba(255, 255, 255, 0.14);
  --separator: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.16);
  --text: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-tertiary: #6E6E73;
  --text-quaternary: #48484A;
  --primary: #F5F5F7;
  --primary-hover: #FFFFFF;
  --on-primary: #1D1D1F;
  --segment-thumb: #636366;
  --switch-on: #F5F5F7;
  --switch-thumb: #FFFFFF;
  --danger: #FF453A;
  --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);
  --switch-thumb-on: #1D1D1F;
  --backdrop: rgba(0, 0, 0, 0.5);
  --player-bg: #2C2C2E;
  --player-control: rgba(255, 255, 255, 0.86);
  --on-player-control: #1D1D1F;
  --on-player: #FFFFFF;
  --player-chip: rgba(0, 0, 0, 0.5);
  /* Рекордер (этап 40): экран съёмки всегда тёмный в обеих темах — кадр камеры, белые элементы управления */
  --camera-bg: #000000;
  --camera-fg: #FFFFFF;
  --camera-fg-secondary: rgba(255, 255, 255, 0.72);
  --camera-scrim: rgba(0, 0, 0, 0.5);
  --camera-scrim-strong: rgba(0, 0, 0, 0.88);
  --camera-fill: rgba(255, 255, 255, 0.12);
  --camera-fill-strong: rgba(255, 255, 255, 0.24);
  --camera-border: rgba(255, 255, 255, 0.3);
  --camera-pulse: rgba(255, 255, 255, 0.45);
  --accent: var(--accent-dark);
  --theme-light-only: none;
  --theme-dark-only: block;
}

/* ==========================================================================
   Данные и графики (дашборд, отчёты)
   Цвет компании здесь НЕ используется. Палитра проверена валидатором на
   поверхностях #FFFFFF и #1C1C1E: порядок слотов фиксирован (CVD-безопасность),
   слоты 3–4 в светлой теме < 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: #c98500;
    --viz-5: #d55181; --viz-6: #008300; --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: #FF6961;
    --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: #c98500;
  --viz-5: #d55181; --viz-6: #008300; --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: #FF6961;
  --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, предпросмотр цвета компании, этап 30): --accent и производные
   пересчитываются на нём, а не наследуются готовыми от :root. */
.ui-accent-scope { --accent: var(--accent-light); }
@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); }
/* Блок со своей темой (предпросмотр бренда в светлой и тёмной теме рядом, этап 30): тема блока важнее темы
   страницы и системы — специфичность выше правил выше, порядок после них. */
: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);
}