/**
 * Единый источник значений оформления.
 *
 * Раньше :root был объявлен в 14 файлах независимо, а #0066ff встречался
 * 26 раз захардкоженным — поменять фирменный цвет означало править 19 файлов.
 * Всё, что задаёт вид интерфейса, теперь живёт здесь.
 *
 * Подключается первым, до остальных стилей.
 */

:root {
  color-scheme: light;

  /* ---------- Фирменный цвет ----------
     Синий сохранён, но чуть уведён от чистого #0066ff: на больших плоскостях
     он звенел и утомлял глаз за рабочий день. */
  --brand-50:  #eef4ff;
  --brand-100: #dde8ff;
  --brand-200: #bcd0ff;
  --brand-300: #8db0ff;
  --brand-400: #5b8bfb;
  --brand-500: #2f6bf0;
  --brand-600: #1b52d4;
  --brand-700: #1642aa;

  /* ---------- Нейтральные ----------
     С лёгкой тёплой подмешкой вместо голубоватых: холодный серый в CRM
     читается как «системное сообщение», тёплый — как бумага. */
  --ink-900: #16181d;
  --ink-800: #23262e;
  --ink-700: #3a3f4a;
  --ink-600: #565c69;
  --ink-500: #767d8b;
  --ink-400: #9aa1ad;
  --ink-300: #c3c8d1;
  --ink-200: #e0e3e9;
  --ink-100: #eef0f4;
  --ink-50:  #f6f7fa;
  --paper:   #ffffff;

  /* ---------- Семантика ---------- */
  --success: #128a4b;
  --success-bg: #e6f6ed;
  --warning: #a86a00;
  --warning-bg: #fdf0da;
  --danger: #c8372a;
  --danger-bg: #fbe9e7;
  --info: var(--brand-600);
  --info-bg: var(--brand-50);
  /* Смысловой цвет как цвет текста. В светлой теме совпадает с заливкой,
     в тёмной — светлее (см. ниже). Заливки остаются на --danger/--success. */
  --danger-text: var(--danger);
  --success-text: var(--success);
  --warning-text: var(--warning);

  /* ---------- Роли ----------
     Компоненты обращаются к ролям, а не к палитре напрямую:
     так тёмная тема получается заменой одного блока. */
  --surface: var(--paper);
  --surface-raised: var(--paper);
  --surface-sunken: var(--ink-50);
  --surface-hover: var(--ink-100);
  --bg: var(--ink-50);

  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-faint: var(--ink-400);
  --text-on-brand: #ffffff;

  --border: var(--ink-200);
  --border-strong: var(--ink-300);

  --accent: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft: var(--brand-50);

  /* ---------- Совместимость со старым кодом ----------
     19 файлов уже ссылаются на эти имена. Переопределяем их здесь,
     чтобы правка палитры доходила до всех страниц разом. */
  --primary-color: var(--accent);
  --primary-light: var(--brand-50);
  --primary-dark: var(--brand-700);
  --bg-color: var(--bg);
  --text-color: var(--text);
  --text-light: var(--text-muted);
  --gray-light: var(--ink-100);
  --gray-medium: var(--ink-200);
  --gray-dark: var(--ink-400);
  --error-color: var(--danger);
  --success-color: var(--success);
  --warning-color: var(--warning);

  /* ---------- Подложки и наложения ----------
     Фирменные полупрозрачные подсветки: в тёмной теме та же альфа
     выглядит грязью, поэтому значения переопределяются отдельно. */
  --tint-brand-08: rgba(47, 107, 240, .08);
  --tint-brand-10: rgba(47, 107, 240, .10);
  --tint-brand-15: rgba(47, 107, 240, .15);
  --tint-brand-20: rgba(47, 107, 240, .20);
  --tint-brand-30: rgba(47, 107, 240, .30);
  --tint-danger-30: rgba(200, 55, 42, .30);
  --tint-success-30: rgba(18, 138, 75, .30);

  --overlay-soft: rgba(22, 24, 29, .10);
  --overlay: rgba(22, 24, 29, .50);
  --overlay-strong: rgba(22, 24, 29, .70);
  --overlay-blackout: rgba(22, 24, 29, .95);

  /* ---------- Шаг сетки ----------
     Кратно 4: любые отступы берутся отсюда, а не подбираются на глаз. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Скругления ----------
     24px на кнопках выглядели пузырём; крупный радиус оставлен карточкам. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --radius-large: var(--radius-lg);
  --radius-medium: var(--radius-md);
  --radius-small: var(--radius-sm);

  /* ---------- Тени ----------
     Нейтральные вместо синих: цветная тень на цветном фоне даёт грязь. */
  --shadow-xs: 0 1px 2px rgba(22, 24, 29, .06);
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, .06), 0 2px 8px rgba(22, 24, 29, .05);
  --shadow-md: 0 2px 4px rgba(22, 24, 29, .06), 0 8px 24px rgba(22, 24, 29, .08);
  --shadow-lg: 0 4px 8px rgba(22, 24, 29, .07), 0 16px 40px rgba(22, 24, 29, .12);
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  /* ---------- Типографика ---------- */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --futuristic-font: var(--font-sans);
  --logo-font: 'Grandstander', var(--font-sans);

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* ---------- Движение ----------
     Быстрее прежних 300ms: интерфейс, которым пользуются весь день,
     не должен заставлять ждать анимацию. */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
  --transition: all var(--duration) var(--ease);

  /* ---------- Слои ----------
     Было 24 разных значения вплоть до 999999 — каждый компонент назначал себе
     число «лишь бы поверх». Теперь порядок задаётся здесь, и его видно целиком.

     Значения начинаются выше 1000: столько у шапки и нижней панели в base.css,
     и всё, что должно их перекрывать, обязано быть больше. */
  --z-base: 1;
  --z-raised: 10;            /* карточки при наведении */
  --z-sticky: 1000;          /* шапка, нижняя панель */
  --z-dropdown: 1100;        /* выпадающие списки, подсказки поиска */
  --z-tooltip: 1150;         /* подсказки поверх выпадающих списков */
  --z-backdrop: 1200;        /* затемнение под модальным окном */
  --z-modal: 1300;           /* модальные окна, выдвижные панели */
  --z-fullscreen: 1400;      /* просмотр изображений во весь экран */
  --z-toast: 1500;           /* уведомления поверх содержимого */
  --z-loader: 1600;          /* заставка загрузки перекрывает всё */
  --z-skip-link: 1700;       /* ссылка для клавиатуры — доступна всегда */

  /* ---------- Нижняя навигация ----------
     Высота мобильной панели навигации. На десктопе панель скрыта, поэтому 0.
     Всё, что прижато к низу экрана, отступает на эту величину и не уезжает
     под панель: раньше кнопки групповых действий оказывались под ней. */
  --bottom-nav-height: 0px;

  /* Системный отступ под полоску жеста. Через токен, а не env() на месте:
     в обычном браузере он равен нулю, и проверить вид «с экрана Домой»
     можно, только подменив его. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Шторка и вырез камеры сверху — в приложении «на экране Домой». */
  --safe-top: env(safe-area-inset-top, 0px);

  /* Сколько нижней панели отдать под полоску жеста. На экране «Домой» iOS
     сообщает 34px, а сама полоска занимает нижние ~13px. Полный отступ
     поднимал значки на 30px выше, чем в браузере, — оставляем зазор над
     полоской и не больше. В браузере, где отступа нет, выходит те же 4px. */
  --bottom-nav-inset: max(calc(var(--safe-bottom) - 14px), 4px);

  /* Матовая кнопка «назад»: полупрозрачная поверх любого фона. */
  --nd-back-bg: rgba(255, 255, 255, .62);
  --nd-back-bg-hover: rgba(255, 255, 255, .82);
  --nd-back-border: rgba(22, 24, 29, .10);
  /* Значки на матовых кнопках поверх фото: сердце, стрелки слайдера. */
  --nd-back-icon: var(--ink-900);
  /* Значки-картинки монохромные: в светлой теме чёрные, в тёмной белые.
     Без этого filter: brightness(0) красил стрелку в чёрный всегда — на
     тёмном фоне её просто не было видно. */
  --icon-filter: brightness(0) saturate(100%);

  /* ---------- Прочее ---------- */
  --focus-ring: 0 0 0 3px var(--brand-200);
  --tap-target: 44px;   /* минимальная зона нажатия на телефоне */
  --header-height: 64px;
}

/* ==========================================
   Тёмная тема

   Работает двумя путями:
   1) media-запрос ниже — для системной настройки и на случай, если JS выключен;
      исключение [data-theme='light'] нужно, чтобы явный выбор светлой темы
      побеждал тёмную систему.
   2) атрибут data-theme='dark' — им управляет theme.js, когда пользователь
      выбрал тему руками.

   Обе ветки задают один и тот же набор ролей, а компоненты обращаются только
   к ролям — поэтому страницы переключаются целиком, без правок в их стилях.
   ========================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --nd-back-bg: rgba(44, 48, 56, .66);
    --nd-back-bg-hover: rgba(60, 65, 74, .82);
    --nd-back-border: rgba(255, 255, 255, .12);
    --nd-back-icon: #ffffff;
    --icon-filter: brightness(0) saturate(100%) invert(1);
    color-scheme: dark;
    --surface: #1a1d23;
    --surface-raised: #22262e;
    --surface-sunken: #14161b;
    --surface-hover: #2a2f38;
    --bg: #101216;
    --text: #e8eaee;
    --text-muted: #a2a9b6;
    --text-faint: #737b88;
    --border: #2e333c;
    --border-strong: #3d444f;
    --accent: var(--brand-400);
    --accent-hover: var(--brand-300);
    --accent-soft: #17233c;
    --primary-light: #17233c;
    --gray-light: #22262e;
    --gray-medium: #2e333c;
    --gray-dark: #737b88;
    --success-bg: #12291d;
    /* Текст смысловых цветов светлее заливки: те же --danger и
       --success текстом на тёмной поверхности давали 3.2:1 и 3.8:1,
       а заливкой под белым текстом держат 5.2:1 и 4.4:1 — их не трогаем. */
    --danger-text: #f47067;
    --success-text: #57ab5a;
    --warning-text: #d29922;
    /* Было светло-голубым --brand-50: плашка светилась в тёмной теме. */
    --info-bg: #17233c;
    --warning-bg: #2e2410;
    --danger-bg: #331a17;
    --focus-ring: 0 0 0 3px rgba(91, 139, 251, .45);
    --tint-brand-08: rgba(91, 139, 251, .12);
    --tint-brand-10: rgba(91, 139, 251, .14);
    --tint-brand-15: rgba(91, 139, 251, .20);
    --tint-brand-20: rgba(91, 139, 251, .26);
    --tint-brand-30: rgba(91, 139, 251, .34);
    --tint-danger-30: rgba(232, 136, 124, .30);
    --tint-success-30: rgba(111, 189, 148, .30);
    --overlay-soft: rgba(0, 0, 0, .30);
    --overlay: rgba(0, 0, 0, .65);
    --overlay-strong: rgba(0, 0, 0, .80);
    --overlay-blackout: rgba(0, 0, 0, .96);
  }
}

:root[data-theme='dark'] {
  --nd-back-bg: rgba(44, 48, 56, .66);
  --nd-back-bg-hover: rgba(60, 65, 74, .82);
  --nd-back-border: rgba(255, 255, 255, .12);
  --nd-back-icon: #ffffff;
  --icon-filter: brightness(0) saturate(100%) invert(1);
  color-scheme: dark;
  --surface: #1a1d23;
  --surface-raised: #22262e;
  --surface-sunken: #14161b;
  --surface-hover: #2a2f38;
  --bg: #101216;
  --text: #e8eaee;
  --text-muted: #a2a9b6;
  --text-faint: #737b88;
  --border: #2e333c;
  --border-strong: #3d444f;
  --accent: var(--brand-400);
  --accent-hover: var(--brand-300);
  --accent-soft: #17233c;
  --primary-light: #17233c;
  --gray-light: #22262e;
  --gray-medium: #2e333c;
  --gray-dark: #737b88;
  --success-bg: #12291d;
  /* Текст смысловых цветов светлее заливки: те же --danger и
     --success текстом на тёмной поверхности давали 3.2:1 и 3.8:1,
     а заливкой под белым текстом держат 5.2:1 и 4.4:1 — их не трогаем. */
  --danger-text: #f47067;
  --success-text: #57ab5a;
  --warning-text: #d29922;
  /* Было светло-голубым --brand-50: плашка светилась в тёмной теме. */
  --info-bg: #17233c;
  --warning-bg: #2e2410;
  --danger-bg: #331a17;
  --focus-ring: 0 0 0 3px rgba(91, 139, 251, .45);

  --tint-brand-08: rgba(91, 139, 251, .12);
  --tint-brand-10: rgba(91, 139, 251, .14);
  --tint-brand-15: rgba(91, 139, 251, .20);
  --tint-brand-20: rgba(91, 139, 251, .26);
  --tint-brand-30: rgba(91, 139, 251, .34);
  --tint-danger-30: rgba(232, 136, 124, .30);
  --tint-success-30: rgba(111, 189, 148, .30);

  /* На тёмном фоне затемнять нечего — наложения делаем плотнее. */
  --overlay-soft: rgba(0, 0, 0, .30);
  --overlay: rgba(0, 0, 0, .65);
  --overlay-strong: rgba(0, 0, 0, .80);
  --overlay-blackout: rgba(0, 0, 0, .96);
}

/* Пользователь просил не анимировать — уважаем это везде. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration: 1ms;
    --transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}