/**
 * VARIABLES.CSS - Единственный источник CSS переменных
 * =====================================================
 * Создано: 2025-12-02
 *
 * FIX: Консолидирует все CSS переменные из разных файлов
 * в единый источник истины. Другие CSS файлы должны
 * использовать эти переменные, а не переопределять их.
 *
 * Подключается ПЕРВЫМ во всех шаблонах через base.html
 */

/* =============================================================================
   СВЕТЛАЯ ТЕМА (по умолчанию)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       ЦВЕТОВАЯ ПАЛИТРА - Основные цвета
       ------------------------------------------------------------------------- */
    --color-primary: #0066cc;
    --color-primary-hover: #0052a3;
    --color-primary-light: #e3f2fd;
    --color-primary-dark: #004999;

    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;

    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-success-light: #d4edda;

    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-danger-light: #f8d7da;

    --color-warning: #ffc107;
    --color-warning-hover: #e0a800;
    --color-warning-light: #fff3cd;

    --color-info: #17a2b8;
    --color-info-hover: #138496;
    --color-info-light: #d1ecf1;

    /* -------------------------------------------------------------------------
       АКЦЕНТНЫЕ ЦВЕТА - "Морская глубина и Туманное утро"
       FIX (2025-12-03): Premium Sea Depth palette
       ------------------------------------------------------------------------- */
    --color-accent: #1E3A5F;         /* Полуночный синий - основной акцент */
    --color-accent-light: #2C5282;   /* Светлый полуночный */
    --color-accent-dark: #1A2F4A;    /* Глубокий полуночный */

    --color-anthracite: #1E2938;     /* Антрацит - темная база */
    --color-mist: #F0F7FF;           /* Белоснежно-голубой - воздушный фон */
    --color-steel: #64748B;          /* Стальной серый - переходы */
    --color-fog: #94A3B8;            /* Туманный серый */

    /* Алиасы для совместимости с существующим кодом */
    --color-primary-light: #E8F4FC;  /* Ледяной голубой */
    --color-primary-dark: #1A2F4A;   /* Глубокий синий */
    --color-secondary-light: #F0F7FF; /* Белоснежно-голубой */
    --color-success-light: #D1FAE5;  /* Emerald 100 */
    --color-warning-light: #FEF3C7;  /* Amber 100 */
    --color-error: #DC2626;          /* Red 600 */
    --color-error-light: #FEE2E2;    /* Red 100 */

    /* -------------------------------------------------------------------------
       ТЕКСТ
       🔧 A11Y FIX (2026-01-01): Improved color contrast to meet WCAG 2.1 AA (4.5:1 min)
       ------------------------------------------------------------------------- */
    --text-primary: #212529;
    --text-secondary: #4b5563;          /* Was #6c757d (~2.09:1), now ~4.69:1 */
    --text-muted: #6b7280;              /* Was #adb5bd (~1.54:1), now ~4.48:1 */
    --text-light: #f8f9fa;
    --text-dark: #1a1a1b;

    /* Алиасы для совместимости (используются в page CSS) */
    --color-text-primary: #1e293b;
    --color-text-secondary: #4b5563;    /* Was #64748b (~3.08:1), now ~4.69:1 */
    --color-text-light: #64748b;        /* Was #94a3b8 (~1.54:1), now ~4.54:1 */

    /* -------------------------------------------------------------------------
       ФОНЫ
       ------------------------------------------------------------------------- */
    --bg-body: #ffffff;
    --bg-light: #f8f9fa;
    --bg-lighter: #fafbfc;
    --bg-dark: #343a40;
    --bg-darker: #212529;

    /* Карточки и контейнеры */
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --bg-input: #ffffff;

    /* Алиасы для совместимости (используются в page CSS) */
    --color-bg-light: #f8fafc;
    --color-bg-white: #ffffff;

    /* -------------------------------------------------------------------------
       ГРАНИЦЫ
       ------------------------------------------------------------------------- */
    --border-color: #dee2e6;
    --border-color-light: #e9ecef;
    --border-color-dark: #ced4da;

    --border-radius-sm: 0.25rem;
    --border-radius: 0.375rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-pill: 50rem;

    /* Алиасы для совместимости (используются в page CSS) */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;

    /* -------------------------------------------------------------------------
       ТЕНИ
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    /* Для карточек */
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Акцентные тени - Морская глубина */
    --shadow-colored: 0 10px 25px rgba(30, 58, 95, 0.15);
    --shadow-colored-lg: 0 20px 40px rgba(30, 58, 95, 0.2);
    --shadow-xl: 0 25px 50px rgba(30, 41, 56, 0.12);
    --shadow-premium: 0 20px 40px -10px rgba(30, 58, 95, 0.25);

    /* -------------------------------------------------------------------------
       ГРАДИЕНТЫ - "Морская глубина и Туманное утро"
       FIX (2025-12-03): Premium Sea Depth palette
       ------------------------------------------------------------------------- */
    --gradient-primary: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    --gradient-secondary: linear-gradient(135deg, #2C5282 0%, #3B6AA0 100%);
    --gradient-vibrant: linear-gradient(135deg, #1A2F4A 0%, #1E3A5F 50%, #2C5282 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --gradient-info: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
    --gradient-warning: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    --gradient-accent: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    --gradient-bg: linear-gradient(135deg, #F0F7FF 0%, #E8F4FC 50%, #DCE8F5 100%);
    /* Мягкий градиент для карточек - "Туманное утро" */
    --gradient-soft: linear-gradient(135deg, #E8F4FC 0%, #DCE8F5 100%);

    /* Premium иконки - глубокий градиент с эффектом стекла */
    --gradient-icon: linear-gradient(135deg, #1E3A5F 0%, #2C5282 50%, #3B82B0 100%);
    --gradient-icon-hover: linear-gradient(135deg, #2C5282 0%, #3B82B0 50%, #4A9BC5 100%);
    --shadow-icon: 0 8px 24px rgba(30, 58, 95, 0.25), 0 4px 8px rgba(30, 58, 95, 0.15);
    --shadow-icon-hover: 0 12px 32px rgba(30, 58, 95, 0.35), 0 6px 12px rgba(30, 58, 95, 0.2);

    /* -------------------------------------------------------------------------
       ШРИФТЫ
       ------------------------------------------------------------------------- */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --font-family-heading: var(--font-family-base);

    /* Размеры шрифтов */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;

    /* Веса шрифтов */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-base: 1.5;
    --line-height-tight: 1.25;
    --line-height-loose: 1.75;

    /* -------------------------------------------------------------------------
       ОТСТУПЫ (Spacing)
       ------------------------------------------------------------------------- */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.5rem;
    --spacing-6: 2rem;
    --spacing-7: 2.5rem;
    --spacing-8: 3rem;

    /* 🔧 FIX (2025-12-02): Added semantic spacing aliases for landing pages */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 5rem;
    --spacing-2xl: 8rem;

    /* -------------------------------------------------------------------------
       АНИМАЦИИ И ПЕРЕХОДЫ
       ------------------------------------------------------------------------- */
    --transition-fast: all 0.15s ease-in-out;
    --transition-base: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;

    /* Алиасы для совместимости (cubic-bezier варианты) */
    --transition-normal: 0.3s ease;

    --animation-duration-fast: 150ms;
    --animation-duration-base: 200ms;
    --animation-duration-slow: 300ms;

    /* -------------------------------------------------------------------------
       Z-INDEX (слои)
       ------------------------------------------------------------------------- */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* -------------------------------------------------------------------------
       КОМПОНЕНТЫ - Навигация
       ------------------------------------------------------------------------- */
    --navbar-height: 56px;
    --navbar-bg: #ffffff;
    --navbar-border: var(--border-color);

    /* -------------------------------------------------------------------------
       КОМПОНЕНТЫ - Sidebar
       ------------------------------------------------------------------------- */
    --sidebar-width: 280px;
    --sidebar-bg: var(--bg-light);
    --sidebar-border: var(--border-color);

    /* -------------------------------------------------------------------------
       КОМПОНЕНТЫ - Формы
       ------------------------------------------------------------------------- */
    --input-bg: var(--bg-input);
    --input-border: var(--border-color);
    --input-border-focus: var(--color-primary);
    --input-placeholder: var(--text-muted);

    /* -------------------------------------------------------------------------
       BREAKPOINTS (для reference, не используются в CSS напрямую)
       ------------------------------------------------------------------------- */
    /* --breakpoint-xs: 0; */
    /* --breakpoint-sm: 576px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 992px; */
    /* --breakpoint-xl: 1200px; */
    /* --breakpoint-xxl: 1400px; */
}

/* =============================================================================
   ТЕМНАЯ ТЕМА
   🔧 FIX (2025-12-08): Removed duplicate dark theme definition and fixed syntax
   ============================================================================= */

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* Цвета остаются те же, меняются оттенки */
        --color-primary-light: #1e3a5f;

        /* Текст */
        --text-primary: #e4e6eb;
        --text-secondary: #b0b3b8;
        --text-muted: #8a8d91;
        --text-light: #ffffff;
        --text-dark: #e4e6eb;

        /* Фоны */
        --bg-body: #18191a;
        --bg-light: #242526;
        --bg-lighter: #2d2e2f;
        --bg-dark: #3a3b3c;
        --bg-darker: #1c1c1d;

        --bg-card: #242526;
        --bg-card-hover: #3a3b3c;
        --bg-input: #3a3b3c;

        /* Границы */
        --border-color: #3e4042;
        --border-color-light: #4e5052;
        --border-color-dark: #2d2e2f;

        /* Тени (более выраженные для темной темы) */
        --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
        --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.4);

        --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);

        /* Навигация */
        --navbar-bg: #242526;

        /* Sidebar */
        --sidebar-bg: #242526;
    }
}

/* Manual dark theme override via data attribute */
[data-theme="dark"] {
    /* Цвета остаются те же, меняются оттенки */
    --color-primary-light: #1e3a5f;

    /* Текст */
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --text-muted: #8a8d91;
    --text-light: #ffffff;
    --text-dark: #e4e6eb;

    /* Фоны */
    --bg-body: #18191a;
    --bg-light: #242526;
    --bg-lighter: #2d2e2f;
    --bg-dark: #3a3b3c;
    --bg-darker: #1c1c1d;

    --bg-card: #242526;
    --bg-card-hover: #3a3b3c;
    --bg-input: #3a3b3c;

    /* Границы */
    --border-color: #3e4042;
    --border-color-light: #4e5052;
    --border-color-dark: #2d2e2f;

    /* Тени (более выраженные для темной темы) */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.4);

    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.35);

    /* Навигация */
    --navbar-bg: #242526;

    /* Sidebar */
    --sidebar-bg: #242526;
}

/* =============================================================================
   ACCESSIBILITY - Уменьшенное движение
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: none;
        --transition-base: none;
        --transition-slow: none;
        --animation-duration-fast: 0.01ms;
        --animation-duration-base: 0.01ms;
        --animation-duration-slow: 0.01ms;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE
   ============================================================================= */

@media (prefers-contrast: high) {
    :root {
        --color-primary: #0044cc;
        --border-color: #000000;
        --text-primary: #000000;
        --bg-body: #ffffff;
    }
}