/* static/css/core/variables.css */
/* Все переменные проекта в одном месте */

:root {
    /* ===== ЦВЕТА ===== */
    --color-primary: #000000;
    --color-primary-hover: #333333;
    --color-secondary: #f8f9fa;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-muted: #6c757d;
    --color-light: #f8f9fa;
    --color-white: #ffffff;
    --color-dark: #212529;
    --color-border: #dee2e6;
    --color-border-light: #e9ecef;
    --color-bg-hover: #e9ecef;
    
    /* Красный для избранного */
    --color-favorite: #eb0000;
    
    /* ===== РАЗМЕРЫ ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* ===== СКРУГЛЕНИЯ ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;
    
    /* ===== ШРИФТЫ ===== */
    --font-family-base: "Ubuntu", sans-serif;
    --font-family-mono: "Monaco", "Courier New", monospace;
    
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 28px;
    
    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
    
    /* ===== Z-ИНДЕКСЫ ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
    --z-notification: 9999;
    
    /* ===== АНИМАЦИИ ===== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ===== БРЕЙКПОИНТЫ ===== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* ===== РАЗМЕРЫ КОМПОНЕНТОВ ===== */
    --header-height: 70px;
    --subnav-height: 50px;
    --card-image-height: 200px;
    --thumbnail-size: 80px;
    
    /* ===== КАЛЬКУЛЯТОР ===== */
    --calc-border-color: #dee2e6;
    --calc-bg-light: #fafafa;
    --calc-cut-color: #dc3545;
    --calc-waste-bg: #f8d7da;

    --svg-min-width: 550px;
}