/* static/css/base_styles.css - Глобальные переменные и базовые настройки */
:root {
    color-scheme: dark;
    --bg_dark: #0a0b10;
    --column_bg: #11131a;
    --border_color: #1f222c;

    /* Фоны для медиа и дополнительных плашек */
    --bg_elevated: #2a2d37;
    --scrollbar_thumb: #2a2d37;
    --bg_photo_placeholder: #15171e;

    /* Альфа-каналы темного фона (для оверлеев поверх фото) */
    --bg_dark_alpha_95: rgba(10, 11, 16, 0.95);
    --bg_dark_alpha_60: rgba(10, 11, 16, 0.6);

    /* Шкала прозрачных фонов (для карточек, инпутов, плашек) */
    --bg_light_01: rgba(255, 255, 255, 0.01);
    --bg_light_02: rgba(255, 255, 255, 0.02);
    --bg_light_03: rgba(255, 255, 255, 0.03);
    --bg_hover: rgba(255, 255, 255, 0.05);
    --bg_active: rgba(255, 255, 255, 0.08);
    --glass_border: rgba(255, 255, 255, 0.1);

    /* Оверлеи для модалок (Черные) */
    --overlay_dark: rgba(0, 0, 0, 0.5);
    --overlay_heavy: rgba(0, 0, 0, 0.85);
    --overlay_ultra: rgba(0, 0, 0, 0.95);

    /* Система теней */
    --shadow_03: rgba(0, 0, 0, 0.3);
    --shadow_04: rgba(0, 0, 0, 0.4);
    --shadow_05: rgba(0, 0, 0, 0.5);
    --shadow_06: rgba(0, 0, 0, 0.6);

    /* Текст */
    --text_main: #e1e1e6;
    --text_dim: #8e9297;
    --text_inverse: #0a0b10;
    --text_white: #ffffff;
    --text_on_accent: #0a0b10; /* НОВОЕ: Темный текст на светлом акценте в темной теме */

    /* Акценты (Синий) */
    --accent: #82b1ff;
    --accent_alpha_02: rgba(130, 177, 255, 0.02);
    --accent_transparent: rgba(130, 177, 255, 0.15);
    --accent_hover_bg: rgba(130, 177, 255, 0.05);
    --accent_active_bg: rgba(130, 177, 255, 0.1);
    --accent_pulse_40: rgba(130, 177, 255, 0.4);
    --accent_pulse_0: rgba(130, 177, 255, 0);
    --accent_shadow: rgba(130, 177, 255, 0.2);
    --accent_shadow_03: rgba(130, 177, 255, 0.3);
    --accent_shadow_hover: rgba(130, 177, 255, 0.4);
    --accent_alpha_40: rgba(130, 177, 255, 0.4);

    /* Статусы и Социальные реакции */
    --success: #4caf50;
    --success_dark: #2e7d32;
    --success_bg: rgba(76, 175, 80, 0.1);

    --error: #ff5252;
    --error_dark: #c62828;
    --error_hover: #ff7676;
    --error_bg: rgba(255, 82, 82, 0.1);
    --error_bg_hover: rgba(255, 82, 82, 0.15);
    --error_border_alpha: rgba(255, 82, 82, 0.4);
    --error_shadow: rgba(255, 82, 82, 0.2);
    --error_shadow_glow: rgba(255, 82, 82, 0.4);

    --warning: #ffd700;
    --warning_bg: rgba(255, 215, 0, 0.1);
    --warning_bg_hover: rgba(255, 215, 0, 0.15);
    --warning_border_alpha: rgba(255, 215, 0, 0.4);
    --warning_shadow: rgba(255, 215, 0, 0.2);

    /* --- НОВОЕ: Мятная палитра для бейджей (Dark Theme) --- */
    --mint: #00d084;
    --mint_dark: #00a368;
    --mint_shadow: rgba(0, 208, 132, 0.3);
    --mint_border_alpha: rgba(0, 208, 132, 0.4);
    --text_on_mint: #0a0b10; /* Темный текст для контраста на ярком мятном */

    /* Цвета для пустых слотов фото (Темная тема - на основе твоего синего #82b1ff) */
    --empty_slot_bg: rgba(130, 177, 255, 0.03);
    --empty_slot_border: rgba(130, 177, 255, 0.15);

    /* Пропорции золотого сечения */
    --width_menu: 19.1%;
    --width_content: 50%;
    --width_extra: 30.9%;
}

/* --- СВЕТЛАЯ ТЕМА --- */
:root[data-theme="light"] {
    color-scheme: light;

    /* 1. Базовые фоны (Монолитный серый холст) */
    --bg_dark: #e9e9e9; /* Основной фон сайта */
    --column_bg: #e9e9e9; /* ИСПРАВЛЕНО: Центральная колонка теперь в тон фона */
    --border_color: #d1d5db; /* Мягкая рамка для разделения зон */

    --bg_elevated: #ffffff; /* Плашки внутри (фильтры и т.д.) будут чисто белыми */
    --scrollbar_thumb: #c0c4cc;
    --bg_photo_placeholder: #e2e4ef;

    /* 2. Оверлеи для фото */
    --bg_dark_alpha_95: rgba(233, 233, 233, 0.95);
    --bg_dark_alpha_60: rgba(233, 233, 233, 0.75);

    /* 3. Шкала прозрачности (Инпуты и плашки чисто белые) */
    --bg_light_01: rgba(255, 255, 255, 0.3);
    --bg_light_02: rgba(255, 255, 255, 0.6);
    --bg_light_03: #ffffff; /* Белые элементы на фоне E9E9E9 дают крутой объем */
    --bg_hover: rgba(15, 23, 42, 0.04);
    --bg_active: rgba(15, 23, 42, 0.08);
    --glass_border: rgba(15, 23, 42, 0.08);

    /* 4. Оверлеи модалок */
    --overlay_dark: rgba(0, 0, 0, 0.3);
    --overlay_heavy: rgba(15, 23, 42, 0.4);
    --overlay_ultra: rgba(15, 23, 42, 0.7);

    /* 5. Тени (Смягченные, так как фон теперь единый) */
    --shadow_03: rgba(15, 23, 42, 0.03);
    --shadow_04: rgba(15, 23, 42, 0.05);
    --shadow_05: rgba(15, 23, 42, 0.07);
    --shadow_06: rgba(15, 23, 42, 0.1);

    /* 6. Текст */
    --text_main: #111827;
    --text_dim: #6b7280;
    --text_inverse: #ffffff;
    --text_on_accent: #ffffff; /* НОВОЕ: Чисто белый текст для кнопок */

    /* 7. Акцентный (Мягкий лавандовый) */
    /* ИСПРАВЛЕНО: Чуть углубили цвет (#8B8EBD), чтобы белый шрифт читался идеально */
    --accent: #8b8ebd;
    --accent_alpha_02: rgba(139, 142, 189, 0.06);
    --accent_transparent: rgba(139, 142, 189, 0.2);
    --accent_hover_bg: rgba(139, 142, 189, 0.15);
    --accent_active_bg: rgba(139, 142, 189, 0.25);
    --accent_pulse_40: rgba(139, 142, 189, 0.4);
    --accent_pulse_0: rgba(139, 142, 189, 0);
    --accent_shadow: rgba(139, 142, 189, 0.3);
    --accent_shadow_03: rgba(139, 142, 189, 0.4);
    --accent_shadow_hover: rgba(139, 142, 189, 0.5);
    --accent_alpha_40: rgba(139, 142, 189, 0.4);

    /* 8. Мятный акцент (Новый благородный шалфейный оттенок) */
    --mint: #5c857f;
    --mint_dark: #4a6b66;
    --mint_shadow: rgba(92, 133, 127, 0.25);
    --mint_border_alpha: rgba(92, 133, 127, 0.3);
    --text_on_mint: #ffffff;

    /* 9. Системные статусы */
    --success: #5c857f; /* Синхронизируем статус "В сети" с новым зеленым */
    --error: #dc2626;
    --warning: #d97706;

    /* Цвета для пустых слотов фото (Светлая тема - на основе лавандового #8b8ebd) */
    --empty_slot_bg: rgba(139, 142, 189, 0.03);
    --empty_slot_border: rgba(139, 142, 189, 0.15);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--bg_dark);
    font-family:
        "Inter",
        -apple-system,
        system-ui,
        sans-serif;
    color: var(--text_main);
}