/* ============================================================================
   Faststat — дизайн-токены, вариант Б (этапы 1–2 ТЗ docs/DESIGN_SYSTEM_TZ.md, 20.09.2026)

   Единственное место, где цвет, размер шрифта, радиус, отступ, высота
   контрола, тень или длительность записаны числом. app.css ссылается только
   на var(--…). Светлая и тёмная тема — одни имена, разные значения.

   Вариант Б: значения сняты с мастера кампаний и аналитики как есть — ничего не двигается.
   Существующие 71+74 токена сохранены под старыми именами: на них уже
   ссылается app.css. Новые токены (раздел «Семантика») закрывают 184
   уникальных хардкод-цвета (337 вхождений) — карта в docs/TOKEN_MAP.md.
   ============================================================================ */

:root{
  /* ---- Шкала текста (5 ступеней + заголовки) ---------------------------
     Заменяет 30 размеров. Ступени выбраны по фактическим частотам app.css:
     12.5/13/13.5 — тело таблиц и кнопок, 11–11.5 — подписи и капсы. */
  --fs-xs:11.5px;   /* капсы шапок таблиц, счётчики, подписи под цифрами */
  --fs-sm:12.5px;   /* вторичный текст, мета, пилюли */
  --fs-md:13.5px;   /* основной: таблицы, кнопки, поля */
  --fs-lg:15px;     /* заголовки карточек, имя кабинета */
  --fs-xl:17px;     /* h2, заголовок окна */
  --fs-h1:26px; --fs-h2:17px; --fs-h3:15px;
  --fs-num:20px;    /* крупная цифра в карточке аналитики */
  --lh-tight:1.15; --lh-base:1.45; --lh-loose:1.55;
  --font:Inter, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Радиусы (5) ------------------------------------------------------ */
  --r-xs:6px;       /* пункты меню, мини-сегменты */
  --r-sm:8px;       /* иконочные кнопки, чипы-теги, дни недели */
  --r-md:10px;      /* кнопки, поля, селекты, сегменты  (= --radius-sm) */
  --r-lg:16px;      /* карточки, таблицы, модалки       (= --radius)    */
  --r-full:999px;   /* пилюли, тумблеры */
  /* легаси-алиасы — остаются, значения те же */
  --radius:var(--r-lg); --radius-sm:var(--r-md); --radius-lg:var(--r-lg); --radius-card:12px;

  /* ---- Отступы, шаг 4 --------------------------------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* ---- Высоты контролов ------------------------------------------------- */
  --h-sm:28px; --h-md:32px; --h-lg:40px;
  /* Замер по факту (20.09): у мастера и всего сервиса «обычный» контрол —
     поле, кнопка, селект — 36px (14 правил в мастере, .field input 35.5),
     а 24 — чип/пилюля/мини-сегмент. Шкала 24/28/32/36/40/48 с шагом 4,
     чтобы эталон не двигать: --h-ctl — стандартный контрол формы. */
  --h-xs:24px; --h-ctl:36px; --h-xl:48px;
  --control-h:var(--h-md); --control-h-sm:var(--h-sm); --control-h-lg:var(--h-lg);
  --row-h:40px;     /* строка таблицы с данными */
  --row-h-dense:36px;

  /* ---- Длительности ----------------------------------------------------- */
  --dur-fast:.12s; --dur-base:.16s; --dur-slow:.22s;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-spring:cubic-bezier(.32,.72,0,1);

  /* ---- Цвета: основа (прежние имена, прежние значения) ------------------ */
  --blue:#1685ED; --blue-dark:#0f6fc9; --blue-light:#E2EEFC; --blue-active:#E6F1FD;
  --ink:#121A24; --muted:#5F6B7A; --muted-2:#8792A2; --text-2:#33404F; --gray-text:#4B5665;
  --status-blue:#2f7fe0; --placeholder:#8792A2;
  --input:#FFFFFF; --seg-bg:#E6EBF2; --seg-active:#FFFFFF;
  --border:#D9E1EA; --border-strong:#C7D2DF; --line:#E5EAF1;
  --hover-fill:rgba(24,33,44,.06);
  --bg:#EDF1F6; --card:#ffffff; --surface:#ffffff;
  --surface-2:#F3F6FA; --surface-3:#E9EEF4; --surface-4:#F0F3F8; --surface-6:#E3E9F1; --surface-7:#F8FAFC; --surface-8:#F4F7FB;
  --green:#178A52; --green-light:#E1F4EA; --red:#e5484d; --red-light:#FCE8E8;
  --purple:#7c5cff; --purple-light:#efeaff; --orange:#D97A12; --orange-light:#fdf1e2;
  --gray-light:#E6EBF2; --btn-soft:#E9EEF4;
  --sb-bg:var(--surface); --sb-active-bg:var(--blue-light); --sb-active-fg:var(--blue-dark); --sb-active-shadow:none;
  --sb-hover:var(--hover-fill); --sb-line:var(--border); --sb-cap:#8792A2;
  --tip-bg:#18212C; --tip-ink:#ffffff; --tip-dark-bg:#1d2129;
  --ctl-border:#B5C0CE; --ctl-border-hover:#9FADBE;
  --tabbar-bg:rgba(237,241,246,.9);

  /* ---- Семантика (новые: закрывают хардкод) ----------------------------- */
  --link-ink:var(--blue);         /* текстовые действия («Изменить сумму», «Проверить», «Где взять ключ»): синие — 21.09 пробовали серые, владелец вернул синий */
  --link-ink-hover:var(--blue-dark);
  --on-accent:#ffffff;            /* текст на синей/красной/зелёной заливке (#fff ×40) */
  --ink-inverse:#ffffff;          /* текст на тёмных подложках подсказок/оверлеев */
  --ink-disabled:#A6B0BE;         /* заблокированный текст (#9AA5B2, #A6B0BE, #b6bac2, #B8C1CC) */
  --green-strong:#12B76A;         /* «вверх» в дельтах, бейджи готовности (#12B76A ×10, #34c77b) */
  --green-ink:#137a48;            /* текст в зелёной пилюле (#137a48, #2e7d5b) */
  --green-line:#BFE6D0;           /* рамка зелёного (#bfe6d0, #cfeadb) */
  --orange-ink:#b3670f;           /* текст в оранжевой пилюле (#b3670f, #a56b00, #9a6207, #8A6D1F) */
  --orange-line:#F0DCA8;          /* рамка жёлтого (#F0DCA8, #f5dda3, #eccd80) */
  --orange-soft:#FDF3D8;          /* мягкая жёлтая подложка (#FDF3D8, #fff6e5, #fff8e6, #FEFBF3) */
  --gold:#C8940F; --gold-strong:#B08900; --gold-light:#E0B040;   /* золотой статус «готово» и тест-режим */
  --red-ink:#c4383c;              /* текст в красной пилюле (#c4383c, #c73e43) */
  --red-line:#F3C6C6;             /* рамка красного (#f3c6c6, #F7D2D6) */
  --red-hover:#f9d6d6;            /* :hover опасной кнопки (#f9d6d6, #f8d7d7, #FDECEE) */
  --amber:#E88913; --amber-ink:#FFA000;
  --accent-a08:rgba(22,133,237,.08); --accent-a12:rgba(22,133,237,.12); --accent-a16:rgba(22,133,237,.16);
  --accent-a22:rgba(22,133,237,.22); --accent-a35:rgba(22,133,237,.35);   /* все rgba(59|74,143|155,238|240,…) */
  --accent-line:#B9D8F7;          /* рамка выбранного (#B9D8F7, #9CC6F2, #c9dffa) */
  --green-a12:rgba(23,138,82,.12); --green-a16:rgba(23,138,82,.16); --green-a35:rgba(23,138,82,.35);
  --red-a08:rgba(229,72,77,.08); --red-a12:rgba(229,72,77,.12); --red-a40:rgba(229,72,77,.4);
  --orange-a16:rgba(217,122,18,.16);
  --scrim:rgba(12,14,20,.55);     /* подложка модалок (rgba(12,14,20,.55|.6|.45|.35), rgba(24,33,44,.38)) */
  --scrim-soft:rgba(12,14,20,.35);
  --scrim-dark:rgba(8,10,16,.82); /* просмотр креативов (rgba(8,10,16,.72–.92)) */
  --glass-a12:rgba(255,255,255,.12); --glass-a24:rgba(255,255,255,.24); --glass-a55:rgba(255,255,255,.55);
  --glass-a72:rgba(255,255,255,.72); --glass-a85:rgba(255,255,255,.85);   /* элементы поверх тёмного/фото */
  --track-off:#CBD5E1;            /* дорожка выключенного тумблера */
  --thumb:#ffffff;                /* бегунок тумблера */
  --scrollbar:#D5DBE6;
  /* Вид B списков (04.10, ТЗ design_handoff_campaigns_b): плашка сужения,
     «Удалить» и наведение на основную кнопку на тёмной панели действий,
     текст блока причины отклонения. */
  --ecb-scope-bg:#F3F8FE; --ecb-scope-line:#D7E8FB;
  --ecb-dur-bg:rgba(18,26,36,.72);   /* бейдж длительности на превью видео */
  --red-on-dark:#FF9EA1; --blue-on-dark-hover:#3D95F0; --red-ink-strong:#a82c30;
  --brand-vk:#2a5885; --brand-vk-ok:#4bb34b; --brand-pgon:#AC18EB; --brand-pgon-2:#4E01D3; --brand-pgon-ring:#C084FC;
  /* Qrypto (23.09) — зелёный черепахи с их лого, на тон темнее самого лого: на ярком #1FCF66 белый текст даёт контраст 2:1, здесь 3,7:1 → 6,3:1. */
  --brand-qrypto:#0C9A48; --brand-qrypto-2:#00702A; --brand-qrypto-ring:#86EFAC; --brand-qrypto-shadow:rgba(0,143,53,.28); --brand-qrypto-bal:rgba(255,255,255,.85);
  /* цветовые метки групп кабинетов — содержание, не стиль (5.3), остаются как есть в JS */

  /* ---- Тени (3 + фокус) ------------------------------------------------- */
  --shadow-1:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.07);      /* карточка (= --shadow) */
  --shadow-2:0 2px 6px rgba(16,24,40,.07), 0 14px 32px rgba(16,24,40,.1);      /* карточка :hover, меню */
  --shadow-3:0 24px 64px rgba(8,10,16,.35), 0 4px 18px rgba(8,10,16,.18);      /* модалка */
  --shadow-inset:inset 0 0 0 1px var(--border);
  --shadow-thumb:0 1px 3px rgba(8,10,16,.25);
  --shadow-0:0 1px 2px rgba(16,24,40,.04);      /* едва заметная тень контрола (ghost/danger-кнопки, селект тулбара) */
  --shadow:var(--shadow-1); --shadow-hover:var(--shadow-2);
  --focus-ring:0 0 0 3px var(--blue-light);
  --focus-ring-strong:0 0 0 1px var(--blue), 0 0 0 4px var(--accent-a12);
  --shadow-primary:0 1px 2px rgba(22,133,237,.15), 0 6px 16px rgba(22,133,237,.18);
  --shadow-primary-hover:0 2px 4px rgba(22,133,237,.18), 0 10px 22px rgba(22,133,237,.24);
  --shadow-seg:0 1px 4px rgba(25,44,66,.14);          /* активный сегмент .wseg / .an-preset */
  --dur:var(--dur-base);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1216; --card:#161A21; --surface:#161A21; --line:#242B35;
  --surface-2:#1B2028; --surface-3:#20262F; --surface-4:#1B2129; --surface-6:#232A34; --surface-7:#181D25; --surface-8:#1A1F27;
  --ink:#E6EAF0; --muted:#8B95A5; --muted-2:#6B7684; --text-2:#B7C0CB; --gray-text:#A6AFBD;
  --status-blue:#6fb0f5; --input:#0D1116; --seg-bg:#0B0F13; --seg-active:#2A333E; --placeholder:#5C6773;
  --border:#262D38; --border-strong:#333C49;
  --sb-bg:linear-gradient(180deg, #171C25 0%, #12161E 100%); --sb-active-bg:#212935; --sb-active-fg:#7DB8F5;
  --sb-active-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05);
  --sb-hover:rgba(255,255,255,.05); --sb-line:rgba(255,255,255,.08); --sb-cap:#6B7684;
  --hover-fill:rgba(255,255,255,.055); --gray-light:#222833; --btn-soft:#232A34;
  --blue:#3D95F0; --blue-dark:#8CC3FF; --blue-light:#152A42; --blue-active:#12253A;
  --green:#34C77A; --green-light:#11291C; --red:#F06B6B; --red-light:#3A1C1E;
  --purple:#9B86FF; --purple-light:#27234B; --orange:#F0A24A; --orange-light:#332510;
  --tip-bg:#2A313C; --tip-ink:#F2F5F9; --tip-dark-bg:#2A313C;
  --ctl-border:#3A4452; --ctl-border-hover:#4A5566; --tabbar-bg:rgba(15,18,22,.86);

  --on-accent:#ffffff; --ink-inverse:#F2F5F9; --ink-disabled:#5A6472;
  --green-strong:#34C77A; --green-ink:#34C77A; --green-line:#2A5A3E;
  --orange-ink:#F0A24A; --orange-line:#5A4318; --orange-soft:#3A2A10;
  --gold:#E0B040; --gold-strong:#E0B040; --gold-light:#FFE08A;
  --red-ink:#F06B6B; --red-line:#5A2A2E; --red-hover:#4A2225;
  --amber:#F0A24A; --amber-ink:#FFB547;
  --accent-a08:rgba(61,149,240,.10); --accent-a12:rgba(61,149,240,.16); --accent-a16:rgba(61,149,240,.22);
  --accent-a22:rgba(61,149,240,.28); --accent-a35:rgba(61,149,240,.35); --accent-line:#2A4A70;
  --green-a12:rgba(52,199,122,.14); --green-a16:rgba(52,199,122,.18); --green-a35:rgba(52,199,122,.35);
  --red-a08:rgba(240,107,107,.10); --red-a12:rgba(240,107,107,.14); --red-a40:rgba(240,107,107,.4);
  --orange-a16:rgba(240,162,74,.18);
  --scrim:rgba(160,172,196,.16); --scrim-soft:rgba(160,172,196,.14); --scrim-dark:rgba(8,10,16,.86);
  --track-off:#333C49; --thumb:#E6EAF0; --scrollbar:#333C49;
  --ecb-scope-bg:#13202F; --ecb-scope-line:#22405F;
  --ecb-dur-bg:rgba(8,10,16,.72);
  --red-on-dark:#FF9EA1; --blue-on-dark-hover:#5AA7F5; --red-ink-strong:#F08A8A;

  --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45);
  --shadow-3:0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  --shadow-thumb:0 1px 3px rgba(0,0,0,.55);
  --shadow-0:none;
  --focus-ring:0 0 0 3px rgba(61,149,240,.30);
  --shadow-primary:none; --shadow-primary-hover:none;
  --shadow-seg:0 0 0 1px #4A5566, 0 1px 3px rgba(0,0,0,.5);
}

/* ---- Мобильные контролы (ТЗ mobile-controls-5a, 23.09) -------------------
   Одна высота, один радиус, одна заливка для всего, что нажимают в тулбарах
   на телефоне. Значения — через существующие токены, поэтому тёмная тема
   работает сама. Высота 40, а не 36 из макета: 40 уже стоит в --control-h на
   телефоне и ближе к 44px для пальца. */
@media (max-width: 720px){
  :root{
    --m-h:var(--h-lg);               /* 40 — высота любого контрола в тулбаре */
    --m-h-inner:34px;                /* кнопка внутри сегмента: 40 − 2×3 */
    --m-r:var(--r-md);               /* 10 */
    --m-gap:var(--sp-2);             /* 8 — между контролами в ряду */
    --m-row-gap:var(--sp-2);         /* 8 — между рядами */
    --m-pad-x:var(--sp-3);           /* 12 — внутренний отступ поля */
    --m-fs:var(--fs-md);             /* 13.5 — значение */
    --m-cap-fs:var(--fs-xs);         /* 11.5 — подпись над значением */
    --m-fill:var(--gray-light);      /* заливка по умолчанию */
    --m-fill-on:var(--blue-light);   /* значение не по умолчанию */
    --m-ink-on:var(--blue-dark);
    --m-sheet-r:18px;                /* верхние углы нижнего листа */
    --m-sheet-row:48px;              /* строка варианта в листе */
  }
}