:root {
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-success-50: #ecfdf5;
  --color-success-600: #059669;
  --color-warning-50: #fffbeb;
  --color-warning-600: #d97706;
  --color-danger-50: #fff1f2;
  --color-danger-600: #e11d48;
  --color-info-50: #eff6ff;
  --color-info-600: #2563eb;
  --color-neutral-0: #ffffff;
  --color-neutral-25: #fcfcfd;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  --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;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, .09);

  --motion-fast: 150ms;
  --motion-normal: 220ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}