: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;
  --color-primary: #1d4ed8;

  --color-danger-600: #c90000;
  --color-danger: #d40518;

  --color-warning-600: #ff9100;
  --color-warning: #ffc107;

  --color-success-600: #388e3c;
  --color-success: #4caf50;

  --color-info-600: #0e4b87;
  --color-info: #2196f3;
}

.scrollbar-primary::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}

.scrollbar-primary::-webkit-scrollbar-track {
  background: var(--color-primary-900);
}

.scrollbar-primary::-webkit-scrollbar-thumb {
  background: var(--color-primary-900);
  border-radius: 4px;
}

.scrollbar-primary::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-700);
}

.scrollbar-primary {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--color-primary-900) var(--color-primary-50); /* Firefox */
}