/* 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;

    /* Акценты (Синий) */
    --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);

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

/* --- СВЕТЛАЯ ТЕМА --- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg_dark: #f0f2f5; /* Мягкий фон за колонками */
    --column_bg: #ffffff; /* Чисто белые колонки */
    --border_color: #e4e7eb; /* Светло-серые рамки */

    --bg_elevated: #ffffff;
    --scrollbar_thumb: #c0c4cc;
    --bg_photo_placeholder: #f3f4f6;

    --bg_dark_alpha_95: rgba(255, 255, 255, 0.95); /* Белые оверлеи поверх фото */
    --bg_dark_alpha_60: rgba(255, 255, 255, 0.6);

    /* Прозрачные фоны заменяем на темные полупрозрачные для контраста на белом */
    --bg_light_01: rgba(0, 0, 0, 0.02);
    --bg_light_02: rgba(0, 0, 0, 0.03);
    --bg_light_03: rgba(0, 0, 0, 0.05);
    --bg_hover: rgba(0, 0, 0, 0.06);
    --bg_active: rgba(0, 0, 0, 0.1);
    --glass_border: rgba(0, 0, 0, 0.1);

    /* Модалки оставляем темными для фокуса */
    --overlay_dark: rgba(0, 0, 0, 0.4);
    --overlay_heavy: rgba(0, 0, 0, 0.6);
    --overlay_ultra: rgba(0, 0, 0, 0.8);

    /* Тени делаем шире и мягче */
    --shadow_03: rgba(0, 0, 0, 0.08);
    --shadow_04: rgba(0, 0, 0, 0.12);
    --shadow_05: rgba(0, 0, 0, 0.16);
    --shadow_06: rgba(0, 0, 0, 0.2);

    /* Текст */
    --text_main: #1a1d24; /* Почти черный */
    --text_dim: #6b7280; /* Серый */
    --text_inverse: #ffffff; /* Белый текст на синих кнопках */

    /* Акцент (делаем чуть темнее для лучшей читаемости на белом) */
    --accent: #3b82f6;
    --accent_alpha_02: rgba(59, 130, 246, 0.05);
    --accent_transparent: rgba(59, 130, 246, 0.15);
    --accent_hover_bg: rgba(59, 130, 246, 0.08);
    --accent_active_bg: rgba(59, 130, 246, 0.15);
    --accent_pulse_40: rgba(59, 130, 246, 0.4);
    --accent_pulse_0: rgba(59, 130, 246, 0);
    --accent_shadow: rgba(59, 130, 246, 0.3);
    --accent_shadow_03: rgba(59, 130, 246, 0.4);
    --accent_shadow_hover: rgba(59, 130, 246, 0.5);
    --accent_alpha_40: rgba(59, 130, 246, 0.4);
}

* {
    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);
}