/*
 * BASE STYLES - Базовые стили и переменные
 */

:root {
    /* Glassmorphism colors */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-hover: rgba(255, 255, 255, 0.2);
    --blur-amount: 10px;

    /* Accent colors */
    --accent-color: rgba(30, 136, 229, 0.3);
    --accent-glow: rgba(30, 136, 229, 0.5);

    /* Typography */
    --font-primary: 'Montserrat', sans-serif;

    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-round: 50%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.7s ease;

    /* Z-index layers */
    --z-header: 1000;
    --z-slider: 999;
    --z-social: 998;
    --z-buttons: 1000;
    --z-player: 1001;
    --z-modal: 2000;
}

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

html {
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background-image: url('/static/images/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    color: white;
    overflow-x: hidden;
}

/* Glassmorphism mixin effect */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-bg);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--glass-hover);
}