/* CSS Custom Properties - Design System Variables */
:root {
    /* Colors - Mobile-first branding */
    --primary-500: #667eea;
    --primary-600: #5a67d8;
    --primary-700: #4c51bf;
    --secondary-500: #764ba2;
    --secondary-600: #68409e;
    
    /* Semantic colors - Modern and harmonious */
    --success-500: #10b981;
    --success-600: #059669;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    
    /* Neutral colors */
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-300: #ced4da;
    --gray-400: #adb5bd;
    --gray-500: #6c757d;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;
    --gray-900: #101419;
    
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-muted: var(--gray-100);
    
    /* Text colors */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-500);
    --text-inverse: #ffffff;
    
    /* Border colors */
    --border-light: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-strong: var(--gray-400);
    
    /* Spacing scale - Mobile-optimized */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    
    /* Typography scale */
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Border radius - More rounded for modern look */
    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.75rem;  /* 12px */
    --radius-lg: 1rem;     /* 16px */
    --radius-xl: 1.5rem;   /* 24px */
    --radius-2xl: 2rem;    /* 32px */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    
    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1050;
    
    /* Mobile touch targets */
    --touch-target: 44px; /* Minimum 44px for accessibility */
    
    /* Layout breakpoints (for JS usage) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}