/* ==========================================================================
   CSS TOKENS - ФРАНЦУЗСКАЯ ТЕМА ДЛЯ BOOKMAKERS
   ========================================================================== */

/* Импорт шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root {
    /* Основная цветовая палитра */
    --color-primary: #1e40af; /* Темно-синий (основной) */
    --color-secondary: #047857; /* Глубокий изумрудный */
    --color-accent: #f59e0b; /* Теплый золотой */
    --color-neutral: #ffffff; /* Чистый белый */
    --color-gray: #6b7280; /* Нейтральный серый */

    /* Расширенная палитра */
    --color-primary-light: #3b82f6; /* Светло-синий */
    --color-primary-dark: #1e3a8a; /* Очень темно-синий */
    --color-secondary-light: #059669; /* Светло-изумрудный */
    --color-secondary-dark: #065f46; /* Темно-изумрудный */
    --color-accent-light: #fbbf24; /* Светло-золотой */
    --color-accent-dark: #d97706; /* Темно-золотой */

    /* Семантические цвета */
    --color-success: #10b981; /* Зеленый успех */
    --color-warning: #f59e0b; /* Оранжевое предупреждение */
    --color-error: #ef4444; /* Красная ошибка */
    --color-info: #3b82f6; /* Синяя информация */

    /* Цвета интерфейса */
    --color-background: #f8fafc; /* Фон страницы */
    --color-surface: #ffffff; /* Поверхность карточек */
    --color-border: #e2e8f0; /* Границы */
    --color-text-primary: #1f2937; /* Основной текст */
    --color-text-secondary: #6b7280; /* Вторичный текст */
    --color-text-muted: #9ca3af; /* Приглушенный текст */

    /* Цвета французского флага */
    --color-france-blue: #002395; /* Синий французского флага */
    --color-france-white: #ffffff; /* Белый французского флага */
    --color-france-red: #ed2939; /* Красный французского флага */

    /* Цвета для соответствия требованиям */
    --color-compliance: #dc2626; /* Красный для предупреждений */
    --color-age-warning: #f59e0b; /* Оранжевый для возрастных ограничений */
    --color-responsible: #059669; /* Зеленый для ответственной игры */

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    --gradient-hero: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));

    /* Тени */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Размеры и отступы */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */

    /* Радиусы скругления */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 0.75rem; /* 12px */
    --radius-xl: 1rem; /* 16px */
    --radius-full: 9999px; /* Полный радиус */

    /* Типографика */
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
    --font-family-heading: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-2xs: 0.625rem; /* 10px */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-hero: 2.5rem; /* 40px - для главных заголовков */
    --font-size-section: 2rem; /* 32px - для заголовков секций */
    --font-size-card: 1.375rem; /* 22px - для заголовков карточек */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

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

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

    /* Брейкпоинты (для использования в JS) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* Темная тема (если потребуется) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #0f172a;
        --color-surface: #1e293b;
        --color-border: #334155;
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
    }
}