/*
  themes.css — ЕДИНСТВЕННЫЙ файл, где цвету разрешено быть литералом (FE-02).

  УСТРОЙСТВО (три вида блоков):

  1) НЕЙТРАЛЬНАЯ БАЗА СХЕМЫ — `:root[data-scheme="light|dark"]`.
     Фон, поверхности, тексты, границы, статусы, скелет загрузки, навигация.
     Одинакова для всех палитр: палитра меняет акцент, а не читаемость.

  2) ПАЛИТРА — три блока на тему:
       :root[data-palette="имя"]                        — ХАРАКТЕР: только цвет и
                                                          форма тени (не раскладка);
       :root[data-palette="имя"][data-scheme="light"]   — брендовые цвета светлой;
       :root[data-palette="имя"][data-scheme="dark"]    — брендовые цвета тёмной.
     Специфичность (0,2,0) и (0,3,0) выше нейтрального блока (0,2,0), поэтому
     палитра переопределяет базу без `!important`; схемные блоки палитры идут
     ПОСЛЕ нейтральных, поэтому при равенстве специфичности побеждают они.

  3) СОВМЕСТИМОСТЬ — `:root` в конце: старые имена (`--c-text-primary`,
     `--c-text-block-bg`, `--c-card-stroke`, `--radius` …) ссылаются на новые.
     Блок нужен, пока страницы не перерисованы; после последней страницы удаляется.

  ШКАЛА ОДНА НА ВСЕ ТЕМЫ (решение владельца 20.10.2026, отменяет «тема меняет и
  плотность/типографику» из уточнения 19.10.2026). `--fs-*`, `--font-*`,
  `--radius-*`, `--space-*`, `--gutter`, `--card-pad`, `--gap` объявлены ОДИН раз
  в нейтральном слое токенов (`theme-tokens.css`) и палитрой НЕ переопределяются.

  ПОЧЕМУ. Держать типографику в палитрах значило «масштаб зависит от цвета»: green
  держал 15/19/21 px, purple — 14/18/20 px, graphite — 13/17/19 px, поэтому при
  смене темы карточки прыгали. Замер одной и той же страницы с переключением только
  `data-palette` (12 палитр, главная и профиль) до правки: `--fs-base` 13…15 px,
  `--radius-card` 12…28 px, `--space-4` 12…18 px, `--card-pad` 12…24 px, высота
  карточки уровня 158,73…164,73 px, карточки семьи 129,94…135,94 px. После правки —
  одна величина во всех палитрах. Палитра вправе менять цвет и тень или градиент
  (тень не занимает места в раскладке), но не размеры и не шрифт.

  КАК ДОБАВИТЬ ТЕМУ (FE-01, «темы — данные»):
    1. три блока по образцу любой палитры (характер + light + dark);
    2. строку в `theme-registry.js` — и всё: логика и настройки читают реестр.
  Тесты (`test_frontend_themes.py`) сверяют реестр ↔ CSS и не фиксируют «ровно 4».

  КОНТРАСТ. Тексты базовой схемы и подпись на акцентной кнопке каждой палитры
  проверяются опытом на ≥ 4.5:1 — поэтому значения здесь не «на глаз».
*/

/* ══════════════════════════════════════════════════════════════════════════
   ЧАСТЬ 1. НЕЙТРАЛЬНАЯ БАЗА — СВЕТЛАЯ СХЕМА
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-scheme="light"] {
    /* поверхности */
    --c-bg: #F6F4FA;
    --c-bg-elev: #FFFFFF;
    --c-surface: #F0EBF7;
    --c-surface-2: #E7DFF2;
    --c-surface-3: #DCD2EB;
    --c-scrim: rgba(24, 18, 38, 0.48);
    --c-overlay: rgba(24, 18, 38, 0.45);

    /* тексты */
    --c-text: #241C33;
    --c-text-2: #453B5C;
    --c-text-muted: #6B6280;
    --c-text-inverse: #FFFFFF;

    /* границы */
    --c-border: rgba(36, 28, 51, 0.14);
    --c-border-strong: rgba(36, 28, 51, 0.26);

    /* тень (сам цвет тени; значение тени задаёт палитра) */
    --c-shadow-color: rgba(24, 18, 38, 0.16);

    /* статусы */
    --c-danger: #B91C1C;
    --c-danger-bg: rgba(185, 28, 28, 0.10);
    --c-danger-border: rgba(185, 28, 28, 0.28);
    --c-text-danger: #991B1B;
    --c-success: #15803D;
    --c-success-bg: rgba(21, 128, 61, 0.10);
    --c-text-success: #166534;
    --c-warning: #B45309;
    --c-warning-bg: rgba(180, 83, 9, 0.12);
    --c-info-bg: rgba(3, 105, 161, 0.10);
    /* Смысловые цвета плиток «О участнике» (набросок `profile_widget_character.html`):
       синий — посещения, розовый — голоса. Иконка красится этим цветом, а подложка —
       его 15%-й примесью через `color-mix`; отдельных bg-токенов не заводим. */
    --c-info: #0369A1;
    --c-pink: #BE185D;

    /* знаки пола (иконки владельца GenderMale/Female.svg, 21.10.2026):
       цвет — смысл, а не украшение, поэтому он одинаков во всех палитрах, но
       разный в светлой и тёмной схеме: на светлом фоне нужен тёмный синий,
       на тёмном — светлый. Контраст к --c-surface проверен ≥ 4.5:1. */
    --c-gender-male: #1D4ED8;
    --c-gender-female: #BE185D;

    /* скелет загрузки */
    --c-skeleton: rgba(36, 28, 51, 0.08);
    --c-skeleton-shine: rgba(255, 255, 255, 0.60);

    /* навигация и служебное */
    --c-meta: #F6F4FA;
    --c-nav-bg: rgba(246, 244, 250, 0.92);
    --c-nav-border: rgba(36, 28, 51, 0.12);
    --c-nav-item: #6B6280;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЧАСТЬ 1. НЕЙТРАЛЬНАЯ БАЗА — ТЁМНАЯ СХЕМА
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-scheme="dark"] {
    /* поверхности */
    --c-bg: #0C0A12;
    --c-bg-elev: #141020;
    --c-surface: #171223;
    --c-surface-2: #1F1930;
    --c-surface-3: #2A2140;
    --c-scrim: rgba(0, 0, 0, 0.60);
    --c-overlay: rgba(0, 0, 0, 0.55);

    /* тексты */
    --c-text: #F2EEFA;
    --c-text-2: #C9C2DC;
    --c-text-muted: #8E86A6;
    --c-text-inverse: #14101C;

    /* границы */
    --c-border: rgba(242, 238, 250, 0.10);
    --c-border-strong: rgba(242, 238, 250, 0.22);

    /* тень */
    --c-shadow-color: rgba(0, 0, 0, 0.55);

    /* статусы */
    --c-danger: #FB7185;
    --c-danger-bg: rgba(251, 113, 133, 0.12);
    --c-danger-border: rgba(251, 113, 133, 0.32);
    --c-text-danger: #FDA4AF;
    --c-success: #4ADE80;
    --c-success-bg: rgba(74, 222, 128, 0.12);
    --c-text-success: #86EFAC;
    --c-warning: #FBBF24;
    --c-warning-bg: rgba(251, 191, 36, 0.12);
    --c-info-bg: rgba(56, 189, 248, 0.12);
    /* Те же смыслы в тёмной схеме: синий/розовый светлее, чтобы читались на
       поверхности карточки; подложка — примесь через `color-mix`. */
    --c-info: #38BDF8;
    --c-pink: #F472B6;

    /* знаки пола: те же смыслы, что и в светлой схеме, но светлее — на тёмной
       поверхности --c-surface нужен светлый синий/розовый (контраст ≥ 4.5:1). */
    --c-gender-male: #60A5FA;
    --c-gender-female: #F472B6;

    /* скелет загрузки */
    --c-skeleton: rgba(242, 238, 250, 0.08);
    --c-skeleton-shine: rgba(242, 238, 250, 0.16);

    /* навигация и служебное */
    --c-meta: #0C0A12;
    --c-nav-bg: rgba(12, 10, 18, 0.88);
    --c-nav-border: rgba(242, 238, 250, 0.08);
    --c-nav-item: #8E86A6;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЧАСТЬ 2. ПАЛИТРА «PURPLE» — тема по умолчанию (решение владельца).
   Настроение: ночное сообщество, фиолет + маджента + бирюза (референс).
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="purple"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 26px var(--c-shadow-color);
    --shadow-pop: 0 18px 44px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="purple"][data-scheme="light"] {
    --c-accent: #6D28D9;
    --c-accent-strong: #5B21B6;
    --c-accent-soft: rgba(109, 40, 217, 0.12);
    --c-text-accent: #5B21B6;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #7C3AED;
    --c-selection: rgba(109, 40, 217, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #6D28D9 0%, #7C3AED 50%, #0E7490 100%);
    --c-gradient-hero: linear-gradient(120deg, #7C3AED 0%, #A855F7 48%, #22D3EE 100%);
    --c-gradient-brand: linear-gradient(135deg, #6D28D9 0%, #0E7490 100%);
    --c-glow-accent: 0 0 24px rgba(109, 40, 217, 0.35);
    --c-nav-active-bg: rgba(109, 40, 217, 0.14);
    --c-nav-item-active: #5B21B6;
    --c-tip-bg: rgba(14, 116, 144, 0.10);
    --c-tip-border: rgba(14, 116, 144, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(109, 40, 217, 0.55) 0%, rgba(109, 40, 217, 0.06) 100%);
    --c-link: #5B21B6;
}

:root[data-palette="purple"][data-scheme="dark"] {
    --c-accent: #A78BFA;
    --c-accent-strong: #8B5CF6;
    --c-accent-soft: rgba(167, 139, 250, 0.16);
    --c-text-accent: #C4B5FD;
    --c-text-on-accent: #1B1030;
    --c-border-focus: #C4B5FD;
    --c-selection: rgba(167, 139, 250, 0.28);
    --c-gradient-cta: linear-gradient(90deg, #7C3AED 0%, #A855F7 50%, #22D3EE 100%);
    --c-gradient-hero: linear-gradient(120deg, #7C3AED 0%, #A855F7 45%, #22D3EE 100%);
    --c-gradient-brand: linear-gradient(135deg, #A78BFA 0%, #22D3EE 100%);
    --c-glow-accent: 0 0 28px rgba(167, 139, 250, 0.45);
    --c-nav-active-bg: rgba(167, 139, 250, 0.16);
    --c-nav-item-active: #C4B5FD;
    --c-tip-bg: rgba(45, 212, 191, 0.10);
    --c-tip-border: rgba(45, 212, 191, 0.30);
    --c-card-border-gradient: linear-gradient(160deg, rgba(167, 139, 250, 0.55) 0%, rgba(167, 139, 250, 0.06) 100%);
    --c-link: #C4B5FD;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «NEON» — кибер-ночь: маджента и циан, свечение.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="neon"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 8px 22px var(--c-shadow-color);
    --shadow-pop: 0 16px 38px var(--c-shadow-color);
    --shadow-nav: 0 -8px 22px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="neon"][data-scheme="light"] {
    --c-accent: #A21CAF;
    --c-accent-strong: #86198F;
    --c-accent-soft: rgba(162, 28, 175, 0.12);
    --c-text-accent: #86198F;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #D946EF;
    --c-selection: rgba(162, 28, 175, 0.22);
    --c-gradient-cta: linear-gradient(90deg, #DB2777 0%, #7C3AED 50%, #0891B2 100%);
    --c-gradient-hero: linear-gradient(120deg, #DB2777 0%, #7C3AED 50%, #06B6D4 100%);
    --c-gradient-brand: linear-gradient(135deg, #A21CAF 0%, #0891B2 100%);
    --c-glow-accent: 0 0 26px rgba(162, 28, 175, 0.38);
    --c-nav-active-bg: rgba(162, 28, 175, 0.14);
    --c-nav-item-active: #86198F;
    --c-tip-bg: rgba(8, 145, 178, 0.10);
    --c-tip-border: rgba(8, 145, 178, 0.30);
    --c-card-border-gradient: linear-gradient(160deg, rgba(162, 28, 175, 0.55) 0%, rgba(8, 145, 178, 0.18) 100%);
    --c-link: #86198F;
}

:root[data-palette="neon"][data-scheme="dark"] {
    --c-accent: #E879F9;
    --c-accent-strong: #D946EF;
    --c-accent-soft: rgba(232, 121, 249, 0.16);
    --c-text-accent: #F0ABFC;
    --c-text-on-accent: #2A0A2E;
    --c-border-focus: #F0ABFC;
    --c-selection: rgba(232, 121, 249, 0.30);
    --c-gradient-cta: linear-gradient(90deg, #FF2E93 0%, #B026FF 50%, #22D3EE 100%);
    --c-gradient-hero: linear-gradient(120deg, #FF2E93 0%, #B026FF 50%, #22D3EE 100%);
    --c-gradient-brand: linear-gradient(135deg, #E879F9 0%, #22D3EE 100%);
    --c-glow-accent: 0 0 32px rgba(232, 121, 249, 0.50);
    --c-nav-active-bg: rgba(232, 121, 249, 0.18);
    --c-nav-item-active: #F0ABFC;
    --c-tip-bg: rgba(34, 211, 238, 0.10);
    --c-tip-border: rgba(34, 211, 238, 0.32);
    --c-card-border-gradient: linear-gradient(160deg, rgba(232, 121, 249, 0.60) 0%, rgba(34, 211, 238, 0.20) 100%);
    --c-link: #F0ABFC;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «GREEN» — базовый зелёный legacy: лес и мягкая тень.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="green"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 28px var(--c-shadow-color);
    --shadow-pop: 0 18px 46px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="green"][data-scheme="light"] {
    --c-accent: #15803D;
    --c-accent-strong: #166534;
    --c-accent-soft: rgba(21, 128, 61, 0.12);
    --c-text-accent: #166534;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #22C55E;
    --c-selection: rgba(21, 128, 61, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #15803D 0%, #0E7490 100%);
    --c-gradient-hero: linear-gradient(120deg, #166534 0%, #15803D 55%, #65A30D 100%);
    --c-gradient-brand: linear-gradient(135deg, #15803D 0%, #0E7490 100%);
    --c-glow-accent: 0 0 22px rgba(21, 128, 61, 0.30);
    --c-nav-active-bg: rgba(21, 128, 61, 0.14);
    --c-nav-item-active: #166534;
    --c-tip-bg: rgba(101, 163, 13, 0.10);
    --c-tip-border: rgba(101, 163, 13, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(21, 128, 61, 0.50) 0%, rgba(21, 128, 61, 0.06) 100%);
    --c-link: #166534;
}

:root[data-palette="green"][data-scheme="dark"] {
    --c-accent: #4ADE80;
    --c-accent-strong: #22C55E;
    --c-accent-soft: rgba(74, 222, 128, 0.14);
    --c-text-accent: #86EFAC;
    --c-text-on-accent: #052E16;
    --c-border-focus: #86EFAC;
    --c-selection: rgba(74, 222, 128, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #15803D 0%, #0F766E 100%);
    --c-gradient-hero: linear-gradient(120deg, #166534 0%, #15803D 55%, #65A30D 100%);
    --c-gradient-brand: linear-gradient(135deg, #4ADE80 0%, #2DD4BF 100%);
    --c-glow-accent: 0 0 26px rgba(74, 222, 128, 0.40);
    --c-nav-active-bg: rgba(74, 222, 128, 0.16);
    --c-nav-item-active: #86EFAC;
    --c-tip-bg: rgba(45, 212, 191, 0.10);
    --c-tip-border: rgba(45, 212, 191, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(74, 222, 128, 0.50) 0%, rgba(45, 212, 191, 0.16) 100%);
    --c-link: #86EFAC;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «ORANGE» — базовый оранжевый legacy: закат, тепло, мягкая тень.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="orange"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 26px var(--c-shadow-color);
    --shadow-pop: 0 18px 44px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="orange"][data-scheme="light"] {
    --c-accent: #B45309;
    --c-accent-strong: #92400E;
    --c-accent-soft: rgba(180, 83, 9, 0.12);
    --c-text-accent: #92400E;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #F59E0B;
    --c-selection: rgba(180, 83, 9, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #DC2626 0%, #EA580C 55%, #D97706 100%);
    --c-gradient-hero: linear-gradient(120deg, #DC2626 0%, #F97316 55%, #F59E0B 100%);
    --c-gradient-brand: linear-gradient(135deg, #B45309 0%, #DC2626 100%);
    --c-glow-accent: 0 0 22px rgba(180, 83, 9, 0.30);
    --c-nav-active-bg: rgba(180, 83, 9, 0.14);
    --c-nav-item-active: #92400E;
    --c-tip-bg: rgba(217, 119, 6, 0.10);
    --c-tip-border: rgba(217, 119, 6, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(180, 83, 9, 0.50) 0%, rgba(180, 83, 9, 0.06) 100%);
    --c-link: #92400E;
}

:root[data-palette="orange"][data-scheme="dark"] {
    --c-accent: #FB923C;
    --c-accent-strong: #F97316;
    --c-accent-soft: rgba(251, 146, 60, 0.15);
    --c-text-accent: #FDBA74;
    --c-text-on-accent: #2A1204;
    --c-border-focus: #FDBA74;
    --c-selection: rgba(251, 146, 60, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #DC2626 0%, #EA580C 55%, #D97706 100%);
    --c-gradient-hero: linear-gradient(120deg, #DC2626 0%, #F97316 55%, #F59E0B 100%);
    --c-gradient-brand: linear-gradient(135deg, #FB923C 0%, #EF4444 100%);
    --c-glow-accent: 0 0 26px rgba(251, 146, 60, 0.42);
    --c-nav-active-bg: rgba(251, 146, 60, 0.16);
    --c-nav-item-active: #FDBA74;
    --c-tip-bg: rgba(251, 191, 36, 0.10);
    --c-tip-border: rgba(251, 191, 36, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(251, 146, 60, 0.50) 0%, rgba(239, 68, 68, 0.16) 100%);
    --c-link: #FDBA74;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «RED» — базовый красный legacy: пламя, контраст, акцентная тень.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="red"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 24px var(--c-shadow-color);
    --shadow-pop: 0 18px 40px var(--c-shadow-color);
    --shadow-nav: 0 -8px 22px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="red"][data-scheme="light"] {
    --c-accent: #BE123C;
    --c-accent-strong: #9F1239;
    --c-accent-soft: rgba(190, 18, 60, 0.12);
    --c-text-accent: #9F1239;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #F43F5E;
    --c-selection: rgba(190, 18, 60, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #9F1239 0%, #BE123C 55%, #7C2D12 100%);
    --c-gradient-hero: linear-gradient(120deg, #9F1239 0%, #BE123C 55%, #EA580C 100%);
    --c-gradient-brand: linear-gradient(135deg, #BE123C 0%, #7C2D12 100%);
    --c-glow-accent: 0 0 24px rgba(190, 18, 60, 0.34);
    --c-nav-active-bg: rgba(190, 18, 60, 0.14);
    --c-nav-item-active: #9F1239;
    --c-tip-bg: rgba(234, 88, 12, 0.10);
    --c-tip-border: rgba(234, 88, 12, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(190, 18, 60, 0.50) 0%, rgba(190, 18, 60, 0.06) 100%);
    --c-link: #9F1239;
}

:root[data-palette="red"][data-scheme="dark"] {
    --c-accent: #FB7185;
    --c-accent-strong: #F43F5E;
    --c-accent-soft: rgba(251, 113, 133, 0.15);
    --c-text-accent: #FDA4AF;
    --c-text-on-accent: #2B0710;
    --c-border-focus: #FDA4AF;
    --c-selection: rgba(251, 113, 133, 0.28);
    --c-gradient-cta: linear-gradient(90deg, #9F1239 0%, #BE123C 55%, #7C2D12 100%);
    --c-gradient-hero: linear-gradient(120deg, #9F1239 0%, #BE123C 55%, #EA580C 100%);
    --c-gradient-brand: linear-gradient(135deg, #FB7185 0%, #F97316 100%);
    --c-glow-accent: 0 0 28px rgba(251, 113, 133, 0.45);
    --c-nav-active-bg: rgba(251, 113, 133, 0.16);
    --c-nav-item-active: #FDA4AF;
    --c-tip-bg: rgba(251, 146, 60, 0.10);
    --c-tip-border: rgba(251, 146, 60, 0.30);
    --c-card-border-gradient: linear-gradient(160deg, rgba(251, 113, 133, 0.50) 0%, rgba(249, 115, 22, 0.18) 100%);
    --c-link: #FDA4AF;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «OCEAN» — глубина: синий и бирюза, стеклянные поверхности.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="ocean"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 12px 30px var(--c-shadow-color);
    --shadow-pop: 0 20px 48px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="ocean"][data-scheme="light"] {
    --c-accent: #0369A1;
    --c-accent-strong: #075985;
    --c-accent-soft: rgba(3, 105, 161, 0.12);
    --c-text-accent: #075985;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #0EA5E9;
    --c-selection: rgba(3, 105, 161, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #0369A1 0%, #0891B2 60%, #4F46E5 100%);
    --c-gradient-hero: linear-gradient(120deg, #075985 0%, #0369A1 45%, #22D3EE 100%);
    --c-gradient-brand: linear-gradient(135deg, #0369A1 0%, #4F46E5 100%);
    --c-glow-accent: 0 0 22px rgba(3, 105, 161, 0.30);
    --c-nav-active-bg: rgba(3, 105, 161, 0.14);
    --c-nav-item-active: #075985;
    --c-tip-bg: rgba(79, 70, 229, 0.10);
    --c-tip-border: rgba(79, 70, 229, 0.26);
    --c-card-border-gradient: linear-gradient(160deg, rgba(3, 105, 161, 0.50) 0%, rgba(79, 70, 229, 0.14) 100%);
    --c-link: #075985;
}

:root[data-palette="ocean"][data-scheme="dark"] {
    --c-accent: #38BDF8;
    --c-accent-strong: #0EA5E9;
    --c-accent-soft: rgba(56, 189, 248, 0.14);
    --c-text-accent: #7DD3FC;
    --c-text-on-accent: #04202E;
    --c-border-focus: #7DD3FC;
    --c-selection: rgba(56, 189, 248, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #0369A1 0%, #0891B2 60%, #4F46E5 100%);
    --c-gradient-hero: linear-gradient(120deg, #075985 0%, #0369A1 45%, #22D3EE 100%);
    --c-gradient-brand: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%);
    --c-glow-accent: 0 0 28px rgba(56, 189, 248, 0.42);
    --c-nav-active-bg: rgba(56, 189, 248, 0.16);
    --c-nav-item-active: #7DD3FC;
    --c-tip-bg: rgba(129, 140, 248, 0.10);
    --c-tip-border: rgba(129, 140, 248, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(56, 189, 248, 0.50) 0%, rgba(129, 140, 248, 0.18) 100%);
    --c-link: #7DD3FC;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «MINT» — свежесть: мята и бирюза.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="mint"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 26px var(--c-shadow-color);
    --shadow-pop: 0 18px 44px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="mint"][data-scheme="light"] {
    --c-accent: #0F766E;
    --c-accent-strong: #115E59;
    --c-accent-soft: rgba(15, 118, 110, 0.12);
    --c-text-accent: #115E59;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #14B8A6;
    --c-selection: rgba(15, 118, 110, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #0F766E 0%, #0891B2 55%, #65A30D 100%);
    --c-gradient-hero: linear-gradient(120deg, #115E59 0%, #0F766E 45%, #34D399 100%);
    --c-gradient-brand: linear-gradient(135deg, #0F766E 0%, #0891B2 100%);
    --c-glow-accent: 0 0 22px rgba(15, 118, 110, 0.30);
    --c-nav-active-bg: rgba(15, 118, 110, 0.14);
    --c-nav-item-active: #115E59;
    --c-tip-bg: rgba(101, 163, 13, 0.10);
    --c-tip-border: rgba(101, 163, 13, 0.26);
    --c-card-border-gradient: linear-gradient(160deg, rgba(15, 118, 110, 0.50) 0%, rgba(8, 145, 178, 0.14) 100%);
    --c-link: #115E59;
}

:root[data-palette="mint"][data-scheme="dark"] {
    --c-accent: #2DD4BF;
    --c-accent-strong: #14B8A6;
    --c-accent-soft: rgba(45, 212, 191, 0.14);
    --c-text-accent: #5EEAD4;
    --c-text-on-accent: #052420;
    --c-border-focus: #5EEAD4;
    --c-selection: rgba(45, 212, 191, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #0F766E 0%, #0891B2 55%, #65A30D 100%);
    --c-gradient-hero: linear-gradient(120deg, #115E59 0%, #0F766E 45%, #34D399 100%);
    --c-gradient-brand: linear-gradient(135deg, #2DD4BF 0%, #A3E635 100%);
    --c-glow-accent: 0 0 28px rgba(45, 212, 191, 0.42);
    --c-nav-active-bg: rgba(45, 212, 191, 0.16);
    --c-nav-item-active: #5EEAD4;
    --c-tip-bg: rgba(163, 230, 53, 0.10);
    --c-tip-border: rgba(163, 230, 53, 0.26);
    --c-card-border-gradient: linear-gradient(160deg, rgba(45, 212, 191, 0.50) 0%, rgba(163, 230, 53, 0.16) 100%);
    --c-link: #5EEAD4;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «ROSE» — пудровая нежность: роза и сирень, мягкие тени.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="rose"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 12px 30px var(--c-shadow-color);
    --shadow-pop: 0 20px 48px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="rose"][data-scheme="light"] {
    --c-accent: #BE185D;
    --c-accent-strong: #9D174D;
    --c-accent-soft: rgba(190, 24, 93, 0.12);
    --c-text-accent: #9D174D;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #F472B6;
    --c-selection: rgba(190, 24, 93, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #BE185D 0%, #DB2777 55%, #9333EA 100%);
    --c-gradient-hero: linear-gradient(120deg, #9D174D 0%, #BE185D 45%, #F9A8D4 100%);
    --c-gradient-brand: linear-gradient(135deg, #BE185D 0%, #9333EA 100%);
    --c-glow-accent: 0 0 24px rgba(190, 24, 93, 0.32);
    --c-nav-active-bg: rgba(190, 24, 93, 0.14);
    --c-nav-item-active: #9D174D;
    --c-tip-bg: rgba(147, 51, 234, 0.10);
    --c-tip-border: rgba(147, 51, 234, 0.26);
    --c-card-border-gradient: linear-gradient(160deg, rgba(190, 24, 93, 0.50) 0%, rgba(147, 51, 234, 0.14) 100%);
    --c-link: #9D174D;
}

:root[data-palette="rose"][data-scheme="dark"] {
    --c-accent: #F9A8D4;
    --c-accent-strong: #F472B6;
    --c-accent-soft: rgba(249, 168, 212, 0.16);
    --c-text-accent: #FBCFE8;
    --c-text-on-accent: #2B0B1B;
    --c-border-focus: #FBCFE8;
    --c-selection: rgba(249, 168, 212, 0.28);
    --c-gradient-cta: linear-gradient(90deg, #BE185D 0%, #DB2777 55%, #9333EA 100%);
    --c-gradient-hero: linear-gradient(120deg, #9D174D 0%, #BE185D 45%, #F9A8D4 100%);
    --c-gradient-brand: linear-gradient(135deg, #F9A8D4 0%, #C084FC 100%);
    --c-glow-accent: 0 0 28px rgba(249, 168, 212, 0.45);
    --c-nav-active-bg: rgba(249, 168, 212, 0.18);
    --c-nav-item-active: #FBCFE8;
    --c-tip-bg: rgba(192, 132, 252, 0.10);
    --c-tip-border: rgba(192, 132, 252, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(249, 168, 212, 0.50) 0%, rgba(192, 132, 252, 0.18) 100%);
    --c-link: #FBCFE8;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «AMBER» — ламповое тепло: янтарь, песок, золото.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="amber"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 26px var(--c-shadow-color);
    --shadow-pop: 0 18px 44px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="amber"][data-scheme="light"] {
    --c-accent: #92400E;
    --c-accent-strong: #78350F;
    --c-accent-soft: rgba(146, 64, 14, 0.12);
    --c-text-accent: #78350F;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #F59E0B;
    --c-selection: rgba(146, 64, 14, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #92400E 0%, #D97706 55%, #CA8A04 100%);
    --c-gradient-hero: linear-gradient(120deg, #78350F 0%, #B45309 50%, #F59E0B 100%);
    --c-gradient-brand: linear-gradient(135deg, #92400E 0%, #CA8A04 100%);
    --c-glow-accent: 0 0 24px rgba(146, 64, 14, 0.30);
    --c-nav-active-bg: rgba(146, 64, 14, 0.14);
    --c-nav-item-active: #78350F;
    --c-tip-bg: rgba(202, 138, 4, 0.10);
    --c-tip-border: rgba(202, 138, 4, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(146, 64, 14, 0.50) 0%, rgba(202, 138, 4, 0.14) 100%);
    --c-link: #78350F;
}

:root[data-palette="amber"][data-scheme="dark"] {
    --c-accent: #FCD34D;
    --c-accent-strong: #FBBF24;
    --c-accent-soft: rgba(252, 211, 77, 0.14);
    --c-text-accent: #FDE68A;
    --c-text-on-accent: #2A1D02;
    --c-border-focus: #FDE68A;
    --c-selection: rgba(252, 211, 77, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #92400E 0%, #D97706 55%, #CA8A04 100%);
    --c-gradient-hero: linear-gradient(120deg, #78350F 0%, #B45309 50%, #F59E0B 100%);
    --c-gradient-brand: linear-gradient(135deg, #FCD34D 0%, #FB923C 100%);
    --c-glow-accent: 0 0 28px rgba(252, 211, 77, 0.40);
    --c-nav-active-bg: rgba(252, 211, 77, 0.16);
    --c-nav-item-active: #FDE68A;
    --c-tip-bg: rgba(251, 146, 60, 0.10);
    --c-tip-border: rgba(251, 146, 60, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(252, 211, 77, 0.50) 0%, rgba(251, 146, 60, 0.16) 100%);
    --c-link: #FDE68A;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «GRAPHITE» — монохром: плоские тени без свечения.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="graphite"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 1px 2px var(--c-shadow-color);
    --shadow-pop: 0 6px 16px var(--c-shadow-color);
    --shadow-nav: 0 -4px 12px var(--c-shadow-color);
    --shadow-glow: 0 0 0 transparent;
    --shadow-focus: 0 0 0 2px var(--c-border-focus);
}

:root[data-palette="graphite"][data-scheme="light"] {
    --c-accent: #3F3F46;
    --c-accent-strong: #27272A;
    --c-accent-soft: rgba(63, 63, 70, 0.10);
    --c-text-accent: #27272A;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #71717A;
    --c-selection: rgba(63, 63, 70, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #27272A 0%, #3F3F46 60%, #52525B 100%);
    --c-gradient-hero: linear-gradient(120deg, #18181B 0%, #27272A 55%, #52525B 100%);
    --c-gradient-brand: linear-gradient(135deg, #27272A 0%, #52525B 100%);
    --c-glow-accent: 0 0 0 transparent;
    --c-nav-active-bg: rgba(63, 63, 70, 0.12);
    --c-nav-item-active: #27272A;
    --c-tip-bg: rgba(63, 63, 70, 0.08);
    --c-tip-border: rgba(63, 63, 70, 0.24);
    --c-card-border-gradient: linear-gradient(160deg, rgba(63, 63, 70, 0.45) 0%, rgba(63, 63, 70, 0.06) 100%);
    --c-link: #27272A;
}

:root[data-palette="graphite"][data-scheme="dark"] {
    --c-accent: #D4D4D8;
    --c-accent-strong: #A1A1AA;
    --c-accent-soft: rgba(212, 212, 216, 0.14);
    --c-text-accent: #E4E4E7;
    --c-text-on-accent: #17171B;
    --c-border-focus: #E4E4E7;
    --c-selection: rgba(212, 212, 216, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #27272A 0%, #3F3F46 60%, #52525B 100%);
    --c-gradient-hero: linear-gradient(120deg, #18181B 0%, #27272A 55%, #52525B 100%);
    --c-gradient-brand: linear-gradient(135deg, #D4D4D8 0%, #A1A1AA 100%);
    --c-glow-accent: 0 0 0 transparent;
    --c-nav-active-bg: rgba(212, 212, 216, 0.14);
    --c-nav-item-active: #E4E4E7;
    --c-tip-bg: rgba(212, 212, 216, 0.06);
    --c-tip-border: rgba(212, 212, 216, 0.20);
    --c-card-border-gradient: linear-gradient(160deg, rgba(212, 212, 216, 0.40) 0%, rgba(212, 212, 216, 0.06) 100%);
    --c-link: #E4E4E7;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «DUSK» — сумерки: приглушённая сирень, тишина, мягкая тень.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="dusk"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 10px 26px var(--c-shadow-color);
    --shadow-pop: 0 18px 44px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="dusk"][data-scheme="light"] {
    --c-accent: #5B4B8A;
    --c-accent-strong: #4C3F73;
    --c-accent-soft: rgba(91, 75, 138, 0.12);
    --c-text-accent: #4C3F73;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #8B7BB8;
    --c-selection: rgba(91, 75, 138, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #4C3F73 0%, #5B4B8A 55%, #7C6BA8 100%);
    --c-gradient-hero: linear-gradient(120deg, #3F3560 0%, #5B4B8A 50%, #8B7BB8 100%);
    --c-gradient-brand: linear-gradient(135deg, #5B4B8A 0%, #8B7BB8 100%);
    --c-glow-accent: 0 0 22px rgba(91, 75, 138, 0.30);
    --c-nav-active-bg: rgba(91, 75, 138, 0.14);
    --c-nav-item-active: #4C3F73;
    --c-tip-bg: rgba(124, 107, 168, 0.10);
    --c-tip-border: rgba(124, 107, 168, 0.26);
    --c-card-border-gradient: linear-gradient(160deg, rgba(91, 75, 138, 0.50) 0%, rgba(124, 107, 168, 0.14) 100%);
    --c-link: #4C3F73;
}

:root[data-palette="dusk"][data-scheme="dark"] {
    --c-accent: #C4B5FD;
    --c-accent-strong: #A78BFA;
    --c-accent-soft: rgba(196, 181, 253, 0.14);
    --c-text-accent: #DDD6FE;
    --c-text-on-accent: #1C1630;
    --c-border-focus: #DDD6FE;
    --c-selection: rgba(196, 181, 253, 0.26);
    --c-gradient-cta: linear-gradient(90deg, #4C3F73 0%, #5B4B8A 55%, #7C6BA8 100%);
    --c-gradient-hero: linear-gradient(120deg, #3F3560 0%, #5B4B8A 50%, #8B7BB8 100%);
    --c-gradient-brand: linear-gradient(135deg, #C4B5FD 0%, #A5B4FC 100%);
    --c-glow-accent: 0 0 28px rgba(196, 181, 253, 0.42);
    --c-nav-active-bg: rgba(196, 181, 253, 0.16);
    --c-nav-item-active: #DDD6FE;
    --c-tip-bg: rgba(165, 180, 252, 0.10);
    --c-tip-border: rgba(165, 180, 252, 0.26);
    --c-card-border-gradient: linear-gradient(160deg, rgba(196, 181, 253, 0.50) 0%, rgba(165, 180, 252, 0.18) 100%);
    --c-link: #DDD6FE;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАЛИТРА «CANDY» — карамель: пастель и мягкие тени.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-palette="candy"] {
    /* характер: только цвет и форма тени — шкала (размеры, отступы,
       типографика) у всех тем одна: она объявлена в `theme-tokens.css` */
    --shadow-card: 0 12px 28px var(--c-shadow-color);
    --shadow-pop: 0 20px 46px var(--c-shadow-color);
    --shadow-nav: 0 -8px 24px var(--c-shadow-color);
    --shadow-glow: var(--c-glow-accent);
    --shadow-focus: 0 0 0 3px var(--c-border-focus);
}

:root[data-palette="candy"][data-scheme="light"] {
    --c-accent: #C2185B;
    --c-accent-strong: #9D174D;
    --c-accent-soft: rgba(194, 24, 91, 0.12);
    --c-text-accent: #9D174D;
    --c-text-on-accent: #FFFFFF;
    --c-border-focus: #F472B6;
    --c-selection: rgba(194, 24, 91, 0.20);
    --c-gradient-cta: linear-gradient(90deg, #DB2777 0%, #A855F7 55%, #38BDF8 100%);
    --c-gradient-hero: linear-gradient(120deg, #F472B6 0%, #A855F7 55%, #38BDF8 100%);
    --c-gradient-brand: linear-gradient(135deg, #C2185B 0%, #38BDF8 100%);
    --c-glow-accent: 0 0 26px rgba(194, 24, 91, 0.30);
    --c-nav-active-bg: rgba(194, 24, 91, 0.14);
    --c-nav-item-active: #9D174D;
    --c-tip-bg: rgba(56, 189, 248, 0.10);
    --c-tip-border: rgba(56, 189, 248, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(194, 24, 91, 0.50) 0%, rgba(56, 189, 248, 0.16) 100%);
    --c-link: #9D174D;
}

:root[data-palette="candy"][data-scheme="dark"] {
    --c-accent: #F0ABFC;
    --c-accent-strong: #E879F9;
    --c-accent-soft: rgba(240, 171, 252, 0.16);
    --c-text-accent: #F5D0FE;
    --c-text-on-accent: #2A0A2E;
    --c-border-focus: #F5D0FE;
    --c-selection: rgba(240, 171, 252, 0.28);
    --c-gradient-cta: linear-gradient(90deg, #DB2777 0%, #A855F7 55%, #38BDF8 100%);
    --c-gradient-hero: linear-gradient(120deg, #F472B6 0%, #A855F7 55%, #38BDF8 100%);
    --c-gradient-brand: linear-gradient(135deg, #F0ABFC 0%, #7DD3FC 100%);
    --c-glow-accent: 0 0 30px rgba(240, 171, 252, 0.46);
    --c-nav-active-bg: rgba(240, 171, 252, 0.18);
    --c-nav-item-active: #F5D0FE;
    --c-tip-bg: rgba(125, 211, 252, 0.10);
    --c-tip-border: rgba(125, 211, 252, 0.28);
    --c-card-border-gradient: linear-gradient(160deg, rgba(240, 171, 252, 0.50) 0%, rgba(125, 211, 252, 0.18) 100%);
    --c-link: #F5D0FE;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЧАСТЬ 3. СОВМЕСТИМОСТЬ со старыми именами (пока страницы не перерисованы).
   Значения — ссылки на новые токены, поэтому тема/схема подставляются сами.
   Когда последняя страница перейдёт на новые имена, блок удаляется.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --c-text-primary: var(--c-text);
    --c-text-secondary: var(--c-text-2);
    --c-text-block-bg: var(--c-surface);
    --c-text-button: var(--c-text-inverse);
    --c-text-special: var(--c-danger);
    --c-special-border-color: var(--c-border-strong);
    --c-card-stroke: var(--c-border);
    --c-bg-gradient: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-elev) 100%);
    /* Надпись на насыщенном градиенте (герой/CTA): белая в обеих схемах —
       градиент сам по себе тёмный по краям и яркий в середине. */
    --c-text-on-gradient: #FFFFFF;
    --radius: var(--radius-card);
}

/* ══════════════════════════════════════════════════════════════════════════
   КРУЖКИ ВЫБОРА ПАЛИТРЫ (набросок `new/wiget_colors_example.html`, 21.10.2026)
   Каждый кружок показывает СВОЙ брендовый градиент, хотя все они живут в одном
   root и `var(--c-gradient-brand)` текущей темы сюда не достанется. Значения —
   тёмные варианты соответствующих палитр (они ярче и читаются на обеих схемах).
   ЭТО ЕДИНСТВЕННОЕ место, где цвет палитры назван повторно; при смене палитры
   обновите и её кружок.
   ══════════════════════════════════════════════════════════════════════════ */

.palette-swatch[data-palette="purple"] {
    background: linear-gradient(135deg, #A78BFA 0%, #22D3EE 100%);
}

.palette-swatch[data-palette="neon"] {
    background: linear-gradient(135deg, #E879F9 0%, #22D3EE 100%);
}

.palette-swatch[data-palette="green"] {
    background: linear-gradient(135deg, #4ADE80 0%, #2DD4BF 100%);
}

.palette-swatch[data-palette="orange"] {
    background: linear-gradient(135deg, #FB923C 0%, #EF4444 100%);
}

.palette-swatch[data-palette="red"] {
    background: linear-gradient(135deg, #FB7185 0%, #F97316 100%);
}

.palette-swatch[data-palette="ocean"] {
    background: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%);
}

.palette-swatch[data-palette="mint"] {
    background: linear-gradient(135deg, #2DD4BF 0%, #A3E635 100%);
}

.palette-swatch[data-palette="rose"] {
    background: linear-gradient(135deg, #F9A8D4 0%, #C084FC 100%);
}

.palette-swatch[data-palette="amber"] {
    background: linear-gradient(135deg, #FCD34D 0%, #FB923C 100%);
}

.palette-swatch[data-palette="graphite"] {
    background: linear-gradient(135deg, #D4D4D8 0%, #A1A1AA 100%);
}

.palette-swatch[data-palette="dusk"] {
    background: linear-gradient(135deg, #C4B5FD 0%, #A5B4FC 100%);
}

.palette-swatch[data-palette="candy"] {
    background: linear-gradient(135deg, #F0ABFC 0%, #7DD3FC 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   АНИМИРОВАННЫЕ РАМКИ АВАТАРА (t220)
   Цвета наборов — данные, а не литералы страниц: app.css берёт их отсюда,
   поэтому рамка одинакова у всех зрителей и не зависит от палитры.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --c-tab-active-text: #FFFFFF;
    --c-frame-amethyst: #8b5cf6, #fbbf24, #8b5cf6;
    --c-frame-ocean: #0ea5e9, #f97316, #0ea5e9;
    --c-frame-acid: #22c55e, #d946ef, #22c55e;
    --c-frame-ice: #06b6d4, #ef4444, #06b6d4;
    --c-frame-space: #1e3a8a, #ec4899, #1e3a8a;
    --c-frame-prism: #ef4444, #eab308, #3b82f6, #ef4444;
    /* t100: премиальные рамки Trime — те же имена, что у домена. */
    --c-frame-silver: #e2e8f0, #94a3b8, #e2e8f0;
    --c-frame-gold: #fde68a, #d97706, #fde68a;
    --c-frame-emerald: #6ee7b7, #047857, #6ee7b7;
    --c-frame-glow: #a78bfa, #f0abfc, #67e8f9, #a78bfa;
    /* t113: шесть платных рамок — цвета из макета widget_color_circle_animate. */
    --c-frame-aurora: #a855f7, #fbbf24, #a855f7;
    --c-frame-ember: #3b82f6, #f97316, #3b82f6;
    --c-frame-bloom: #22c55e, #d946ef, #22c55e;
    --c-frame-frost: #06b6d4, #ef4444, #06b6d4;
    --c-frame-midnight: #1e3a8a, #ec4899, #1e3a8a;
    --c-frame-rainbow: #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000;
}

/* ==========================================================================
   ПАЛИТРА ПОТОКА «ОНБОРДИНГ + АНКЕТА» (макет new/new_anketa).

   Это ЕДИНСТВЕННОЕ место, где у этих цветов есть литералы (FE-02). Поток
   фиксированно сумеречный и не следует палитре приложения, поэтому токены
   объявлены на корне фрагмента `.anketa`, а не в блоках схем. Раскладка и
   анимации живут в static/css/anketa.css.
   ========================================================================== */

.anketa,
body.page-form {

  --anc-bg-0: #251C4A;
  --anc-bg-1: #1A1533;
  --anc-bg-2: #141026;
  --anc-ink: #FFF;
  --anc-ink-soft: rgba(238, 235, 255, 0.84);
  --anc-ink-dim: rgba(214, 208, 250, 0.55);
  --anc-star: #EDE7FF;
  --anc-star-85: rgba(237, 231, 255, 0.85);
  --anc-autofill-bg: #2A2153;
  --anc-violet: #8B5CF6;
  --anc-violet-soft: #A78BFA;
  --anc-lilac: #C4B5FD;
  --anc-pink: #FF8FB8;
  --anc-brand-violet: #8F62FF;
  --anc-brand-purple: #A855F7;
  --anc-brand-pink: #E05FB4;
  --anc-violet-deep: #6D4FD8;
  --anc-pink-soft: #FFB3CE;
  --anc-glass: rgba(255, 255, 255, 0.055);
  --anc-glass-line: rgba(255, 255, 255, 0.10);
  --anc-white-03: rgba(255, 255, 255, 0.03);
  --anc-white-06: rgba(255, 255, 255, 0.06);
  --anc-white-09: rgba(255, 255, 255, 0.09);
  --anc-white-12: rgba(255, 255, 255, 0.12);
  --anc-white-13: rgba(255, 255, 255, 0.13);
  --anc-white-20: rgba(255, 255, 255, 0.20);
  --anc-white-28: rgba(255, 255, 255, 0.28);
  --anc-white-35: rgba(255, 255, 255, 0.35);
  --anc-violet-10: rgba(167, 139, 250, 0.10);
  --anc-violet-12: rgba(167, 139, 250, 0.12);
  --anc-violet-15: rgba(167, 139, 250, 0.15);
  --anc-violet-22: rgba(167, 139, 250, 0.22);
  --anc-violet-28: rgba(167, 139, 250, 0.28);
  --anc-violet-45: rgba(167, 139, 250, 0.45);
  --anc-violet-70: rgba(167, 139, 250, 0.7);
  --anc-violet-75: rgba(167, 139, 250, 0.75);
  --anc-violet-85: rgba(167, 139, 250, 0.85);
  --anc-primary-16: rgba(139, 92, 246, 0.16);
  --anc-primary-18: rgba(139, 92, 246, 0.18);
  --anc-primary-22: rgba(139, 92, 246, 0.22);
  --anc-primary-24: rgba(139, 92, 246, 0.24);
  --anc-primary-35: rgba(139, 92, 246, 0.35);
  --anc-primary-45: rgba(139, 92, 246, 0.45);
  --anc-primary-50: rgba(139, 92, 246, 0.5);
  --anc-primary-55: rgba(139, 92, 246, 0.55);
  --anc-primary-60: rgba(139, 92, 246, 0.6);
  --anc-primary-65: rgba(139, 92, 246, 0.65);
  --anc-lilac-42: rgba(196, 181, 253, 0.42);
  --anc-lilac-55: rgba(196, 181, 253, 0.55);
  --anc-lilac-75: rgba(196, 181, 253, 0.75);
  --anc-lilac-85: rgba(196, 181, 253, 0.85);
  --anc-pink-12: rgba(255, 143, 184, 0.12);
  --anc-pink-13: rgba(255, 143, 184, 0.13);
  --anc-pink-15: rgba(255, 143, 184, 0.15);
  --anc-halo-38: rgba(150, 100, 255, 0.38);
  --anc-halo-60: rgba(168, 95, 246, 0.6);
  --anc-halo-70: rgba(160, 95, 250, 0.7);
  --anc-halo-50: rgba(150, 90, 246, 0.5);
  --anc-halo-55: rgba(150, 90, 246, 0.55);
  --anc-halo-85: rgba(200, 130, 255, 0.85);
  --anc-twilight-20: rgba(124, 92, 224, 0.20);
  --anc-veil-0: rgba(20, 16, 38, 0);
  --anc-veil-60: rgba(20, 16, 38, 0.6);
  --anc-veil-96: rgba(20, 16, 38, 0.96);
  --anc-shadow-35: rgba(0, 0, 0, 0.35);
  --anc-shadow-40: rgba(0, 0, 0, 0.4);
  --anc-shadow-55: rgba(0, 0, 0, 0.55);
  --anc-shadow-60: rgba(0, 0, 0, 0.6);
  --anc-toast-bg: rgba(36, 28, 68, 0.94);
  --anc-menu-bg: rgba(38, 29, 72, 0.97);
  --anc-shadow-btn: 0 10px 30px -6px rgba(150, 90, 246, 0.55);
  --anc-danger: rgba(255, 122, 138, 0.8);
  --anc-danger-soft: rgba(255, 122, 138, 0.16);
  --anc-danger-ink: #FFB3BE;
  --anc-nova-1: #A583FF;
  --anc-nova-2: #8250F0;
  --anc-nova-3: #5C36C4;
  --anc-nova-star-1: #FFE9A0;
  --anc-nova-star-2: #FFB44F;
  --anc-nova-shadow: #0F0B22;
  --anc-nova-stem: #BBA3FF;
  --anc-nova-highlight: #CDB8FF;
  --anc-nova-face: #241B4E;
  --anc-gold: #FFD479;
  --anc-glow-peach: #FFB38A;
  --anc-glow-lilac: #E6E0FF;
  --anc-glow-mint: #9FE3C0;
  --anc-glow-rose: #FFA8C9;
  --anc-glow-coral: #FFB8A8;
  --anc-glow-teal: #7DD8C8;
  --anc-glow-lavender: #C9B4FF;
  --anc-glow-apricot: #FFC9A8;
}

/* Виджет автоподбора на странице «Общение» (макет будущей свайп-системы, t201):
   цвета легаси-наброска. Живут здесь, как и все литералы цвета (FE-02); значения
   не менялись, чтобы вид виджета остался прежним. */

:root {
    --c-widget-ink: #e2d9f0;
    --c-widget-bg: #110818;
    --c-widget-neon: #c86eff;
    --c-widget-neon-60: rgba(200, 110, 255, .6);
    --c-widget-neon-50: rgba(200, 110, 255, .5);
    --c-widget-neon-30: rgba(200, 110, 255, .3);
    --c-widget-neon-25: rgba(200, 110, 255, .25);
    --c-widget-neon-20: rgba(200, 110, 255, .2);
    --c-widget-neon-15: rgba(200, 110, 255, .15);
    --c-widget-neon-10: rgba(200, 110, 255, .1);
    --c-widget-neon-08: rgba(200,110,255,.08);
    --c-widget-neon-05: rgba(200,110,255,.05);
    --c-widget-border: #3a2352;
    --c-widget-card: #1c112a;
    --c-widget-icon-bg: #2a1642;
    --c-widget-gold: #fbbf24;
    --c-widget-gold-10: rgba(251,191,36,.1);
    --c-widget-gold-30: rgba(251,191,36,.3);
    --c-widget-muted: #8a7a9e;
    --c-widget-pink: #db2777;
    --c-widget-blue: #38bdf8;
    --c-widget-pink-30: rgba(219,39,119,.3);
    --c-widget-active-text: #052e16;
    --c-widget-green: #22c55e;
    --c-widget-green-soft: #86efac;
    --c-widget-green-35: rgba(34,197,94,.35);
    --c-widget-shadow-12: rgba(0,0,0,.12);
    --c-widget-shadow-50: rgba(0,0,0,.5);
    --c-widget-shadow-60: rgba(0,0,0,.6);
    --c-widget-on: #FFFFFF;
}

/* ── Награда «Багхантер» (t227): радужная грань и свечение активной карточки ───────────
   Цвет здесь — СМЫСЛ награды, а не палитры: значения одинаковы в светлой и тёмной схеме
   (грань и ореол должны читаться на любой поверхности), поэтому блок один на `:root`, а
   не по блоку на палитру. Литерал цвета разрешён только в этом файле (FE-02). */
:root {
    --c-bughunter-1: #FF4D6D;
    --c-bughunter-2: #FFB703;
    --c-bughunter-3: #8CE99A;
    --c-bughunter-4: #4CC9F0;
    --c-bughunter-5: #7B61FF;
    --c-bughunter-6: #F72585;
    --c-bughunter-glow-warm: rgba(255, 77, 109, 0.38);
    --c-bughunter-glow-cool: rgba(76, 201, 240, 0.28);
    --c-bughunter-glow-amber: rgba(255, 183, 3, 0.42);
    --c-bughunter-glow-violet: rgba(123, 97, 255, 0.34);
    --c-bughunter-glow-art: rgba(123, 97, 255, 0.45);
}