/* ============================================================================
   ЕДИНЫЙ ТОКЕН-СЛОЙ InfraSafe
   ============================================================================

   Источник истины по цвету, типографике и метрикам для ВСЕХ поверхностей:
   карта, лендинги, вход, админка. Подключается ПЕРВЫМ на каждой странице,
   до любого другого стиля.

   Значения ниже перенесены из `css/style.css` (блоки :root и .dark) без
   изменений — этап 0 не меняет вид ни на одном хосте. Новое здесь только то,
   чего раньше не существовало и что пока никем не используется:
   шкала --st-*, --accent-ink и семейства шрифтов.

   ПОВЕРХ этого файла страница подключает ПОСЛЕДНИМ `/brand/brand.css` —
   каталог бренда, который выбирает nginx (механизм описан в
   public/brand-default/brand.css).
   Бренд переопределяет токены; сам этот файл остаётся нейтральным.

   Правило, ради которого заведена отдельная шкала статусов: цвет акцента
   принадлежит интерактиву (кнопки, ссылки, фокус, активная навигация), а
   состояние объекта описывается только через --st-*. Пересечение этих двух
   наборов обесценивает и то и другое — подробности и наглядное сравнение в
   docs/brand/infrasafe-profk-preview.html, раздел 02.
   ========================================================================== */

:root {
  /* Основные цвета - светлая тема */
  --font-size: 14px;
  --background: #F4F7FA;
  --foreground: #1A1D2B;
  --card: rgba(255, 255, 255, 0.7);
  --card-foreground: #1A1D2B;
  --popover: rgba(255, 255, 255, 0.95);
  --popover-foreground: #1A1D2B;
  --primary: #1A1D2B;
  --primary-foreground: #ffffff;
  --secondary: #E0E5EC;
  --secondary-foreground: #1A1D2B;
  --muted: #E0E5EC;
  --muted-foreground: #717182;
  --accent: #00BFA5;
  --accent-foreground: #ffffff;
  --destructive: #EF4444;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --input: transparent;
  --input-background: rgba(255, 255, 255, 0.5);
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #00BFA5;
  --radius: 1rem;
  --sidebar: rgba(244, 247, 250, 0.95);
  --sidebar-foreground: #1A1D2B;
  --sidebar-primary: #00BFA5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(0, 191, 165, 0.1);
  --sidebar-accent-foreground: #1A1D2B;
  --sidebar-border: rgba(0, 0, 0, 0.05);
  --sidebar-ring: #00BFA5;

  /* Цвета для статусов */
  --color-green-500: #10B981;
  --color-yellow-500: #F59E0B;
  --color-red-500: #EF4444;
  --color-blue-500: #3B82F6;
  --color-gray-400: #9CA3AF;

  /* Spacing */
  --spacing: 0.25rem;

  /* Настройки футера: используем переменные, чтобы цвета менялись вместе с темой */
  --footer-background: linear-gradient(to right, #e6eef5, #ced9e4);
  --footer-foreground: #0F1E25;
  --footer-link-color: #0F1E25;
  --footer-link-hover: #00BFA5;
  --footer-button-background: rgba(0, 0, 0, 0.05);
  --footer-button-foreground: #0F1E25;
  --footer-logo-filter: none;
  --footer-logo-filter-hover: brightness(0.85);

  /* ---------------------------------------------------------------- НОВОЕ --
     Ниже — токены, которых в проекте не было. Ни на что не влияют, пока их
     никто не использует; вводятся здесь, чтобы бренд и последующие этапы
     переопределяли готовые имена, а не изобретали их по ходу.
     -------------------------------------------------------------------- */

  /* Акцент как ТЕКСТ. Отдельно от --accent, потому что насыщенная заливка на
     светлом фоне почти никогда не проходит по контрасту: #00BFA5 на #F4F7FA
     даёт ~2.2:1. Для заливок это неважно, для текста — дисквалификация. */
  --accent-ink: #00897B;
  --accent-hover: #00A896;

  /* Шкала состояний объекта.

     У НЕЙТРАЛЬНОГО бренда норма остаётся сплошной зелёной точкой — как на
     карте infrasafe.uz сегодня. Правило «норма без заливки» (кольцо вместо
     точки) — решение бренда PRoFK, где акцент почти совпадает с зелёным
     «всё в порядке»; там --st-ok объявлен прозрачным, и public/utils/
     brandTokens.js рисует кольцо. Менять это здесь значило бы перекроить
     карту оператору на другом хосте.

     Побочно выправлена давняя рассинхронизация: легенда рисовала норму
     цветом #4caf50, а сам маркер — ключевым словом `green` (#008000).
     Теперь оба берут одно значение. */
  --st-ok: #4caf50;
  --st-ok-ring: rgba(26, 29, 43, 0.35);
  /* Анонимный посетитель видит только факт «оборудование стоит», без
     состояния. Отдельный ключ, чтобы не путать с «нет данных». */
  --st-public: #607d8b;
  /* Верхняя ступень предупреждения — для шкал величины (загрузка
     трансформатора), где между «средняя» и «высокая» нужен видимый шаг. */
  --st-warn-strong: #FF9800;
  /* Обводка маркера на карте. Отдельно от --card: карточка в светлой теме
     полупрозрачна, а контур маркера должен быть сплошным, иначе тайлы
     просвечивают сквозь него и точка теряет форму. */
  --marker-stroke: #ffffff;

  /* Имя площадки в плашке на карте. Текстовый токен, а не строка в коде:
     public/script.js один на оба хоста, и захардкоженное имя показалось бы
     на той площадке, которой оно не принадлежит. Читается через
     BrandTokens.text() — он снимает кавычки. */
  --brand-name: "InfraSafe";

  /* Подпись в шапке КАРТЫ (frontend-html/index.html). Только там: на
     about/contacts/documentation заголовок остаётся в разметке как обычный
     текст. Значение здесь совпадает с прежней версткой посимвольно, поэтому
     нейтральная площадка не меняется. */
  --brand-title: "INFRASAFE - МОНИТОРИНГ ИНФРАСТРУКТУРЫ";
  --st-warn: #F59E0B;
  --st-crit: #EF4444;
  --st-info: #3B82F6;
  --st-offline: #9CA3AF;
  /* Единственное место, где зелёный уместен как СОСТОЯНИЕ: всплывающее
     подтверждение выполненного действия. Оно живёт секунды и говорит об
     исходе действия, а не о состоянии объекта на карте. Держится отдельно
     от --accent, чтобы кнопка и подтверждение не сливались в один цвет. */
  --st-success: #4CAF50;

  /* Компоненты тех же цветов, без обёртки rgb(). Нужны там, где цвет берётся
     с прозрачностью: `rgba(var(--accent-rgb), .12)`. В style.css таких мест
     было 60+, и каждое было записано литералом — то есть оставалось бирюзовым
     при любой смене бренда. Одна переменная закрывает их все.
     Держать в синхроне с --accent / --st-warn / --st-crit. */
  --accent-rgb: 0, 191, 165;
  --accent-alt-rgb: 60, 228, 60;
  --warn-rgb: 245, 158, 11;
  --crit-rgb: 239, 68, 68;

  /* Чертёжная подложка. У нейтрального бренда её НЕТ: прозрачный цвет
     означает, что градиенты рисуются, но не видны, и infrasafe.uz остаётся
     без изменений. Видимое значение задаёт только бренд, которому она нужна. */
  --grid-ink: transparent;
  --grid-step: 28px;

  /* Отделка поверхностей. Вынесена из .neomorph, чтобы бренд мог заменить
     неоморфизм плоскими карточками, не трогая ни одного правила компонента.
     Значения здесь — ровно те, что были захардкожены в .neomorph. */
  --surface-shadow:
    6px 6px 12px rgba(163, 177, 198, 0.3),
    -6px -6px 12px rgba(255, 255, 255, 0.5);
  --surface-border: 1px solid rgba(255, 255, 255, 0.3);
  --surface-blur: blur(10px);
  --header-border: 1px solid rgba(255, 255, 255, 0.3);

  /* ------------------------------------------- ПОВЕРХНОСТИ И БЛОКИ ----
     Всё ниже было захардкожено в правилах компонентов css/style.css и не
     реагировало на смену темы или бренда. Значения перенесены как есть. */

  /* Боковая панель слоёв и статусов. В светлой теме это белые плашки, в
     тёмной — отдельная тёмно-синяя палитра, заведённая когда-то вручную. */
  --panel-surface: #ffffff;

  /* Баннер «тестовые данные» */
  --banner-bg: linear-gradient(135deg, var(--st-warn) 0%, var(--st-crit) 100%);
  --banner-ink: #ffffff;

  /* Маркетинговые блоки лендингов about/documentation */
  --hero-ink: #ffffff;
  --hero-dot: #3CE43C;
  --hero-btn-ink: #0F1E25;
  --hero-btn-hover: #00BFA5;
  --hero-bg:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb), 0.55) 0%, rgba(var(--accent-rgb), 0) 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(var(--accent-alt-rgb), 0.35) 0%, rgba(var(--accent-alt-rgb), 0) 60%),
    linear-gradient(135deg, #0F1E25 0%, #133340 50%, #0F1E25 100%);
  --cta-bg:
    radial-gradient(120% 200% at 50% 0%, rgba(var(--accent-rgb), 0.45) 0%, rgba(var(--accent-rgb), 0) 60%),
    linear-gradient(135deg, #133340 0%, #0F1E25 100%);

  /* Цветные плитки-иконки лендингов */
  --icon-power:  linear-gradient(135deg, #F59E0B, #EF4444);
  --icon-water:  linear-gradient(135deg, #3B82F6, #06B6D4);
  --icon-safety: linear-gradient(135deg, #8B5CF6, #EC4899);
  --icon-map:    linear-gradient(135deg, #00BFA5, #10B981);
  --icon-user:   linear-gradient(135deg, #00BFA5, #10B981);
  --icon-admin:  linear-gradient(135deg, #8B5CF6, #3B82F6);
  --icon-dev:    linear-gradient(135deg, #1A1D2B, #475569);

  /* Бейджи статуса раздела документации */
  --badge-soon-ink: #B45309;
  --badge-ondemand-ink: #047857;

  /* Popup карты. Он намеренно остаётся светлым в обеих темах — читаемость
     поверх тайлов важнее консистентности с оболочкой. */
  --popup-surface: #ffffff;
  --popup-ink: #333333;
  --popup-ink-strong: #1A1D2B;
  --popup-ink-muted: #757575;
  --popup-ink-muted-hover: #585858;
  --popup-heading: #1a202c;
  --popup-body: #2d3748;
  --popup-danger: #c53030;

  /* Панель слоёв карты (public/css/map-layers.css). Своя серая шкала в стиле
     Chakra, не пересекавшаяся ни с чем. Здесь только повторяющийся хром;
     доменные цвета — коричневые трубы отопления, синие водные линии —
     намеренно оставлены литералами: это кодировка данных, а не оформление,
     и менять её вместе с брендом нельзя. */
  --panel-divider: #e2e8f0;
  --layers-heading: #1f2933;

  /* Показания мощности в popup */
  --power-label: #666666;
  --power-value: #333333;
  --power-total: #1A1D2B;
  --power-title: #00BFA5;

  /* Перегрузка трансформатора */
  --overload-surface: #FEE;
  --overload-bg: linear-gradient(135deg, #FEE 0%, #FDD 100%);
  --overload-border: #EF4444;
  --overload-ink: #C00;

  /* Мигание ячеек в popup */
  --blink-warn-ink: #F59E0B;
  --blink-crit-ink: #EF4444;

  /* ⚠️ Имя @keyframes blink-red объявлено ДВАЖДЫ: в css/style.css и в
     css/map-components.css. Имена анимаций глобальны, а map-components.css
     подключается позже — значит на карте побеждает его версия, и реальные
     цвета мигания там #ff0000/#ff6666, а не --blink-crit-ink выше.
     Здесь эти цвета сохранены как есть, чтобы ничего не сдвинуть. Слияние
     двух объявлений в одно — отдельная задача: сейчас у них разные цвета,
     и «починка» изменила бы вид карты. */
  --blink-map-crit: #ff0000;
  --blink-map-crit-soft: #ff6666;

  /* Кнопка авторизации на карте в состоянии «вошёл» */
  --auth-ok: #34a236;

  /* Ошибка формы входа на карте */
  --form-error: #dc3545;
  --form-error-bg: rgba(220, 53, 69, 0.1);

  /* Гарнитуры. Нейтральный бренд остаётся на Inter, как сейчас. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* --------------------------------------------------- АЛИАСЫ АДМИНКИ ----
     `public/css/admin.css` исторически завёл собственный :root с другими
     именами. Здесь они сведены к каноническим токенам, чтобы на этапе 2
     достаточно было удалить :root в admin.css — переменные подхватятся
     отсюда и начнут слушаться бренда.

     ВАЖНО: пока :root в admin.css существует, он объявлен ПОЗЖЕ (страница
     подключает admin.css после tokens.css) и выигрывает в каскаде. То есть
     сейчас эти алиасы намеренно неактивны, и вид админки не меняется.

     Собственный :root в admin.css удалён на этапе 2 — эти имена теперь
     единственный источник, и админка слушается бренда. */
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-secondary: var(--st-info);
  --color-secondary-hover: var(--st-info);
  --color-danger: var(--destructive);
  --color-danger-hover: var(--destructive);
  --color-warning: var(--st-warn);
  --color-text: var(--foreground);
  --color-text-light: var(--muted-foreground);
  /* Сплошной белый, а не var(--card): у админки нет тёмной темы, а
     полупрозрачная карточка на таблицах читается хуже сплошной. */
  --color-surface: #ffffff;
  --color-background: var(--background);
  --color-border: var(--border);
  --color-hover: var(--muted);
  --color-muted: var(--st-offline);

  /* Бейджи статусов и серьёзности в админке. В admin.css они были помечены
     комментарием «semantic colors — intentionally not in :root variables»:
     намерение понятное, но следствие — единственный экран, который не
     реагирует ни на тему, ни на бренд. Пары «подложка + текст» вынесены
     сюда; смысл при этом сохранён, а не размазан по акценту. */
  --badge-info-bg: #e3f2fd;      --badge-info-ink: #1565c0;
  --badge-warn-bg: #fff3e0;      --badge-warn-ink: #e65100;
  --badge-crit-bg: #ffebee;      --badge-crit-ink: #c62828;
  --badge-ok-bg: #e8f5e9;        --badge-ok-ink: #2e7d32;
  --badge-pending-bg: #fffde7;   --badge-pending-ink: #f9a825;

  /* Шапка таблиц админки. Нейтральные значения — как было: сплошная заливка
     акцентом с белым текстом. */
  --table-head-bg: var(--color-primary);
  --table-head-ink: #ffffff;
}

/* Темная тема */
.dark {
  --background: #0E111A;
  --foreground: #E5E7EB;
  --card: rgba(26, 29, 43, 0.7);
  --card-foreground: #E5E7EB;
  --popover: rgba(26, 29, 43, 0.95);
  --popover-foreground: #E5E7EB;
  --primary: #E5E7EB;
  --primary-foreground: #0E111A;
  --secondary: #1F2937;
  --secondary-foreground: #E5E7EB;
  --muted: #1F2937;
  --muted-foreground: #9CA3AF;
  --accent: #00BFA5;
  --accent-foreground: #ffffff;
  --destructive: #EF4444;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.05);
  --ring: #00BFA5;
  --sidebar: rgba(14, 17, 26, 0.95);
  --sidebar-foreground: #E5E7EB;
  --sidebar-primary: #00BFA5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(0, 191, 165, 0.1);
  --sidebar-accent-foreground: #E5E7EB;
  --sidebar-border: rgba(255, 255, 255, 0.05);
  --sidebar-ring: #00BFA5;

  /* Параметры футера для тёмной темы: сохраняем контраст и привычный градиент */
  --footer-background: linear-gradient(to right, #0F1E25, #1a2a3a);
  --footer-foreground: #FFFFFF;
  --footer-link-color: rgba(255, 255, 255, 0.9);
  --footer-link-hover: #3CE43C;
  --footer-button-background: rgba(255, 255, 255, 0.1);
  --footer-button-foreground: #FFFFFF;
  --footer-logo-filter: brightness(0) invert(1);
  --footer-logo-filter-hover: brightness(0) invert(0.8);

  /* На тёмном фоне насыщенный акцент читается и как текст — подмена не нужна. */
  --accent-ink: #00BFA5;
  --accent-hover: #26D7C0;
  --st-ok-ring: rgba(229, 231, 235, 0.32);
  --grid-ink: transparent;

  --surface-shadow:
    6px 6px 12px rgba(0, 0, 0, 0.3),
    -6px -6px 12px rgba(255, 255, 255, 0.02);
  --surface-border: 1px solid rgba(255, 255, 255, 0.1);
  --header-border: 1px solid rgba(255, 255, 255, 0.1);

  /* Тёмно-синяя палитра боковой панели. Заведена вручную и до сих пор никак
     не связана с остальной тёмной темой — здесь она хотя бы становится
     переопределяемой. */
  --panel-surface: #253041;
  --panel-surface-hover: #2d3a4b;
  --panel-item: #3a4a5e;
  --panel-item-hover: #4a5a6e;
  --panel-item-active: #34a236;
  --panel-text: #e0e0e0;
  --panel-border: rgba(255, 255, 255, 0.1);

  --badge-soon-ink: #FBBF24;
  --badge-ondemand-ink: #34D399;
  --power-label: #9CA3AF;
  --power-value: #E5E7EB;
  --power-total: #E5E7EB;
  --auth-ok: #4ade80;

  /* --blink-* здесь НЕ переопределяются намеренно. Тёмные цвета мигания
     задумывались (#FBBF24 / #F87171), но лежали в блоке `.dark { @keyframes }`,
     который браузер отбрасывает, — то есть тёмная тема мигала светлыми
     цветами всё это время. Чинить это здесь значило бы менять вид
     infrasafe.uz под видом рефакторинга. Бренд, которому нужны свои цвета
     мигания, задаёт --blink-* в собственном .dark. */
}