/*
 * Токены дизайн-системы EGO — брендбук 2026-10 (Р-128): чернила, бумага,
 * графит и один акцент «сигнал». Сменили палитру «Электро-спектр» (Р-107).
 *
 * Файл — отражение документов, а не самостоятельный источник: значения
 * перенесены один в один из docs/design-colors.md (цвет) и docs/design.md
 * (типографика, сетка, формы, motion). Новое значение сначала появляется в
 * документе, потом здесь (правило CLAUDE.md №11). Живой образец системы —
 * docs/design-preview.html.
 *
 * ФАЙЛ ОДИН НА ЧЕТЫРЕ МОДУЛЯ. Копии в egoweb, egoadminpanel, egocaptcha и
 * (в фазе 5) egopartner обязаны совпадать побайтно: у каждого модуля свой
 * контейнер, и Dockerfile копирует только его каталог — общей папки быть не
 * может. Правка вносится во все копии в одной сессии, расхождение заводится
 * долгом (CLAUDE.md №1a).
 *
 * Устройство тем (docs/design-themes.md §3):
 *   :root                                — светлая, работает и без data-theme
 *   :root[data-theme="dark"], .theme-dark — тёмная и «тёмный остров»
 *   :root[data-theme="auto"] + @media    — решение отдано системе
 *   .theme-light                          — светлый остров внутри тёмной темы
 * Значения продублированы намеренно: CSS не умеет наследовать блок объявлений.
 */

/* Шрифты вендорятся (CLAUDE.md №18): один вариативный файл на подмножество
   вместо пяти начертаний. Manrope — весь текст, Unbounded — главный заголовок
   и заголовки разделов (брендбук, docs/design.md §2) */
@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../vendor/fonts/unbounded-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../vendor/fonts/unbounded-latin.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;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../vendor/fonts/manrope-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../vendor/fonts/manrope-latin.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;
}


/* ═══ СВЕТЛАЯ ТЕМА — основная (design-colors.md §4) ═══════════════════════ */

:root {
    color-scheme: light;

    /* ─── Нейтраль ───────────────────────────────────────────────────────── */
    /* Белого нет совсем (Р-135, запрос оператора 2026-10-15): фон страницы —
       тёплый серый #E9E7E1, карточки и панели — бумага #F4F3EF, выделенные
       блоки внутри карточек (токены, чипы, поля) — ещё на шаг темнее. Теней
       нет, карточку отделяет тонкая линия (design-colors.md §4) */
    --bg: #E9E7E1;
    --bg-subtle: #E3E1DA;
    --surface: #F4F3EF;
    --surface-raised: #F4F3EF;
    --fill: #DEDCD5;
    --fill-strong: #D3D0C8;
    --text: #0B0B0E;
    --text-secondary: #3E3D43;
    --text-muted: #545359;
    --border: #D3D0C8;
    --border-strong: #7E7C75;
    --overlay: rgba(11, 16, 32, 0.45);

    /* ─── Спектр: шесть цветов, от темы не зависят (design-colors.md §2) ─── */
    /* «Violet» — историческое имя роли главного действия (кнопки, ссылки,
       выбранное). По брендбуку это `action`: чернила в светлой теме и
       сигнал в тёмной. Имя не меняем: на него завязаны сотни правил */
    --violet: #0B0B0E;
    --fuchsia: #E45BF0;
    --cyan: #22D3EE;
    --lime: #D6FF3B;      /* signal — единственный акцент бренда */
    --coral: #FF6B57;
    --amber: #FFB020;

    /* Семантика. `warning` и `info` совпадают с цветами спектра намеренно:
       второй жёлтый рядом с янтарём гарантированно перепутают */
    --success: #12B981;
    --danger: #E11D48;
    --warning: var(--amber);
    --info: var(--cyan);

    /* ─── Текст на заливке (design-colors.md §3.1) ────────────────────────── */
    /* Правило одной фразой: на цветах спектра текст чернильный, на violet и
       danger — белый. `--ink` от темы не зависит: это не «цвет текста светлой
       темы», а чёрный, который кладут на яркое */
    --ink: #0B0B14;
    --on-bright: var(--ink);
    --on-violet: #F4F3EF;
    --on-danger: #FFFFFF;

    /* ─── Текст цветом на фоне (design-colors.md §3.2) ────────────────────── */
    /* Заливкой красить текст нельзя: лайм на белом — 1.24 : 1 */
    --violet-text: #0B0B0E;
    --fuchsia-text: #C026D3;
    --cyan-text: #0E7490;
    --lime-text: #0B0B0E;   /* сигнал текстом на светлом не бывает (Р-128) */
    --coral-text: #D6402A;
    --amber-text: #B45309;
    --success-text: #0B7E57;
    --danger-text: #C2103B;
    --warning-text: var(--amber-text);
    --info-text: var(--cyan-text);

    /* ─── Наведение (design-colors.md §3.3) ──────────────────────────────── */
    --violet-hover: #26262C;
    --danger-hover: #C2103B;
    --fill-hover: var(--fill-strong);

    /* ─── Подложки ───────────────────────────────────────────────────────── */
    /* Считаются, а не заводятся HEX-ом: тогда подложка не может разойтись с
       цветом, от которого произошла, и сама меняется вместе с темой */
    --soft: 12%;
    --violet-soft: color-mix(in srgb, var(--violet) var(--soft), transparent);
    --fuchsia-soft: color-mix(in srgb, var(--fuchsia) var(--soft), transparent);
    --cyan-soft: color-mix(in srgb, var(--cyan) var(--soft), transparent);
    --lime-soft: color-mix(in srgb, var(--lime) var(--soft), transparent);
    --coral-soft: color-mix(in srgb, var(--coral) var(--soft), transparent);
    --amber-soft: color-mix(in srgb, var(--amber) var(--soft), transparent);
    --success-soft: color-mix(in srgb, var(--success) var(--soft), transparent);
    --danger-soft: color-mix(in srgb, var(--danger) var(--soft), transparent);
    --warning-soft: var(--amber-soft);
    --info-soft: var(--cyan-soft);

    /* ─── Тени и свечение (design-colors.md §4) ──────────────────────────── */
    /* Тень — только у поднятого над страницей: модалка, шторка, липкая шапка.
       Карточка в потоке тени не имеет, её держит граница */
    /* Брендбук: теней нет, поверхности различаются цветом и линией. Тень
       осталась только у того, что поднято над страницей (модалка, шторка) */
    --shadow-1: none;
    --shadow-2: 0 24px 64px -20px rgba(11, 11, 14, .22);
    --glow-primary: none;
    /* Фокус — сплошное кольцо 2px с отступом 2px цветом действия */
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);

    /* ─── Градиентов нет (брендбук) ─────────────────────────────────────── */
    /* Токены оставлены, но залиты одним цветом: правила вида
       `background: var(--gradient-brand)` и рамки `border-box` продолжают
       работать, а градиент ниоткуда не появится. Новые правила их не берут */
    --gradient-brand: linear-gradient(var(--violet), var(--violet));
    --gradient-cool: linear-gradient(var(--violet), var(--violet));
    --gradient-warm: linear-gradient(var(--violet), var(--violet));
    /* «Искра» была лаймовой в любой теме; по брендбуку сигнал на светлом не
       бывает, поэтому она — цвет действия, как остальные */
    --gradient-spark: linear-gradient(var(--violet), var(--violet));
    --gradient-spectrum: linear-gradient(var(--violet), var(--violet));

    /* Фоновой подсветки нет: фон — сплошной цвет */
    --ambient: none;

    /* ─── Акценты разделов (design-colors.md §7) ─────────────────────────── */
    /* Раздел красит навигацию, заголовок и плашку — и ничего больше. Смысл
       во всех разделах одинаков и берётся из семантики */
    --accent: var(--violet);
    --accent-text: var(--violet-text);
    --accent-soft: var(--violet-soft);
    --accent-gradient: var(--gradient-brand);

    /* ─── Производные: приоритеты, статусы, состояния модулей ────────────── */
    /* Ссылками, а не копиями кодов: иначе перестанут меняться вместе с темой */
    --priority-urgent: var(--danger);
    --priority-high: var(--warning);
    --priority-medium: var(--violet);
    --priority-low: var(--text-muted);

    --status-todo: var(--text-secondary);
    --status-in-progress: var(--violet);
    --status-done: var(--success);
    --status-cancelled: var(--text-muted);

    --module-online: var(--success);
    --module-degraded: var(--warning);
    --module-down: var(--danger);
    --module-paused: var(--text-muted);
    --module-review: var(--cyan);

    /* ─── Типографика (design.md §2) ─────────────────────────────────────── */
    --font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

    /* clamp вместо трёх медиазапросов: текст растёт плавно, а не ступенями */
    --text-display: clamp(34px, 1.2rem + 3vw, 56px);
    --text-h1: clamp(32px, 1.5rem + 2.2vw, 48px);
    --text-h2: clamp(26px, 1.2rem + 1vw, 36px);
    --text-h3: 20px;
    --text-body-lg: 19px;
    --text-body: 16px;
    --text-small: 14px;
    --text-micro: 13px;   /* меньше 13 px текста нет (брендбук) */
    --text-button: 16px;
    --text-metric: clamp(28px, 1.4rem + 2vw, 44px);

    --lh-display: 1.08;
    --lh-h1: 1.1;
    --lh-h2: 1.22;
    --lh-h3: 1.4;
    --lh-body: 1.55;
    --lh-small: 1.5;

    --tracking-display: -0.02em;
    --tracking-heading: -0.01em;
    --tracking-label: 0.08em;
    --tracking-word: 0.08em;   /* слово «EGO» набором, а не лок-апом */

    --measure: 68ch;

    /* ─── Отступы: шаг 4 (design.md §3.3) ────────────────────────────────── */
    --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;
    --space-20: 80px;
    --space-24: 96px;

    /* Поля страницы: телефон 16 → планшет 24 → ПК 32 (переопределяются ниже) */
    --page-padding: 16px;

    /* ─── Радиусы (design.md §5.1) ───────────────────────────────────────── */
    /* Брендбук: 6 — мелкие плашки и поля, 12 — кнопки, 20 — карточки и
       блоки. Крупнее 20 скруглений нет: xl и 2xl сведены к lg */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 20px;
    --radius-2xl: 20px;
    --radius-pill: 999px;

    /* ─── Размеры (design.md §9) ─────────────────────────────────────────── */
    --h-button-lg: 52px;
    --h-button: 44px;
    --h-button-sm: 36px;
    --h-input: 52px;
    --h-topbar: 64px;
    --h-topbar-mobile: 56px;
    --h-tabbar: 64px;
    --h-row: 44px;
    --size-checkbox: 22px;
    --avatar-profile: 96px;
    --avatar-chat: 28px;

    /* ─── Ширины (design.md §3.2) ────────────────────────────────────────── */
    --container: 1120px;
    --container-wide: 1360px;
    --reading: 820px;
    --form: 460px;
    --auth-card: 420px;
    --side-width: 260px;
    --rail-width: 76px;

    /* ─── Motion (design.md §8) ──────────────────────────────────────────── */
    --motion-fast: 120ms;
    --motion: 220ms;
    --motion-screen: 240ms;
    --motion-layer: 280ms;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ─── Bootstrap 5.3.3 (design.md §11) ────────────────────────────────── */
    /* Его компоненты — модалка, шторка, выпадающее меню — обязаны брать нашу
       палитру, а не свою. Подменяем переменные, а не пересобираем библиотеку */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-tertiary-bg: var(--fill);
    --bs-secondary-bg: var(--bg-subtle);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-primary: var(--violet);
    --bs-primary-rgb: 11, 11, 14;
    --bs-link-color: var(--violet-text);
    --bs-link-hover-color: var(--violet-hover);
    --bs-success: var(--success);
    --bs-danger: var(--danger);
    --bs-warning: var(--warning);
    --bs-info: var(--info);
    --bs-font-sans-serif: var(--font-family);
    --bs-font-monospace: var(--font-mono);
    --bs-body-font-size: var(--text-body);
    --bs-body-font-weight: 400;
    --bs-body-line-height: var(--lh-body);
    --bs-focus-ring-color: var(--violet);
}

/* Поля страницы по зонам (design.md §3.3). Держатся здесь, а не в модуле:
   от них зависит каждый экран, и расхождение видно сразу */
@media (min-width: 768px) {
    :root { --page-padding: 24px; }
}

@media (min-width: 1200px) {
    :root { --page-padding: 32px; }
}


/* ═══ ТЁМНАЯ ТЕМА (design-colors.md §5) ═══════════════════════════════════
   Меняются только цвета, тени и доля подложек. Раскладка, отступы, радиусы и
   типографика от темы не зависят — компонент, свёрстанный по токенам, живёт в
   обеих без единой правки (design-themes.md §2).

   Второй селектор — «тёмный остров»: блок тёмной палитры внутри светлой
   страницы. Отдельным набором цветов его делать нельзя, разойдётся с темой
   при первой же правке (design-themes.md §6). */

:root[data-theme="dark"],
.theme-dark {
    color-scheme: dark;

    /* Чернила: фон тёмной темы — основной темы бренда. Поверхности второго
       уровня — графит (брендбук, design-colors.md §5) */
    --bg: #0B0B0E;
    --bg-subtle: #111115;
    --surface: #17171B;
    --surface-raised: #1D1D22;
    --fill: #26262C;
    --fill-strong: #2E2E35;
    --text: #F4F3EF;
    --text-secondary: #C9C8C2;
    --text-muted: #A3A29D;
    --border: #2E2E35;
    --border-strong: #6A6A73;
    --overlay: rgba(0, 0, 0, 0.65);

    /* Действие в тёмной теме — сигнал, текст на нём — чернила */
    --violet: #D6FF3B;
    --on-violet: #0B0B0E;
    /* Ссылки в тёмной теме — цветом текста, а не сигналом: залитый акцент
       на экране один (кнопка), а ссылки отличаются весом и подчёркиванием */
    --violet-text: #F4F3EF;
    --fuchsia-text: #E45BF0;
    --cyan-text: #22D3EE;
    --lime-text: #D6FF3B;
    --coral-text: #FF8A7A;
    --amber-text: #FFB020;
    --success-text: #2EE6A0;
    --danger-text: #FF5C7A;

    --violet-hover: #C4EC2A;
    --danger-hover: #FF5C7A;

    --soft: 18%;

    --shadow-1: none;
    --shadow-2: 0 24px 64px -20px rgba(0, 0, 0, .8);
    --glow-primary: none;
    --bs-primary-rgb: 214, 255, 59;
    --gradient-brand: linear-gradient(var(--violet), var(--violet));
    --gradient-cool: linear-gradient(var(--violet), var(--violet));
    --gradient-warm: linear-gradient(var(--violet), var(--violet));
    --gradient-spectrum: linear-gradient(var(--violet), var(--violet));
    --gradient-spark: linear-gradient(var(--violet), var(--violet));
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);
}

/* Авто: решение отдано системе и срабатывает, только когда выбора не сделано */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;

        --bg: #0B0B0E;
        --bg-subtle: #111115;
        --surface: #17171B;
        --surface-raised: #1D1D22;
        --fill: #26262C;
        --fill-strong: #2E2E35;
        --text: #F4F3EF;
        --text-secondary: #C9C8C2;
        --text-muted: #A3A29D;
        --border: #2E2E35;
        --border-strong: #6A6A73;
        --overlay: rgba(0, 0, 0, 0.65);

/* Действие в тёмной теме — сигнал, текст на нём — чернила */
        --violet: #D6FF3B;
        --on-violet: #0B0B0E;
        /* Ссылки в тёмной теме — цветом текста, а не сигналом: залитый акцент
       на экране один (кнопка), а ссылки отличаются весом и подчёркиванием */
    --violet-text: #F4F3EF;
        --fuchsia-text: #E45BF0;
        --cyan-text: #22D3EE;
        --lime-text: #D6FF3B;
        --coral-text: #FF8A7A;
        --amber-text: #FFB020;
        --success-text: #2EE6A0;
        --danger-text: #FF5C7A;

        --violet-hover: #C4EC2A;
        --danger-hover: #FF5C7A;

        --soft: 18%;

        --shadow-1: none;
        --shadow-2: 0 24px 64px -20px rgba(0, 0, 0, .8);
        --glow-primary: none;
        --bs-primary-rgb: 214, 255, 59;
        --gradient-brand: linear-gradient(var(--violet), var(--violet));
        --gradient-cool: linear-gradient(var(--violet), var(--violet));
        --gradient-warm: linear-gradient(var(--violet), var(--violet));
        --gradient-spectrum: linear-gradient(var(--violet), var(--violet));
        --gradient-spark: linear-gradient(var(--violet), var(--violet));
        --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);
    }
}

/* Светлый остров внутри тёмной страницы. Нужен там, где содержимое светлое по
   природе и перекрасить его нельзя: картинка капчи рисуется сервером на светлом
   фоне (design-themes.md §5.5) */
.theme-light {
    color-scheme: light;

    --bg: #E9E7E1;
    --bg-subtle: #E3E1DA;
    --surface: #F4F3EF;
    --surface-raised: #F4F3EF;
    --fill: #DEDCD5;
    --fill-strong: #D3D0C8;
    --text: #0B0B0E;
    --text-secondary: #3E3D43;
    --text-muted: #545359;
    --border: #D3D0C8;
    --border-strong: #7E7C75;

    --violet: #0B0B0E;
    --on-violet: #F4F3EF;
    --violet-text: #0B0B0E;
    --fuchsia-text: #C026D3;
    --cyan-text: #0E7490;
    --lime-text: #0B0B0E;   /* сигнал текстом на светлом не бывает (Р-128) */
    --coral-text: #D6402A;
    --amber-text: #B45309;
    --success-text: #0B7E57;
    --danger-text: #C2103B;

    --violet-hover: #26262C;
    --soft: 12%;
    --bs-primary-rgb: 11, 11, 14;
    --gradient-brand: linear-gradient(var(--violet), var(--violet));
    --gradient-spectrum: linear-gradient(var(--violet), var(--violet));
}

/* Акценты разделов. Раньше каждый раздел красился своим цветом спектра; по
   брендбуку акцент один, поэтому классы оставлены (их ставят шаблоны), но
   все ведут к цвету действия (design-colors.md §7) */
.accent-violet, .accent-coral, .accent-cyan, .accent-amber, .accent-lime, .accent-spectrum {
    --accent: var(--violet); --accent-text: var(--violet-text);
    --accent-soft: var(--violet-soft); --accent-gradient: var(--gradient-brand);
}