/**
 * ====================================
 * GunCult - CSS Variables (Design Tokens)
 * ====================================
 * 
 * Только CSS переменные для переиспользования
 * Этот файл можно безопасно импортировать несколько раз
 * 
 * Поддержка Light/Dark тем:
 * - По умолчанию: Dark theme
 * - [data-theme="light"]: Light theme (явное переключение)
 * - @media (prefers-color-scheme: light): Авто-определение светлой темы
 */

:root {
    /* ===================================
       Цветовая палитра - Dark Theme (по умолчанию)
       =================================== */
    
    /* Background цвета */
    --bg-main: #0D0D0D;
    --bg-rgb: 13, 13, 13;            /* RGB версия для rgba() */
    --bg-secondary: #161617;         /* Для контейнеров, карточек, групп (между main и content-main) */
    --bg-content-main: #1A1A1A;
    --bg-content-secondary: #252525;
    --bg-accent: #2A2A2A;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-code: rgba(0, 0, 0, 0.3);
    
    /* Font цвета */
    --font-primary: #FFFFFF;
    --font-secondary: #A3A3A3;
    --font-tertiary: #737373;
    
    /* Border цвета */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.05);
    --border-tertiary: rgba(255, 255, 255, 0.15);
    
    /* Accent цвета */
    --accent-link: #F15A30;
    --accent-link-rgb: 241, 90, 48;
    --accent-link-hover: #e04a20;
    --accent-primary: #F15A30;
    --accent-secondary: #FF6B3D;
    
    /* Status цвета */
    --success-color: #10b981;
    --success-color-rgb: 16, 185, 129;
    --danger-color: #ef4444;
    --danger-color-rgb: 239, 68, 68;
    --warning-color: #f59e0b;
    --warning-color-rgb: 245, 158, 11;
    --info-color: #3b82f6;
    --info-color-rgb: 59, 130, 246;
    
    /* Инвертируемые цвета для специальных элементов */
    --badge-selected-bg: #F5F5F5;     /* Почти белый в dark theme */
    --badge-selected-color: #1A1A1A;  /* Темный текст в dark theme */
    
    /* ===================================
       Typography
       =================================== */
    
    --font-family-base: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Unbounded', 'Unbounded Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 15px;
    --font-weight-base: 500;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-mdl: 0.9375rem; /* 15px - medium-light */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-xxl: 1.375rem;  /* 22px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    
    /* ===================================
       Spacing
       =================================== */
    
    --spacing-4xs: 0.125rem; /* 2px */
    --spacing-2xs: 0.1875rem; /* 3px */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-3sm: 0.625rem; /* 10px */
    --spacing-mdl: 0.75rem;  /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* ===================================
       Shadows
       =================================== */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* ===================================
       Border Radius
       =================================== */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ===================================
       Z-Index
       =================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-search-button: 1040;
    
    /* ===================================
       Transitions
       =================================== */
    
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --transition-slower: 500ms;
    
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===================================
       Breakpoints (Responsive Design)
       =================================== */
    
    /* Mobile first approach - min-width values */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;    /* Small devices (phones) */
    --breakpoint-md: 768px;    /* Medium devices (tablets) */
    --breakpoint-lg: 992px;    /* Large devices (desktops) */
    --breakpoint-xl: 1200px;   /* Extra large devices (wide desktops) */
    --breakpoint-xxl: 1400px;  /* Extra extra large devices */
    
    /* Max-width values for mobile-first media queries */
    --breakpoint-xs-max: 575.98px;
    --breakpoint-sm-max: 767.98px;
    --breakpoint-md-max: 991.98px;
    --breakpoint-lg-max: 1199.98px;
    --breakpoint-xl-max: 1399.98px;
}

/* ===================================
   Light Theme
   Улучшенная цветовая схема для приятного восприятия
   =================================== */

[data-theme="light"] {
    /* Background цвета - мягкие, приятные для глаз */
    --bg-main: #EDEEF0;              /* Серый фон страницы (user specified) */
    --bg-rgb: 255, 255, 255;         /* RGB версия для rgba() - белый для glassmorphism */
    --bg-secondary: #EDEEF0;         /* Для контейнеров табов (user specified) */
    --bg-content-main: #FFFFFF;      /* Белый для секций контента */
    --bg-content-secondary: #F5F5F5; /* Светло-серый для вторичного контента */
    --bg-accent: #CECECE;            /* Акцентный фон */
    --bg-hover: rgba(0, 0, 0, 0.06); /* Более заметный hover */
    --bg-code: rgba(0, 0, 0, 0.06);  /* Фон для inline code */
    
    /* Font цвета - сбалансированные для читаемости */
    --font-primary: #1A1A1A;         /* Мягкий черный, не резкий */
    --font-secondary: #6B6B6B;       /* Средний серый, хорошо читается */
    --font-tertiary: #8A8A8A;        /* Светлый серый для вторичного текста */
    
    /* Border цвета - более выраженные для структуры */
    --border-primary: rgba(0, 0, 0, 0.12);  /* Четкие границы */
    --border-secondary: rgba(0, 0, 0, 0.08); /* Тонкие разделители */
    --border-tertiary: rgba(0, 0, 0, 0.16);  /* Для hover эффектов */
    
    /* Accent цвета - слегка приглушенные для баланса */
    --accent-link: #E54E26;          /* Чуть темнее для контраста */
    --accent-link-rgb: 229, 78, 38;
    --accent-link-hover: #D13D15;    /* Более темный hover */
    --accent-primary: #E54E26;
    --accent-secondary: #FF5C2E;
    
    /* Status цвета - адаптированные для светлого фона */
    --success-color: #059669;        /* Более насыщенный зеленый */
    --success-color-rgb: 5, 150, 105;
    --danger-color: #DC2626;         /* Более темный красный */
    --danger-color-rgb: 220, 38, 38;
    --warning-color: #D97706;        /* Более темный оранжевый */
    --warning-color-rgb: 217, 119, 6;
    --info-color: #2563EB;           /* Более насыщенный синий */
    --info-color-rgb: 37, 99, 235;
    
    /* Инвертируемые цвета для специальных элементов */
    --badge-selected-bg: #2A2A2A;    /* Темно-серый в light theme */
    --badge-selected-color: #FFFFFF; /* Белый текст в light theme */
    
    /* Shadows - адаптированные для светлой темы */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 30px -6px rgba(0, 0, 0, 0.18), 0 8px 12px -4px rgba(0, 0, 0, 0.10);
}

/* ===================================
   Auto Light Theme (System Preference)
   Применяется только если нет явного data-theme
   =================================== */

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        /* Background цвета */
        --bg-main: #EDEEF0;
        --bg-secondary: #EDEEF0;
        --bg-content-main: #FFFFFF;
        --bg-content-secondary: #F5F5F5;
        --bg-accent: #CECECE;
        --bg-hover: rgba(0, 0, 0, 0.06);
        --bg-code: rgba(0, 0, 0, 0.06);
        
        /* Font цвета */
        --font-primary: #1A1A1A;
        --font-secondary: #6B6B6B;
        --font-tertiary: #8A8A8A;
        
        /* Border цвета */
        --border-primary: rgba(0, 0, 0, 0.12);
        --border-secondary: rgba(0, 0, 0, 0.08);
        --border-tertiary: rgba(0, 0, 0, 0.16);
        
        /* Accent цвета */
        --accent-link: #E54E26;
        --accent-link-rgb: 229, 78, 38;
        --accent-link-hover: #D13D15;
        
        /* Status цвета */
        --success-color: #059669;
        --success-color-rgb: 5, 150, 105;
        --danger-color: #DC2626;
        --danger-color-rgb: 220, 38, 38;
        --warning-color: #D97706;
        --warning-color-rgb: 217, 119, 6;
        --info-color: #2563EB;
        --info-color-rgb: 37, 99, 235;
        
        /* Shadows */
        --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
        --shadow-xl: 0 20px 30px -6px rgba(0, 0, 0, 0.18), 0 8px 12px -4px rgba(0, 0, 0, 0.10);
    }
}

/* ===================================
   Accessibility - Prefers Reduced Motion
   =================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slower: 0ms;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}