/* 
 * Doctolab Color System - Figma Design System
 * Updated with official Figma color palette
 * Reference: https://www.figma.com/design/BHg1zGddCKyW4lUMzTpZMC/Doctolab--Copy-?node-id=8-7637&m=dev
 */

:root {
  /* Black & White */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Primary - Figma Design System */
  --color-primary-50: #f2f5f8;
  --color-primary-100: #e6eaf0;
  --color-primary-200: #cdd6e2;
  --color-primary-300: #b4c1d3;
  --color-primary-400: #9badc5;
  --color-primary-500: #8198b6;
  --color-primary-600: #6883a7;
  --color-primary-700: #4f6f99;
  --color-primary-800: #365a8a;
  --color-primary-900: #04316d;
  --color-primary-950: #00275c;

  /* Gray - Figma Design System */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* Red - Figma Design System */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #991b1b;
  --color-red-950: #450a0a;

  /* Orange - Figma Design System */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;

  /* Yellow - Figma Design System */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;

  /* Green - Figma Design System */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;

  /* Blue - Figma Design System */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;

  /* Semantic aliases */
  --color-primary: var(--color-primary-900);
  --color-primary-hover: var(--color-primary-800);
  --color-primary-foreground: var(--color-white);
  --color-accent: #ca8a04;
  /* gold accent used in UI */
  --color-accent-foreground: #0f172a;

  /* Emerald - Figma Design System */
  --color-emerald-50: #ECFDF5;
  --color-emerald-100: #D1FAE5;
  --color-emerald-200: #A7F3D0;
  --color-emerald-300: #86F0B3;
  --color-emerald-400: #6EE7B7;
  --color-emerald-500: #10B981;
  --color-emerald-600: #059669;
  --color-emerald-700: #0F913A;
}


/* Text color utilities */
.text-black {
  color: var(--color-black) !important;
}

.text-white {
  color: var(--color-white) !important;
}

/* Primary (brand blue) */
.text-primary-50 {
  color: var(--color-primary-50) !important;
}

.text-primary-100 {
  color: var(--color-primary-100) !important;
}

.text-primary-200 {
  color: var(--color-primary-200) !important;
}

.text-primary-300 {
  color: var(--color-primary-300) !important;
}

.text-primary-400 {
  color: var(--color-primary-400) !important;
}

.text-primary-500 {
  color: var(--color-primary-500) !important;
}

.text-primary-600 {
  color: var(--color-primary-600) !important;
}

.text-primary-700 {
  color: var(--color-primary-700) !important;
}

.text-primary-800 {
  color: var(--color-primary-800) !important;
}

.text-primary-900 {
  color: var(--color-primary-900) !important;
}

.text-primary-950 {
  color: var(--color-primary-950) !important;
}

/* Gray */
.text-gray-50 {
  color: var(--color-gray-50) !important;
}

.text-gray-100 {
  color: var(--color-gray-100) !important;
}

.text-gray-200 {
  color: var(--color-gray-200) !important;
}

.text-gray-300 {
  color: var(--color-gray-300) !important;
}

.text-gray-400 {
  color: var(--color-gray-400) !important;
}

.text-gray-500 {
  color: var(--color-gray-500) !important;
}

.text-gray-600 {
  color: var(--color-gray-600) !important;
}

.text-gray-700 {
  color: var(--color-gray-700) !important;
}

.text-gray-800 {
  color: var(--color-gray-800) !important;
}

.text-gray-900 {
  color: var(--color-gray-900) !important;
}

.text-gray-950 {
  color: var(--color-gray-950) !important;
}

/* Red */
.text-red-50 {
  color: var(--color-red-50) !important;
}

.text-red-100 {
  color: var(--color-red-100) !important;
}

.text-red-200 {
  color: var(--color-red-200) !important;
}

.text-red-300 {
  color: var(--color-red-300) !important;
}

.text-red-400 {
  color: var(--color-red-400) !important;
}

.text-red-500 {
  color: var(--color-red-500) !important;
}

.text-red-600 {
  color: var(--color-red-600) !important;
}

.text-red-700 {
  color: var(--color-red-700) !important;
}

.text-red-800 {
  color: var(--color-red-800) !important;
}

.text-red-900 {
  color: var(--color-red-900) !important;
}

.text-red-950 {
  color: var(--color-red-950) !important;
}

/* Orange */
.text-orange-50 {
  color: var(--color-orange-50) !important;
}

.text-orange-100 {
  color: var(--color-orange-100) !important;
}

.text-orange-200 {
  color: var(--color-orange-200) !important;
}

.text-orange-300 {
  color: var(--color-orange-300) !important;
}

.text-orange-400 {
  color: var(--color-orange-400) !important;
}

.text-orange-500 {
  color: var(--color-orange-500) !important;
}

.text-orange-600 {
  color: var(--color-orange-600) !important;
}

.text-orange-700 {
  color: var(--color-orange-700) !important;
}

.text-orange-800 {
  color: var(--color-orange-800) !important;
}

.text-orange-900 {
  color: var(--color-orange-900) !important;
}

.text-orange-950 {
  color: var(--color-orange-950) !important;
}

/* Yellow */
.text-yellow-50 {
  color: var(--color-yellow-50) !important;
}

.text-yellow-100 {
  color: var(--color-yellow-100) !important;
}

.text-yellow-200 {
  color: var(--color-yellow-200) !important;
}

.text-yellow-300 {
  color: var(--color-yellow-300) !important;
}

.text-yellow-400 {
  color: var(--color-yellow-400) !important;
}

.text-yellow-500 {
  color: var(--color-yellow-500) !important;
}

.text-yellow-600 {
  color: var(--color-yellow-600) !important;
}

.text-yellow-700 {
  color: var(--color-yellow-700) !important;
}

.text-yellow-800 {
  color: var(--color-yellow-800) !important;
}

.text-yellow-900 {
  color: var(--color-yellow-900) !important;
}

.text-yellow-950 {
  color: var(--color-yellow-950) !important;
}

/* Green */
.text-green-50 {
  color: var(--color-green-50) !important;
}

.text-green-100 {
  color: var(--color-green-100) !important;
}

.text-green-200 {
  color: var(--color-green-200) !important;
}

.text-green-300 {
  color: var(--color-green-300) !important;
}

.text-green-400 {
  color: var(--color-green-400) !important;
}

.text-green-500 {
  color: var(--color-green-500) !important;
}

.text-green-600 {
  color: var(--color-green-600) !important;
}

.text-green-700 {
  color: var(--color-green-700) !important;
}

.text-green-800 {
  color: var(--color-green-800) !important;
}

.text-green-900 {
  color: var(--color-green-900) !important;
}

.text-green-950 {
  color: var(--color-green-950) !important;
}

/* Blue */
.text-blue-50 {
  color: var(--color-blue-50) !important;
}

.text-blue-100 {
  color: var(--color-blue-100) !important;
}

.text-blue-200 {
  color: var(--color-blue-200) !important;
}

.text-blue-300 {
  color: var(--color-blue-300) !important;
}

.text-blue-400 {
  color: var(--color-blue-400) !important;
}

.text-blue-500 {
  color: var(--color-blue-500) !important;
}

.text-blue-600 {
  color: var(--color-blue-600) !important;
}

.text-blue-700 {
  color: var(--color-blue-700) !important;
}

.text-blue-800 {
  color: var(--color-blue-800) !important;
}

.text-blue-900 {
  color: var(--color-blue-900) !important;
}

.text-blue-950 {
  color: var(--color-blue-950) !important;
}

/* Semantic text helpers */
.text-primary {
  color: var(--color-primary) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-danger {
  color: var(--color-red-700) !important;
}

.text-warning {
  color: var(--color-orange-700) !important;
}

.text-success {
  color: var(--color-green-700) !important;
}

.text-muted {
  color: var(--color-gray-600) !important;
}

/* Background color utilities */
.bg-black {
  background-color: var(--color-black) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

/* Primary (brand blue) */
.bg-primary-50 {
  background-color: var(--color-primary-50) !important;
}

.bg-primary-100 {
  background-color: var(--color-primary-100) !important;
}

.bg-primary-200 {
  background-color: var(--color-primary-200) !important;
}

.bg-primary-300 {
  background-color: var(--color-primary-300) !important;
}

.bg-primary-400 {
  background-color: var(--color-primary-400) !important;
}

.bg-primary-500 {
  background-color: var(--color-primary-500) !important;
}

.bg-primary-600 {
  background-color: var(--color-primary-600) !important;
}

.bg-primary-700 {
  background-color: var(--color-primary-700) !important;
}

.bg-primary-800 {
  background-color: var(--color-primary-800) !important;
}

.bg-primary-900 {
  background-color: var(--color-primary-900) !important;
}

.bg-primary-950 {
  background-color: var(--color-primary-950) !important;
}

/* Gray */
.bg-gray-50 {
  background-color: var(--color-gray-50) !important;
}

.bg-gray-100 {
  background-color: var(--color-gray-100) !important;
}

.bg-gray-200 {
  background-color: var(--color-gray-200) !important;
}

.bg-gray-300 {
  background-color: var(--color-gray-300) !important;
}

.bg-gray-400 {
  background-color: var(--color-gray-400) !important;
}

.bg-gray-500 {
  background-color: var(--color-gray-500) !important;
}

.bg-gray-600 {
  background-color: var(--color-gray-600) !important;
}

.bg-gray-700 {
  background-color: var(--color-gray-700) !important;
}

.bg-gray-800 {
  background-color: var(--color-gray-800) !important;
}

.bg-gray-900 {
  background-color: var(--color-gray-900) !important;
}

.bg-gray-950 {
  background-color: var(--color-gray-950) !important;
}

/* Red */
.bg-red-50 {
  background-color: var(--color-red-50) !important;
}

.bg-red-100 {
  background-color: var(--color-red-100) !important;
}

.bg-red-200 {
  background-color: var(--color-red-200) !important;
}

.bg-red-300 {
  background-color: var(--color-red-300) !important;
}

.bg-red-400 {
  background-color: var(--color-red-400) !important;
}

.bg-red-500 {
  background-color: var(--color-red-500) !important;
}

.bg-red-600 {
  background-color: var(--color-red-600) !important;
}

.bg-red-700 {
  background-color: var(--color-red-700) !important;
}

.bg-red-800 {
  background-color: var(--color-red-800) !important;
}

.bg-red-900 {
  background-color: var(--color-red-900) !important;
}

.bg-red-950 {
  background-color: var(--color-red-950) !important;
}

/* Orange */
.bg-orange-50 {
  background-color: var(--color-orange-50) !important;
}

.bg-orange-100 {
  background-color: var(--color-orange-100) !important;
}

.bg-orange-200 {
  background-color: var(--color-orange-200) !important;
}

.bg-orange-300 {
  background-color: var(--color-orange-300) !important;
}

.bg-orange-400 {
  background-color: var(--color-orange-400) !important;
}

.bg-orange-500 {
  background-color: var(--color-orange-500) !important;
}

.bg-orange-600 {
  background-color: var(--color-orange-600) !important;
}

.bg-orange-700 {
  background-color: var(--color-orange-700) !important;
}

.bg-orange-800 {
  background-color: var(--color-orange-800) !important;
}

.bg-orange-900 {
  background-color: var(--color-orange-900) !important;
}

.bg-orange-950 {
  background-color: var(--color-orange-950) !important;
}

/* Yellow */
.bg-yellow-50 {
  background-color: var(--color-yellow-50) !important;
}

.bg-yellow-100 {
  background-color: var(--color-yellow-100) !important;
}

.bg-yellow-200 {
  background-color: var(--color-yellow-200) !important;
}

.bg-yellow-300 {
  background-color: var(--color-yellow-300) !important;
}

.bg-yellow-400 {
  background-color: var(--color-yellow-400) !important;
}

.bg-yellow-500 {
  background-color: var(--color-yellow-500) !important;
}

.bg-yellow-600 {
  background-color: var(--color-yellow-600) !important;
}

.bg-yellow-700 {
  background-color: var(--color-yellow-700) !important;
}

.bg-yellow-800 {
  background-color: var(--color-yellow-800) !important;
}

.bg-yellow-900 {
  background-color: var(--color-yellow-900) !important;
}

.bg-yellow-950 {
  background-color: var(--color-yellow-950) !important;
}

/* Green */
.bg-green-50 {
  background-color: var(--color-green-50) !important;
}

.bg-green-100 {
  background-color: var(--color-green-100) !important;
}

.bg-green-200 {
  background-color: var(--color-green-200) !important;
}

.bg-green-300 {
  background-color: var(--color-green-300) !important;
}

.bg-green-400 {
  background-color: var(--color-green-400) !important;
}

.bg-green-500 {
  background-color: var(--color-green-500) !important;
}

.bg-green-600 {
  background-color: var(--color-green-600) !important;
}

.bg-green-700 {
  background-color: var(--color-green-700) !important;
}

.bg-green-800 {
  background-color: var(--color-green-800) !important;
}

.bg-green-900 {
  background-color: var(--color-green-900) !important;
}

.bg-green-950 {
  background-color: var(--color-green-950) !important;
}

/* Blue */
.bg-blue-50 {
  background-color: var(--color-blue-50) !important;
}

.bg-blue-100 {
  background-color: var(--color-blue-100) !important;
}

.bg-blue-200 {
  background-color: var(--color-blue-200) !important;
}

.bg-blue-300 {
  background-color: var(--color-blue-300) !important;
}

.bg-blue-400 {
  background-color: var(--color-blue-400) !important;
}

.bg-blue-500 {
  background-color: var(--color-blue-500) !important;
}

.bg-blue-600 {
  background-color: var(--color-blue-600) !important;
}

.bg-blue-700 {
  background-color: var(--color-blue-700) !important;
}

.bg-blue-800 {
  background-color: var(--color-blue-800) !important;
}

.bg-blue-900 {
  background-color: var(--color-blue-900) !important;
}

.bg-blue-950 {
  background-color: var(--color-blue-950) !important;
}

/* Semantic background helpers */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-accent {
  background-color: var(--color-accent) !important;
}

.bg-danger {
  background-color: var(--color-red-700) !important;
}

.bg-warning {
  background-color: var(--color-orange-700) !important;
}

.bg-success {
  background-color: var(--color-green-700) !important;
}

.bg-muted {
  background-color: var(--color-gray-100) !important;
}