/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
    /* Primary palette */
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --primary-ultra-light: #eff6ff;
    
    /* Secondary palette */
    --secondary: #8b5cf6;
    --secondary-dark: #7c3aed;
    --secondary-light: #a78bfa;
    
    /* Accent */
    --accent: #06b6d4;
    --accent-light: #22d3ee;
    
    /* Semantic colors */
    --success: #10b981;
    --success-dark: #059669;
    --success-light: #34d399;
    --warning: #f59e0b;
    --warning-dark: #d97706;
    --danger: #ef4444;
    --danger-dark: #dc2626;
    --danger-light: #f87171;
    --info: #0ea5e9;
    --info-light: #e0f2fe;
    --highlight: #fcd34d;
    --highlight-dark: #fbbf24;
    
    /* Neutral palette */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    
    /* Background */
    --white: #ffffff;
    --dark: #0f172a;
    --dark-soft: #1e293b;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 16px 32px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
    --shadow-2xl: 0 24px 48px rgba(15, 23, 42, 0.16), 0 12px 24px rgba(15, 23, 42, 0.08);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Spacing System (4px base unit) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    
    /* Animation Durations */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    
    /* Animation Easing Functions */
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
}