/* ═══════════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА САЙТА — ЕДИНЫЙ ИСТОЧНИК ЦВЕТА, ГЕОМЕТРИИ И ТЕНЕЙ.

   Здесь и только здесь описано, «как выглядит» кабинет. Компоненты цвета
   НЕ хардкодят — они читают токены (var(--fg2), var(--r-md) и т.д.),
   поэтому смена темы = смена значений в ОДНОМ месте, без правки вкладок.

   Темы переключаются атрибутом на <html>:
     <html data-theme="chaborz">  — редизайн 2026-07 (дефолт)
     <html data-theme="carbon">   — Carbon Motorsport (прежний вид)
     <html data-theme="refined">  — спокойный графит
   Переключатель — src/design/useTheme.ts (сохраняет выбор в localStorage).

   ДОБАВЛЯЕШЬ ТЕМУ: копируешь блок [data-theme="..."], меняешь значения,
   добавляешь запись в THEMES (useTheme.ts). Больше ничего.

   ПРАВИЛО: новый цвет в компоненте — сначала токен здесь, потом var() в
   коде. Хардкод #hex ломает переключение (в carbon-теме останется цвет
   chaborz) — линтер этого не ловит, ловит только ревью.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Chaborz (редизайн 2026-07, дефолт) ─────────────────────────────── */
/* ── Типошкала (тем-независима; тема МОЖЕТ переопределить у себя) ──
   Body-ряд 11..16, display-ряд 22/26/28/34/42. Классы text-11..text-42
   (tailwind.config) и переопределённые text-xs/sm/... читают эти токены —
   произвольные text-[Npx] запрещены гвардом. */
:root {
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px;
  --fs-30: 30px; --fs-34: 34px; --fs-36: 36px; --fs-42: 42px;

  /* Круг — роль ГЕОМЕТРИЧЕСКАЯ, а не стилевая, поэтому тем-независим и живёт
     здесь, а не в блоках тем. Не путать с --r-pill: пилюля/точка-индикатор
     скругляется по вкусу темы (в carbon она квадратная — так и задумано), а
     круг обязан остаться кругом ВЕЗДЕ, иначе элемент перестаёт читаться:
     спиннер на границе с прозрачным верхом превращается во вращающийся
     квадрат с недостающей стороной (выглядит как глюк, а не как дизайн), а
     скелетон доната перестаёт предсказывать форму того, что загрузится
     (сам донат — SVG recharts, круглый в любой теме). Проверено в браузере
     на carbon 28.07. */
  --r-circle: 50%;
  /* Full-screen conversation canvas has no outer card corners in either theme. */
  --r-viewport: 0px;
  --on-acc: #ffffff;
}

:root,
[data-theme='chaborz'] {
  /* Поверхности: фон → панель → приподнятая панель. Панель СВЕТЛЕЕ фона. */
  --bg: #0a0a0c;
  --bg-alt: #0f1013;
  --surf: #141519;
  --surf2: #1b1d22;
  --surf3: #212329;

  /* Линии */
  --line: #24262c;
  --line-soft: #1d1f24;
  --line2: #33363e;

  /* Текст: bright → основной → вторичный → третичный → приглушённый.
     fg3/fg4 подняты до ≥4.5:1 на --surf (аудит 24.07: 11px подписи были
     3.18:1 — провал WCAG AA). fg5 — ТОЛЬКО декоративное/disabled, текстом
     не использовать. */
  --fg-bright: #ffffff;
  --fg: #edeef1;
  /* Ступень между --fg и --fg-soft. Заведена под tailwind-slate-200
     (83 потребителя): своего токена у неё не было, и она была единственной
     ступенью нейтральной шкалы, которую нечем описать в теме. */
  --fg-dim: #dcdee3;
  --fg-soft: #c9ccd3;
  --fg2: #9a9da6;
  --fg3: #8a8d96;
  --fg4: #83868f;
  --fg5: #4a4c54;

  /* Акцент */
  --acc: #f94f0c;
  --acc-br: #fdba74;
  --acc-dim: rgba(249, 79, 12, 0.14);
  --acc-line: rgba(249, 79, 12, 0.3);
  --acc-grad: linear-gradient(180deg, #fe6a2e, #f94f0c);
  --acc-glow: 0 6px 18px -6px rgba(249, 79, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  /* Кольцо фокуса клавиатуры: сплошной акцент по краю + тёмная полоса под
     ним. Прежнее rgba(acc, .55) на --surf давало ≈2,4:1 (ревью #3430, WCAG
     1.4.11 требует 3:1), а сплошной акцент без тёмной полосы сливается с
     акцентной кнопкой. Кольцо внутреннее в обеих темах: внешнее срезали
     clip-path кнопки, overflow предка и диагональ сайдбара (#3434). Контраст
     и форму сторожит design/focusRing.guard.test.ts. */
  --focus-ring: inset 0 0 0 2px var(--acc), inset 0 0 0 4px var(--bg);


  /* RGB-каналы токенов — для полупрозрачных подложек: rgba(var(--acc-rgb), .15).
     Без них любая rgba(...) в коде остаётся зашитой мимо темы. */
  --acc-rgb: 249, 79, 12;
  --ok-rgb: 52, 199, 89;
  --warn-rgb: 245, 166, 35;
  --gold-rgb: 245, 166, 35;
  --danger-rgb: 255, 107, 107;
  --rose-rgb: 244, 63, 94;
  --info-rgb: 140, 162, 196;
  --vio-rgb: 167, 139, 250;
  --indigo-rgb: 99, 102, 241;
  --mint-rgb: 19, 226, 154;
  --bg-rgb: 10, 10, 12;
  /* Полоса блика card-shimmer (CompatBand/секции тарифов): без токена
     градиент был невалиден и блик молча не работал (аудит 24.07). */
  --card-shimmer: rgba(255, 255, 255, 0.05);
  --teal-rgb: 94, 234, 212;
  --fg2-rgb: 154, 157, 166;
  --fg4-rgb: 131, 134, 143;

  /* Семантика: успех / ожидание / опасность / информация / премиум / золото */
  --ok: #34c759;
  --ok-fg: #7be39b;
  --warn: #f5a623;
  --warn-fg: #fdd489;
  --danger: #ff6b6b;
  --danger-fg: #fca5a5;
  --info: #8ca2c4;
  --info-fg: #b8c8e0;
  --vio: #a78bfa;
  --vio-fg: #c4b5fd;
  --gold: #f5a623;
  --gold-fg: #fdd489;
  --teal: #5eead4;


  /* Тёмные концы градиентов и нишевые оттенки тарифов. Тариф — сущность
     дизайна (карточка, бейдж, кнопка в цвет секции), поэтому его палитра
     живёт здесь, а не в реестре tierConfig. */
  --danger-deep: #be123c;
  --indigo: #6366f1;
  --indigo-deep: #4f46e5;
  --indigo-fg: #a5b4fc; /* светлый вариант для мелкого текста на тёмном (как --red-fg/--blue-fg) */
  --emerald: #34d399;
  --emerald-deep: #047857;
  --emerald-fg: #6ee7b7;
  --emerald-rgb: 52, 211, 153;
  --cyan-fg: #67e8f9;
  --cyan-rgb: 34, 211, 238;
  --acc-soft: #fb923c;
  --acc-dark: #c2410c;
  --acc-deep: #ea580c;
  --red: #dc2626;
  --red-deep: #991b1b;
  --red-fg: #fca5a5;
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --blue-fg: #93c5fd;
  --pink: #f472b6;
  --sky: #7dd3fc;
  --sky-rgb: 41, 182, 246;
  --mint: #13e29a;

  /* Верх градиента сайдбара — отдельный токен: в carbon он совпадает
     с панелью (градиента нет), в chaborz светлее. */
  --sidebar-top: #181920;

  /* Геометрия: радиусы + срез угла. В chaborz срезов нет (clip: none). */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --mobile-nav-bottom: calc(12px + env(safe-area-inset-bottom));
  --mobile-nav-safe-padding: 0px;
  --clip-sm: none;
  --clip-lg: none;
  /* «Зарубка» — квадрат со срезанными противоположными углами (плитка
     логотипа на chaborz.pro). В chaborz срезов нет, работает --r-*. */
  --clip-notch: none;

  /* Тени */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px -20px rgba(0, 0, 0, 0.8);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 34px -22px rgba(0, 0, 0, 0.85);
  --shadow-modal: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  /* Внутренний блик по правому краю сайдбара — «приподнимает» панель рядом
     с контентом. В carbon дизайн плоский, поэтому там none. */
  --shadow-sidebar: inset -1px 0 0 rgba(255, 255, 255, 0.02);

  /* Фон страницы: два ambient-пятна поверх ровного near-black. */
  --page-bg:
    radial-gradient(85% 55% at 90% -10%, rgba(249, 79, 12, 0.055), transparent 55%),
    radial-gradient(70% 50% at 0% 105%, rgba(120, 140, 200, 0.03), transparent 60%);


  /* Движение — тоже часть дизайн-системы: длительности и кривая живут здесь,
     иначе «скорость интерфейса» разъезжается по файлам. */
  --dur-fast: 0.15s;
  --dur-base: 0.24s;
  --dur-slow: 0.36s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Симметричная кривая для сворачивания: ease-out на закрытии съедает
     высоту в первые 30% времени — блок «схлопывается» рывком (Ayub 24.07). */
  --ease-in-out: cubic-bezier(0.45, 0, 0.22, 1);

  /* Типографика */
  --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-display-weight: 700;
  --font-display-tracking: -0.02em;
  --font-display-transform: none;
  --font-display-style: normal;
}

/* ─── Carbon Motorsport (прежний вид сайта) ──────────────────────────── */
[data-theme='carbon'] {
  --bg: #0a0a0b;
  --bg-alt: #0c0c0e;
  --surf: #0e0e11;
  --surf2: #1a1a1e;
  --surf3: #1d1d22;

  --line: #26262b;
  --line-soft: #1d1d22;
  --line2: #3a3a41;

  --fg-bright: #ffffff;
  --fg: #f1f5f9;
  --fg-dim: #e2e8f0;
  --fg-soft: #cbd5e1;
  --fg2: #94a3b8;
  --fg3: #8b8b93;
  --fg4: #7b8698;
  --fg5: #475569;

  --acc: #f94f0c;
  --acc-br: #fdba74;
  --acc-dim: rgba(249, 79, 12, 0.12);
  --acc-line: rgba(249, 79, 12, 0.35);
  /* Carbon — плоская заливка без градиента и свечения. */
  --acc-grad: #f94f0c;
  --acc-glow: none;


  --acc-rgb: 249, 79, 12;
  --ok-rgb: 34, 197, 94;
  --warn-rgb: 245, 158, 11;
  --gold-rgb: 251, 191, 36;
  --danger-rgb: 239, 68, 68;
  --rose-rgb: 244, 63, 94;
  --info-rgb: 96, 165, 250;
  --vio-rgb: 167, 139, 250;
  --indigo-rgb: 99, 102, 241;
  --mint-rgb: 19, 226, 154;
  --bg-rgb: 10, 10, 12;
  /* Полоса блика card-shimmer (CompatBand/секции тарифов): без токена
     градиент был невалиден и блик молча не работал (аудит 24.07). */
  --card-shimmer: rgba(255, 255, 255, 0.05);
  --teal-rgb: 45, 212, 191;
  --fg2-rgb: 148, 163, 184;
  --fg4-rgb: 123, 134, 152;

  --ok: #22c55e;
  --ok-fg: #86efac;
  --warn: #f59e0b;
  --warn-fg: #fde68a;
  --danger: #f87171;
  --danger-fg: #fca5a5;
  --info: #60a5fa;
  --info-fg: #93c5fd;
  --vio: #a78bfa;
  --vio-fg: #c4b5fd;
  --gold: #fbbf24;
  --gold-fg: #fcd34d;
  --teal: #5eead4;


  --danger-deep: #b91c1c;
  --indigo: #6366f1;
  --indigo-fg: #a5b4fc; /* светлый вариант для мелкого текста на тёмном (как --red-fg/--blue-fg) */
  --emerald: #34d399;
  --emerald-deep: #047857;
  --emerald-fg: #6ee7b7;
  --emerald-rgb: 52, 211, 153;
  --cyan-fg: #67e8f9;
  --cyan-rgb: 34, 211, 238;
  --acc-dark: #c2410c;
  --acc-soft: #fb923c;
  --acc-deep: #ea580c;
  --red: #dc2626;
  --red-deep: #991b1b;
  --red-fg: #fca5a5;
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --blue-fg: #93c5fd;
  --pink: #f472b6;
  --sky: #7dd3fc;
  --sky-rgb: 41, 182, 246;
  --mint: #13e29a;

  --sidebar-top: #0e0e11;

  /* Carbon — острые срезанные углы вместо скруглений. */
  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-pill: 0px;
  --mobile-nav-bottom: 0px;
  --mobile-nav-safe-padding: var(--chat-safe-bottom, env(safe-area-inset-bottom));
  --clip-sm: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --clip-lg: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --clip-notch: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

  --shadow-card: none;
  --shadow-lift: none;
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-sidebar: none;

  /* Carbon — диагональная штриховка вместо ambient-пятен. */
  --page-bg: repeating-linear-gradient(
    135deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 6px
  );

  --dur-fast: 0.1s;
  --dur-base: 0.16s;
  --dur-slow: 0.24s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.4, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.3, 1);

  --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
  --font-display-weight: 700;
  --font-display-tracking: -0.01em;
  --font-display-transform: uppercase;
  --font-display-style: italic;
}

/* Refined — дополнительная тема: существующие размеры и навигация сохраняются. */
[data-theme='refined'] {
  color-scheme: dark;
  --bg: #101214;
  --bg-alt: #16181b;
  --surf: #1a1d21;
  --surf2: #20242a;
  --surf3: #282d34;
  --sidebar-top: #16181b;
  --line: #30343b;
  --line-soft: #292d33;
  --line2: #454b55;
  --fg-bright: #f3f5f8;
  --fg: #edf0f4;
  --fg-dim: #dce1e8;
  --fg-soft: #c9d0da;
  --fg2: #b0b7c2;
  --fg3: #a3adba;
  --fg4: #a0aab8;
  --fg5: #626d7c;
  --fg2-rgb: 176, 183, 194;
  --fg4-rgb: 160, 170, 184;
  --bg-rgb: 16, 18, 20;
  --acc: #fa873e;
  --acc-br: #ffb582;
  --acc-rgb: 250, 135, 62;
  --acc-dim: rgba(250, 135, 62, 0.10);
  --acc-line: rgba(250, 135, 62, 0.32);
  --acc-grad: #fa873e;
  --on-acc: #251306;
  --acc-glow: none;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.18);
  --shadow-modal: 0 18px 48px rgba(0, 0, 0, 0.42);
  --shadow-sidebar: none;
  --page-bg: linear-gradient(transparent, transparent);
  --font-display-weight: 600;
  --font-display-tracking: -0.025em;
}

/* ═══ Смена темы идёт БЕЗ переходов — иначе тема не доезжает вообще ═══
   Замер в браузере (25.07): переход на свойстве, значение которого пришло
   из var(--…), при смене custom property не стартует, и свойство ЗАЛИПАЕТ
   на значении старой темы (проверено — и через 4 секунды). Залипает ровно
   то, что перечислено в transition:

     без transition                     — всё едет за темой
     transition: background-color,color — радиус едет, фон и текст залипли
     transition: all                    — залипло всё

   Отсюда симптом #826: ручка Toggle оставалась круглой на квадратной
   дорожке в Carbon. Сузили её до transition-[left] — вылечили один элемент,
   но не класс: в кабинете `transition-all` в ~40 местах, плюс .btn/.input.

   Поэтому на время подмены data-theme (applyTheme в useTheme.ts) на <html>
   висит data-theme-switching, и переходы выключены. Обычные hover/state
   анимации это не трогает — флаг живёт два кадра. */
html[data-theme-switching] *,
html[data-theme-switching] *::before,
html[data-theme-switching] *::after {
  transition: none !important;
}

/* Плавность самой смены темы НАМЕРЕННО убрана вместе с причиной: именно это
   правило (body/.card/.btn/.input) и морозило фон/текст этих элементов на
   старой теме. Переключение теперь мгновенное — зато полное. */

/* DRX uses the same component geometry and semantic status colours. */
[data-theme='drx'] {
  --bg: #080d20; --bg-alt: #0c1226;
  --surf: #10172b; --surf2: #182039; --surf3: #202943;
  --acc: #9464ff; --acc-br: #c4adff;
  --acc-rgb: 148, 100, 255;
  --acc-dim: rgba(148, 100, 255, .14);
  --acc-line: rgba(148, 100, 255, .35);
  --acc-grad: linear-gradient(120deg, #3155ff, #8238f5);
  --acc-glow: 0 6px 18px -6px rgba(130, 56, 245, .5);
}