/* Тема оформления (FR-50): единственный источник цветов интерфейса.
 *
 * Все страницы подключают этот файл последним. Тёмная тема — по умолчанию
 * и совпадает с прежним оформлением терминала. Светлая включается атрибутом
 * data-theme="light" на <html> (theme.js + pre-paint скрипт в <head>).
 *
 * Правило: в остальных CSS/JS не должно быть литеральных цветов — только
 * переменные отсюда. Тест test/theme.test.js проверяет это и паритет палитр.
 */

:root {
  color-scheme: dark;
  --scheme: dark;

  /* Поверхности */
  --bg: #0d1117;
  --panel: #161b22;
  --panel2: #1c2333;
  --panel3: #263b60;
  --border: #262d3d;
  --border-strong: #334463;
  --border-hover: #3b4a63;
  --text: #e6ebf5;
  --muted: #8b95a8;
  --placeholder: #667085;
  --scrollbar: #344057;

  /* Акценты */
  --accent: #4d8dff;
  --accent-hover: #3d7fe8;
  --accent-strong: #2f6fb4;
  --accent-light: #a9caff;
  --on-accent: #ffffff;

  /* Семантика */
  --up: #2ecc71;
  --down: #ff5c5c;
  --warn: #ffc107;
  --warn-text: #f0c36d;
  --brand: #f0b35a;
  --brand-light: #ffd58b;
  --brand-strong: #ffb45e;
  --brand-mid: #f6c453;
  --star: #f2c94c;

  /* Полупрозрачные заливки */
  --up-tint: rgba(46, 204, 113, 0.08);
  --up-soft: rgba(46, 204, 113, 0.15);
  --down-tint: rgba(255, 92, 92, 0.08);
  --down-soft: rgba(255, 92, 92, 0.15);
  --warn-tint: rgba(255, 193, 7, 0.07);
  --warn-soft: rgba(255, 193, 7, 0.15);
  --brand-tint: rgba(240, 179, 90, 0.08);
  --brand-soft: rgba(240, 179, 90, 0.13);
  --accent-tint: rgba(77, 141, 255, 0.06);
  --accent-soft: rgba(77, 141, 255, 0.12);
  --neutral-tint: rgba(138, 148, 173, 0.06);
  --neutral-soft: rgba(138, 148, 173, 0.12);

  /* Строки таблиц и состояния */
  --row-hover: #1a2130;
  --row-selected: #1e2a44;
  --row-cell: #233252;
  --up-alt: #a9d97c;
  --up-strong: #1e8f52;
  --down-light: #ff9caa;
  --up-border: rgba(46, 204, 113, 0.4);
  --down-border: rgba(255, 92, 92, 0.4);
  --brand-border: rgba(240, 179, 90, 0.25);
  --warn-strong: #b78a06;
  --warn-border: #66522e;
  --warn-bg: #241f17;
  --danger-border: #67363d;
  --danger-bg: #28191d;
  --danger-tint: rgba(220, 90, 100, 0.08);
  --alert-text: #ffd7d7;
  --alert-strong: #ffadad;
  --alert-muted: #f3c1c1;
  --alert-bg: rgba(155, 35, 45, 0.24);
  --alert-border: rgba(255, 92, 92, 0.55);
  --warn-pulse: rgba(255, 193, 7, 0.30);
  --accent-border: #32476b;
  --accent-chip-text: #b8d1ff;
  --accent-chip-btn: #8fb8fa;
  --shadow-soft: rgba(0, 0, 0, 0.12);
  --shadow-strong: rgba(0, 0, 0, 0.8);
  --hover-veil: rgba(255, 255, 255, 0.03);

  /* Утилиты */
  --overlay: rgba(3, 7, 14, 0.74);
  --shadow: rgba(0, 0, 0, 0.45);
  --header-overlay: rgba(16, 21, 29, 0.82);
  --card-overlay: rgba(20, 31, 51, 0.94);
  --card-translucent: rgba(23, 30, 46, 0.96);
  --panel-translucent: rgba(23, 30, 46, 0.88);
  --gradient-card: linear-gradient(135deg, rgba(29, 39, 64, 0.9), rgba(23, 30, 46, 0.95));
  --gradient-panel: linear-gradient(110deg, rgba(29, 39, 64, 0.96), rgba(23, 30, 46, 0.96));
  --gradient-login: linear-gradient(145deg, rgba(25, 37, 60, 0.98), rgba(17, 26, 44, 0.98));
  --glow-accent: radial-gradient(circle at 12% -10%, rgba(77, 141, 255, 0.11), transparent 34%);
  --glow-up: radial-gradient(circle at 92% 10%, rgba(46, 204, 113, 0.05), transparent 28%);
  --glow-brand: radial-gradient(circle at 95% 12%, rgba(240, 179, 90, 0.055), transparent 27%);

  /* Графики (ECharts и canvas) */
  --chart-tooltip-bg: #111a2c;
  --chart-tooltip-text: #e8edf7;
  --chart-axis: #2a3550;
  --chart-label: #8a94ad;
  --chart-text: #aab5c9;
  --chart-muted: #7b879c;
  --chart-grid: #202b43;
  --chart-cross: #60739c;
  --chart-zoom-bg: #111a2c;
  --chart-zoom-line: #405071;
  --chart-zoom-selected: #263957;
  --chart-handle: #4c8bf5;
  --chart-handle-border: #8db5ff;
  --chart-accent: #64a8ff;
  --chart-purple: #b388ff;
  --chart-down-light: #ff8b9b;
  --up-bar: rgba(46, 204, 113, 0.48);
  --down-bar: rgba(255, 92, 92, 0.48);

  /* Терминальный слой */
  --terminal-accent: #79a8ff;
  --terminal-warn: #efbd68;
  --terminal-danger: #ff8585;
  --terminal-ok: #65d39a;
  --terminal-header: #10151d;
}

:root[data-theme="light"] {
  color-scheme: light;
  --scheme: light;

  /* Поверхности */
  --bg: #f2f5fa;
  --panel: #ffffff;
  --panel2: #e9eef6;
  --panel3: #d7e2f4;
  --border: #d3dbe7;
  --border-strong: #c3cddd;
  --border-hover: #a9b8cd;
  --text: #16202f;
  --muted: #5a6678;
  --placeholder: #8b95a6;
  --scrollbar: #b9c5d6;

  /* Акценты */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-strong: #1d4ed8;
  --accent-light: #1d4ed8;
  --on-accent: #ffffff;

  /* Семантика */
  --up: #17864b;
  --down: #cf2f2f;
  --warn: #a86a00;
  --warn-text: #8f5c00;
  --brand: #9a6410;
  --brand-light: #7d5210;
  --brand-strong: #a35c00;
  --brand-mid: #8f6012;
  --star: #c98a00;

  /* Полупрозрачные заливки */
  --up-tint: rgba(23, 134, 75, 0.08);
  --up-soft: rgba(23, 134, 75, 0.14);
  --down-tint: rgba(207, 47, 47, 0.07);
  --down-soft: rgba(207, 47, 47, 0.13);
  --warn-tint: rgba(168, 106, 0, 0.08);
  --warn-soft: rgba(168, 106, 0, 0.14);
  --brand-tint: rgba(154, 100, 16, 0.08);
  --brand-soft: rgba(154, 100, 16, 0.12);
  --accent-tint: rgba(37, 99, 235, 0.06);
  --accent-soft: rgba(37, 99, 235, 0.1);
  --neutral-tint: rgba(90, 102, 120, 0.06);
  --neutral-soft: rgba(90, 102, 120, 0.1);

  /* Строки таблиц и состояния */
  --row-hover: #eef2f9;
  --row-selected: #dbe6f8;
  --row-cell: #d7e2f4;
  --up-alt: #2f9d5f;
  --up-strong: #0f6b3a;
  --down-light: #b3261e;
  --up-border: rgba(23, 134, 75, 0.45);
  --down-border: rgba(207, 47, 47, 0.45);
  --brand-border: rgba(154, 100, 16, 0.35);
  --warn-strong: #7d4f00;
  --warn-border: #dcc08a;
  --warn-bg: #fdf4e2;
  --danger-border: #e6b0b0;
  --danger-bg: #fdecec;
  --danger-tint: rgba(207, 47, 47, 0.07);
  --alert-text: #7f1d1d;
  --alert-strong: #991b1b;
  --alert-muted: #a34040;
  --alert-bg: #fdeaea;
  --alert-border: rgba(207, 47, 47, 0.45);
  --warn-pulse: rgba(168, 106, 0, 0.22);
  --accent-border: #b9cdf2;
  --accent-chip-text: #1d4ed8;
  --accent-chip-btn: #2563eb;
  --shadow-soft: rgba(22, 32, 47, 0.08);
  --shadow-strong: rgba(22, 32, 47, 0.35);
  --hover-veil: rgba(22, 32, 47, 0.04);

  /* Утилиты */
  --overlay: rgba(22, 32, 47, 0.38);
  --shadow: rgba(22, 32, 47, 0.16);
  --header-overlay: rgba(255, 255, 255, 0.82);
  --card-overlay: #ffffff;
  --card-translucent: #ffffff;
  --panel-translucent: rgba(255, 255, 255, 0.88);
  --gradient-card: linear-gradient(135deg, #ffffff, #f7f9fd);
  --gradient-panel: linear-gradient(110deg, #ffffff, #f4f7fc);
  --gradient-login: linear-gradient(145deg, #ffffff, #f2f6fc);
  --glow-accent: radial-gradient(circle at 12% -10%, rgba(37, 99, 235, 0.07), transparent 34%);
  --glow-up: radial-gradient(circle at 92% 10%, rgba(23, 134, 75, 0.05), transparent 28%);
  --glow-brand: radial-gradient(circle at 95% 12%, rgba(154, 100, 16, 0.05), transparent 27%);

  /* Графики (ECharts и canvas) */
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-text: #16202f;
  --chart-axis: #cfd8e6;
  --chart-label: #5a6678;
  --chart-text: #3d4a5e;
  --chart-muted: #7b879c;
  --chart-grid: #e4eaf2;
  --chart-cross: #94a3b8;
  --chart-zoom-bg: #ffffff;
  --chart-zoom-line: #c3cddd;
  --chart-zoom-selected: #d7e2f4;
  --chart-handle: #2563eb;
  --chart-handle-border: #93b4f7;
  --chart-accent: #2563eb;
  --chart-purple: #7c4ddb;
  --chart-down-light: #d14343;
  --up-bar: rgba(23, 134, 75, 0.45);
  --down-bar: rgba(207, 47, 47, 0.45);

  /* Терминальный слой */
  --terminal-accent: #2563eb;
  --terminal-warn: #8f5c00;
  --terminal-danger: #cf2f2f;
  --terminal-ok: #17864b;
  --terminal-header: #ffffff;
}

/* Плавный переход при смене темы, но без анимации для тех, кто её отключил. */
@media (prefers-reduced-motion: no-preference) {
  body, header, .panel, .detail, table, td, th, input, select, button, .modal-box {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
}

/* Переключатель темы в шапке */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.theme-toggle .theme-icon { font-size: 13px; line-height: 1; }