/* CSS Variables - Design System */
/* Все цвета, размеры, отступы и другие переменные в одном месте */

:root {
    /* ========== ЦВЕТА ========== */

    /* Основные цвета бренда */
    --color-primary: #ffc75b;           /* Основной желтый */
    --color-primary-hover: #ffb84d;     /* Желтый при наведении (стандартизирован) */
    --color-primary-light: #ffd580;     /* Светлый желтый */
    --color-primary-dark: #e6a940;      /* Темный желтый */

    /* Фон */
    --color-bg-dark: #1a1a1a;           /* Основной темный фон */
    --color-bg-card: #282828;           /* Фон карточек */
    --color-bg-card-hover: #1e1e1e;     /* Фон карточек при наведении */
    --color-bg-input: #333333;          /* Фон полей ввода */

    /* Текст */
    --color-text-primary: #ffffff;      /* Основной текст */
    --color-text-secondary: #b3b3b3;    /* Вторичный текст */
    --color-text-muted: #666666;        /* Приглушенный текст */
    --color-text-dark: #1a1a1a;         /* Темный текст (на светлом фоне) */

    /* Акценты */
    --color-success: #4caf50;           /* Успех */
    --color-error: #f44336;             /* Ошибка */
    --color-warning: #ff9800;           /* Предупреждение */
    --color-info: #2196f3;              /* Информация */

    /* Границы */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(255, 199, 91, 0.3);

    /* ========== ТИПОГРАФИКА ========== */

    /* Шрифты */
    --font-primary: 'Montserrat', sans-serif;
    --font-heading: 'Unbounded', sans-serif;

    /* Размеры шрифтов */
    --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-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Высота строки */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========== ОТСТУПЫ ========== */

    --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;     /* Полностью круглый */

    /* ========== ТЕНИ ========== */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);

    /* Цветные тени */
    --shadow-primary: 0 4px 12px rgba(255, 199, 91, 0.3);
    --shadow-primary-lg: 0 8px 24px rgba(255, 199, 91, 0.4);

    /* ========== ПЕРЕХОДЫ ========== */

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.2s ease;

    /* ========== РАЗМЕРЫ ========== */

    /* Контейнеры */
    --container-max-width: 84.375rem;  /* 1350px */
    --container-padding: 1.25rem;      /* 20px */

    /* Компоненты */
    --header-height: 80px;
    --card-image-height: 250px;
    --button-height: 44px;
    --input-height: 44px;

    /* ========== Z-INDEX ========== */

    --z-dropdown: 100;
    --z-sticky: 100;
    --z-header: 500;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-tooltip: 1200;

    /* ========== BREAKPOINTS (для reference) ========== */
    /* Используются в @media queries */
    /* --breakpoint-sm: 576px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 992px; */
    /* --breakpoint-xl: 1200px; */
    /* --breakpoint-2xl: 1400px; */
}

/* ========== DARK THEME (если понадобится) ========== */
/* 
[data-theme="dark"] {
    --color-bg-dark: #0a0a0a;
    --color-bg-card: #1a1a1a;
}
*/