/**
 * CSS Variables
 * Mobile-First UI Redesign
 */

:root {
    /* ========== Side Menu Colors ========== */
    --menu-bg: #ffffff;
    --menu-border: #e0e0e0;
    --menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    /* Menu Item Colors */
    --menu-item-text: #666666;
    --menu-item-text-hover: #333333;
    --menu-item-text-active: #ffffff;
    --menu-item-icon: #666666;
    --menu-item-icon-hover: #333333;
    --menu-item-icon-active: #ffffff;
    --menu-item-bg-hover: #f8f9fa;
    
    /* Active Item Gradient */
    --menu-active-gradient-start: #667eea;
    --menu-active-gradient-end: #764ba2;
    --menu-active-border: 4px solid #667eea;
    
    /* ========== Spacing & Sizing ========== */
    /* Menu Dimensions */
    --menu-width-desktop: 250px;
    --menu-width-tablet: 80px;
    --menu-width-mobile: 80%;
    
    /* Item Sizing */
    --menu-item-height: 56px;
    --menu-icon-size: 24px;
    --menu-padding-vertical: 16px;
    --menu-padding-horizontal: 20px;
    
    /* Touch Targets */
    --touch-target-min: 44px;
    --touch-target-recommended: 48px;
    
    /* ========== Breakpoints ========== */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1025px;
    
    /* ========== Animations ========== */
    --transition-fast: 200ms;
    --transition-normal: 300ms;
    --transition-slow: 400ms;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== Typography ========== */
    --font-size-mobile-base: 16px;
    --font-size-desktop-base: 14px;
    --font-size-menu-label: 14px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    
    /* ========== Status Colors ========== */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;
    
    /* ========== Neutral Colors ========== */
    --color-white: #ffffff;
    --color-light-gray: #f8f9fa;
    --color-medium-gray: #6c757d;
    --color-dark-gray: #333333;
    --color-black: #000000;
    
    /* ========== Primary Colors ========== */
    --color-purple: #667eea;
    --color-deep-purple: #764ba2;
    --color-blue: #4facfe;
    --color-green: #43e97b;
    
    /* ========== Overlay ========== */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --overlay-transition: opacity var(--transition-fast) var(--transition-easing);
    
    /* ========== Z-Index Layers ========== */
    --z-index-base: 1;
    --z-index-menu: 100;
    --z-index-overlay: 99;
    --z-index-hamburger: 101;
    --z-index-modal: 200;
}