:root {
  --primary: #0052FF;
  --primary-dark: #002B80;
  --primary-light: #EBF2FF;
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-inverse: #FFFFFF;
  --success: #059669;
  --success-light: #ECFDF5;
  --pending: #7C3AED;
  --pending-light: #F5F3FF;
  --danger: #DC2626;
  --danger-light: #FEF2F2;
  --warning: #D97706;
  --warning-light: #FFFAEB;
  --border: #D1D5DB;
  --border-strong: #9CA3AF;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --header-gradient: linear-gradient(135deg, #0052FF 0%, #002B80 100%);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --text-base: 16px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --focus-ring: 0 0 0 3px var(--primary-light);
}

[data-theme="dark"] {
  --primary: #3B82F6;
  --primary-dark: #2563EB;
  --primary-light: #1E3A5F;
  --bg: #0B1220;
  --surface: #111827;
  --text-primary: #F9FAFB;
  --text-secondary: #D1D5DB;
  --text-muted: #9CA3AF;
  --text-inverse: #111827;
  --success: #10B981;
  --success-light: #064E3B;
  --pending: #A78BFA;
  --pending-light: #3B2A6B;
  --danger: #EF4444;
  --danger-light: #7F1D1D;
  --warning: #F59E0B;
  --warning-light: #78350F;
  --border: #374151;
  --border-strong: #4B5563;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.4);
  --header-gradient: linear-gradient(135deg, #1E3A5F 0%, #0B1220 100%);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4);
}