/**
 * Onboarding CSS Variables - Consolidated Design System
 */

:root {
  color-scheme: light;
  --color-primary: #2563eb;
  --color-primary-600: #1d4ed8;
  --color-accent: #22c55e;
  --color-primary-rgb: 37, 99, 235;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-success-rgb: 16, 185, 129;
  --color-warning-rgb: 245, 158, 11;
  --color-error-rgb: 239, 68, 68;
  --color-success-50: #ecfdf5;
  --color-success-200: #a7f3d0;
  --color-success-600: #059669;
  --color-success-800: #065f46;
  --color-warning-50: #fffbeb;
  --color-warning-200: #fde68a;
  --color-warning-800: #92400e;
  --color-error-50: #fef2f2;
  --color-error-200: #fecaca;
  --color-error-600: #dc2626;
  --color-error-800: #991b1b;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-surface: #ffffff;
  --color-bg: #f8fafc;
  --color-border: #e2e8f0;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 30px 60px rgba(15, 23, 42, 0.18);
  --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --gradient-hero:
    radial-gradient(
      circle at 15% 20%,
      rgba(79, 70, 229, 0.35),
      transparent 55%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(14, 165, 233, 0.35),
      transparent 45%
    ),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #4f46e5 100%);
}