:root {
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;
}

body, .font-body, .font-inter {
  font-family: 'Inter', sans-serif;
}

.bg-modal {
  background-color: oklch(0.45 0.03 256.8 / 0.56);
  backdrop-filter: blur(1px);
}

.border-b, li {
    border-color: #e5e7eb;
}

.border-primary-300 {
    border-color: var(--color-primary-600);
}

.bg-primary-600 { background-color: var(--color-primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }

.text-primary { color: var(--color-primary-500); }
.bg-primary { background-color: var(--color-primary-500); }
.hover\:bg-primary:hover { background-color: var(--color-primary-600); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.text-primary-900 { color: var(--color-primary-900); }