/* ============================================================================
   TalentAI Design System — токены
   ----------------------------------------------------------------------------
   Единственный источник правды по цветам, радиусам, теням, типографике и
   отступам. Компоненты (ta-*) обязаны ссылаться на токены и НЕ хардкодить
   значения.

   ВАЖНО: значения в этом файле обязаны совпадать побайтово (по объявлениям)
   с service/crm/static/virtual_card/css/tokens.css — это единственный
   каталог CSS проекта, откуда 67 токенов уже используются на живых страницах.
   Задача 38 сделает сборку этого пакета производителем того файла, поэтому
   любое расхождение здесь молча подменит токены в проде.

   Происхождение значений:
     - цвета, серые, радиусы sm/md/lg, --shadow-card, --shadow-dropdown,
       --font-sans      -> static/virtual_card/css/vacancy-candidates.css
     - --radius-xl, --shadow-sm
                        -> static/virtual_card/css/landing.css
     - --shadow-modal, --c-success-border
                        -> static/virtual_card/css/tokens.css (актуальные
                           значения из Этапа 0; перенесены сюда как есть)
     - --ring-primary / --ring-danger
                        -> фактические фокус-кольца из существующих форм CRM
     - --transition-base -> самая частая длительность переходов в исходном CSS (0.15s)

   НОВОЕ (в исходных :root не объявлялось, значения были захардкожены по месту):
     --c-surface, --c-border, --c-success-dark, --c-warning-dark,
     --c-danger-border, --c-danger-dark, --c-danger-text,
     --radius-pill, --radius-full, вся шкала --fs-*, --fw-*, --sp-*.
     Task 23 (Alert) добавил --c-success-text, --c-warning-border,
     --c-warning-text — по тому же принципу (хардкод по месту -> токен),
     см. комментарии у деклараций ниже.

   ОСОЗНАННОЕ РАСХОЖДЕНИЕ с исходником:
     --c-warning-bg = #fef3c7 (в vacancy-candidates.css было #fffbeb).
   ========================================================================== */

:root {
  /* Нативные контролы (select и его выпадающий список, input, scrollbars,
     date/time-picker) следуют теме браузера. В тёмной теме переключается на
     dark ниже — иначе нативные дропдауны остаются белыми (CSS до них не достаёт). */
  color-scheme: light;

  /* === Бренд (primary) === */
  --c-primary: #6366f1;
  --c-primary-light: #818cf8;
  --c-primary-dark: #4f46e5;
  --c-primary-bg: #eef2ff;
  /* Текст на светлом бренд-фоне (напр. «своё» сообщение чата). В dark светлеет,
     чтобы читаться на затемнённом --c-primary-bg. Вынос хардкода #4338ca из ChatBubble. */
  --c-primary-text: #4338ca;

  /* === Успех === */
  --c-success: #10b981;
  --c-success-bg: #ecfdf5;
  --c-success-border: #a7f3d0;
  --c-success-dark: #059669;
  /* Дополнено для компонента Alert (Task 23). --c-success-text — из
     messages-блоков (ai_employee_list.html, integration_edit.html,
     ai_employee_edit.html). НЕ равен --c-success-dark (#059669): тот
     заметно светлее и хуже читается на фоне --c-success-bg.
     (--c-success-border из брифа Task 23 сюда не добавлялся — он уже
     существовал в этом файле с тем же значением #a7f3d0.) */
  --c-success-text: #065f46;

  /* === Предупреждение === */
  --c-warning: #f59e0b;
  --c-warning-bg: #fef3c7;
  /* Дополнено для компонента Alert (Task 23), значения из реальной вёрстки:
       --c-warning-border — client_import.html и :242 (единственный
         источник рамки warning в проекте);
       --c-warning-text   — ai_employee_list.html,
         custom_task_type_detail.html. */
  --c-warning-border: #fde68a;
  --c-warning-dark: #d97706;
  --c-warning-text: #92400e;

  /* === Опасность / ошибка === */
  --c-danger: #ef4444;
  --c-danger-bg: #fef2f2;
  --c-danger-border: #fecaca;
  --c-danger-dark: #dc2626;
  --c-danger-text: #991b1b;

  /* === Информация === */
  --c-info: #3b82f6;
  --c-info-bg: #eff6ff;
  /* Дополнено для info-панелей (AI-блок в карточке кандидата). Светлые значения
     совпадают с исходной небесной палитрой блока; в dark светлеют/затемняются. */
  --c-info-border: #bae6fd;
  --c-info-text: #0c4a6e;

  /* === Нейтральная шкала === */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* === Поверхности и границы === */
  --c-surface: #ffffff;
  --c-border: var(--gray-200);

  /* === Семантические роли (тема-зависимые) ===
     Введены для тёмной темы: смысловые имена для каркаса и нового кода вместо
     прямых --gray-*. В light ссылаются на текущие тона; в dark переворачиваются
     вместе со шкалой --gray-* (см. блок «Тёмная тема» ниже), отдельного
     переопределения не требуют. */
  --c-bg: var(--gray-50);             /* фон страницы */
  --c-text: var(--gray-900);          /* основной текст */
  --c-text-muted: var(--gray-500);    /* вторичный текст */
  --c-text-subtle: var(--gray-400);   /* подсказки, placeholder */
  --c-backdrop: rgba(15, 23, 42, 0.5);/* подложка модалок (Modal.css) */
  --c-overlay: rgba(255, 255, 255, 0.6); /* полупрозрачный скрим поверх контента (page-loader) */

  /* === Индикация загрузки ===
     Скелетон — плейсхолдер формы будущего контента: заливка на тон заметнее
     поверхности, по ней пробегает блик. Заливка ссылается на --gray-* и
     переворачивается вместе со шкалой сама; блик переопределяется в блоках
     тёмной темы руками — после инверсии --gray-100 оказывается ТЕМНЕЕ
     заливки и вместо блика получилась бы дыра в цвет поверхности. */
  --c-skeleton: var(--gray-200);
  --c-skeleton-hi: var(--gray-100);

  /* === Дополнительные акцентные тона ===
     Вынесены из хардкода компонентов (Avatar/Badge/Dot). */
  --c-purple: #8b5cf6;
  --c-purple-bg: #f3e8ff;
  --c-purple-text: #7c3aed;
  --c-orange: #f97316;
  --c-sky: #0ea5e9;        /* акцент «входящие» (sipuni-статистика) */
  --c-pink-bg: #fce7f3;    /* бейдж источника hh (поиск кандидатов) */
  --c-pink-text: #9d174d;

  /* === Радиусы === */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* === Тени === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-dropdown: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-modal: 0 8px 24px rgba(0,0,0,0.12);
  /* Тост лежит на цветной заливке и отделяется от фона только тенью.
     Значение светлой темы — литерал из task-list-modern.css, перенесён
     сюда как есть, чтобы вид на светлой теме не поехал. */
  --shadow-toast: 0 4px 12px rgba(0,0,0,0.15);
  /* Наведение на всплывающее уведомление. Отдельный токен нужен потому, что
     тень при наведении обязана быть СИЛЬНЕЕ базовой (--shadow-modal), а
     ближайший по смыслу --shadow-dropdown в светлой теме слабее — эффект
     наведения на нём переворачивается. Значение светлой темы — литерал из
     notifications.css, перенесён как есть. */
  --shadow-popup-hover: 0 8px 28px rgba(0,0,0,0.18);

  /* === Фокус-кольца (используются в :focus-visible) === */
  --ring-primary: 0 0 0 2px rgba(99,102,241,0.15);
  --ring-danger: 0 0 0 2px rgba(220,38,38,0.15);

  /* === Типографика: семейство === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* === Типографика: кегли === */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;

  /* === Типографика: начертания === */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Отступы === */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;

  /* === Анимация === */
  --transition-base: 0.15s;
  --dur-spin: 0.7s;
  --dur-shimmer: 1.2s;

  /* === Слои ===
     Лестница НЕ переставляет ничего: числа взяты с живых правил проекта
     (page-loader 9998 и .toast-container 9999 — task-list-modern.css,
     .ta-modal 9999 — Modal.css, .notif-popup 10000 — notifications.css).
     Смысл записи в том, чтобы новый слой заводился строкой здесь, а не
     числом, подобранным на глаз в правиле компонента. Тост и окно стоят
     на одной ступени намеренно: так это работает сегодня, и разводить их
     в этой задаче — менять порядок наложения на всех страницах разом. */
  --z-loader: 9998;
  --z-modal: 9999;
  --z-toast: 9999;
  --z-popup: 10000;

  /* === Мобильный ввод === */
  /* Минимальная цель для пальца. Применяется только ниже 767.98px:
     на десктопе плотная раскладка (21–32px) остаётся как есть. */
  --touch-target: 44px;
}

/* ============================================================================
   ТЁМНАЯ ТЕМА
   ----------------------------------------------------------------------------
   Стратегия: light-first. Базовый :root выше — светлая палитра. Тёмная тема
   задаётся переопределением переменных в двух блоках:
     1) @media (prefers-color-scheme: dark) — авто по системной теме, но только
        если пользователь НЕ выбрал светлую вручную (:not([data-theme="light"]));
     2) :root[data-theme="dark"] — ручной выбор тёмной, перебивает систему.
   Значения в обоих блоках идентичны.

   Ключевой приём — инверсия нейтральной шкалы --gray-50..900. Компоненты и
   инлайновые стили ссылаются на --gray-* и как на текст, и как на фон, поэтому
   разворот шкалы автоматически перекрашивает подавляющее большинство мест.
   Семантические роли (--c-bg/--c-text/--c-text-muted/--c-text-subtle) и --c-border
   заданы ссылками на --gray-* и переворачиваются вместе со шкалой — их отдельно
   переопределять не нужно. Правим только «литеральные» токены: поверхность,
   фоны/текст статусов, тени, подложку, акцентные тинты, бренд.

   ЛОКАЛИЗАЦИЯ: тёмная тема живёт только на модерн-поверхности (страницы на
   base_modern.html). Легаси-layout'ы (Bootstrap/AdminLTE) и landing форсят на
   <html> data-theme="light" и остаются светлыми даже при системной тёмной теме.

   ВАЖНО: значения в блоках light-first — validate-conventions (first-wins) берёт
   светлые; parity-тест сравнивает src↔static (идентичны после npm run build).
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;   /* нативные контролы (select/option-попап/scrollbars) → тёмные */
    /* инверсия нейтральной шкалы */
    --gray-50:  #0f172a;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;

    /* поверхности */
    --c-surface: #1e293b;
    --c-backdrop: rgba(0, 0, 0, 0.6);
    --c-overlay: rgba(15, 23, 42, 0.6);

    /* бренд */
    --c-primary: #818cf8;
    --c-primary-bg: rgba(99, 102, 241, 0.16);
    --c-primary-text: #c7d2fe;

    /* статусы: затемнённые фоны, осветлённый текст */
    --c-success-bg: rgba(16, 185, 129, 0.15);
    --c-success-border: rgba(16, 185, 129, 0.35);
    --c-success-text: #6ee7b7;
    --c-warning-bg: rgba(245, 158, 11, 0.15);
    --c-warning-border: rgba(245, 158, 11, 0.35);
    --c-warning-text: #fcd34d;
    --c-danger-bg: rgba(239, 68, 68, 0.15);
    --c-danger-border: rgba(239, 68, 68, 0.35);
    --c-danger-text: #fca5a5;
    --c-info-bg: rgba(59, 130, 246, 0.15);
    --c-info-border: rgba(59, 130, 246, 0.35);
    --c-info-text: #93c5fd;

    /* акцентные тинты */
    /* блик скелетона: после инверсии шкалы светлее заливки --c-skeleton */
    --c-skeleton-hi: var(--gray-300);

    --c-purple-bg: rgba(139, 92, 246, 0.16);
    --c-purple-text: #c4b5fd;
    --c-sky: #38bdf8;
    --c-pink-bg: rgba(219, 39, 119, 0.16);
    --c-pink-text: #f9a8d4;

    /* тени: сильнее на тёмном */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-popup-hover: 0 8px 28px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;   /* нативные контролы (select/option-попап/scrollbars) → тёмные */
  /* инверсия нейтральной шкалы */
  --gray-50:  #0f172a;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;

  /* поверхности */
  --c-surface: #1e293b;
  --c-backdrop: rgba(0, 0, 0, 0.6);
  --c-overlay: rgba(15, 23, 42, 0.6);

  /* бренд */
  --c-primary: #818cf8;
  --c-primary-bg: rgba(99, 102, 241, 0.16);
  --c-primary-text: #c7d2fe;

  /* статусы: затемнённые фоны, осветлённый текст */
  --c-success-bg: rgba(16, 185, 129, 0.15);
  --c-success-border: rgba(16, 185, 129, 0.35);
  --c-success-text: #6ee7b7;
  --c-warning-bg: rgba(245, 158, 11, 0.15);
  --c-warning-border: rgba(245, 158, 11, 0.35);
  --c-warning-text: #fcd34d;
  --c-danger-bg: rgba(239, 68, 68, 0.15);
  --c-danger-border: rgba(239, 68, 68, 0.35);
  --c-danger-text: #fca5a5;
  --c-info-bg: rgba(59, 130, 246, 0.15);
  --c-info-border: rgba(59, 130, 246, 0.35);
  --c-info-text: #93c5fd;

  /* акцентные тинты */
  /* блик скелетона: после инверсии шкалы светлее заливки --c-skeleton */
  --c-skeleton-hi: var(--gray-300);

  --c-purple-bg: rgba(139, 92, 246, 0.16);
  --c-purple-text: #c4b5fd;
  --c-sky: #38bdf8;
  --c-pink-bg: rgba(219, 39, 119, 0.16);
  --c-pink-text: #f9a8d4;

  /* тени: сильнее на тёмном */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-popup-hover: 0 8px 28px rgba(0, 0, 0, 0.7);
}