/* ==========================================================================
   CSS Variables - Design System
   Single source of truth for all design tokens
   Mobile-first approach with PC overrides via media queries
   ========================================================================== */

:root {
    /* --------------------------------------------------------------------------
       COLORS - Brand & UI
       -------------------------------------------------------------------------- */
    /* Primary Colors */
    --color-primary: #FF6B00;
    --color-primary-light: #FFE4D6;
    --color-primary-lighter: #FFF5EE;
    
    /* Accent Colors */
    --color-accent-purple: #6B5B95;
    --color-accent-blue: #00B0F0;
    --color-accent-green: #92D050;
    --color-accent-gold: #FFC000;
    --color-accent-red: #C00000;
    --color-accent-coral: #FFD4C4;
    
    /* Status Colors */
    --color-status-wht: #CC0000;
    --color-status-wht-bg: #FFD4C4;
    
    /* Background Colors */
    --color-bg-sidebar: #FFE4D6;
    --color-bg-dashboard: #f9f9f9;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f5f5f5;
    
    /* Border Colors */
    --color-border-primary: #FF6B00;
    --color-border-default: #ddd;
    --color-border-light: #eee;
    
    /* Text Colors */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-text-white: #fff;
    --color-text-red: #CC0000;
    --color-text-blue: #0066cc;
    
    /* --------------------------------------------------------------------------
       SPACING - Consistent spacing scale
       -------------------------------------------------------------------------- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 48px;
    
    /* --------------------------------------------------------------------------
       BREAKPOINTS - Responsive design
       -------------------------------------------------------------------------- */
    --bp-mobile: 640px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    
    /* --------------------------------------------------------------------------
       TOUCH TARGETS - Minimum sizes for mobile
       -------------------------------------------------------------------------- */
    --touch-min: 44px;
    --touch-comfortable: 48px;
    
    /* --------------------------------------------------------------------------
       TYPOGRAPHY - Font sizes
       -------------------------------------------------------------------------- */
    --font-xs: 9px;
    --font-sm: 10px;
    --font-md: 11px;
    --font-base: 12px;
    --font-lg: 14px;
    --font-xl: 16px;
    --font-2xl: 18px;
    --font-3xl: 20px;
    
    /* --------------------------------------------------------------------------
       LAYOUT - Container sizes
       -------------------------------------------------------------------------- */
    --container-max: 1200px;
    --container-form: 800px;
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 60px;
    
    /* --------------------------------------------------------------------------
       SHADOWS & EFFECTS
       -------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
    
    /* --------------------------------------------------------------------------
       BORDER RADIUS
       -------------------------------------------------------------------------- */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    
    /* --------------------------------------------------------------------------
       Z-INDEX SCALE
       -------------------------------------------------------------------------- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-sidebar: 250;
    --z-overlay: 400;
}

/* ==========================================================================
   PC/Desktop overrides - Only for larger screens
   ========================================================================== */
@media (min-width: 1024px) {
    :root {
        --sidebar-width: 280px;
    }
}