/* styles/variables.css */
/* CSS переменные для Tennis Club Zemlya */

:root {
    /* Breakpoints для ваших разрешений */
    --breakpoint-xs: 375px;      /* Мобильные маленькие */
    --breakpoint-sm: 640px;      /* Мобильные большие */
    --breakpoint-md: 960px;      /* Планшеты */
    --breakpoint-lg: 1280px;     /* Планшеты ландшафт */
    --breakpoint-xl: 1440px;     /* Десктоп */

    /* Цвета */
    --color-primary: #2c5aa0;
    --color-primary-dark: #1e3a8a;
    --color-secondary: #fbbf24;
    --color-secondary-dark: #f59e0b;
    --color-text: #000000;
    --color-text-light: #666;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #1f2937;
    --color-gray-light: #f5f5f5;
    --color-hero-text: #FFFDF5;
    --color-footer-bg: #1E1E1E;

    /* Типографика */
    --font-family-primary: 'Inter', sans-serif;
    --font-family-secondary: 'Georgia', serif;

    /* Размеры шрифтов */
    --font-size-xs: 0.8rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.2rem;
    --font-size-2xl: 1.4rem;
    --font-size-3xl: 1.6rem;
    --font-size-4xl: 1.8rem;
    --font-size-5xl: 2rem;
    --font-size-6xl: 2.5rem;
    --font-size-7xl: 3rem;
    --font-size-8xl: 3.5rem;
    --font-size-9xl: 4rem;
    --font-size-10xl: 5rem;

    /* Отступы */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.8rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Радиусы */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 50px;

    /* Тени */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.1);
    --shadow-xl: 0 10px 25px rgba(0,0,0,0.1);

    /* Переходы */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-индексы */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Утилитарные классы для отступов */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Утилитарные классы для текста */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

/* Утилитарные классы для цветов */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-gray { color: var(--color-text-light); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-gray { background-color: var(--color-gray); }
.bg-gray-light { background-color: var(--color-gray-light); }