/* =============================================================
   variables.css — Единые CSS-переменные EMS
   Источник правды для палитры тем. Все UI-страницы подключают через includes/header_theme.php.

   Темы переключаются через атрибут html[data-theme="..."].
   Управляется js/theme-switcher.js, описание тем — includes/themes.php.

   Список тем:
     light            (по умолчанию, в :root)
     dark
     sepia
     midnight         (OLED-чёрный)
     solarized-light
     solarized-dark
   ============================================================= */

:root {
    /* Шрифты — общие для всех тем */
    --font-main: "Segoe UI", "Tahoma", sans-serif;
    --font-display: "Outfit", "Segoe UI", "Tahoma", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;
    --font-size-base: 14px;
    --font-size-small: 0.875rem;

    /* Анимации */
    --transition-base: 0.3s ease;
    --transition-fast: 0.2s ease;
}

/* ===== Светлая тема (по умолчанию) ===== */
:root,
html[data-theme="light"] {
    color-scheme: light;
    /* Действия — EMS-брендинг: зелёный primary вместо Alpha-blue */
    --color-primary: #43a047;
    --color-primary-hover: #388e3c;
    --color-info: #4a8f8d;
    --color-info-hover: #3a7574;
    --color-warning: #d4a24c;
    --color-warning-hover: #c08e3a;
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --color-success: #28a745;
    --color-disabled: #6c757d;

    /* Фон */
    --bg-body: #f0f2f5;
    --bg-table: #ffffff;
    --bg-table-header: #f8f9fa;
    --bg-table-odd: #f9f9f9;
    --bg-hover: #f1f1f1;
    --bg-input: #ffffff;
    --bg-modal: #ffffff;
    --bg-modal-header: #f7f8fa;
    --bg-card: #ffffff;

    /* Текст */
    --text-color: #2c3e50;
    --text-secondary: #4a5568;
    --text-muted: #6c757d;
    --text-link: #3b6cb4;
    --text-link-hover: #2e5a9e;

    /* Акценты */
    --accent-blue: #5dade2;
    --accent-blue-hover: #7cc0e8;

    /* Границы */
    --border-color: #dee2e6;
    --border-input: #ced4da;

    /* Подсветка */
    --highlight-bg: rgba(144, 238, 144, 0.3);
    --highlight-keyboard: rgba(144, 238, 144, 0.2);
    --highlight-hover: #edf5ed;
    --highlight-outline: #88b388;

    /* Тени */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-focus: 0 0 0 3px rgba(67, 160, 71, 0.22);
    --shadow-btn-hover: 0 4px 12px rgba(67, 160, 71, 0.28);

    /* Auth-flow (login/verify) */
    --color-primary-rgb: 67, 160, 71;
    --bg-auth-gradient: radial-gradient(circle at center, #4b6043, #0d1b0d);
    --bg-auth-card: rgba(255, 255, 255, 0.92);
}

/* ===== Тёмная тема ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #66bb6a;
    --color-primary-hover: #4caf50;
    --color-info: #4a8f8d;
    --color-info-hover: #3a7574;
    --color-warning: #d4a24c;
    --color-warning-hover: #c08e3a;
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --color-success: #28a745;
    --color-disabled: #adb5bd;

    --bg-body: #2e2e2e;
    --bg-table: #363636;
    --bg-table-header: #404040;
    --bg-table-odd: #3c3c3c;
    --bg-hover: #4a4a4a;
    --bg-input: #444;
    --bg-modal: #333;
    --bg-modal-header: #3a3a3a;
    --bg-card: #363636;

    --text-color: #e0e0e0;
    --text-secondary: #b0b8c0;
    --text-muted: #adb5bd;
    --text-link: #5dade2;
    --text-link-hover: #7cc0e8;

    --accent-blue: #5dade2;
    --accent-blue-hover: #7cc0e8;

    --border-color: #505050;
    --border-input: #606060;

    --highlight-bg: rgba(0, 255, 127, 0.35);
    --highlight-keyboard: rgba(0, 255, 127, 0.15);
    --highlight-hover: #273b27;
    --highlight-outline: #9fcf8d;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
    --shadow-modal: 0 8px 20px rgba(0, 0, 0, 0.8);
    --shadow-focus: 0 0 0 3px rgba(102, 187, 106, 0.35);
    --shadow-btn-hover: 0 4px 14px rgba(102, 187, 106, 0.30);

    /* Auth-flow */
    --color-primary-rgb: 102, 187, 106;
    --bg-auth-gradient: radial-gradient(circle at center, #1a3a1a, #050d05);
    --bg-auth-card: rgba(40, 50, 40, 0.88);
}

/* ===== Сепия (тёплая, для долгого чтения) ===== */
html[data-theme="sepia"] {
    color-scheme: light;
    --color-primary: #9c6f3f;
    --color-primary-hover: #835a30;
    --color-info: #6a8a8a;
    --color-info-hover: #547171;
    --color-warning: #b8860b;
    --color-warning-hover: #9c7209;
    --color-danger: #b34a3a;
    --color-danger-hover: #97382a;
    --color-success: #5d7a3e;
    --color-disabled: #a89684;

    --bg-body: #efe5cc;
    --bg-table: #f4ecd8;
    --bg-table-header: #ebdfc2;
    --bg-table-odd: #f0e7cf;
    --bg-hover: #ead9b3;
    --bg-input: #ebe1c4;
    --bg-modal: #f4ecd8;
    --bg-modal-header: #ebdfc2;
    --bg-card: #f4ecd8;

    --text-color: #5b4636;
    --text-secondary: #6e574a;
    --text-muted: #8a7560;
    --text-link: #9c6f3f;
    --text-link-hover: #7a5530;

    --accent-blue: #9c6f3f;
    --accent-blue-hover: #835a30;

    --border-color: #d6c4a0;
    --border-input: #c4b08a;

    --highlight-bg: rgba(184, 134, 11, 0.22);
    --highlight-keyboard: rgba(184, 134, 11, 0.15);
    --highlight-hover: #ebdfc2;
    --highlight-outline: #b8995c;

    --shadow-sm: 0 1px 3px rgba(91, 70, 54, 0.10);
    --shadow-md: 0 2px 6px rgba(91, 70, 54, 0.15);
    --shadow-lg: 0 8px 24px rgba(91, 70, 54, 0.20);
    --shadow-modal: 0 8px 24px rgba(91, 70, 54, 0.18);
    --shadow-focus: 0 0 0 3px rgba(156, 111, 63, 0.25);
    --shadow-btn-hover: 0 4px 12px rgba(156, 111, 63, 0.30);

    /* Auth-flow */
    --color-primary-rgb: 156, 111, 63;
    --bg-auth-gradient: radial-gradient(circle at center, #a87a4a, #4a3322);
    --bg-auth-card: rgba(244, 236, 216, 0.94);
}

/* ===== Midnight (OLED-чёрный) ===== */
html[data-theme="midnight"] {
    color-scheme: dark;
    --color-primary: #4a8be0;
    --color-primary-hover: #3a72c0;
    --color-info: #4a9d9b;
    --color-info-hover: #3a8280;
    --color-warning: #e0b04c;
    --color-warning-hover: #c89938;
    --color-danger: #ff5a4a;
    --color-danger-hover: #e04030;
    --color-success: #3ec070;
    --color-disabled: #888;

    --bg-body: #000000;
    --bg-table: #0a0a0a;
    --bg-table-header: #141414;
    --bg-table-odd: #0d0d0d;
    --bg-hover: #1c1c1c;
    --bg-input: #141414;
    --bg-modal: #0a0a0a;
    --bg-modal-header: #141414;
    --bg-card: #0a0a0a;

    --text-color: #e8e8e8;
    --text-secondary: #b8b8b8;
    --text-muted: #888;
    --text-link: #5dade2;
    --text-link-hover: #7cc0e8;

    --accent-blue: #5dade2;
    --accent-blue-hover: #7cc0e8;

    --border-color: #2a2a2a;
    --border-input: #333;

    --highlight-bg: rgba(0, 255, 127, 0.30);
    --highlight-keyboard: rgba(0, 255, 127, 0.12);
    --highlight-hover: #0f1f0f;
    --highlight-outline: #5fcf7d;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.9);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 1);
    --shadow-modal: 0 8px 30px rgba(0, 0, 0, 1);
    --shadow-focus: 0 0 0 3px rgba(93, 173, 226, 0.40);
    --shadow-btn-hover: 0 4px 14px rgba(74, 139, 224, 0.40);

    /* Auth-flow */
    --color-primary-rgb: 74, 139, 224;
    --bg-auth-gradient: radial-gradient(circle at center, #1a2845, #000000);
    --bg-auth-card: rgba(15, 15, 15, 0.88);
}

/* ===== Solarized Light ===== */
html[data-theme="solarized-light"] {
    color-scheme: light;
    --color-primary: #268bd2;
    --color-primary-hover: #1a6fa8;
    --color-info: #2aa198;
    --color-info-hover: #1f857d;
    --color-warning: #b58900;
    --color-warning-hover: #946f00;
    --color-danger: #dc322f;
    --color-danger-hover: #b32522;
    --color-success: #859900;
    --color-disabled: #93a1a1;

    --bg-body: #eee8d5;
    --bg-table: #fdf6e3;
    --bg-table-header: #eee8d5;
    --bg-table-odd: #f5efdc;
    --bg-hover: #eee8d5;
    --bg-input: #e4ddc6;
    --bg-modal: #fdf6e3;
    --bg-modal-header: #eee8d5;
    --bg-card: #fdf6e3;

    --text-color: #586e75;
    --text-secondary: #657b83;
    --text-muted: #93a1a1;
    --text-link: #268bd2;
    --text-link-hover: #1a6fa8;

    --accent-blue: #2aa198;
    --accent-blue-hover: #1f857d;

    --border-color: #d6cfb8;
    --border-input: #cbc4ad;

    --highlight-bg: rgba(133, 153, 0, 0.22);
    --highlight-keyboard: rgba(133, 153, 0, 0.15);
    --highlight-hover: #e8e2cf;
    --highlight-outline: #859900;

    --shadow-sm: 0 1px 3px rgba(88, 110, 117, 0.10);
    --shadow-md: 0 2px 6px rgba(88, 110, 117, 0.15);
    --shadow-lg: 0 8px 24px rgba(88, 110, 117, 0.20);
    --shadow-modal: 0 8px 24px rgba(88, 110, 117, 0.18);
    --shadow-focus: 0 0 0 3px rgba(38, 139, 210, 0.25);
    --shadow-btn-hover: 0 4px 12px rgba(38, 139, 210, 0.30);

    /* Auth-flow */
    --color-primary-rgb: 38, 139, 210;
    --bg-auth-gradient: radial-gradient(circle at center, #2aa198, #073642);
    --bg-auth-card: rgba(253, 246, 227, 0.94);
}

/* ===== Solarized Dark ===== */
html[data-theme="solarized-dark"] {
    color-scheme: dark;
    --color-primary: #268bd2;
    --color-primary-hover: #1a6fa8;
    --color-info: #2aa198;
    --color-info-hover: #1f857d;
    --color-warning: #b58900;
    --color-warning-hover: #946f00;
    --color-danger: #dc322f;
    --color-danger-hover: #b32522;
    --color-success: #859900;
    --color-disabled: #586e75;

    --bg-body: #002b36;
    --bg-table: #073642;
    --bg-table-header: #0a4250;
    --bg-table-odd: #093d4a;
    --bg-hover: #0d4a5a;
    --bg-input: #073642;
    --bg-modal: #073642;
    --bg-modal-header: #0a4250;
    --bg-card: #073642;

    --text-color: #93a1a1;
    --text-secondary: #839496;
    --text-muted: #657b83;
    --text-link: #268bd2;
    --text-link-hover: #5fb4ea;

    --accent-blue: #2aa198;
    --accent-blue-hover: #1f857d;

    --border-color: #0d4a5a;
    --border-input: #11586a;

    --highlight-bg: rgba(133, 153, 0, 0.30);
    --highlight-keyboard: rgba(133, 153, 0, 0.15);
    --highlight-hover: #0a3a45;
    --highlight-outline: #859900;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 8px 20px rgba(0, 0, 0, 0.8);
    --shadow-focus: 0 0 0 3px rgba(38, 139, 210, 0.30);
    --shadow-btn-hover: 0 4px 14px rgba(38, 139, 210, 0.40);

    /* Auth-flow */
    --color-primary-rgb: 38, 139, 210;
    --bg-auth-gradient: radial-gradient(circle at center, #073642, #001218);
    --bg-auth-card: rgba(7, 54, 66, 0.90);
}

/* Класс theme-switching снимает все transition на момент переключения,
   чтобы избежать визуального «прокраса» цветов через промежуточные оттенки. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}