/* VC Tools — Terminal Luxe design tokens
 *
 * Файл разделён на три части:
 *   1) базовые токены темы (поверхности, текст, тени, типографика) — тёмная;
 *   2) их светлые значения в body.light;
 *   3) акценты — 8 палитр × 2 темы, сгенерированный блок (см. конец файла).
 * Всё, что зависит от выбранного акцента, живёт ТОЛЬКО в третьей части.
 */
:root {
  /* Typography */
  --font-display: 'Satoshi', 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* Surface layers */
  --vc-base: #0A0B0F;
  --vc-surface: #12141A;
  --vc-elevated: #1A1D26;
  --vc-overlay: #22262F;

  /* Semantic */
  --vc-profit: #12D18E;
  --vc-profit-glow: rgba(18, 209, 142, 0.35);
  --vc-profit-bg: rgba(18, 209, 142, 0.1);
  --vc-loss: #FF4D6D;
  --vc-loss-glow: rgba(255, 77, 109, 0.32);
  --vc-loss-bg: rgba(255, 77, 109, 0.1);
  --vc-info: #5DADE2;
  --vc-info-bg: rgba(93, 173, 226, 0.1);
  --vc-gold: #E5B45B;
  --vc-gold-glow: rgba(229, 180, 91, 0.3);
  --vc-gold-bg: rgba(229, 180, 91, 0.1);

  /* Text.
     --vc-text-faint — самый тихий уровень; поднят с #5A6072 до #7C8499,
     потому что старое значение давало контраст 2.7–3.1 на наших фонах
     (норма WCAG AA — 4.5) и подписи читались с трудом. */
  --vc-text: #EDEFF5;
  --vc-text-muted: #9AA0B4;
  --vc-text-faint: #7C8499;

  /* Нейтральные тинты поверхности. Раньше по файлам были зашиты
     rgba(255,255,255,.04) — в светлой теме такие подложки становились
     «белым по белому». Здесь они инвертируются вместе с темой. */
  --vc-tint-1: rgba(255, 255, 255, 0.02);
  --vc-tint-2: rgba(255, 255, 255, 0.04);
  --vc-tint-3: rgba(255, 255, 255, 0.06);
  --vc-tint-4: rgba(255, 255, 255, 0.08);
  --vc-tint-5: rgba(255, 255, 255, 0.12);
  --vc-tint-6: rgba(255, 255, 255, 0.25);

  /* Borders & radii */
  --vc-border: rgba(255, 255, 255, 0.06);
  --vc-border-hover: rgba(255, 255, 255, 0.12);
  --vc-radius-sm: 8px;
  --vc-radius-md: 12px;
  --vc-radius-lg: 16px;

  /* Shadows */
  --vc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --vc-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --vc-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --vc-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Motion */
  --vc-dur-fast: 0.15s;
  --vc-dur-med: 0.25s;
  --vc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy aliases — не акцентные */
  --bg: var(--vc-base);
  --input-bg: var(--vc-base);
  --card: var(--vc-surface);
  --card2: var(--vc-elevated);
  --card3: var(--vc-overlay);
  --border: var(--vc-border);
  --border2: var(--vc-border-hover);
  --text: var(--vc-text-muted);
  --text2: var(--vc-text);
  --muted: var(--vc-text-faint);
  --green: var(--vc-profit);
  --green-bg: var(--vc-profit-bg);
  --red: var(--vc-loss);
  --red-bg: var(--vc-loss-bg);
  --blue: #6E8BFF;
  --shadow: var(--vc-shadow-md);
  --radius: var(--vc-radius-md);
  --nav-h: 56px;
  --elev-1: rgba(0, 0, 0, 0.32);
  --overlay: rgba(0, 0, 0, 0.72);
  --hover-surface: rgba(255, 255, 255, 0.04);
  --inset-surface: rgba(255, 255, 255, 0.05);
  --dd-bg: var(--vc-elevated);
  --dd-menu-bg: rgba(18, 20, 26, 0.98);
  /* Тёмная полоса в градиенте карточек тарифов. В светлой теме она обязана
     светлеть: раньше значение было зашито числом, и текст карточки Ultimate
     ложился на почти чёрный блок. */
  --vc-plan-band: rgba(18, 20, 26, 0.95);
  --dd-shadow: var(--vc-shadow-lg);
  --tbl-shadow: var(--vc-shadow-sm);
  color-scheme: dark;
}

/* Светлая тема. Legacy-псевдонимы обязаны переобъявляться здесь целиком:
   var()-алиас вычисляет цель там, где объявлен сам, поэтому унаследованный
   из :root алиас навсегда застыл бы на тёмном значении. */
body.light {
  --vc-base: #E8EAEF;
  --vc-surface: #FFFFFF;
  --vc-elevated: #F3F4F8;
  --vc-overlay: #E2E6EE;
  --vc-text: #111827;
  --vc-text-muted: #4B5563;
  --vc-text-faint: #5D6572;
  --vc-border: rgba(17, 24, 39, 0.08);
  --vc-border-hover: rgba(17, 24, 39, 0.14);
  /* Зелёный и красный подняты по контрасту: #0D9F6E давал на белом 3.4:1,
     #E11D48 — 3.9:1 на фоне страницы при норме 4.5. */
  --vc-profit: #08794F;
  --vc-profit-glow: rgba(8, 121, 79, 0.2);
  --vc-profit-bg: rgba(8, 121, 79, 0.09);
  --vc-loss: #C81140;
  --vc-loss-glow: rgba(200, 17, 64, 0.18);
  --vc-loss-bg: rgba(200, 17, 64, 0.08);
  --vc-info: #1F6FA5;
  --vc-info-bg: rgba(31, 111, 165, 0.1);
  --vc-shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --vc-shadow-md: 0 10px 32px rgba(17, 24, 39, 0.08);
  --vc-shadow-lg: 0 16px 48px rgba(17, 24, 39, 0.12);
  --overlay: rgba(17, 24, 39, 0.44);
  --hover-surface: rgba(17, 24, 39, 0.04);
  --inset-surface: rgba(17, 24, 39, 0.06);
  /* Золото на белом читалось на 1.9:1 — светлой теме нужен свой оттенок. */
  --vc-gold: #8A6A16;
  --vc-gold-glow: rgba(138, 106, 22, 0.22);
  --vc-gold-bg: rgba(138, 106, 22, 0.1);
  --vc-tint-1: rgba(17, 24, 39, 0.025);
  --vc-tint-2: rgba(17, 24, 39, 0.045);
  --vc-tint-3: rgba(17, 24, 39, 0.065);
  --vc-tint-4: rgba(17, 24, 39, 0.09);
  --vc-tint-5: rgba(17, 24, 39, 0.14);
  --vc-tint-6: rgba(17, 24, 39, 0.3);
  --dd-menu-bg: #FFFFFF;
  --vc-plan-band: rgba(226, 230, 238, 0.95);
  color-scheme: light;

  --bg: var(--vc-base);
  --input-bg: var(--vc-base);
  --card: var(--vc-surface);
  --card2: var(--vc-elevated);
  --card3: var(--vc-overlay);
  --border: var(--vc-border);
  --border2: var(--vc-border-hover);
  --text: var(--vc-text-muted);
  --text2: var(--vc-text);
  --muted: var(--vc-text-faint);
  --green: var(--vc-profit);
  --green-bg: var(--vc-profit-bg);
  --red: var(--vc-loss);
  --red-bg: var(--vc-loss-bg);
  --shadow: var(--vc-shadow-md);
  --dd-bg: var(--vc-elevated);
  --dd-shadow: var(--vc-shadow-lg);
  --tbl-shadow: var(--vc-shadow-sm);
  --elev-1: rgba(17, 24, 39, 0.12);
}

/* ─────────────────────────────────────────────────────────────────────────
   АКЦЕНТЫ. 8 палитр × 2 темы, сгенерированы из проверенной таблицы:
   каждая пара «текст/заливка» и «акцентный текст/фон» проходит WCAG AA
   (>=4.5 для обычного текста). Цвет текста на заливке — --vc-on-cta —
   меняется вместе с акцентом, поэтому нигде не должно быть хардкода
   #0A0B0F поверх акцентной подложки.
   Монохромным акцентам (белый/чёрный) задан --vc-cta-border: в «родной»
   теме заливка близка к фону и различима именно по рамке.
   ───────────────────────────────────────────────────────────────────────── */

/* Оранжевый — фирменный акцент VC Tools — тёмная тема */
:root,
html[data-accent="orange"] {
  --vc-cta: #FF6B00;
  --vc-cta-hover: #FF8128;
  --vc-cta-strong: #E85D00;
  --vc-cta-text: #FF8A2B;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(255, 107, 0, 0.1);
  --vc-cta-bg-strong: rgba(255, 107, 0, 0.18);
  --vc-cta-glow: rgba(255, 107, 0, 0.28);
  --vc-cta-ring: rgba(255, 107, 0, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #FF6B00 0%, #FF8128 100%);
  --accent: #FF6B00;
  --accent2: #E85D00;
  --accent-bg: rgba(255, 107, 0, 0.1);
  --vc-accent: #FF6B00;
  --scrollbar: rgba(255, 107, 0, 0.45);
  --vc-cta-a06: rgba(255, 107, 0, 0.06);
  --vc-cta-a10: rgba(255, 107, 0, 0.1);
  --vc-cta-a14: rgba(255, 107, 0, 0.14);
  --vc-cta-a18: rgba(255, 107, 0, 0.18);
  --vc-cta-a22: rgba(255, 107, 0, 0.22);
  --vc-cta-a25: rgba(255, 107, 0, 0.25);
  --vc-cta-a28: rgba(255, 107, 0, 0.28);
  --vc-cta-a35: rgba(255, 107, 0, 0.35);
  --vc-cta-a45: rgba(255, 107, 0, 0.45);
  --vc-cta-a55: rgba(255, 107, 0, 0.55);
}

/* Синий — тёмная тема */
html[data-accent="blue"] {
  --vc-cta: #6E8BFF;
  --vc-cta-hover: #8BA3FF;
  --vc-cta-strong: #5A78E8;
  --vc-cta-text: #8FA6FF;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(110, 139, 255, 0.1);
  --vc-cta-bg-strong: rgba(110, 139, 255, 0.18);
  --vc-cta-glow: rgba(110, 139, 255, 0.28);
  --vc-cta-ring: rgba(110, 139, 255, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #6E8BFF 0%, #8BA3FF 100%);
  --accent: #6E8BFF;
  --accent2: #5A78E8;
  --accent-bg: rgba(110, 139, 255, 0.1);
  --vc-accent: #6E8BFF;
  --scrollbar: rgba(110, 139, 255, 0.45);
  --vc-cta-a06: rgba(110, 139, 255, 0.06);
  --vc-cta-a10: rgba(110, 139, 255, 0.1);
  --vc-cta-a14: rgba(110, 139, 255, 0.14);
  --vc-cta-a18: rgba(110, 139, 255, 0.18);
  --vc-cta-a22: rgba(110, 139, 255, 0.22);
  --vc-cta-a25: rgba(110, 139, 255, 0.25);
  --vc-cta-a28: rgba(110, 139, 255, 0.28);
  --vc-cta-a35: rgba(110, 139, 255, 0.35);
  --vc-cta-a45: rgba(110, 139, 255, 0.45);
  --vc-cta-a55: rgba(110, 139, 255, 0.55);
}

/* Фиолетовый — тёмная тема */
html[data-accent="purple"] {
  --vc-cta: #A78BFA;
  --vc-cta-hover: #BBA4FF;
  --vc-cta-strong: #8B6EE0;
  --vc-cta-text: #B9A2FF;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(167, 139, 250, 0.1);
  --vc-cta-bg-strong: rgba(167, 139, 250, 0.18);
  --vc-cta-glow: rgba(167, 139, 250, 0.28);
  --vc-cta-ring: rgba(167, 139, 250, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #A78BFA 0%, #BBA4FF 100%);
  --accent: #A78BFA;
  --accent2: #8B6EE0;
  --accent-bg: rgba(167, 139, 250, 0.1);
  --vc-accent: #A78BFA;
  --scrollbar: rgba(167, 139, 250, 0.45);
  --vc-cta-a06: rgba(167, 139, 250, 0.06);
  --vc-cta-a10: rgba(167, 139, 250, 0.1);
  --vc-cta-a14: rgba(167, 139, 250, 0.14);
  --vc-cta-a18: rgba(167, 139, 250, 0.18);
  --vc-cta-a22: rgba(167, 139, 250, 0.22);
  --vc-cta-a25: rgba(167, 139, 250, 0.25);
  --vc-cta-a28: rgba(167, 139, 250, 0.28);
  --vc-cta-a35: rgba(167, 139, 250, 0.35);
  --vc-cta-a45: rgba(167, 139, 250, 0.45);
  --vc-cta-a55: rgba(167, 139, 250, 0.55);
}

/* Голубой — тёмная тема */
html[data-accent="cyan"] {
  --vc-cta: #38BDF8;
  --vc-cta-hover: #5CCCFA;
  --vc-cta-strong: #1FA2DC;
  --vc-cta-text: #5CCCFA;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(56, 189, 248, 0.1);
  --vc-cta-bg-strong: rgba(56, 189, 248, 0.18);
  --vc-cta-glow: rgba(56, 189, 248, 0.28);
  --vc-cta-ring: rgba(56, 189, 248, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #38BDF8 0%, #5CCCFA 100%);
  --accent: #38BDF8;
  --accent2: #1FA2DC;
  --accent-bg: rgba(56, 189, 248, 0.1);
  --vc-accent: #38BDF8;
  --scrollbar: rgba(56, 189, 248, 0.45);
  --vc-cta-a06: rgba(56, 189, 248, 0.06);
  --vc-cta-a10: rgba(56, 189, 248, 0.1);
  --vc-cta-a14: rgba(56, 189, 248, 0.14);
  --vc-cta-a18: rgba(56, 189, 248, 0.18);
  --vc-cta-a22: rgba(56, 189, 248, 0.22);
  --vc-cta-a25: rgba(56, 189, 248, 0.25);
  --vc-cta-a28: rgba(56, 189, 248, 0.28);
  --vc-cta-a35: rgba(56, 189, 248, 0.35);
  --vc-cta-a45: rgba(56, 189, 248, 0.45);
  --vc-cta-a55: rgba(56, 189, 248, 0.55);
}

/* Зелёный — тёмная тема */
html[data-accent="green"] {
  --vc-cta: #2FD39B;
  --vc-cta-hover: #4ADFAB;
  --vc-cta-strong: #1FB783;
  --vc-cta-text: #4ADFAB;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(47, 211, 155, 0.1);
  --vc-cta-bg-strong: rgba(47, 211, 155, 0.18);
  --vc-cta-glow: rgba(47, 211, 155, 0.28);
  --vc-cta-ring: rgba(47, 211, 155, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #2FD39B 0%, #4ADFAB 100%);
  --accent: #2FD39B;
  --accent2: #1FB783;
  --accent-bg: rgba(47, 211, 155, 0.1);
  --vc-accent: #2FD39B;
  --scrollbar: rgba(47, 211, 155, 0.45);
  --vc-cta-a06: rgba(47, 211, 155, 0.06);
  --vc-cta-a10: rgba(47, 211, 155, 0.1);
  --vc-cta-a14: rgba(47, 211, 155, 0.14);
  --vc-cta-a18: rgba(47, 211, 155, 0.18);
  --vc-cta-a22: rgba(47, 211, 155, 0.22);
  --vc-cta-a25: rgba(47, 211, 155, 0.25);
  --vc-cta-a28: rgba(47, 211, 155, 0.28);
  --vc-cta-a35: rgba(47, 211, 155, 0.35);
  --vc-cta-a45: rgba(47, 211, 155, 0.45);
  --vc-cta-a55: rgba(47, 211, 155, 0.55);
}

/* Красный — тёмная тема */
html[data-accent="red"] {
  --vc-cta: #FF5470;
  --vc-cta-hover: #FF7A8E;
  --vc-cta-strong: #E23B57;
  --vc-cta-text: #FF7A8E;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(255, 84, 112, 0.1);
  --vc-cta-bg-strong: rgba(255, 84, 112, 0.18);
  --vc-cta-glow: rgba(255, 84, 112, 0.28);
  --vc-cta-ring: rgba(255, 84, 112, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #FF5470 0%, #FF7A8E 100%);
  --accent: #FF5470;
  --accent2: #E23B57;
  --accent-bg: rgba(255, 84, 112, 0.1);
  --vc-accent: #FF5470;
  --scrollbar: rgba(255, 84, 112, 0.45);
  --vc-cta-a06: rgba(255, 84, 112, 0.06);
  --vc-cta-a10: rgba(255, 84, 112, 0.1);
  --vc-cta-a14: rgba(255, 84, 112, 0.14);
  --vc-cta-a18: rgba(255, 84, 112, 0.18);
  --vc-cta-a22: rgba(255, 84, 112, 0.22);
  --vc-cta-a25: rgba(255, 84, 112, 0.25);
  --vc-cta-a28: rgba(255, 84, 112, 0.28);
  --vc-cta-a35: rgba(255, 84, 112, 0.35);
  --vc-cta-a45: rgba(255, 84, 112, 0.45);
  --vc-cta-a55: rgba(255, 84, 112, 0.55);
}

/* Белый — светлая заливка, тёмный текст на ней — тёмная тема */
html[data-accent="platinum"] {
  --vc-cta: #EDEFF5;
  --vc-cta-hover: #FFFFFF;
  --vc-cta-strong: #D3D8E4;
  --vc-cta-text: #EDEFF5;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(237, 239, 245, 0.1);
  --vc-cta-bg-strong: rgba(237, 239, 245, 0.18);
  --vc-cta-glow: rgba(237, 239, 245, 0.28);
  --vc-cta-ring: rgba(237, 239, 245, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #EDEFF5 0%, #FFFFFF 100%);
  --accent: #EDEFF5;
  --accent2: #D3D8E4;
  --accent-bg: rgba(237, 239, 245, 0.1);
  --vc-accent: #EDEFF5;
  --scrollbar: rgba(237, 239, 245, 0.45);
  --vc-cta-a06: rgba(237, 239, 245, 0.06);
  --vc-cta-a10: rgba(237, 239, 245, 0.1);
  --vc-cta-a14: rgba(237, 239, 245, 0.14);
  --vc-cta-a18: rgba(237, 239, 245, 0.18);
  --vc-cta-a22: rgba(237, 239, 245, 0.22);
  --vc-cta-a25: rgba(237, 239, 245, 0.25);
  --vc-cta-a28: rgba(237, 239, 245, 0.28);
  --vc-cta-a35: rgba(237, 239, 245, 0.35);
  --vc-cta-a45: rgba(237, 239, 245, 0.45);
  --vc-cta-a55: rgba(237, 239, 245, 0.55);
}

/* Чёрный — тёмная заливка, светлый текст на ней — тёмная тема */
html[data-accent="onyx"] {
  --vc-cta: #191C24;
  --vc-cta-hover: #232733;
  --vc-cta-strong: #101319;
  --vc-cta-text: #C9CEDA;
  --vc-on-cta: #FFFFFF;
  --vc-cta-border: #4A5164;
  --vc-cta-bg: rgba(25, 28, 36, 0.1);
  --vc-cta-bg-strong: rgba(25, 28, 36, 0.18);
  --vc-cta-glow: rgba(25, 28, 36, 0.28);
  --vc-cta-ring: rgba(25, 28, 36, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #191C24 0%, #232733 100%);
  --accent: #191C24;
  --accent2: #101319;
  --accent-bg: rgba(25, 28, 36, 0.1);
  --vc-accent: #191C24;
  --scrollbar: rgba(25, 28, 36, 0.45);
  --vc-cta-a06: rgba(25, 28, 36, 0.06);
  --vc-cta-a10: rgba(25, 28, 36, 0.1);
  --vc-cta-a14: rgba(25, 28, 36, 0.14);
  --vc-cta-a18: rgba(25, 28, 36, 0.18);
  --vc-cta-a22: rgba(25, 28, 36, 0.22);
  --vc-cta-a25: rgba(25, 28, 36, 0.25);
  --vc-cta-a28: rgba(25, 28, 36, 0.28);
  --vc-cta-a35: rgba(25, 28, 36, 0.35);
  --vc-cta-a45: rgba(25, 28, 36, 0.45);
  --vc-cta-a55: rgba(25, 28, 36, 0.55);
}

/* Светлые варианты тех же акцентов. Селектор с body.light обязателен:
   светлая тема меняет фоны, а значит и требования к контрасту. */

/* Оранжевый — фирменный акцент VC Tools — светлая тема */
html[data-accent="orange"] body.light,
body.light {
  --vc-cta: #F26100;
  --vc-cta-hover: #D95600;
  --vc-cta-strong: #C24F00;
  --vc-cta-text: #A84400;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(242, 97, 0, 0.1);
  --vc-cta-bg-strong: rgba(242, 97, 0, 0.18);
  --vc-cta-glow: rgba(242, 97, 0, 0.28);
  --vc-cta-ring: rgba(242, 97, 0, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #F26100 0%, #D95600 100%);
  --accent: #F26100;
  --accent2: #C24F00;
  --accent-bg: rgba(242, 97, 0, 0.1);
  --vc-accent: #F26100;
  --scrollbar: rgba(242, 97, 0, 0.45);
  --vc-cta-a06: rgba(242, 97, 0, 0.06);
  --vc-cta-a10: rgba(242, 97, 0, 0.1);
  --vc-cta-a14: rgba(242, 97, 0, 0.14);
  --vc-cta-a18: rgba(242, 97, 0, 0.18);
  --vc-cta-a22: rgba(242, 97, 0, 0.22);
  --vc-cta-a25: rgba(242, 97, 0, 0.25);
  --vc-cta-a28: rgba(242, 97, 0, 0.28);
  --vc-cta-a35: rgba(242, 97, 0, 0.35);
  --vc-cta-a45: rgba(242, 97, 0, 0.45);
  --vc-cta-a55: rgba(242, 97, 0, 0.55);
}

/* Синий — светлая тема */
html[data-accent="blue"] body.light {
  --vc-cta: #4463DE;
  --vc-cta-hover: #3A56CC;
  --vc-cta-strong: #3450BF;
  --vc-cta-text: #3B56BC;
  --vc-on-cta: #FFFFFF;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(68, 99, 222, 0.1);
  --vc-cta-bg-strong: rgba(68, 99, 222, 0.18);
  --vc-cta-glow: rgba(68, 99, 222, 0.28);
  --vc-cta-ring: rgba(68, 99, 222, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #4463DE 0%, #3A56CC 100%);
  --accent: #4463DE;
  --accent2: #3450BF;
  --accent-bg: rgba(68, 99, 222, 0.1);
  --vc-accent: #4463DE;
  --scrollbar: rgba(68, 99, 222, 0.45);
  --vc-cta-a06: rgba(68, 99, 222, 0.06);
  --vc-cta-a10: rgba(68, 99, 222, 0.1);
  --vc-cta-a14: rgba(68, 99, 222, 0.14);
  --vc-cta-a18: rgba(68, 99, 222, 0.18);
  --vc-cta-a22: rgba(68, 99, 222, 0.22);
  --vc-cta-a25: rgba(68, 99, 222, 0.25);
  --vc-cta-a28: rgba(68, 99, 222, 0.28);
  --vc-cta-a35: rgba(68, 99, 222, 0.35);
  --vc-cta-a45: rgba(68, 99, 222, 0.45);
  --vc-cta-a55: rgba(68, 99, 222, 0.55);
}

/* Фиолетовый — светлая тема */
html[data-accent="purple"] body.light {
  --vc-cta: #7C3AED;
  --vc-cta-hover: #6D28D9;
  --vc-cta-strong: #5B21B6;
  --vc-cta-text: #6D28D9;
  --vc-on-cta: #FFFFFF;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(124, 58, 237, 0.1);
  --vc-cta-bg-strong: rgba(124, 58, 237, 0.18);
  --vc-cta-glow: rgba(124, 58, 237, 0.28);
  --vc-cta-ring: rgba(124, 58, 237, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  --accent: #7C3AED;
  --accent2: #5B21B6;
  --accent-bg: rgba(124, 58, 237, 0.1);
  --vc-accent: #7C3AED;
  --scrollbar: rgba(124, 58, 237, 0.45);
  --vc-cta-a06: rgba(124, 58, 237, 0.06);
  --vc-cta-a10: rgba(124, 58, 237, 0.1);
  --vc-cta-a14: rgba(124, 58, 237, 0.14);
  --vc-cta-a18: rgba(124, 58, 237, 0.18);
  --vc-cta-a22: rgba(124, 58, 237, 0.22);
  --vc-cta-a25: rgba(124, 58, 237, 0.25);
  --vc-cta-a28: rgba(124, 58, 237, 0.28);
  --vc-cta-a35: rgba(124, 58, 237, 0.35);
  --vc-cta-a45: rgba(124, 58, 237, 0.45);
  --vc-cta-a55: rgba(124, 58, 237, 0.55);
}

/* Голубой — светлая тема */
html[data-accent="cyan"] body.light {
  --vc-cta: #0EA5E9;
  --vc-cta-hover: #0284C7;
  --vc-cta-strong: #0369A1;
  --vc-cta-text: #0369A1;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(14, 165, 233, 0.1);
  --vc-cta-bg-strong: rgba(14, 165, 233, 0.18);
  --vc-cta-glow: rgba(14, 165, 233, 0.28);
  --vc-cta-ring: rgba(14, 165, 233, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
  --accent: #0EA5E9;
  --accent2: #0369A1;
  --accent-bg: rgba(14, 165, 233, 0.1);
  --vc-accent: #0EA5E9;
  --scrollbar: rgba(14, 165, 233, 0.45);
  --vc-cta-a06: rgba(14, 165, 233, 0.06);
  --vc-cta-a10: rgba(14, 165, 233, 0.1);
  --vc-cta-a14: rgba(14, 165, 233, 0.14);
  --vc-cta-a18: rgba(14, 165, 233, 0.18);
  --vc-cta-a22: rgba(14, 165, 233, 0.22);
  --vc-cta-a25: rgba(14, 165, 233, 0.25);
  --vc-cta-a28: rgba(14, 165, 233, 0.28);
  --vc-cta-a35: rgba(14, 165, 233, 0.35);
  --vc-cta-a45: rgba(14, 165, 233, 0.45);
  --vc-cta-a55: rgba(14, 165, 233, 0.55);
}

/* Зелёный — светлая тема */
html[data-accent="green"] body.light {
  --vc-cta: #10B981;
  --vc-cta-hover: #059669;
  --vc-cta-strong: #047857;
  --vc-cta-text: #047857;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(16, 185, 129, 0.1);
  --vc-cta-bg-strong: rgba(16, 185, 129, 0.18);
  --vc-cta-glow: rgba(16, 185, 129, 0.28);
  --vc-cta-ring: rgba(16, 185, 129, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --accent: #10B981;
  --accent2: #047857;
  --accent-bg: rgba(16, 185, 129, 0.1);
  --vc-accent: #10B981;
  --scrollbar: rgba(16, 185, 129, 0.45);
  --vc-cta-a06: rgba(16, 185, 129, 0.06);
  --vc-cta-a10: rgba(16, 185, 129, 0.1);
  --vc-cta-a14: rgba(16, 185, 129, 0.14);
  --vc-cta-a18: rgba(16, 185, 129, 0.18);
  --vc-cta-a22: rgba(16, 185, 129, 0.22);
  --vc-cta-a25: rgba(16, 185, 129, 0.25);
  --vc-cta-a28: rgba(16, 185, 129, 0.28);
  --vc-cta-a35: rgba(16, 185, 129, 0.35);
  --vc-cta-a45: rgba(16, 185, 129, 0.45);
  --vc-cta-a55: rgba(16, 185, 129, 0.55);
}

/* Красный — светлая тема */
html[data-accent="red"] body.light {
  --vc-cta: #E11D48;
  --vc-cta-hover: #BE123C;
  --vc-cta-strong: #9F1239;
  --vc-cta-text: #BE123C;
  --vc-on-cta: #FFFFFF;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(225, 29, 72, 0.1);
  --vc-cta-bg-strong: rgba(225, 29, 72, 0.18);
  --vc-cta-glow: rgba(225, 29, 72, 0.28);
  --vc-cta-ring: rgba(225, 29, 72, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --accent: #E11D48;
  --accent2: #9F1239;
  --accent-bg: rgba(225, 29, 72, 0.1);
  --vc-accent: #E11D48;
  --scrollbar: rgba(225, 29, 72, 0.45);
  --vc-cta-a06: rgba(225, 29, 72, 0.06);
  --vc-cta-a10: rgba(225, 29, 72, 0.1);
  --vc-cta-a14: rgba(225, 29, 72, 0.14);
  --vc-cta-a18: rgba(225, 29, 72, 0.18);
  --vc-cta-a22: rgba(225, 29, 72, 0.22);
  --vc-cta-a25: rgba(225, 29, 72, 0.25);
  --vc-cta-a28: rgba(225, 29, 72, 0.28);
  --vc-cta-a35: rgba(225, 29, 72, 0.35);
  --vc-cta-a45: rgba(225, 29, 72, 0.45);
  --vc-cta-a55: rgba(225, 29, 72, 0.55);
}

/* Белый — светлая заливка, тёмный текст на ней — светлая тема */
html[data-accent="platinum"] body.light {
  --vc-cta: #FFFFFF;
  --vc-cta-hover: #F3F4F8;
  --vc-cta-strong: #E2E6EE;
  --vc-cta-text: #374151;
  --vc-on-cta: #0A0B0F;
  --vc-cta-border: #9AA3B2;
  --vc-cta-bg: rgba(255, 255, 255, 0.1);
  --vc-cta-bg-strong: rgba(255, 255, 255, 0.18);
  --vc-cta-glow: rgba(255, 255, 255, 0.28);
  --vc-cta-ring: rgba(255, 255, 255, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #FFFFFF 0%, #F3F4F8 100%);
  --accent: #FFFFFF;
  --accent2: #E2E6EE;
  --accent-bg: rgba(255, 255, 255, 0.1);
  --vc-accent: #FFFFFF;
  --scrollbar: rgba(255, 255, 255, 0.45);
  --vc-cta-a06: rgba(255, 255, 255, 0.06);
  --vc-cta-a10: rgba(255, 255, 255, 0.1);
  --vc-cta-a14: rgba(255, 255, 255, 0.14);
  --vc-cta-a18: rgba(255, 255, 255, 0.18);
  --vc-cta-a22: rgba(255, 255, 255, 0.22);
  --vc-cta-a25: rgba(255, 255, 255, 0.25);
  --vc-cta-a28: rgba(255, 255, 255, 0.28);
  --vc-cta-a35: rgba(255, 255, 255, 0.35);
  --vc-cta-a45: rgba(255, 255, 255, 0.45);
  --vc-cta-a55: rgba(255, 255, 255, 0.55);
}

/* Чёрный — тёмная заливка, светлый текст на ней — светлая тема */
html[data-accent="onyx"] body.light {
  --vc-cta: #111827;
  --vc-cta-hover: #1F2937;
  --vc-cta-strong: #030712;
  --vc-cta-text: #111827;
  --vc-on-cta: #FFFFFF;
  --vc-cta-border: transparent;
  --vc-cta-bg: rgba(17, 24, 39, 0.1);
  --vc-cta-bg-strong: rgba(17, 24, 39, 0.18);
  --vc-cta-glow: rgba(17, 24, 39, 0.28);
  --vc-cta-ring: rgba(17, 24, 39, 0.38);
  --vc-cta-grad: linear-gradient(135deg, #111827 0%, #1F2937 100%);
  --accent: #111827;
  --accent2: #030712;
  --accent-bg: rgba(17, 24, 39, 0.1);
  --vc-accent: #111827;
  --scrollbar: rgba(17, 24, 39, 0.45);
  --vc-cta-a06: rgba(17, 24, 39, 0.06);
  --vc-cta-a10: rgba(17, 24, 39, 0.1);
  --vc-cta-a14: rgba(17, 24, 39, 0.14);
  --vc-cta-a18: rgba(17, 24, 39, 0.18);
  --vc-cta-a22: rgba(17, 24, 39, 0.22);
  --vc-cta-a25: rgba(17, 24, 39, 0.25);
  --vc-cta-a28: rgba(17, 24, 39, 0.28);
  --vc-cta-a35: rgba(17, 24, 39, 0.35);
  --vc-cta-a45: rgba(17, 24, 39, 0.45);
  --vc-cta-a55: rgba(17, 24, 39, 0.55);
}


/* Global typography */
html {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────────────────
   ЭЛЕМЕНТЫ УПРАВЛЕНИЯ — тумблеры, чекбоксы, радиокнопки, стрелки.
   Добавлено 08.08.2026, этап 1 журнала багов (пункты 4, 5, 9).

   Проблема, которую это чинит: цвета управляющих элементов были вписаны
   прямо в компоненты — .toggle горел зелёным var(--green) при любом
   акценте, ручки тумблеров были прибиты к #888 и #1a1003. Из-за этого
   смена темы и акцента меняла всё, кроме них.

   Правило: ниже — ЕДИНСТВЕННОЕ место, где у элементов управления заданы
   цвета. В компонентах допустимы только var(--vc-control-*).

   Токены объявлены на body, а не на :root, намеренно: акцентные значения
   светлой темы живут на body.light, и объявление на :root подхватило бы
   тёмные значения даже в светлой теме.
   ───────────────────────────────────────────────────────────────────────── */
body {
  /* Форма стрелки. Цвет НЕ зашит: в маске он не используется вообще, а в
     --vc-arrow-svg подставляется под тему. Так стрелки перестают быть
     оранжевыми при любом акценте (пункт 9). */
  --vc-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23000' d='M5 8 0 2h10z'/%3E%3C/svg%3E");
  --vc-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%239AA0B4' d='M5 8 0 2h10z'/%3E%3C/svg%3E");
  /* Дорожка выключенного тумблера: заметно темнее поверхности, но не чёрная */
  --vc-control-track: var(--vc-overlay);
  /* Включённого — акцент, поэтому меняется вместе с выбором пользователя */
  --vc-control-track-on: var(--vc-cta);
  /* Ручка выключенного — приглушённый текстовый: читается на дорожке */
  --vc-control-knob: var(--vc-text-muted);
  /* Ручка включённого — тот же цвет, что текст поверх акцентной заливки.
     Именно его подбирали под каждый акцент по WCAG, поэтому свой цвет
     здесь не изобретаем. */
  --vc-control-knob-on: var(--vc-on-cta);
  --vc-control-border: var(--vc-border-hover);
  /* Скругление чекбоксов. Пункт 5 журнала: только квадрат со скруглением,
     никаких кругов — круг накладывался на квадрат и давал визуальный баг. */
  --vc-control-radius: 4px;
}

body.light {
  /* В светлой теме стрелка тёмная — тот же приглушённый текстовый цвет */
  --vc-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%234B5563' d='M5 8 0 2h10z'/%3E%3C/svg%3E");
  --vc-control-track: var(--vc-overlay);
  --vc-control-track-on: var(--vc-cta);
  --vc-control-knob: #FFFFFF;
  --vc-control-knob-on: var(--vc-on-cta);
  --vc-control-border: var(--vc-border-hover);
}