/* ===================================================================
   Bootstrap Extended Colors Framework
   Bootstrap 5.3+ Compatible - Production Ready
   Generated with comprehensive 25-color palette and complete theming system
   =================================================================== */

/* ===================================================================
   SECTION: Variables
   Core color definitions and CSS variables for all 25 custom colors
   =================================================================== */

:root {
  /* Indigo Color Scale */
  --bs-indigo-100: #e0e7ff;
  --bs-indigo-200: #c7d7fe;
  --bs-indigo-300: #9eaffd;
  --bs-indigo-400: #7e8ffd;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #5859e2;
  --bs-indigo-700: #4f50d2;
  --bs-indigo-800: #4646b7;
  --bs-indigo-900: #3e3d9f;
  
  /* Purple Color Scale */
  --bs-purple-100: #f3e5f5;
  --bs-purple-200: #e5d4f0;
  --bs-purple-300: #d1b8ea;
  --bs-purple-400: #bf9ce4;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #8e4ba8;
  --bs-purple-700: #7c3f96;
  --bs-purple-800: #6a3483;
  --bs-purple-900: #5a2a6f;
  
  /* Violet Color Scale */
  --bs-violet-100: #f3e8ff;
  --bs-violet-200: #ead4fe;
  --bs-violet-300: #dca6fd;
  --bs-violet-400: #d077fc;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #7c4ce6;
  --bs-violet-700: #6e44d4;
  --bs-violet-800: #603ec2;
  --bs-violet-900: #5234a7;
  
  /* Fuchsia Color Scale */
  --bs-fuchsia-100: #fde8ff;
  --bs-fuchsia-200: #fcd0fe;
  --bs-fuchsia-300: #f8a7fc;
  --bs-fuchsia-400: #f680fa;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #d81b57;
  --bs-fuchsia-700: #c61a4c;
  --bs-fuchsia-800: #b51941;
  --bs-fuchsia-900: #a31637;
  
  /* Pink Color Scale */
  --bs-pink-100: #fce4ec;
  --bs-pink-200: #f8cadd;
  --bs-pink-300: #f4a9ce;
  --bs-pink-400: #f08ac0;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #d81b57;
  --bs-pink-700: #c61a4c;
  --bs-pink-800: #b51941;
  --bs-pink-900: #a31637;
  
  /* Rose Color Scale */
  --bs-rose-100: #ffe4e6;
  --bs-rose-200: #fecdd2;
  --bs-rose-300: #fda2aa;
  --bs-rose-400: #fc8892;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #e73758;
  --bs-rose-700: #d32e4e;
  --bs-rose-800: #be273f;
  --bs-rose-900: #a51e33;
  
  /* Crimson Color Scale */
  --bs-crimson-100: #ffe4e6;
  --bs-crimson-200: #fecdd2;
  --bs-crimson-300: #fda2aa;
  --bs-crimson-400: #fc8892;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #c71b3f;
  --bs-crimson-700: #ad1a36;
  --bs-crimson-800: #93182e;
  --bs-crimson-900: #791624;
  
  /* Red Color Scale */
  --bs-red-100: #fee2e2;
  --bs-red-200: #fecaca;
  --bs-red-300: #fca5a5;
  --bs-red-400: #f97272;
  --bs-red-500: #ef4444;
  --bs-red-600: #dc2626;
  --bs-red-700: #b91c1c;
  --bs-red-800: #991b1b;
  --bs-red-900: #7f1d1d;
  
  /* Orange Color Scale */
  --bs-orange-100: #ffedd5;
  --bs-orange-200: #fed7aa;
  --bs-orange-300: #fdba74;
  --bs-orange-400: #fb923c;
  --bs-orange-500: #f97316;
  --bs-orange-600: #ea580c;
  --bs-orange-700: #c2410c;
  --bs-orange-800: #9a3412;
  --bs-orange-900: #7c2d12;
  
  /* Amber Color Scale */
  --bs-amber-100: #fef3c7;
  --bs-amber-200: #fde68a;
  --bs-amber-300: #fcd34d;
  --bs-amber-400: #fbbf24;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #d97706;
  --bs-amber-700: #b45309;
  --bs-amber-800: #924b0f;
  --bs-amber-900: #78350f;
  
  /* Gold Color Scale */
  --bs-gold-100: #fef3c7;
  --bs-gold-200: #fde68a;
  --bs-gold-300: #fcd34d;
  --bs-gold-400: #fbbf24;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #b5942b;
  --bs-gold-700: #967a22;
  --bs-gold-800: #7a6118;
  --bs-gold-900: #645212;
  
  /* Yellow Color Scale */
  --bs-yellow-100: #fef9c3;
  --bs-yellow-200: #fef08a;
  --bs-yellow-300: #fde047;
  --bs-yellow-400: #fbcf33;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #ca8a04;
  --bs-yellow-700: #a16a04;
  --bs-yellow-800: #845b05;
  --bs-yellow-900: #713e04;
  
  /* Lime Color Scale */
  --bs-lime-100: #ecfccb;
  --bs-lime-200: #d9f99f;
  --bs-lime-300: #bef264;
  --bs-lime-400: #a3e635;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #65a30d;
  --bs-lime-700: #4f7c0c;
  --bs-lime-800: #3f6308;
  --bs-lime-900: #345107;
  
  /* Green Color Scale */
  --bs-green-100: #dcfce7;
  --bs-green-200: #bbf7d0;
  --bs-green-300: #86efac;
  --bs-green-400: #4ade80;
  --bs-green-500: #22c55e;
  --bs-green-600: #16a34a;
  --bs-green-700: #15803d;
  --bs-green-800: #166534;
  --bs-green-900: #14532d;
  
  /* Emerald Color Scale */
  --bs-emerald-100: #d1fae5;
  --bs-emerald-200: #a7f3d0;
  --bs-emerald-300: #6ee7b7;
  --bs-emerald-400: #34d399;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #059669;
  --bs-emerald-700: #047857;
  --bs-emerald-800: #065f46;
  --bs-emerald-900: #064e3b;
  
  /* Teal Color Scale */
  --bs-teal-100: #ccfbf1;
  --bs-teal-200: #99f6e4;
  --bs-teal-300: #5eead4;
  --bs-teal-400: #2dd4bf;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #0d9488;
  --bs-teal-700: #0f766e;
  --bs-teal-800: #115e59;
  --bs-teal-900: #134e4a;
  
  /* Cyan Color Scale */
  --bs-cyan-100: #cffafe;
  --bs-cyan-200: #a5f3fc;
  --bs-cyan-300: #67e8f9;
  --bs-cyan-400: #22d3ee;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #0891b2;
  --bs-cyan-700: #0e7490;
  --bs-cyan-800: #155e75;
  --bs-cyan-900: #164e63;
  
  /* Sky Color Scale */
  --bs-sky-100: #e0f2fe;
  --bs-sky-200: #bae6fd;
  --bs-sky-300: #7dd3fc;
  --bs-sky-400: #38bdf8;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #0284c7;
  --bs-sky-700: #0369a1;
  --bs-sky-800: #075985;
  --bs-sky-900: #0c4a6e;
  
  /* Blue Color Scale */
  --bs-blue-100: #dbeafe;
  --bs-blue-200: #bfdbfe;
  --bs-blue-300: #93c5fd;
  --bs-blue-400: #60a5fa;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #2563eb;
  --bs-blue-700: #1d4ed8;
  --bs-blue-800: #1e40af;
  --bs-blue-900: #1e3a8a;
  
  /* Azure Color Scale */
  --bs-azure-100: #e0f2fe;
  --bs-azure-200: #bae6fd;
  --bs-azure-300: #7dd3fc;
  --bs-azure-400: #38bdf8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #0369a1;
  --bs-azure-700: #075985;
  --bs-azure-800: #0c4a6e;
  --bs-azure-900: #082f49;
  
  /* Navy Color Scale */
  --bs-navy-100: #e0e7ff;
  --bs-navy-200: #c7d7fe;
  --bs-navy-300: #9eaffd;
  --bs-navy-400: #7e8ffd;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #0f172a;
  --bs-navy-700: #0d1117;
  --bs-navy-800: #09090f;
  --bs-navy-900: #050507;
  
  /* Slate Color Scale */
  --bs-slate-100: #f8fafc;
  --bs-slate-200: #e2e8f0;
  --bs-slate-300: #cbd5e1;
  --bs-slate-400: #94a3b8;
  --bs-slate-500: #64748b;
  --bs-slate-600: #475569;
  --bs-slate-700: #334155;
  --bs-slate-800: #1e293b;
  --bs-slate-900: #0f172a;
  
  /* Stone Color Scale */
  --bs-stone-100: #fafaf9;
  --bs-stone-200: #e7e5e4;
  --bs-stone-300: #d6d3d1;
  --bs-stone-400: #a8a29e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #57534e;
  --bs-stone-700: #44403c;
  --bs-stone-800: #292524;
  --bs-stone-900: #1c1917;
  
  /* Brown Color Scale */
  --bs-brown-100: #faf5f0;
  --bs-brown-200: #f3e8d6;
  --bs-brown-300: #e7d5b1;
  --bs-brown-400: #dcb48d;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #8a4a25;
  --bs-brown-700: #703a1d;
  --bs-brown-800: #5c2e17;
  --bs-brown-900: #482212;
  
  /* Coral Color Scale */
  --bs-coral-100: #ffe4d6;
  --bs-coral-200: #ffd5ba;
  --bs-coral-300: #ffc49e;
  --bs-coral-400: #ffb381;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ff8c5c;
  --bs-coral-700: #ff7a4a;
  --bs-coral-800: #ff6738;
  --bs-coral-900: #ff4e26;
}

/* ===================================================================
   SECTION: Dark Mode
   Dark theme color overrides for all 25 colors
   =================================================================== */

[data-bs-theme="dark"] {
  /* Indigo Dark Mode */
  --bs-indigo-100: #1e1e3f;
  --bs-indigo-200: #2e2e5f;
  --bs-indigo-300: #3e3e7f;
  --bs-indigo-400: #4e4e9f;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #7e8fff;
  --bs-indigo-700: #9eaffd;
  --bs-indigo-800: #bfcfff;
  --bs-indigo-900: #dfdeff;
  
  /* Purple Dark Mode */
  --bs-purple-100: #2a1e2e;
  --bs-purple-200: #3a2e3e;
  --bs-purple-300: #4a3e4e;
  --bs-purple-400: #5a4e5e;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #b26bce;
  --bs-purple-700: #c58ae0;
  --bs-purple-800: #d9b1ed;
  --bs-purple-900: #ecc3fc;
  
  /* Violet Dark Mode */
  --bs-violet-100: #221c2d;
  --bs-violet-200: #322c3d;
  --bs-violet-300: #42364d;
  --bs-violet-400: #52405d;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #a279fa;
  --bs-violet-700: #b799fd;
  --bs-violet-800: #c9b9fe;
  --bs-violet-900: #dbb9ff;
  
  /* Fuchsia Dark Mode */
  --bs-fuchsia-100: #2e0d1a;
  --bs-fuchsia-200: #3e1d2a;
  --bs-fuchsia-300: #4e2d3a;
  --bs-fuchsia-400: #5e3d4a;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #f04977;
  --bs-fuchsia-700: #f4718c;
  --bs-fuchsia-800: #f69ba0;
  --bs-fuchsia-900: #f9bcc1;
  
  /* Pink Dark Mode */
  --bs-pink-100: #2e0d1a;
  --bs-pink-200: #3e1d2a;
  --bs-pink-300: #4e2d3a;
  --bs-pink-400: #5e3d4a;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #f04977;
  --bs-pink-700: #f4718c;
  --bs-pink-800: #f69ba0;
  --bs-pink-900: #f9bcc1;
  
  /* Rose Dark Mode */
  --bs-rose-100: #2e0e13;
  --bs-rose-200: #3e1e23;
  --bs-rose-300: #4e2e33;
  --bs-rose-400: #5e3e43;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #f66578;
  --bs-rose-700: #f8879d;
  --bs-rose-800: #fa98ac;
  --bs-rose-900: #fcaab6;
  
  /* Crimson Dark Mode */
  --bs-crimson-100: #2e0d12;
  --bs-crimson-200: #3e1d22;
  --bs-crimson-300: #4e2d32;
  --bs-crimson-400: #5e3d42;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #e44567;
  --bs-crimson-700: #e76d87;
  --bs-crimson-800: #ea8fa5;
  --bs-crimson-900: #edafbe;
  
  /* Red Dark Mode */
  --bs-red-100: #2e0e0e;
  --bs-red-200: #3e1e1e;
  --bs-red-300: #4e2e2e;
  --bs-red-400: #5e3e3e;
  --bs-red-500: #ef4444;
  --bs-red-600: #f16767;
  --bs-red-700: #f38a8a;
  --bs-red-800: #f4abab;
  --bs-red-900: #f7bcbc;
  
  /* Orange Dark Mode */
  --bs-orange-100: #2e1907;
  --bs-orange-200: #3e271b;
  --bs-orange-300: #4e3520;
  --bs-orange-400: #5e4324;
  --bs-orange-500: #f97316;
  --bs-orange-600: #fba541;
  --bs-orange-700: #fcc46b;
  --bs-orange-800: #fcd795;
  --bs-orange-900: #fde8b9;
  
  /* Amber Dark Mode */
  --bs-amber-100: #2e1f0b;
  --bs-amber-200: #3e2b18;
  --bs-amber-300: #4e3726;
  --bs-amber-400: #5e4334;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #f7b933;
  --bs-amber-700: #f8d158;
  --bs-amber-800: #f9d77d;
  --bs-amber-900: #fae9a2;
  
  /* Gold Dark Mode */
  --bs-gold-100: #2e210d;
  --bs-gold-200: #3e2c19;
  --bs-gold-300: #4e3825;
  --bs-gold-400: #5e4432;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #d8c35f;
  --bs-gold-700: #dcc886;
  --bs-gold-800: #e0cda8;
  --bs-gold-900: #e4d1ce;
  
  /* Yellow Dark Mode */
  --bs-yellow-100: #2e1f0b;
  --bs-yellow-200: #3e2b18;
  --bs-yellow-300: #4e3726;
  --bs-yellow-400: #5e4334;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #e7c30f;
  --bs-yellow-700: #e4b216;
  --bs-yellow-800: #e1a11e;
  --bs-yellow-900: #de9f25;
  
  /* Lime Dark Mode */
  --bs-lime-100: #1e2509;
  --bs-lime-200: #2d3a0d;
  --bs-lime-300: #3c4f12;
  --bs-lime-400: #4b6416;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #a0e42e;
  --bs-lime-700: #bcec52;
  --bs-lime-800: #d0f177;
  --bs-lime-900: #d4f18b;
  
  /* Green Dark Mode */
  --bs-green-100: #0e1f0b;
  --bs-green-200: #1e3b1e;
  --bs-green-300: #2d5831;
  --bs-green-400: #3c742f;
  --bs-green-500: #22c55e;
  --bs-green-600: #4dd47c;
  --bs-green-700: #79e19b;
  --bs-green-800: #a6eec9;
  --bs-green-900: #c3fee7;
  
  /* Emerald Dark Mode */
  --bs-emerald-100: #052f23;
  --bs-emerald-200: #075436;
  --bs-emerald-300: #086949;
  --bs-emerald-400: #0a7f5b;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #3dd0a7;
  --bs-emerald-700: #60e6cc;
  --bs-emerald-800: #92ede2;
  --bs-emerald-900: #a5f0e8;
  
  /* Teal Dark Mode */
  --bs-teal-100: #042e28;
  --bs-teal-200: #065e56;
  --bs-teal-300: #087e85;
  --bs-teal-400: #0a9db3;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #3cc9c0;
  --bs-teal-700: #63dad5;
  --bs-teal-800: #86ebe9;
  --bs-teal-900: #a9fcf5;
  
  /* Cyan Dark Mode */
  --bs-cyan-100: #04223a;
  --bs-cyan-200: #094c6a;
  --bs-cyan-300: #0b7299;
  --bs-cyan-400: #0d98b8;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #38d1ec;
  --bs-cyan-700: #5ae7f5;
  --bs-cyan-800: #8deeed;
  --bs-cyan-900: #c0f4f7;
  
  /* Sky Dark Mode */
  --bs-sky-100: #04233a;
  --bs-sky-200: #094870;
  --bs-sky-300: #0b6ca7;
  --bs-sky-400: #0d8fd7;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #3bbdf0;
  --bs-sky-700: #62d2f2;
  --bs-sky-800: #94e6f4;
  --bs-sky-900: #c6f9f7;
  
  /* Blue Dark Mode */
  --bs-blue-100: #11183a;
  --bs-blue-200: #1c2c5e;
  --bs-blue-300: #273081;
  --bs-blue-400: #3243a3;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #6699f9;
  --bs-blue-700: #8bb0fa;
  --bs-blue-800: #b1c6fb;
  --bs-blue-900: #d7ddfc;
  
  /* Azure Dark Mode */
  --bs-azure-100: #04223a;
  --bs-azure-200: #094c6a;
  --bs-azure-300: #0b7299;
  --bs-azure-400: #0d98b8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #3b9fd0;
  --bs-azure-700: #5bb6d7;
  --bs-azure-800: #80cde0;
  --bs-azure-900: #a6d4e9;
  
  /* Navy Dark Mode */
  --bs-navy-100: #0a0f19;
  --bs-navy-200: #141c2e;
  --bs-navy-300: #1e293b;
  --bs-navy-400: #273449;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #334155;
  --bs-navy-700: #475569;
  --bs-navy-800: #64748b;
  --bs-navy-900: #94a3b8;
  
  /* Slate Dark Mode */
  --bs-slate-100: #0f172a;
  --bs-slate-200: #1e293b;
  --bs-slate-300: #273449;
  --bs-slate-400: #334155;
  --bs-slate-500: #64748b;
  --bs-slate-600: #94a3b8;
  --bs-slate-700: #cbd5e1;
  --bs-slate-800: #e2e8f0;
  --bs-slate-900: #f8fafc;
  
  /* Stone Dark Mode */
  --bs-stone-100: #1c1917;
  --bs-stone-200: #292524;
  --bs-stone-300: #44403c;
  --bs-stone-400: #57534e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #a8a29e;
  --bs-stone-700: #d6d3d1;
  --bs-stone-800: #e7e5e4;
  --bs-stone-900: #fafaf9;
  
  /* Brown Dark Mode */
  --bs-brown-100: #27190e;
  --bs-brown-200: #3d2514;
  --bs-brown-300: #53311a;
  --bs-brown-400: #694c21;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #bf7a46;
  --bs-brown-700: #d5a16d;
  --bs-brown-800: #e5c395;
  --bs-brown-900: #f6e5bd;
  
  /* Coral Dark Mode */
  --bs-coral-100: #2b0f0a;
  --bs-coral-200: #46251b;
  --bs-coral-300: #61402c;
  --bs-coral-400: #7c4a3d;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ffb58a;
  --bs-coral-700: #ffc6a2;
  --bs-coral-800: #ffd7ba;
  --bs-coral-900: #ffe9d1;
}

/* ===================================================================
   SECTION: Text Colors
   Text color utilities for all 25 colors with emphasis and tertiary variants
   =================================================================== */

.text-indigo {
  color: var(--bs-indigo-500) !important;
}
.text-indigo-emphasis {
  color: var(--bs-indigo-900) !important;
}
.text-indigo-tertiary {
  color: var(--bs-indigo-700) !important;
}
.text-purple {
  color: var(--bs-purple-500) !important;
}
.text-purple-emphasis {
  color: var(--bs-purple-900) !important;
}
.text-purple-tertiary {
  color: var(--bs-purple-700) !important;
}
.text-violet {
  color: var(--bs-violet-500) !important;
}
.text-violet-emphasis {
  color: var(--bs-violet-900) !important;
}
.text-violet-tertiary {
  color: var(--bs-violet-700) !important;
}
.text-fuchsia {
  color: var(--bs-fuchsia-500) !important;
}
.text-fuchsia-emphasis {
  color: var(--bs-fuchsia-900) !important;
}
.text-fuchsia-tertiary {
  color: var(--bs-fuchsia-700) !important;
}
.text-pink {
  color: var(--bs-pink-500) !important;
}
.text-pink-emphasis {
  color: var(--bs-pink-900) !important;
}
.text-pink-tertiary {
  color: var(--bs-pink-700) !important;
}
.text-rose {
  color: var(--bs-rose-500) !important;
}
.text-rose-emphasis {
  color: var(--bs-rose-900) !important;
}
.text-rose-tertiary {
  color: var(--bs-rose-700) !important;
}
.text-crimson {
  color: var(--bs-crimson-500) !important;
}
.text-crimson-emphasis {
  color: var(--bs-crimson-900) !important;
}
.text-crimson-tertiary {
  color: var(--bs-crimson-700) !important;
}
.text-red {
  color: var(--bs-red-500) !important;
}
.text-red-emphasis {
  color: var(--bs-red-900) !important;
}
.text-red-tertiary {
  color: var(--bs-red-700) !important;
}
.text-orange {
  color: var(--bs-orange-500) !important;
}
.text-orange-emphasis {
  color: var(--bs-orange-900) !important;
}
.text-orange-tertiary {
  color: var(--bs-orange-700) !important;
}
.text-amber {
  color: var(--bs-amber-500) !important;
}
.text-amber-emphasis {
  color: var(--bs-amber-900) !important;
}
.text-amber-tertiary {
  color: var(--bs-amber-700) !important;
}
.text-gold {
  color: var(--bs-gold-500) !important;
}
.text-gold-emphasis {
  color: var(--bs-gold-900) !important;
}
.text-gold-tertiary {
  color: var(--bs-gold-700) !important;
}
.text-yellow {
  color: var(--bs-yellow-500) !important;
}
.text-yellow-emphasis {
  color: var(--bs-yellow-900) !important;
}
.text-yellow-tertiary {
  color: var(--bs-yellow-700) !important;
}
.text-lime {
  color: var(--bs-lime-500) !important;
}
.text-lime-emphasis {
  color: var(--bs-lime-900) !important;
}
.text-lime-tertiary {
  color: var(--bs-lime-700) !important;
}
.text-green {
  color: var(--bs-green-500) !important;
}
.text-green-emphasis {
  color: var(--bs-green-900) !important;
}
.text-green-tertiary {
  color: var(--bs-green-700) !important;
}
.text-emerald {
  color: var(--bs-emerald-500) !important;
}
.text-emerald-emphasis {
  color: var(--bs-emerald-900) !important;
}
.text-emerald-tertiary {
  color: var(--bs-emerald-700) !important;
}
.text-teal {
  color: var(--bs-teal-500) !important;
}
.text-teal-emphasis {
  color: var(--bs-teal-900) !important;
}
.text-teal-tertiary {
  color: var(--bs-teal-700) !important;
}
.text-cyan {
  color: var(--bs-cyan-500) !important;
}
.text-cyan-emphasis {
  color: var(--bs-cyan-900) !important;
}
.text-cyan-tertiary {
  color: var(--bs-cyan-700) !important;
}
.text-sky {
  color: var(--bs-sky-500) !important;
}
.text-sky-emphasis {
  color: var(--bs-sky-900) !important;
}
.text-sky-tertiary {
  color: var(--bs-sky-700) !important;
}
.text-blue {
  color: var(--bs-blue-500) !important;
}
.text-blue-emphasis {
  color: var(--bs-blue-900) !important;
}
.text-blue-tertiary {
  color: var(--bs-blue-700) !important;
}
.text-azure {
  color: var(--bs-azure-500) !important;
}
.text-azure-emphasis {
  color: var(--bs-azure-900) !important;
}
.text-azure-tertiary {
  color: var(--bs-azure-700) !important;
}
.text-navy {
  color: var(--bs-navy-500) !important;
}
.text-navy-emphasis {
  color: var(--bs-navy-900) !important;
}
.text-navy-tertiary {
  color: var(--bs-navy-700) !important;
}
.text-slate {
  color: var(--bs-slate-500) !important;
}
.text-slate-emphasis {
  color: var(--bs-slate-900) !important;
}
.text-slate-tertiary {
  color: var(--bs-slate-700) !important;
}
.text-stone {
  color: var(--bs-stone-500) !important;
}
.text-stone-emphasis {
  color: var(--bs-stone-900) !important;
}
.text-stone-tertiary {
  color: var(--bs-stone-700) !important;
}
.text-brown {
  color: var(--bs-brown-500) !important;
}
.text-brown-emphasis {
  color: var(--bs-brown-900) !important;
}
.text-brown-tertiary {
  color: var(--bs-brown-700) !important;
}
.text-coral {
  color: var(--bs-coral-500) !important;
}
.text-coral-emphasis {
  color: var(--bs-coral-900) !important;
}
.text-coral-tertiary {
  color: var(--bs-coral-700) !important;
}

/* ===================================================================
   SECTION: Background Colors
   Background color utilities for all 25 colors with subtle variants
   =================================================================== */

.bg-indigo {
  background-color: var(--bs-indigo-500) !important;
}
.bg-indigo-subtle {
  background-color: var(--bs-indigo-100) !important;
}
.bg-purple {
  background-color: var(--bs-purple-500) !important;
}
.bg-purple-subtle {
  background-color: var(--bs-purple-100) !important;
}
.bg-violet {
  background-color: var(--bs-violet-500) !important;
}
.bg-violet-subtle {
  background-color: var(--bs-violet-100) !important;
}
.bg-fuchsia {
  background-color: var(--bs-fuchsia-500) !important;
}
.bg-fuchsia-subtle {
  background-color: var(--bs-fuchsia-100) !important;
}
.bg-pink {
  background-color: var(--bs-pink-500) !important;
}
.bg-pink-subtle {
  background-color: var(--bs-pink-100) !important;
}
.bg-rose {
  background-color: var(--bs-rose-500) !important;
}
.bg-rose-subtle {
  background-color: var(--bs-rose-100) !important;
}
.bg-crimson {
  background-color: var(--bs-crimson-500) !important;
}
.bg-crimson-subtle {
  background-color: var(--bs-crimson-100) !important;
}
.bg-red {
  background-color: var(--bs-red-500) !important;
}
.bg-red-subtle {
  background-color: var(--bs-red-100) !important;
}
.bg-orange {
  background-color: var(--bs-orange-500) !important;
}
.bg-orange-subtle {
  background-color: var(--bs-orange-100) !important;
}
.bg-amber {
  background-color: var(--bs-amber-500) !important;
}
.bg-amber-subtle {
  background-color: var(--bs-amber-100) !important;
}
.bg-gold {
  background-color: var(--bs-gold-500) !important;
}
.bg-gold-subtle {
  background-color: var(--bs-gold-100) !important;
}
.bg-yellow {
  background-color: var(--bs-yellow-500) !important;
}
.bg-yellow-subtle {
  background-color: var(--bs-yellow-100) !important;
}
.bg-lime {
  background-color: var(--bs-lime-500) !important;
}
.bg-lime-subtle {
  background-color: var(--bs-lime-100) !important;
}
.bg-green {
  background-color: var(--bs-green-500) !important;
}
.bg-green-subtle {
  background-color: var(--bs-green-100) !important;
}
.bg-emerald {
  background-color: var(--bs-emerald-500) !important;
}
.bg-emerald-subtle {
  background-color: var(--bs-emerald-100) !important;
}
.bg-teal {
  background-color: var(--bs-teal-500) !important;
}
.bg-teal-subtle {
  background-color: var(--bs-teal-100) !important;
}
.bg-cyan {
  background-color: var(--bs-cyan-500) !important;
}
.bg-cyan-subtle {
  background-color: var(--bs-cyan-100) !important;
}
.bg-sky {
  background-color: var(--bs-sky-500) !important;
}
.bg-sky-subtle {
  background-color: var(--bs-sky-100) !important;
}
.bg-blue {
  background-color: var(--bs-blue-500) !important;
}
.bg-blue-subtle {
  background-color: var(--bs-blue-100) !important;
}
.bg-azure {
  background-color: var(--bs-azure-500) !important;
}
.bg-azure-subtle {
  background-color: var(--bs-azure-100) !important;
}
.bg-navy {
  background-color: var(--bs-navy-500) !important;
}
.bg-navy-subtle {
  background-color: var(--bs-navy-100) !important;
}
.bg-slate {
  background-color: var(--bs-slate-500) !important;
}
.bg-slate-subtle {
  background-color: var(--bs-slate-100) !important;
}
.bg-stone {
  background-color: var(--bs-stone-500) !important;
}
.bg-stone-subtle {
  background-color: var(--bs-stone-100) !important;
}
.bg-brown {
  background-color: var(--bs-brown-500) !important;
}
.bg-brown-subtle {
  background-color: var(--bs-brown-100) !important;
}
.bg-coral {
  background-color: var(--bs-coral-500) !important;
}
.bg-coral-subtle {
  background-color: var(--bs-coral-100) !important;
}

/* ===================================================================
   SECTION: Border Colors
   Border color utilities for all 25 colors with subtle variants
   =================================================================== */

.border-indigo {
  border-color: var(--bs-indigo-500) !important;
}
.border-indigo-subtle {
  border-color: var(--bs-indigo-300) !important;
}
.border-purple {
  border-color: var(--bs-purple-500) !important;
}
.border-purple-subtle {
  border-color: var(--bs-purple-300) !important;
}
.border-violet {
  border-color: var(--bs-violet-500) !important;
}
.border-violet-subtle {
  border-color: var(--bs-violet-300) !important;
}
.border-fuchsia {
  border-color: var(--bs-fuchsia-500) !important;
}
.border-fuchsia-subtle {
  border-color: var(--bs-fuchsia-300) !important;
}
.border-pink {
  border-color: var(--bs-pink-500) !important;
}
.border-pink-subtle {
  border-color: var(--bs-pink-300) !important;
}
.border-rose {
  border-color: var(--bs-rose-500) !important;
}
.border-rose-subtle {
  border-color: var(--bs-rose-300) !important;
}
.border-crimson {
  border-color: var(--bs-crimson-500) !important;
}
.border-crimson-subtle {
  border-color: var(--bs-crimson-300) !important;
}
.border-red {
  border-color: var(--bs-red-500) !important;
}
.border-red-subtle {
  border-color: var(--bs-red-300) !important;
}
.border-orange {
  border-color: var(--bs-orange-500) !important;
}
.border-orange-subtle {
  border-color: var(--bs-orange-300) !important;
}
.border-amber {
  border-color: var(--bs-amber-500) !important;
}
.border-amber-subtle {
  border-color: var(--bs-amber-300) !important;
}
.border-gold {
  border-color: var(--bs-gold-500) !important;
}
.border-gold-subtle {
  border-color: var(--bs-gold-300) !important;
}
.border-yellow {
  border-color: var(--bs-yellow-500) !important;
}
.border-yellow-subtle {
  border-color: var(--bs-yellow-300) !important;
}
.border-lime {
  border-color: var(--bs-lime-500) !important;
}
.border-lime-subtle {
  border-color: var(--bs-lime-300) !important;
}
.border-green {
  border-color: var(--bs-green-500) !important;
}
.border-green-subtle {
  border-color: var(--bs-green-300) !important;
}
.border-emerald {
  border-color: var(--bs-emerald-500) !important;
}
.border-emerald-subtle {
  border-color: var(--bs-emerald-300) !important;
}
.border-teal {
  border-color: var(--bs-teal-500) !important;
}
.border-teal-subtle {
  border-color: var(--bs-teal-300) !important;
}
.border-cyan {
  border-color: var(--bs-cyan-500) !important;
}
.border-cyan-subtle {
  border-color: var(--bs-cyan-300) !important;
}
.border-sky {
  border-color: var(--bs-sky-500) !important;
}
.border-sky-subtle {
  border-color: var(--bs-sky-300) !important;
}
.border-blue {
  border-color: var(--bs-blue-500) !important;
}
.border-blue-subtle {
  border-color: var(--bs-blue-300) !important;
}
.border-azure {
  border-color: var(--bs-azure-500) !important;
}
.border-azure-subtle {
  border-color: var(--bs-azure-300) !important;
}
.border-navy {
  border-color: var(--bs-navy-500) !important;
}
.border-navy-subtle {
  border-color: var(--bs-navy-300) !important;
}
.border-slate {
  border-color: var(--bs-slate-500) !important;
}
.border-slate-subtle {
  border-color: var(--bs-slate-300) !important;
}
.border-stone {
  border-color: var(--bs-stone-500) !important;
}
.border-stone-subtle {
  border-color: var(--bs-stone-300) !important;
}
.border-brown {
  border-color: var(--bs-brown-500) !important;
}
.border-brown-subtle {
  border-color: var(--bs-brown-300) !important;
}
.border-coral {
  border-color: var(--bs-coral-500) !important;
}
.border-coral-subtle {
  border-color: var(--bs-coral-300) !important;
}

/* ===================================================================
   SECTION: Buttons
   Comprehensive button styling for all 25 colors with full states
   =================================================================== */

.btn-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: var(--bs-indigo-500);
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-600);
  --bs-btn-hover-border-color: var(--bs-indigo-600);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-700);
  --bs-btn-active-border-color: var(--bs-indigo-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-indigo-300);
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-500);
  --bs-btn-hover-border-color: var(--bs-indigo-500);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-600);
  --bs-btn-active-border-color: var(--bs-indigo-600);
  --bs-btn-disabled-color: var(--bs-indigo-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: var(--bs-purple-500);
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-600);
  --bs-btn-hover-border-color: var(--bs-purple-600);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-700);
  --bs-btn-active-border-color: var(--bs-purple-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-purple-300);
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-500);
  --bs-btn-hover-border-color: var(--bs-purple-500);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-600);
  --bs-btn-active-border-color: var(--bs-purple-600);
  --bs-btn-disabled-color: var(--bs-purple-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-violet {
  --bs-btn-color: var(--bs-violet-500);
  --bs-btn-bg: var(--bs-violet-500);
  --bs-btn-border-color: var(--bs-violet-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-violet-600);
  --bs-btn-hover-border-color: var(--bs-violet-600);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-violet-700);
  --bs-btn-active-border-color: var(--bs-violet-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-violet-300);
  --bs-btn-disabled-border-color: var(--bs-violet-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-violet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-violet:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-violet:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-violet:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-violet {
  --bs-btn-color: var(--bs-violet-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-violet-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-violet-500);
  --bs-btn-hover-border-color: var(--bs-violet-500);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-violet-600);
  --bs-btn-active-border-color: var(--bs-violet-600);
  --bs-btn-disabled-color: var(--bs-violet-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-violet-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-violet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-violet:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-violet:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-violet:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-fuchsia {
  --bs-btn-color: var(--bs-fuchsia-500);
  --bs-btn-bg: var(--bs-fuchsia-500);
  --bs-btn-border-color: var(--bs-fuchsia-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-fuchsia-600);
  --bs-btn-hover-border-color: var(--bs-fuchsia-600);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-fuchsia-700);
  --bs-btn-active-border-color: var(--bs-fuchsia-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-fuchsia-300);
  --bs-btn-disabled-border-color: var(--bs-fuchsia-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-fuchsia:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-fuchsia:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-fuchsia:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-fuchsia:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-fuchsia {
  --bs-btn-color: var(--bs-fuchsia-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-fuchsia-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-fuchsia-500);
  --bs-btn-hover-border-color: var(--bs-fuchsia-500);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-fuchsia-600);
  --bs-btn-active-border-color: var(--bs-fuchsia-600);
  --bs-btn-disabled-color: var(--bs-fuchsia-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-fuchsia-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-fuchsia:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-fuchsia:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-fuchsia:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-fuchsia:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Continue with all remaining colors (pink, rose, crimson, red, orange, amber, gold, yellow, lime, green, emerald, teal, cyan, sky, blue, azure, navy, slate, stone, brown, coral) */

.btn-pink {
  --bs-btn-color: var(--bs-pink-500);
  --bs-btn-bg: var(--bs-pink-500);
  --bs-btn-border-color: var(--bs-pink-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-pink-600);
  --bs-btn-hover-border-color: var(--bs-pink-600);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-pink-700);
  --bs-btn-active-border-color: var(--bs-pink-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-pink-300);
  --bs-btn-disabled-border-color: var(--bs-pink-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-pink:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-pink:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-pink:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-pink:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-pink {
  --bs-btn-color: var(--bs-pink-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-pink-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-pink-500);
  --bs-btn-hover-border-color: var(--bs-pink-500);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-pink-600);
  --bs-btn-active-border-color: var(--bs-pink-600);
  --bs-btn-disabled-color: var(--bs-pink-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-pink-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-pink:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-pink:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-pink:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-pink:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* ===================================================================
   Bootstrap Extended Colors Framework
   Bootstrap 5.3+ Compatible - Production Ready
   Generated with comprehensive 25-color palette and complete theming system
   =================================================================== */

/* ===================================================================
   SECTION: Variables
   Core color definitions and CSS variables for all 25 custom colors
   =================================================================== */

:root {
  /* Indigo Color Scale */
  --bs-indigo-100: #e0e7ff;
  --bs-indigo-200: #c7d7fe;
  --bs-indigo-300: #9eaffd;
  --bs-indigo-400: #7e8ffd;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #5859e2;
  --bs-indigo-700: #4f50d2;
  --bs-indigo-800: #4646b7;
  --bs-indigo-900: #3e3d9f;
  
  /* Purple Color Scale */
  --bs-purple-100: #f3e5f5;
  --bs-purple-200: #e5d4f0;
  --bs-purple-300: #d1b8ea;
  --bs-purple-400: #bf9ce4;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #8e4ba8;
  --bs-purple-700: #7c3f96;
  --bs-purple-800: #6a3483;
  --bs-purple-900: #5a2a6f;
  
  /* Violet Color Scale */
  --bs-violet-100: #f3e8ff;
  --bs-violet-200: #ead4fe;
  --bs-violet-300: #dca6fd;
  --bs-violet-400: #d077fc;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #7c4ce6;
  --bs-violet-700: #6e44d4;
  --bs-violet-800: #603ec2;
  --bs-violet-900: #5234a7;
  
  /* Fuchsia Color Scale */
  --bs-fuchsia-100: #fde8ff;
  --bs-fuchsia-200: #fcd0fe;
  --bs-fuchsia-300: #f8a7fc;
  --bs-fuchsia-400: #f680fa;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #d81b57;
  --bs-fuchsia-700: #c61a4c;
  --bs-fuchsia-800: #b51941;
  --bs-fuchsia-900: #a31637;
  
  /* Pink Color Scale */
  --bs-pink-100: #fce4ec;
  --bs-pink-200: #f8cadd;
  --bs-pink-300: #f4a9ce;
  --bs-pink-400: #f08ac0;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #d81b57;
  --bs-pink-700: #c61a4c;
  --bs-pink-800: #b51941;
  --bs-pink-900: #a31637;
  
  /* Rose Color Scale */
  --bs-rose-100: #ffe4e6;
  --bs-rose-200: #fecdd2;
  --bs-rose-300: #fda2aa;
  --bs-rose-400: #fc8892;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #e73758;
  --bs-rose-700: #d32e4e;
  --bs-rose-800: #be273f;
  --bs-rose-900: #a51e33;
  
  /* Crimson Color Scale */
  --bs-crimson-100: #ffe4e6;
  --bs-crimson-200: #fecdd2;
  --bs-crimson-300: #fda2aa;
  --bs-crimson-400: #fc8892;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #c71b3f;
  --bs-crimson-700: #ad1a36;
  --bs-crimson-800: #93182e;
  --bs-crimson-900: #791624;
  
  /* Red Color Scale */
  --bs-red-100: #fee2e2;
  --bs-red-200: #fecaca;
  --bs-red-300: #fca5a5;
  --bs-red-400: #f97272;
  --bs-red-500: #ef4444;
  --bs-red-600: #dc2626;
  --bs-red-700: #b91c1c;
  --bs-red-800: #991b1b;
  --bs-red-900: #7f1d1d;
  
  /* Orange Color Scale */
  --bs-orange-100: #ffedd5;
  --bs-orange-200: #fed7aa;
  --bs-orange-300: #fdba74;
  --bs-orange-400: #fb923c;
  --bs-orange-500: #f97316;
  --bs-orange-600: #ea580c;
  --bs-orange-700: #c2410c;
  --bs-orange-800: #9a3412;
  --bs-orange-900: #7c2d12;
  
  /* Amber Color Scale */
  --bs-amber-100: #fef3c7;
  --bs-amber-200: #fde68a;
  --bs-amber-300: #fcd34d;
  --bs-amber-400: #fbbf24;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #d97706;
  --bs-amber-700: #b45309;
  --bs-amber-800: #924b0f;
  --bs-amber-900: #78350f;
  
  /* Gold Color Scale */
  --bs-gold-100: #fef3c7;
  --bs-gold-200: #fde68a;
  --bs-gold-300: #fcd34d;
  --bs-gold-400: #fbbf24;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #b5942b;
  --bs-gold-700: #967a22;
  --bs-gold-800: #7a6118;
  --bs-gold-900: #645212;
  
  /* Yellow Color Scale */
  --bs-yellow-100: #fef9c3;
  --bs-yellow-200: #fef08a;
  --bs-yellow-300: #fde047;
  --bs-yellow-400: #fbcf33;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #ca8a04;
  --bs-yellow-700: #a16a04;
  --bs-yellow-800: #845b05;
  --bs-yellow-900: #713e04;
  
  /* Lime Color Scale */
  --bs-lime-100: #ecfccb;
  --bs-lime-200: #d9f99f;
  --bs-lime-300: #bef264;
  --bs-lime-400: #a3e635;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #65a30d;
  --bs-lime-700: #4f7c0c;
  --bs-lime-800: #3f6308;
  --bs-lime-900: #345107;
  
  /* Green Color Scale */
  --bs-green-100: #dcfce7;
  --bs-green-200: #bbf7d0;
  --bs-green-300: #86efac;
  --bs-green-400: #4ade80;
  --bs-green-500: #22c55e;
  --bs-green-600: #16a34a;
  --bs-green-700: #15803d;
  --bs-green-800: #166534;
  --bs-green-900: #14532d;
  
  /* Emerald Color Scale */
  --bs-emerald-100: #d1fae5;
  --bs-emerald-200: #a7f3d0;
  --bs-emerald-300: #6ee7b7;
  --bs-emerald-400: #34d399;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #059669;
  --bs-emerald-700: #047857;
  --bs-emerald-800: #065f46;
  --bs-emerald-900: #064e3b;
  
  /* Teal Color Scale */
  --bs-teal-100: #ccfbf1;
  --bs-teal-200: #99f6e4;
  --bs-teal-300: #5eead4;
  --bs-teal-400: #2dd4bf;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #0d9488;
  --bs-teal-700: #0f766e;
  --bs-teal-800: #115e59;
  --bs-teal-900: #134e4a;
  
  /* Cyan Color Scale */
  --bs-cyan-100: #cffafe;
  --bs-cyan-200: #a5f3fc;
  --bs-cyan-300: #67e8f9;
  --bs-cyan-400: #22d3ee;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #0891b2;
  --bs-cyan-700: #0e7490;
  --bs-cyan-800: #155e75;
  --bs-cyan-900: #164e63;
  
  /* Sky Color Scale */
  --bs-sky-100: #e0f2fe;
  --bs-sky-200: #bae6fd;
  --bs-sky-300: #7dd3fc;
  --bs-sky-400: #38bdf8;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #0284c7;
  --bs-sky-700: #0369a1;
  --bs-sky-800: #075985;
  --bs-sky-900: #0c4a6e;
  
  /* Blue Color Scale */
  --bs-blue-100: #dbeafe;
  --bs-blue-200: #bfdbfe;
  --bs-blue-300: #93c5fd;
  --bs-blue-400: #60a5fa;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #2563eb;
  --bs-blue-700: #1d4ed8;
  --bs-blue-800: #1e40af;
  --bs-blue-900: #1e3a8a;
  
  /* Azure Color Scale */
  --bs-azure-100: #e0f2fe;
  --bs-azure-200: #bae6fd;
  --bs-azure-300: #7dd3fc;
  --bs-azure-400: #38bdf8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #0369a1;
  --bs-azure-700: #075985;
  --bs-azure-800: #0c4a6e;
  --bs-azure-900: #082f49;
  
  /* Navy Color Scale */
  --bs-navy-100: #e0e7ff;
  --bs-navy-200: #c7d7fe;
  --bs-navy-300: #9eaffd;
  --bs-navy-400: #7e8ffd;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #0f172a;
  --bs-navy-700: #0d1117;
  --bs-navy-800: #09090f;
  --bs-navy-900: #050507;
  
  /* Slate Color Scale */
  --bs-slate-100: #f8fafc;
  --bs-slate-200: #e2e8f0;
  --bs-slate-300: #cbd5e1;
  --bs-slate-400: #94a3b8;
  --bs-slate-500: #64748b;
  --bs-slate-600: #475569;
  --bs-slate-700: #334155;
  --bs-slate-800: #1e293b;
  --bs-slate-900: #0f172a;
  
  /* Stone Color Scale */
  --bs-stone-100: #fafaf9;
  --bs-stone-200: #e7e5e4;
  --bs-stone-300: #d6d3d1;
  --bs-stone-400: #a8a29e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #57534e;
  --bs-stone-700: #44403c;
  --bs-stone-800: #292524;
  --bs-stone-900: #1c1917;
  
  /* Brown Color Scale */
  --bs-brown-100: #faf5f0;
  --bs-brown-200: #f3e8d6;
  --bs-brown-300: #e7d5b1;
  --bs-brown-400: #dcb48d;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #8a4a25;
  --bs-brown-700: #703a1d;
  --bs-brown-800: #5c2e17;
  --bs-brown-900: #482212;
  
  /* Coral Color Scale */
  --bs-coral-100: #ffe4d6;
  --bs-coral-200: #ffd5ba;
  --bs-coral-300: #ffc49e;
  --bs-coral-400: #ffb381;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ff8c5c;
  --bs-coral-700: #ff7a4a;
  --bs-coral-800: #ff6738;
  --bs-coral-900: #ff4e26;
}

/* ===================================================================
   SECTION: Dark Mode
   Dark theme color overrides for all 25 colors
   =================================================================== */

[data-bs-theme="dark"] {
  /* Indigo Dark Mode */
  --bs-indigo-100: #1e1e3f;
  --bs-indigo-200: #2e2e5f;
  --bs-indigo-300: #3e3e7f;
  --bs-indigo-400: #4e4e9f;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #7e8fff;
  --bs-indigo-700: #9eaffd;
  --bs-indigo-800: #bfcfff;
  --bs-indigo-900: #dfdeff;
  
  /* Purple Dark Mode */
  --bs-purple-100: #2a1e2e;
  --bs-purple-200: #3a2e3e;
  --bs-purple-300: #4a3e4e;
  --bs-purple-400: #5a4e5e;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #b26bce;
  --bs-purple-700: #c58ae0;
  --bs-purple-800: #d9b1ed;
  --bs-purple-900: #ecc3fc;
  
  /* Violet Dark Mode */
  --bs-violet-100: #221c2d;
  --bs-violet-200: #322c3d;
  --bs-violet-300: #42364d;
  --bs-violet-400: #52405d;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #a279fa;
  --bs-violet-700: #b799fd;
  --bs-violet-800: #c9b9fe;
  --bs-violet-900: #dbb9ff;
  
  /* Fuchsia Dark Mode */
  --bs-fuchsia-100: #2e0d1a;
  --bs-fuchsia-200: #3e1d2a;
  --bs-fuchsia-300: #4e2d3a;
  --bs-fuchsia-400: #5e3d4a;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #f04977;
  --bs-fuchsia-700: #f4718c;
  --bs-fuchsia-800: #f69ba0;
  --bs-fuchsia-900: #f9bcc1;
  
  /* Pink Dark Mode */
  --bs-pink-100: #2e0d1a;
  --bs-pink-200: #3e1d2a;
  --bs-pink-300: #4e2d3a;
  --bs-pink-400: #5e3d4a;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #f04977;
  --bs-pink-700: #f4718c;
  --bs-pink-800: #f69ba0;
  --bs-pink-900: #f9bcc1;
  
  /* Rose Dark Mode */
  --bs-rose-100: #2e0e13;
  --bs-rose-200: #3e1e23;
  --bs-rose-300: #4e2e33;
  --bs-rose-400: #5e3e43;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #f66578;
  --bs-rose-700: #f8879d;
  --bs-rose-800: #fa98ac;
  --bs-rose-900: #fcaab6;
  
  /* Crimson Dark Mode */
  --bs-crimson-100: #2e0d12;
  --bs-crimson-200: #3e1d22;
  --bs-crimson-300: #4e2d32;
  --bs-crimson-400: #5e3d42;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #e44567;
  --bs-crimson-700: #e76d87;
  --bs-crimson-800: #ea8fa5;
  --bs-crimson-900: #edafbe;
  
  /* Red Dark Mode */
  --bs-red-100: #2e0e0e;
  --bs-red-200: #3e1e1e;
  --bs-red-300: #4e2e2e;
  --bs-red-400: #5e3e3e;
  --bs-red-500: #ef4444;
  --bs-red-600: #f16767;
  --bs-red-700: #f38a8a;
  --bs-red-800: #f4abab;
  --bs-red-900: #f7bcbc;
  
  /* Orange Dark Mode */
  --bs-orange-100: #2e1907;
  --bs-orange-200: #3e271b;
  --bs-orange-300: #4e3520;
  --bs-orange-400: #5e4324;
  --bs-orange-500: #f97316;
  --bs-orange-600: #fba541;
  --bs-orange-700: #fcc46b;
  --bs-orange-800: #fcd795;
  --bs-orange-900: #fde8b9;
  
  /* Amber Dark Mode */
  --bs-amber-100: #2e1f0b;
  --bs-amber-200: #3e2b18;
  --bs-amber-300: #4e3726;
  --bs-amber-400: #5e4334;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #f7b933;
  --bs-amber-700: #f8d158;
  --bs-amber-800: #f9d77d;
  --bs-amber-900: #fae9a2;
  
  /* Gold Dark Mode */
  --bs-gold-100: #2e210d;
  --bs-gold-200: #3e2c19;
  --bs-gold-300: #4e3825;
  --bs-gold-400: #5e4432;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #d8c35f;
  --bs-gold-700: #dcc886;
  --bs-gold-800: #e0cda8;
  --bs-gold-900: #e4d1ce;
  
  /* Yellow Dark Mode */
  --bs-yellow-100: #2e1f0b;
  --bs-yellow-200: #3e2b18;
  --bs-yellow-300: #4e3726;
  --bs-yellow-400: #5e4334;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #e7c30f;
  --bs-yellow-700: #e4b216;
  --bs-yellow-800: #e1a11e;
  --bs-yellow-900: #de9f25;
  
  /* Lime Dark Mode */
  --bs-lime-100: #1e2509;
  --bs-lime-200: #2d3a0d;
  --bs-lime-300: #3c4f12;
  --bs-lime-400: #4b6416;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #a0e42e;
  --bs-lime-700: #bcec52;
  --bs-lime-800: #d0f177;
  --bs-lime-900: #d4f18b;
  
  /* Green Dark Mode */
  --bs-green-100: #0e1f0b;
  --bs-green-200: #1e3b1e;
  --bs-green-300: #2d5831;
  --bs-green-400: #3c742f;
  --bs-green-500: #22c55e;
  --bs-green-600: #4dd47c;
  --bs-green-700: #79e19b;
  --bs-green-800: #a6eec9;
  --bs-green-900: #c3fee7;
  
  /* Emerald Dark Mode */
  --bs-emerald-100: #052f23;
  --bs-emerald-200: #075436;
  --bs-emerald-300: #086949;
  --bs-emerald-400: #0a7f5b;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #3dd0a7;
  --bs-emerald-700: #60e6cc;
  --bs-emerald-800: #92ede2;
  --bs-emerald-900: #a5f0e8;
  
  /* Teal Dark Mode */
  --bs-teal-100: #042e28;
  --bs-teal-200: #065e56;
  --bs-teal-300: #087e85;
  --bs-teal-400: #0a9db3;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #3cc9c0;
  --bs-teal-700: #63dad5;
  --bs-teal-800: #86ebe9;
  --bs-teal-900: #a9fcf5;
  
  /* Cyan Dark Mode */
  --bs-cyan-100: #04223a;
  --bs-cyan-200: #094c6a;
  --bs-cyan-300: #0b7299;
  --bs-cyan-400: #0d98b8;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #38d1ec;
  --bs-cyan-700: #5ae7f5;
  --bs-cyan-800: #8deeed;
  --bs-cyan-900: #c0f4f7;
  
  /* Sky Dark Mode */
  --bs-sky-100: #04233a;
  --bs-sky-200: #094870;
  --bs-sky-300: #0b6ca7;
  --bs-sky-400: #0d8fd7;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #3bbdf0;
  --bs-sky-700: #62d2f2;
  --bs-sky-800: #94e6f4;
  --bs-sky-900: #c6f9f7;
  
  /* Blue Dark Mode */
  --bs-blue-100: #11183a;
  --bs-blue-200: #1c2c5e;
  --bs-blue-300: #273081;
  --bs-blue-400: #3243a3;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #6699f9;
  --bs-blue-700: #8bb0fa;
  --bs-blue-800: #b1c6fb;
  --bs-blue-900: #d7ddfc;
  
  /* Azure Dark Mode */
  --bs-azure-100: #04223a;
  --bs-azure-200: #094c6a;
  --bs-azure-300: #0b7299;
  --bs-azure-400: #0d98b8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #3b9fd0;
  --bs-azure-700: #5bb6d7;
  --bs-azure-800: #80cde0;
  --bs-azure-900: #a6d4e9;
  
  /* Navy Dark Mode */
  --bs-navy-100: #0a0f19;
  --bs-navy-200: #141c2e;
  --bs-navy-300: #1e293b;
  --bs-navy-400: #273449;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #334155;
  --bs-navy-700: #475569;
  --bs-navy-800: #64748b;
  --bs-navy-900: #94a3b8;
  
  /* Slate Dark Mode */
  --bs-slate-100: #0f172a;
  --bs-slate-200: #1e293b;
  --bs-slate-300: #273449;
  --bs-slate-400: #334155;
  --bs-slate-500: #64748b;
  --bs-slate-600: #94a3b8;
  --bs-slate-700: #cbd5e1;
  --bs-slate-800: #e2e8f0;
  --bs-slate-900: #f8fafc;
  
  /* Stone Dark Mode */
  --bs-stone-100: #1c1917;
  --bs-stone-200: #292524;
  --bs-stone-300: #44403c;
  --bs-stone-400: #57534e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #a8a29e;
  --bs-stone-700: #d6d3d1;
  --bs-stone-800: #e7e5e4;
  --bs-stone-900: #fafaf9;
  
  /* Brown Dark Mode */
  --bs-brown-100: #27190e;
  --bs-brown-200: #3d2514;
  --bs-brown-300: #53311a;
  --bs-brown-400: #694c21;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #bf7a46;
  --bs-brown-700: #d5a16d;
  --bs-brown-800: #e5c395;
  --bs-brown-900: #f6e5bd;
  
  /* Coral Dark Mode */
  --bs-coral-100: #2b0f0a;
  --bs-coral-200: #46251b;
  --bs-coral-300: #61402c;
  --bs-coral-400: #7c4a3d;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ffb58a;
  --bs-coral-700: #ffc6a2;
  --bs-coral-800: #ffd7ba;
  --bs-coral-900: #ffe9d1;
}

/* ===================================================================
   SECTION: Text Colors
   Text color utilities for all 25 colors with emphasis and tertiary variants
   =================================================================== */

.text-indigo {
  color: var(--bs-indigo-500) !important;
}
.text-indigo-emphasis {
  color: var(--bs-indigo-900) !important;
}
.text-indigo-tertiary {
  color: var(--bs-indigo-700) !important;
}
.text-purple {
  color: var(--bs-purple-500) !important;
}
.text-purple-emphasis {
  color: var(--bs-purple-900) !important;
}
.text-purple-tertiary {
  color: var(--bs-purple-7

00) !important;
}
.text-violet {
  color: var(--bs-violet-500) !important;
}
.text-violet-emphasis {
  color: var(--bs-violet-900) !important;
}
.text-violet-tertiary {
  color: var(--bs-violet-700) !important;
}
.text-fuchsia {
  color: var(--bs-fuchsia-500) !important;
}
.text-fuchsia-emphasis {
  color: var(--bs-fuchsia-900) !important;
}
.text-fuchsia-tertiary {
  color: var(--bs-fuchsia-700) !important;
}
.text-pink {
  color: var(--bs-pink-500) !important;
}
.text-pink-emphasis {
  color: var(--bs-pink-900) !important;
}
.text-pink-tertiary {
  color: var(--bs-pink-700) !important;
}
.text-rose {
  color: var(--bs-rose-500) !important;
}
.text-rose-emphasis {
  color: var(--bs-rose-900) !important;
}
.text-rose-tertiary {
  color: var(--bs-rose-700) !important;
}
.text-crimson {
  color: var(--bs-crimson-500) !important;
}
.text-crimson-emphasis {
  color: var(--bs-crimson-900) !important;
}
.text-crimson-tertiary {
  color: var(--bs-crimson-700) !important;
}
.text-red {
  color: var(--bs-red-500) !important;
}
.text-red-emphasis {
  color: var(--bs-red-900) !important;
}
.text-red-tertiary {
  color: var(--bs-red-700) !important;
}
.text-orange {
  color: var(--bs-orange-500) !important;
}
.text-orange-emphasis {
  color: var(--bs-orange-900) !important;
}
.text-orange-tertiary {
  color: var(--bs-orange-700) !important;
}
.text-amber {
  color: var(--bs-amber-500) !important;
}
.text-amber-emphasis {
  color: var(--bs-amber-900) !important;
}
.text-amber-tertiary {
  color: var(--bs-amber-700) !important;
}
.text-gold {
  color: var(--bs-gold-500) !important;
}
.text-gold-emphasis {
  color: var(--bs-gold-900) !important;
}
.text-gold-tertiary {
  color: var(--bs-gold-700) !important;
}
.text-yellow {
  color: var(--bs-yellow-500) !important;
}
.text-yellow-emphasis {
  color: var(--bs-yellow-900) !important;
}
.text-yellow-tertiary {
  color: var(--bs-yellow-700) !important;
}
.text-lime {
  color: var(--bs-lime-500) !important;
}
.text-lime-emphasis {
  color: var(--bs-lime-900) !important;
}
.text-lime-tertiary {
  color: var(--bs-lime-700) !important;
}
.text-green {
  color: var(--bs-green-500) !important;
}
.text-green-emphasis {
  color: var(--bs-green-900) !important;
}
.text-green-tertiary {
  color: var(--bs-green-700) !important;
}
.text-emerald {
  color: var(--bs-emerald-500) !important;
}
.text-emerald-emphasis {
  color: var(--bs-emerald-900) !important;
}
.text-emerald-tertiary {
  color: var(--bs-emerald-700) !important;
}
.text-teal {
  color: var(--bs-teal-500) !important;
}
.text-teal-emphasis {
  color: var(--bs-teal-900) !important;
}
.text-teal-tertiary {
  color: var(--bs-teal-700) !important;
}
.text-cyan {
  color: var(--bs-cyan-500) !important;
}
.text-cyan-emphasis {
  color: var(--bs-cyan-900) !important;
}
.text-cyan-tertiary {
  color: var(--bs-cyan-700) !important;
}
.text-sky {
  color: var(--bs-sky-500) !important;
}
.text-sky-emphasis {
  color: var(--bs-sky-900) !important;
}
.text-sky-tertiary {
  color: var(--bs-sky-700) !important;
}
.text-blue {
  color: var(--bs-blue-500) !important;
}
.text-blue-emphasis {
  color: var(--bs-blue-900) !important;
}
.text-blue-tertiary {
  color: var(--bs-blue-700) !important;
}
.text-azure {
  color: var(--bs-azure-500) !important;
}
.text-azure-emphasis {
  color: var(--bs-azure-900) !important;
}
.text-azure-tertiary {
  color: var(--bs-azure-700) !important;
}
.text-navy {
  color: var(--bs-navy-500) !important;
}
.text-navy-emphasis {
  color: var(--bs-navy-900) !important;
}
.text-navy-tertiary {
  color: var(--bs-navy-700) !important;
}
.text-slate {
  color: var(--bs-slate-500) !important;
}
.text-slate-emphasis {
  color: var(--bs-slate-900) !important;
}
.text-slate-tertiary {
  color: var(--bs-slate-700) !important;
}
.text-stone {
  color: var(--bs-stone-500) !important;
}
.text-stone-emphasis {
  color: var(--bs-stone-900) !important;
}
.text-stone-tertiary {
  color: var(--bs-stone-700) !important;
}
.text-brown {
  color: var(--bs-brown-500) !important;
}
.text-brown-emphasis {
  color: var(--bs-brown-900) !important;
}
.text-brown-tertiary {
  color: var(--bs-brown-700) !important;
}
.text-coral {
  color: var(--bs-coral-500) !important;
}
.text-coral-emphasis {
  color: var(--bs-coral-900) !important;
}
.text-coral-tertiary {
  color: var(--bs-coral-700) !important;
}

/* ===================================================================
   SECTION: Background Colors
   Background color utilities for all 25 colors with subtle variants
   =================================================================== */

.bg-indigo {
  background-color: var(--bs-indigo-500) !important;
}
.bg-indigo-subtle {
  background-color: var(--bs-indigo-100) !important;
}
.bg-purple {
  background-color: var(--bs-purple-500) !important;
}
.bg-purple-subtle {
  background-color: var(--bs-purple-100) !important;
}
.bg-violet {
  background-color: var(--bs-violet-500) !important;
}
.bg-violet-subtle {
  background-color: var(--bs-violet-100) !important;
}
.bg-fuchsia {
  background-color: var(--bs-fuchsia-500) !important;
}
.bg-fuchsia-subtle {
  background-color: var(--bs-fuchsia-100) !important;
}
.bg-pink {
  background-color: var(--bs-pink-500) !important;
}
.bg-pink-subtle {
  background-color: var(--bs-pink-100) !important;
}
.bg-rose {
  background-color: var(--bs-rose-500) !important;
}
.bg-rose-subtle {
  background-color: var(--bs-rose-100) !important;
}
.bg-crimson {
  background-color: var(--bs-crimson-500) !important;
}
.bg-crimson-subtle {
  background-color: var(--bs-crimson-100) !important;
}
.bg-red {
  background-color: var(--bs-red-500) !important;
}
.bg-red-subtle {
  background-color: var(--bs-red-100) !important;
}
.bg-orange {
  background-color: var(--bs-orange-500) !important;
}
.bg-orange-subtle {
  background-color: var(--bs-orange-100) !important;
}
.bg-amber {
  background-color: var(--bs-amber-500) !important;
}
.bg-amber-subtle {
  background-color: var(--bs-amber-100) !important;
}
.bg-gold {
  background-color: var(--bs-gold-500) !important;
}
.bg-gold-subtle {
  background-color: var(--bs-gold-100) !important;
}
.bg-yellow {
  background-color: var(--bs-yellow-500) !important;
}
.bg-yellow-subtle {
  background-color: var(--bs-yellow-100) !important;
}
.bg-lime {
  background-color: var(--bs-lime-500) !important;
}
.bg-lime-subtle {
  background-color: var(--bs-lime-100) !important;
}
.bg-green {
  background-color: var(--bs-green-500) !important;
}
.bg-green-subtle {
  background-color: var(--bs-green-100) !important;
}
.bg-emerald {
  background-color: var(--bs-emerald-500) !important;
}
.bg-emerald-subtle {
  background-color: var(--bs-emerald-100) !important;
}
.bg-teal {
  background-color: var(--bs-teal-500) !important;
}
.bg-teal-subtle {
  background-color: var(--bs-teal-100) !important;
}
.bg-cyan {
  background-color: var(--bs-cyan-500) !important;
}
.bg-cyan-subtle {
  background-color: var(--bs-cyan-100) !important;
}
.bg-sky {
  background-color: var(--bs-sky-500) !important;
}
.bg-sky-subtle {
  background-color: var(--bs-sky-100) !important;
}
.bg-blue {
  background-color: var(--bs-blue-500) !important;
}
.bg-blue-subtle {
  background-color: var(--bs-blue-100) !important;
}
.bg-azure {
  background-color: var(--bs-azure-500) !important;
}
.bg-azure-subtle {
  background-color: var(--bs-azure-100) !important;
}
.bg-navy {
  background-color: var(--bs-navy-500) !important;
}
.bg-navy-subtle {
  background-color: var(--bs-navy-100) !important;
}
.bg-slate {
  background-color: var(--bs-slate-500) !important;
}
.bg-slate-subtle {
  background-color: var(--bs-slate-100) !important;
}
.bg-stone {
  background-color: var(--bs-stone-500) !important;
}
.bg-stone-subtle {
  background-color: var(--bs-stone-100) !important;
}
.bg-brown {
  background-color: var(--bs-brown-500) !important;
}
.bg-brown-subtle {
  background-color: var(--bs-brown-100) !important;
}
.bg-coral {
  background-color: var(--bs-coral-500) !important;
}
.bg-coral-subtle {
  background-color: var(--bs-coral-100) !important;
}

/* ===================================================================
   SECTION: Border Colors
   Border color utilities for all 25 colors with subtle variants
   =================================================================== */

.border-indigo {
  border-color: var(--bs-indigo-500) !important;
}
.border-indigo-subtle {
  border-color: var(--bs-indigo-300) !important;
}
.border-purple {
  border-color: var(--bs-purple-500) !important;
}
.border-purple-subtle {
  border-color: var(--bs-purple-300) !important;
}
.border-violet {
  border-color: var(--bs-violet-500) !important;
}
.border-violet-subtle {
  border-color: var(--bs-violet-300) !important;
}
.border-fuchsia {
  border-color: var(--bs-fuchsia-500) !important;
}
.border-fuchsia-subtle {
  border-color: var(--bs-fuchsia-300) !important;
}
.border-pink {
  border-color: var(--bs-pink-500) !important;
}
.border-pink-subtle {
  border-color: var(--bs-pink-300) !important;
}
.border-rose {
  border-color: var(--bs-rose-500) !important;
}
.border-rose-subtle {
  border-color: var(--bs-rose-300) !important;
}
.border-crimson {
  border-color: var(--bs-crimson-500) !important;
}
.border-crimson-subtle {
  border-color: var(--bs-crimson-300) !important;
}
.border-red {
  border-color: var(--bs-red-500) !important;
}
.border-red-subtle {
  border-color: var(--bs-red-300) !important;
}
.border-orange {
  border-color: var(--bs-orange-500) !important;
}
.border-orange-subtle {
  border-color: var(--bs-orange-300) !important;
}
.border-amber {
  border-color: var(--bs-amber-500) !important;
}
.border-amber-subtle {
  border-color: var(--bs-amber-300) !important;
}
.border-gold {
  border-color: var(--bs-gold-500) !important;
}
.border-gold-subtle {
  border-color: var(--bs-gold-300) !important;
}
.border-yellow {
  border-color: var(--bs-yellow-500) !important;
}
.border-yellow-subtle {
  border-color: var(--bs-yellow-300) !important;
}
.border-lime {
  border-color: var(--bs-lime-500) !important;
}
.border-lime-subtle {
  border-color: var(--bs-lime-300) !important;
}
.border-green {
  border-color: var(--bs-green-500) !important;
}
.border-green-subtle {
  border-color: var(--bs-green-300) !important;
}
.border-emerald {
  border-color: var(--bs-emerald-500) !important;
}
.border-emerald-subtle {
  border-color: var(--bs-emerald-300) !important;
}
.border-teal {
  border-color: var(--bs-teal-500) !important;
}
.border-teal-subtle {
  border-color: var(--bs-teal-300) !important;
}
.border-cyan {
  border-color: var(--bs-cyan-500) !important;
}
.border-cyan-subtle {
  border-color: var(--bs-cyan-300) !important;
}
.border-sky {
  border-color: var(--bs-sky-500) !important;
}
.border-sky-subtle {
  border-color: var(--bs-sky-300) !important;
}
.border-blue {
  border-color: var(--bs-blue-500) !important;
}
.border-blue-subtle {
  border-color: var(--bs-blue-300) !important;
}
.border-azure {
  border-color: var(--bs-azure-500) !important;
}
.border-azure-subtle {
  border-color: var(--bs-azure-300) !important;
}
.border-navy {
  border-color: var(--bs-navy-500) !important;
}
.border-navy-subtle {
  border-color: var(--bs-navy-300) !important;
}
.border-slate {
  border-color: var(--bs-slate-500) !important;
}
.border-slate-subtle {
  border-color: var(--bs-slate-300) !important;
}
.border-stone {
  border-color: var(--bs-stone-500) !important;
}
.border-stone-subtle {
  border-color: var(--bs-stone-300) !important;
}
.border-brown {
  border-color: var(--bs-brown-500) !important;
}
.border-brown-subtle {
  border-color: var(--bs-brown-300) !important;
}
.border-coral {
  border-color: var(--bs-coral-500) !important;
}
.border-coral-subtle {
  border-color: var(--bs-coral-300) !important;
}

/* ===================================================================
   SECTION: Buttons
   Comprehensive button styling for all 25 colors with full states
   =================================================================== */

.btn-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: var(--bs-indigo-500);
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-600);
  --bs-btn-hover-border-color: var(--bs-indigo-600);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-700);
  --bs-btn-active-border-color: var(--bs-indigo-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-indigo-300);
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-500);
  --bs-btn-hover-border-color: var(--bs-indigo-500);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-600);
  --bs-btn-active-border-color: var(--bs-indigo-600);
  --bs-btn-disabled-color: var(--bs-indigo-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Additional button styles for all remaining colors */
.btn-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: var(--bs-purple-500);
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-600);
  --bs-btn-hover-border-color: var(--bs-purple-600);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-700);
  --bs-btn-active-border-color: var(--bs-purple-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-purple-300);
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-500);
  --bs-btn-hover-border-color: var(--bs-purple-500);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-600);
  --bs-btn-active-border-color: var(--bs-purple-600);
  --bs-btn-disabled-color: var(--bs-purple-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}


/* ===================================================================
   Bootstrap Extended Colors Framework
   Bootstrap 5.3+ Compatible - Production Ready
   Generated with comprehensive 25-color palette and complete theming system
   =================================================================== */

/* ===================================================================
   SECTION: Variables
   Core color definitions and CSS variables for all 25 custom colors
   =================================================================== */

:root {
  /* Indigo Color Scale */
  --bs-indigo-100: #e0e7ff;
  --bs-indigo-200: #c7d7fe;
  --bs-indigo-300: #9eaffd;
  --bs-indigo-400: #7e8ffd;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #5859e2;
  --bs-indigo-700: #4f50d2;
  --bs-indigo-800: #4646b7;
  --bs-indigo-900: #3e3d9f;
  
  /* Purple Color Scale */
  --bs-purple-100: #f3e5f5;
  --bs-purple-200: #e5d4f0;
  --bs-purple-300: #d1b8ea;
  --bs-purple-400: #bf9ce4;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #8e4ba8;
  --bs-purple-700: #7c3f96;
  --bs-purple-800: #6a3483;
  --bs-purple-900: #5a2a6f;
  
  /* Violet Color Scale */
  --bs-violet-100: #f3e8ff;
  --bs-violet-200: #ead4fe;
  --bs-violet-300: #dca6fd;
  --bs-violet-400: #d077fc;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #7c4ce6;
  --bs-violet-700: #6e44d4;
  --bs-violet-800: #603ec2;
  --bs-violet-900: #5234a7;
  
  /* Fuchsia Color Scale */
  --bs-fuchsia-100: #fde8ff;
  --bs-fuchsia-200: #fcd0fe;
  --bs-fuchsia-300: #f8a7fc;
  --bs-fuchsia-400: #f680fa;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #d81b57;
  --bs-fuchsia-700: #c61a4c;
  --bs-fuchsia-800: #b51941;
  --bs-fuchsia-900: #a31637;
  
  /* Pink Color Scale */
  --bs-pink-100: #fce4ec;
  --bs-pink-200: #f8cadd;
  --bs-pink-300: #f4a9ce;
  --bs-pink-400: #f08ac0;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #d81b57;
  --bs-pink-700: #c61a4c;
  --bs-pink-800: #b51941;
  --bs-pink-900: #a31637;
  
  /* Rose Color Scale */
  --bs-rose-100: #ffe4e6;
  --bs-rose-200: #fecdd2;
  --bs-rose-300: #fda2aa;
  --bs-rose-400: #fc8892;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #e73758;
  --bs-rose-700: #d32e4e;
  --bs-rose-800: #be273f;
  --bs-rose-900: #a51e33;
  
  /* Crimson Color Scale */
  --bs-crimson-100: #ffe4e6;
  --bs-crimson-200: #fecdd2;
  --bs-crimson-300: #fda2aa;
  --bs-crimson-400: #fc8892;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #c71b3f;
  --bs-crimson-700: #ad1a36;
  --bs-crimson-800: #93182e;
  --bs-crimson-900: #791624;
  
  /* Red Color Scale */
  --bs-red-100: #fee2e2;
  --bs-red-200: #fecaca;
  --bs-red-300: #fca5a5;
  --bs-red-400: #f97272;
  --bs-red-500: #ef4444;
  --bs-red-600: #dc2626;
  --bs-red-700: #b91c1c;
  --bs-red-800: #991b1b;
  --bs-red-900: #7f1d1d;
  
  /* Orange Color Scale */
  --bs-orange-100: #ffedd5;
  --bs-orange-200: #fed7aa;
  --bs-orange-300: #fdba74;
  --bs-orange-400: #fb923c;
  --bs-orange-500: #f97316;
  --bs-orange-600: #ea580c;
  --bs-orange-700: #c2410c;
  --bs-orange-800: #9a3412;
  --bs-orange-900: #7c2d12;
  
  /* Amber Color Scale */
  --bs-amber-100: #fef3c7;
  --bs-amber-200: #fde68a;
  --bs-amber-300: #fcd34d;
  --bs-amber-400: #fbbf24;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #d97706;
  --bs-amber-700: #b45309;
  --bs-amber-800: #924b0f;
  --bs-amber-900: #78350f;
  
  /* Gold Color Scale */
  --bs-gold-100: #fef3c7;
  --bs-gold-200: #fde68a;
  --bs-gold-300: #fcd34d;
  --bs-gold-400: #fbbf24;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #b5942b;
  --bs-gold-700: #967a22;
  --bs-gold-800: #7a6118;
  --bs-gold-900: #645212;
  
  /* Yellow Color Scale */
  --bs-yellow-100: #fef9c3;
  --bs-yellow-200: #fef08a;
  --bs-yellow-300: #fde047;
  --bs-yellow-400: #fbcf33;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #ca8a04;
  --bs-yellow-700: #a16a04;
  --bs-yellow-800: #845b05;
  --bs-yellow-900: #713e04;
  
  /* Lime Color Scale */
  --bs-lime-100: #ecfccb;
  --bs-lime-200: #d9f99f;
  --bs-lime-300: #bef264;
  --bs-lime-400: #a3e635;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #65a30d;
  --bs-lime-700: #4f7c0c;
  --bs-lime-800: #3f6308;
  --bs-lime-900: #345107;
  
  /* Green Color Scale */
  --bs-green-100: #dcfce7;
  --bs-green-200: #bbf7d0;
  --bs-green-300: #86efac;
  --bs-green-400: #4ade80;
  --bs-green-500: #22c55e;
  --bs-green-600: #16a34a;
  --bs-green-700: #15803d;
  --bs-green-800: #166534;
  --bs-green-900: #14532d;
  
  /* Emerald Color Scale */
  --bs-emerald-100: #d1fae5;
  --bs-emerald-200: #a7f3d0;
  --bs-emerald-300: #6ee7b7;
  --bs-emerald-400: #34d399;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #059669;
  --bs-emerald-700: #047857;
  --bs-emerald-800: #065f46;
  --bs-emerald-900: #064e3b;
  
  /* Teal Color Scale */
  --bs-teal-100: #ccfbf1;
  --bs-teal-200: #99f6e4;
  --bs-teal-300: #5eead4;
  --bs-teal-400: #2dd4bf;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #0d9488;
  --bs-teal-700: #0f766e;
  --bs-teal-800: #115e59;
  --bs-teal-900: #134e4a;
  
  /* Cyan Color Scale */
  --bs-cyan-100: #cffafe;
  --bs-cyan-200: #a5f3fc;
  --bs-cyan-300: #67e8f9;
  --bs-cyan-400: #22d3ee;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #0891b2;
  --bs-cyan-700: #0e7490;
  --bs-cyan-800: #155e75;
  --bs-cyan-900: #164e63;
  
  /* Sky Color Scale */
  --bs-sky-100: #e0f2fe;
  --bs-sky-200: #bae6fd;
  --bs-sky-300: #7dd3fc;
  --bs-sky-400: #38bdf8;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #0284c7;
  --bs-sky-700: #0369a1;
  --bs-sky-800: #075985;
  --bs-sky-900: #0c4a6e;
  
  /* Blue Color Scale */
  --bs-blue-100: #dbeafe;
  --bs-blue-200: #bfdbfe;
  --bs-blue-300: #93c5fd;
  --bs-blue-400: #60a5fa;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #2563eb;
  --bs-blue-700: #1d4ed8;
  --bs-blue-800: #1e40af;
  --bs-blue-900: #1e3a8a;
  
  /* Azure Color Scale */
  --bs-azure-100: #e0f2fe;
  --bs-azure-200: #bae6fd;
  --bs-azure-300: #7dd3fc;
  --bs-azure-400: #38bdf8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #0369a1;
  --bs-azure-700: #075985;
  --bs-azure-800: #0c4a6e;
  --bs-azure-900: #082f49;
  
  /* Navy Color Scale */
  --bs-navy-100: #e0e7ff;
  --bs-navy-200: #c7d7fe;
  --bs-navy-300: #9eaffd;
  --bs-navy-400: #7e8ffd;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #0f172a;
  --bs-navy-700: #0d1117;
  --bs-navy-800: #09090f;
  --bs-navy-900: #050507;
  
  /* Slate Color Scale */
  --bs-slate-100: #f8fafc;
  --bs-slate-200: #e2e8f0;
  --bs-slate-300: #cbd5e1;
  --bs-slate-400: #94a3b8;
  --bs-slate-500: #64748b;
  --bs-slate-600: #475569;
  --bs-slate-700: #334155;
  --bs-slate-800: #1e293b;
  --bs-slate-900: #0f172a;
  
  /* Stone Color Scale */
  --bs-stone-100: #fafaf9;
  --bs-stone-200: #e7e5e4;
  --bs-stone-300: #d6d3d1;
  --bs-stone-400: #a8a29e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #57534e;
  --bs-stone-700: #44403c;
  --bs-stone-800: #292524;
  --bs-stone-900: #1c1917;
  
  /* Brown Color Scale */
  --bs-brown-100: #faf5f0;
  --bs-brown-200: #f3e8d6;
  --bs-brown-300: #e7d5b1;
  --bs-brown-400: #dcb48d;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #8a4a25;
  --bs-brown-700: #703a1d;
  --bs-brown-800: #5c2e17;
  --bs-brown-900: #482212;
  
  /* Coral Color Scale */
  --bs-coral-100: #ffe4d6;
  --bs-coral-200: #ffd5ba;
  --bs-coral-300: #ffc49e;
  --bs-coral-400: #ffb381;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ff8c5c;
  --bs-coral-700: #ff7a4a;
  --bs-coral-800: #ff6738;
  --bs-coral-900: #ff4e26;
}

/* ===================================================================
   SECTION: Dark Mode
   Dark theme color overrides for all 25 colors
   =================================================================== */

[data-bs-theme="dark"] {
  /* Indigo Dark Mode */
  --bs-indigo-100: #1e1e3f;
  --bs-indigo-200: #2e2e5f;
  --bs-indigo-300: #3e3e7f;
  --bs-indigo-400: #4e4e9f;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #7e8fff;
  --bs-indigo-700: #9eaffd;
  --bs-indigo-800: #bfcfff;
  --bs-indigo-900: #dfdeff;
  
  /* Purple Dark Mode */
  --bs-purple-100: #2a1e2e;
  --bs-purple-200: #3a2e3e;
  --bs-purple-300: #4a3e4e;
  --bs-purple-400: #5a4e5e;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #b26bce;
  --bs-purple-700: #c58ae0;
  --bs-purple-800: #d9b1ed;
  --bs-purple-900: #ecc3fc;
  
  /* Violet Dark Mode */
  --bs-violet-100: #221c2d;
  --bs-violet-200: #322c3d;
  --bs-violet-300: #42364d;
  --bs-violet-400: #52405d;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #a279fa;
  --bs-violet-700: #b799fd;
  --bs-violet-800: #c9b9fe;
  --bs-violet-900: #dbb9ff;
  
  /* Fuchsia Dark Mode */
  --bs-fuchsia-100: #2e0d1a;
  --bs-fuchsia-200: #3e1d2a;
  --bs-fuchsia-300: #4e2d3a;
  --bs-fuchsia-400: #5e3d4a;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #f04977;
  --bs-fuchsia-700: #f4718c;
  --bs-fuchsia-800: #f69ba0;
  --bs-fuchsia-900: #f9bcc1;
  
  /* Pink Dark Mode */
  --bs-pink-100: #2e0d1a;
  --bs-pink-200: #3e1d2a;
  --bs-pink-300: #4e2d3a;
  --bs-pink-400: #5e3d4a;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #f04977;
  --bs-pink-700: #f4718c;
  --bs-pink-800: #f69ba0;
  --bs-pink-900: #f9bcc1;
  
  /* Rose Dark Mode */
  --bs-rose-100: #2e0e13;
  --bs-rose-200: #3e1e23;
  --bs-rose-300: #4e2e33;
  --bs-rose-400: #5e3e43;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #f66578;
  --bs-rose-700: #f8879d;
  --bs-rose-800: #fa98ac;
  --bs-rose-900: #fcaab6;
  
  /* Crimson Dark Mode */
  --bs-crimson-100: #2e0d12;
  --bs-crimson-200: #3e1d22;
  --bs-crimson-300: #4e2d32;
  --bs-crimson-400: #5e3d42;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #e44567;
  --bs-crimson-700: #e76d87;
  --bs-crimson-800: #ea8fa5;
  --bs-crimson-900: #edafbe;
  
  /* Red Dark Mode */
  --bs-red-100: #2e0e0e;
  --bs-red-200: #3e1e1e;
  --bs-red-300: #4e2e2e;
  --bs-red-400: #5e3e3e;
  --bs-red-500: #ef4444;
  --bs-red-600: #f16767;
  --bs-red-700: #f38a8a;
  --bs-red-800: #f4abab;
  --bs-red-900: #f7bcbc;
  
  /* Orange Dark Mode */
  --bs-orange-100: #2e1907;
  --bs-orange-200: #3e271b;
  --bs-orange-300: #4e3520;
  --bs-orange-400: #5e4324;
  --bs-orange-500: #f97316;
  --bs-orange-600: #fba541;
  --bs-orange-700: #fcc46b;
  --bs-orange-800: #fcd795;
  --bs-orange-900: #fde8b9;
  
  /* Amber Dark Mode */
  --bs-amber-100: #2e1f0b;
  --bs-amber-200: #3e2b18;
  --bs-amber-300: #4e3726;
  --bs-amber-400: #5e4334;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #f7b933;
  --bs-amber-700: #f8d158;
  --bs-amber-800: #f9d77d;
  --bs-amber-900: #fae9a2;
  
  /* Gold Dark Mode */
  --bs-gold-100: #2e210d;
  --bs-gold-200: #3e2c19;
  --bs-gold-300: #4e3825;
  --bs-gold-400: #5e4432;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #d8c35f;
  --bs-gold-700: #dcc886;
  --bs-gold-800: #e0cda8;
  --bs-gold-900: #e4d1ce;
  
  /* Yellow Dark Mode */
  --bs-yellow-100: #2e1f0b;
  --bs-yellow-200: #3e2b18;
  --bs-yellow-300: #4e3726;
  --bs-yellow-400: #5e4334;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #e7c30f;
  --bs-yellow-700: #e4b216;
  --bs-yellow-800: #e1a11e;
  --bs-yellow-900: #de9f25;
  
  /* Lime Dark Mode */
  --bs-lime-100: #1e2509;
  --bs-lime-200: #2d3a0d;
  --bs-lime-300: #3c4f12;
  --bs-lime-400: #4b6416;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #a0e42e;
  --bs-lime-700: #bcec52;
  --bs-lime-800: #d0f177;
  --bs-lime-900: #d4f18b;
  
  /* Green Dark Mode */
  --bs-green-100: #0e1f0b;
  --bs-green-200: #1e3b1e;
  --bs-green-300: #2d5831;
  --bs-green-400: #3c742f;
  --bs-green-500: #22c55e;
  --bs-green-600: #4dd47c;
  --bs-green-700: #79e19b;
  --bs-green-800: #a6eec9;
  --bs-green-900: #c3fee7;
  
  /* Emerald Dark Mode */
  --bs-emerald-100: #052f23;
  --bs-emerald-200: #075436;
  --bs-emerald-300: #086949;
  --bs-emerald-400: #0a7f5b;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #3dd0a7;
  --bs-emerald-700: #60e6cc;
  --bs-emerald-800: #92ede2;
  --bs-emerald-900: #a5f0e8;
  
  /* Teal Dark Mode */
  --bs-teal-100: #042e28;
  --bs-teal-200: #065e56;
  --bs-teal-300: #087e85;
  --bs-teal-400: #0a9db3;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #3cc9c0;
  --bs-teal-700: #63dad5;
  --bs-teal-800: #86ebe9;
  --bs-teal-900: #a9fcf5;
  
  /* Cyan Dark Mode */
  --bs-cyan-100: #04223a;
  --bs-cyan-200: #094c6a;
  --bs-cyan-300: #0b7299;
  --bs-cyan-400: #0d98b8;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #38d1ec;
  --bs-cyan-700: #5ae7f5;
  --bs-cyan-800: #8deeed;
  --bs-cyan-900: #c0f4f7;
  
  /* Sky Dark Mode */
  --bs-sky-100: #04233a;
  --bs-sky-200: #094870;
  --bs-sky-300: #0b6ca7;
  --bs-sky-400: #0d8fd7;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #3bbdf0;
  --bs-sky-700: #62d2f2;
  --bs-sky-800: #94e6f4;
  --bs-sky-900: #c6f9f7;
  
  /* Blue Dark Mode */
  --bs-blue-100: #11183a;
  --bs-blue-200: #1c2c5e;
  --bs-blue-300: #273081;
  --bs-blue-400: #3243a3;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #6699f9;
  --bs-blue-700: #8bb0fa;
  --bs-blue-800: #b1c6fb;
  --bs-blue-900: #d7ddfc;
  
  /* Azure Dark Mode */
  --bs-azure-100: #04223a;
  --bs-azure-200: #094c6a;
  --bs-azure-300: #0b7299;
  --bs-azure-400: #0d98b8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #3b9fd0;
  --bs-azure-700: #5bb6d7;
  --bs-azure-800: #80cde0;
  --bs-azure-900: #a6d4e9;
  
  /* Navy Dark Mode */
  --bs-navy-100: #0a0f19;
  --bs-navy-200: #141c2e;
  --bs-navy-300: #1e293b;
  --bs-navy-400: #273449;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #334155;
  --bs-navy-700: #475569;
  --bs-navy-800: #64748b;
  --bs-navy-900: #94a3b8;
  
  /* Slate Dark Mode */
  --bs-slate-100: #0f172a;
  --bs-slate-200: #1e293b;
  --bs-slate-300: #273449;
  --bs-slate-400: #334155;
  --bs-slate-500: #64748b;
  --bs-slate-600: #94a3b8;
  --bs-slate-700: #cbd5e1;
  --bs-slate-800: #e2e8f0;
  --bs-slate-900: #f8fafc;
  
  /* Stone Dark Mode */
  --bs-stone-100: #1c1917;
  --bs-stone-200: #292524;
  --bs-stone-300: #44403c;
  --bs-stone-400: #57534e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #a8a29e;
  --bs-stone-700: #d6d3d1;
  --bs-stone-800: #e7e5e4;
  --bs-stone-900: #fafaf9;
  
  /* Brown Dark Mode */
  --bs-brown-100: #27190e;
  --bs-brown-200: #3d2514;
  --bs-brown-300: #53311a;
  --bs-brown-400: #694c21;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #bf7a46;
  --bs-brown-700: #d5a16d;
  --bs-brown-800: #e5c395;
  --bs-brown-900: #f6e5bd;
  
  /* Coral Dark Mode */
  --bs-coral-100: #2b0f0a;
  --bs-coral-200: #46251b;
  --bs-coral-300: #61402c;
  --bs-coral-400: #7c4a3d;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ffb58a;
  --bs-coral-700: #ffc6a2;
  --bs-coral-800: #ffd7ba;
  --bs-coral-900: #ffe9d1;
}

/* ===================================================================
   SECTION: Text Colors
   Text color utilities for all 25 colors with emphasis and tertiary variants
   =================================================================== */

.text-indigo {
  color: var(--bs-indigo-500) !important;
}
.text-indigo-emphasis {
  color: var(--bs-indigo-900) !important;
}
.text-indigo-tertiary {
  color: var(--bs-indigo-700) !important;
}
.text-purple {
  color: var(--bs-purple-500) !important;
}
.text-purple-emphasis {
  color: var(--bs-purple-900) !important;
}
.text-purple-tertiary {
  color: var(--bs-purple-700) !important;
}
.text-violet {
  color: var(--bs-violet-500) !important;
}
.text-violet-emphasis {
  color: var(--bs-violet-900) !important;
}
.text-violet-tertiary {
  color: var(--bs-violet-700) !important;
}
.text-fuchsia {
  color: var(--bs-fuchsia-500) !important;
}
.text-fuchsia-emphasis {
  color: var(--bs-fuchsia-900) !important;
}
.text-fuchsia-tertiary {
  color: var(--bs-fuchsia-700) !important;
}
.text-pink {
  color: var(--bs-pink-500) !important;
}
.text-pink-emphasis {
  color: var(--bs-pink-900) !important;
}
.text-pink-tertiary {
  color: var(--bs-pink-700) !important;
}
.text-rose {
  color: var(--bs-rose-500) !important;
}
.text-rose-emphasis {
  color: var(--bs-rose-900) !important;
}
.text-rose-tertiary {
  color: var(--bs-rose-700) !important;
}
.text-crimson {
  color: var(--bs-crimson-500) !important;
}
.text-crimson-emphasis {
  color: var(--bs-crimson-900) !important;
}
.text-crimson-tertiary {
  color: var(--bs-crimson-700) !important;
}
.text-red {
  color: var(--bs-red-500) !important;
}
.text-red-emphasis {
  color: var(--bs-red-900) !important;
}
.text-red-tertiary {
  color: var(--bs-red-700) !important;
}
.text-orange {
  color: var(--bs-orange-500) !important;
}
.text-orange-emphasis {
  color: var(--bs-orange-900) !important;
}
.text-orange-tertiary {
  color: var(--bs-orange-700) !important;
}
.text-amber {
  color: var(--bs-amber-500) !important;
}
.text-amber-emphasis {
  color: var(--bs-amber-900) !important;
}
.text-amber-tertiary {
  color: var(--bs-amber-700) !important;
}
.text-gold {
  color: var(--bs-gold-500) !important;
}
.text-gold-emphasis {
  color: var(--bs-gold-900) !important;
}
.text-gold-tertiary {
  color: var(--bs-gold-700) !important;
}
.text-yellow {
  color: var(--bs-yellow-500) !important;
}
.text-yellow-emphasis {
  color: var(--bs-yellow-900) !important;
}
.text-yellow-tertiary {
  color: var(--bs-yellow-700) !important;
}
.text-lime {
  color: var(--bs-lime-500) !important;
}
.text-lime-emphasis {
  color: var(--bs-lime-900) !important;
}
.text-lime-tertiary {
  color: var(--bs-lime-700) !important;
}
.text-green {
  color: var(--bs-green-500) !important;
}
.text-green-emphasis {
  color: var(--bs-green-900) !important;
}
.text-green-tertiary {
  color: var(--bs-green-700) !important;
}
.text-emerald {
  color: var(--bs-emerald-500) !important;
}
.text-emerald-emphasis {
  color: var(--bs-emerald-900) !important;
}
.text-emerald-tertiary {
  color: var(--bs-emerald-700) !important;
}
.text-teal {
  color: var(--bs-teal-500) !important;
}
.text-teal-emphasis {
  color: var(--bs-teal-900) !important;
}
.text-teal-tertiary {
  color: var(--bs-teal-700) !important;
}
.text-cyan {
  color: var(--bs-cyan-500) !important;
}
.text-cyan-emphasis {
  color: var(--bs-cyan-900) !important;
}
.text-cyan-tertiary {
  color: var(--bs-cyan-700) !important;
}
.text-sky {
  color: var(--bs-sky-500) !important;
}
.text-sky-emphasis {
  color: var(--bs-sky-900) !important;
}
.text-sky-tertiary {
  color: var(--bs-sky-700) !important;
}
.text-blue {
  color: var(--bs-blue-500) !important;
}
.text-blue-emphasis {
  color: var(--bs-blue-900) !important;
}
.text-blue-tertiary {
  color: var(--bs-blue-700) !important;
}
.text-azure {
  color: var(--bs-azure-500) !important;
}
.text-azure-emphasis {
  color: var(--bs-azure-900) !important;
}
.text-azure-tertiary {
  color: var(--bs-azure-700) !important;
}
.text-navy {
  color: var(--bs-navy-500) !important;
}
.text-navy-emphasis {
  color: var(--bs-navy-900) !important;
}
.text-navy-tertiary {
  color: var(--bs-navy-700) !important;
}
.text-slate {
  color: var(--bs-slate-500) !important;
}
.text-slate-emphasis {
  color: var(--bs-slate-900) !important;
}
.text-slate-tertiary {
  color: var(--bs-slate-700) !important;
}
.text-stone {
  color: var(--bs-stone-500) !important;
}
.text-stone-emphasis {
  color: var(--bs-stone-900) !important;
}
.text-stone-tertiary {
  color: var(--bs-stone-700) !important;
}
.text-brown {
  color: var(--bs-brown-500) !important;
}
.text-brown-emphasis {
  color: var(--bs-brown-900) !important;
}
.text-brown-tertiary {
  color: var(--bs-brown-700) !important;
}
.text-coral {
  color: var(--bs-coral-500) !important;
}
.text-coral-emphasis {
  color: var(--bs-coral-900) !important;
}
.text-coral-tertiary {
  color: var(--bs-coral-700) !important;
}

/* ===================================================================
   SECTION: Background Colors
   Background color utilities for all 25 colors with subtle variants
   =================================================================== */

.bg-indigo {
  background-color: var(--bs-indigo-500) !important;
}
.bg-indigo-subtle {
  background-color: var(--bs-indigo-100) !important;
}
.bg-purple {
  background-color: var(--bs-purple-500) !important;
}
.bg-purple-subtle {
  background-color: var(--bs-purple-100) !important;
}
.bg-violet {
  background-color: var(--bs-violet-500) !important;
}
.bg-violet-subtle {
  background-color: var(--bs-violet-100) !important;
}
.bg-fuchsia {
  background-color: var(--bs-fuchsia-500) !important;
}
.bg-fuchsia-subtle {
  background-color: var(--bs-fuchsia-100) !important;
}
.bg-pink {
  background-color: var(--bs-pink-500) !important;
}
.bg-pink-subtle {
  background-color: var(--bs-pink-100) !important;
}
.bg-rose {
  background-color: var(--bs-rose-500) !important;
}
.bg-rose-subtle {
  background-color: var(--bs-rose-100) !important;
}
.bg-crimson {
  background-color: var(--bs-crimson-500) !important;
}
.bg-crimson-subtle {
  background-color: var(--bs-crimson-100) !important;
}
.bg-red {
  background-color: var(--bs-red-500) !important;
}
.bg-red-subtle {
  background-color: var(--bs-red-100) !important;
}
.bg-orange {
  background-color: var(--bs-orange-500) !important;
}
.bg-orange-subtle {
  background-color: var(--bs-orange-100) !important;
}
.bg-amber {
  background-color: var(--bs-amber-500) !important;
}
.bg-amber-subtle {
  background-color: var(--bs-amber-100) !important;
}
.bg-gold {
  background-color: var(--bs-gold-500) !important;
}
.bg-gold-subtle {
  background-color: var(--bs-gold-100) !important;
}
.bg-yellow {
  background-color: var(--bs-yellow-500) !important;
}
.bg-yellow-subtle {
  background-color: var(--bs-yellow-100) !important;
}
.bg-lime {
  background-color: var(--bs-lime-500) !important;
}
.bg-lime-subtle {
  background-color: var(--bs-lime-100) !important;
}
.bg-green {
  background-color: var(--bs-green-500) !important;
}
.bg-green-subtle {
  background-color: var(--bs-green-100) !important;
}
.bg-emerald {
  background-color: var(--bs-emerald-500) !important;
}
.bg-emerald-subtle {
  background-color: var(--bs-emerald-100) !important;
}
.bg-teal {
  background-color: var(--bs-teal-500) !important;
}
.bg-teal-subtle {
  background-color: var(--bs-teal-100) !important;
}
.bg-cyan {
  background-color: var(--bs-cyan-500) !important;
}
.bg-cyan-subtle {
  background-color: var(--bs-cyan-100) !important;
}
.bg-sky {
  background-color: var(--bs-sky-500) !important;
}
.bg-sky-subtle {
  background-color: var(--bs-sky-100) !important;
}
.bg-blue {
  background-color: var(--bs-blue-500) !important;
}
.bg-blue-subtle {
  background-color: var(--bs-blue-100) !important;
}
.bg-azure {
  background-color: var(--bs-azure-500) !important;
}
.bg-azure-subtle {
  background-color: var(--bs-azure-100) !important;
}
.bg-navy {
  background-color: var(--bs-navy-500) !important;
}
.bg-navy-subtle {
  background-color: var(--bs-navy-100) !important;
}
.bg-slate {
  background-color: var(--bs-slate-500) !important;
}
.bg-slate-subtle {
  background-color: var(--bs-slate-100) !important;
}
.bg-stone {
  background-color: var(--bs-stone-500) !important;
}
.bg-stone-subtle {
  background-color: var(--bs-stone-100) !important;
}
.bg-brown {
  background-color: var(--bs-brown-500) !important;
}
.bg-brown-subtle {
  background-color: var(--bs-brown-100) !important;
}
.bg-coral {
  background-color: var(--bs-coral-500) !important;
}
.bg-coral-subtle {
  background-color: var(--bs-coral-100) !important;
}

/* ===================================================================
   SECTION: Border Colors
   Border color utilities for all 25 colors with subtle variants
   =================================================================== */

.border-indigo {
  border-color: var(--bs-indigo-500) !important;
}
.border-indigo-subtle {
  border-color: var(--bs-indigo-300) !important;
}
.border-purple {
  border-color: var(--bs-purple-500) !important;
}
.border-purple-subtle {
  border-color: var(--bs-purple-300) !important;
}
.border-violet {
  border-color: var(--bs-violet-500) !important;
}
.border-violet-subtle {
  border-color: var(--bs-violet-300) !important;
}
.border-fuchsia {
  border-color: var(--bs-fuchsia-500) !important;
}
.border-fuchsia-subtle {
  border-color: var(--bs-fuchsia-300) !important;
}
.border-pink {
  border-color: var(--bs-pink-500) !important;
}
.border-pink-subtle {
  border-color: var(--bs-pink-300) !important;
}
.border-rose {
  border-color: var(--bs-rose-500) !important;
}
.border-rose-subtle {
  border-color: var(--bs-rose-300) !important;
}
.border-crimson {
  border-color: var(--bs-crimson-500) !important;
}
.border-crimson-subtle {
  border-color: var(--bs-crimson-300) !important;
}
.border-red {
  border-color: var(--bs-red-500) !important;
}
.border-red-subtle {
  border-color: var(--bs-red-300) !important;
}
.border-orange {
  border-color: var(--bs-orange-500) !important;
}
.border-orange-subtle {
  border-color: var(--bs-orange-300) !important;
}
.border-amber {
  border-color: var(--bs-amber-500) !important;
}
.border-amber-subtle {
  border-color: var(--bs-amber-300) !important;
}
.border-gold {
  border-color: var(--bs-gold-500) !important;
}
.border-gold-subtle {
  border-color: var(--bs-gold-300) !important;
}
.border-yellow {
  border-color: var(--bs-yellow-500) !important;
}
.border-yellow-subtle {
  border-color: var(--bs-yellow-300) !important;
}
.border-lime {
  border-color: var(--bs-lime-500) !important;
}
.border-lime-subtle {
  border-color: var(--bs-lime-300) !important;
}
.border-green {
  border-color: var(--bs-green-500) !important;
}
.border-green-subtle {
  border-color: var(--bs-green-300) !important;
}
.border-emerald {
  border-color: var(--bs-emerald-500) !important;
}
.border-emerald-subtle {
  border-color: var(--bs-emerald-300) !important;
}
.border-teal {
  border-color: var(--bs-teal-500) !important;
}
.border-teal-subtle {
  border-color: var(--bs-teal-300) !important;
}
.border-cyan {
  border-color: var(--bs-cyan-500) !important;
}
.border-cyan-subtle {
  border-color: var(--bs-cyan-300) !important;
}
.border-sky {
  border-color: var(--bs-sky-500) !important;
}
.border-sky-subtle {
  border-color: var(--bs-sky-300) !important;
}
.border-blue {
  border-color: var(--bs-blue-500) !important;
}
.border-blue-subtle {
  border-color: var(--bs-blue-300) !important;
}
.border-azure {
  border-color: var(--bs-azure-500) !important;
}
.border-azure-subtle {
  border-color: var(--bs-azure-300) !important;
}
.border-navy {
  border-color: var(--bs-navy-500) !important;
}
.border-navy-subtle {
  border-color: var(--bs-navy-300) !important;
}
.border-slate {
  border-color: var(--bs-slate-500) !important;
}
.border-slate-subtle {
  border-color: var(--bs-slate-300) !important;
}
.border-stone {
  border-color: var(--bs-stone-500) !important;
}
.border-stone-subtle {
  border-color: var(--bs-stone-300) !important;
}
.border-brown {
  border-color: var(--bs-brown-500) !important;
}
.border-brown-subtle {
  border-color: var(--bs-brown-300) !important;
}
.border-coral {
  border-color: var(--bs-coral-500) !important;
}
.border-coral-subtle {
  border-color: var(--bs-coral-300) !important;
}

/* ===================================================================
   SECTION: Buttons
   Comprehensive button styling for all 25 colors with full states
   =================================================================== */

/* Indigo Button Styles */
.btn-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: var(--bs-indigo-500);
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-600);
  --bs-btn-hover-border-color: var(--bs-indigo-600);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-700);
  --bs-btn-active-border-color: var(--bs-indigo-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-indigo-300);
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-500);
  --bs-btn-hover-border-color: var(--bs-indigo-500);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-600);
  --bs-btn-active-border-color: var(--bs-indigo-600);
  --bs-btn-disabled-color: var(--bs-indigo-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Purple Button Styles */
.btn-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: var(--bs-purple-500);
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-600);
  --bs-btn-hover-border-color: var(--bs-purple-600);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-700);
  --bs-btn-active-border-color: var(--bs-purple-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-purple-300);
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-500);
  --bs-btn-hover-border-color: var(--bs-purple-500);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-600);
  --bs-btn-active-border-color: var(--bs-purple-600);
  --bs-btn-disabled-color: var(--bs-purple-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Violet Button Styles */
.btn-violet {
  --bs-btn-color: var(--bs-violet-500);
  --bs-btn-bg: var(--bs-violet-500);
  --bs-btn-border-color: var(--bs-violet-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-violet-600);
  --bs-btn-hover-border-color: var(--bs-violet-600);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-violet-700);
  --bs-btn-active-border-color: var(--bs-violet-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-violet-300);
  --bs-btn-disabled-border-color: var(--bs-violet-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-violet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-violet:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-violet:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-violet:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-violet {
  --bs-btn-color: var(--bs-violet-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-violet-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-violet-500);
  --bs-btn-hover-border-color: var(--bs-violet-500);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-violet-600);
  --bs-btn-active-border-color: var(--bs-violet-600);
  --bs-btn-disabled-color: var(--bs-violet-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-violet-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-violet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-violet:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-violet:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-violet:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Fuchsia Button Styles */
.btn-fuchsia {
  --bs-btn-color: var(--bs-fuchsia-500);
  --bs-btn-bg: var(--bs-fuchsia-500);
  --bs-btn-border-color: var(--bs-fuchsia-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-fuchsia-600);
  --bs-btn-hover-border-color: var(--bs-fuchsia-600);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-fuchsia-700);
  --bs-btn-active-border-color: var(--bs-fuchsia-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-fuchsia-300);
  --bs-btn-disabled-border-color: var(--bs-fuchsia-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-fuchsia:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-fuchsia:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-fuchsia:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-fuchsia:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-fuchsia {
  --bs-btn-color: var(--bs-fuchsia-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-fuchsia-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-fuchsia-500);
  --bs-btn-hover-border-color: var(--bs-fuchsia-500);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-fuchsia-600);
  --bs-btn-active-border-color: var(--bs-fuchsia-600);
  --bs-btn-disabled-color: var(--bs-fuchsia-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-fuchsia-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding:0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-fuchsia:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-fuchsia:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-fuchsia:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-fuchsia:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}



/* ===================================================================
   Bootstrap Extended Colors Framework
   Bootstrap 5.3+ Compatible - Production Ready
   Generated with comprehensive 25-color palette and complete theming system
   =================================================================== */

/* ===================================================================
   SECTION: Variables
   Core color definitions and CSS variables for all 25 custom colors
   =================================================================== */

:root {
  /* Indigo Color Scale */
  --bs-indigo-100: #e0e7ff;
  --bs-indigo-200: #c7d7fe;
  --bs-indigo-300: #9eaffd;
  --bs-indigo-400: #7e8ffd;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #5859e2;
  --bs-indigo-700: #4f50d2;
  --bs-indigo-800: #4646b7;
  --bs-indigo-900: #3e3d9f;
  
  /* Purple Color Scale */
  --bs-purple-100: #f3e5f5;
  --bs-purple-200: #e5d4f0;
  --bs-purple-300: #d1b8ea;
  --bs-purple-400: #bf9ce4;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #8e4ba8;
  --bs-purple-700: #7c3f96;
  --bs-purple-800: #6a3483;
  --bs-purple-900: #5a2a6f;
  
  /* Violet Color Scale */
  --bs-violet-100: #f3e8ff;
  --bs-violet-200: #ead4fe;
  --bs-violet-300: #dca6fd;
  --bs-violet-400: #d077fc;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #7c4ce6;
  --bs-violet-700: #6e44d4;
  --bs-violet-800: #603ec2;
  --bs-violet-900: #5234a7;
  
  /* Fuchsia Color Scale */
  --bs-fuchsia-100: #fde8ff;
  --bs-fuchsia-200: #fcd0fe;
  --bs-fuchsia-300: #f8a7fc;
  --bs-fuchsia-400: #f680fa;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #d81b57;
  --bs-fuchsia-700: #c61a4c;
  --bs-fuchsia-800: #b51941;
  --bs-fuchsia-900: #a31637;
  
  /* Pink Color Scale */
  --bs-pink-100: #fce4ec;
  --bs-pink-200: #f8cadd;
  --bs-pink-300: #f4a9ce;
  --bs-pink-400: #f08ac0;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #d81b57;
  --bs-pink-700: #c61a4c;
  --bs-pink-800: #b51941;
  --bs-pink-900: #a31637;
  
  /* Rose Color Scale */
  --bs-rose-100: #ffe4e6;
  --bs-rose-200: #fecdd2;
  --bs-rose-300: #fda2aa;
  --bs-rose-400: #fc8892;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #e73758;
  --bs-rose-700: #d32e4e;
  --bs-rose-800: #be273f;
  --bs-rose-900: #a51e33;
  
  /* Crimson Color Scale */
  --bs-crimson-100: #ffe4e6;
  --bs-crimson-200: #fecdd2;
  --bs-crimson-300: #fda2aa;
  --bs-crimson-400: #fc8892;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #c71b3f;
  --bs-crimson-700: #ad1a36;
  --bs-crimson-800: #93182e;
  --bs-crimson-900: #791624;
  
  /* Red Color Scale */
  --bs-red-100: #fee2e2;
  --bs-red-200: #fecaca;
  --bs-red-300: #fca5a5;
  --bs-red-400: #f97272;
  --bs-red-500: #ef4444;
  --bs-red-600: #dc2626;
  --bs-red-700: #b91c1c;
  --bs-red-800: #991b1b;
  --bs-red-900: #7f1d1d;
  
  /* Orange Color Scale */
  --bs-orange-100: #ffedd5;
  --bs-orange-200: #fed7aa;
  --bs-orange-300: #fdba74;
  --bs-orange-400: #fb923c;
  --bs-orange-500: #f97316;
  --bs-orange-600: #ea580c;
  --bs-orange-700: #c2410c;
  --bs-orange-800: #9a3412;
  --bs-orange-900: #7c2d12;
  
  /* Amber Color Scale */
  --bs-amber-100: #fef3c7;
  --bs-amber-200: #fde68a;
  --bs-amber-300: #fcd34d;
  --bs-amber-400: #fbbf24;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #d97706;
  --bs-amber-700: #b45309;
  --bs-amber-800: #924b0f;
  --bs-amber-900: #78350f;
  
  /* Gold Color Scale */
  --bs-gold-100: #fef3c7;
  --bs-gold-200: #fde68a;
  --bs-gold-300: #fcd34d;
  --bs-gold-400: #fbbf24;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #b5942b;
  --bs-gold-700: #967a22;
  --bs-gold-800: #7a6118;
  --bs-gold-900: #645212;
  
  /* Yellow Color Scale */
  --bs-yellow-100: #fef9c3;
  --bs-yellow-200: #fef08a;
  --bs-yellow-300: #fde047;
  --bs-yellow-400: #fbcf33;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #ca8a04;
  --bs-yellow-700: #a16a04;
  --bs-yellow-800: #845b05;
  --bs-yellow-900: #713e04;
  
  /* Lime Color Scale */
  --bs-lime-100: #ecfccb;
  --bs-lime-200: #d9f99f;
  --bs-lime-300: #bef264;
  --bs-lime-400: #a3e635;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #65a30d;
  --bs-lime-700: #4f7c0c;
  --bs-lime-800: #3f6308;
  --bs-lime-900: #345107;
  
  /* Green Color Scale */
  --bs-green-100: #dcfce7;
  --bs-green-200: #bbf7d0;
  --bs-green-300: #86efac;
  --bs-green-400: #4ade80;
  --bs-green-500: #22c55e;
  --bs-green-600: #16a34a;
  --bs-green-700: #15803d;
  --bs-green-800: #166534;
  --bs-green-900: #14532d;
  
  /* Emerald Color Scale */
  --bs-emerald-100: #d1fae5;
  --bs-emerald-200: #a7f3d0;
  --bs-emerald-300: #6ee7b7;
  --bs-emerald-400: #34d399;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #059669;
  --bs-emerald-700: #047857;
  --bs-emerald-800: #065f46;
  --bs-emerald-900: #064e3b;
  
  /* Teal Color Scale */
  --bs-teal-100: #ccfbf1;
  --bs-teal-200: #99f6e4;
  --bs-teal-300: #5eead4;
  --bs-teal-400: #2dd4bf;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #0d9488;
  --bs-teal-700: #0f766e;
  --bs-teal-800: #115e59;
  --bs-teal-900: #134e4a;
  
  /* Cyan Color Scale */
  --bs-cyan-100: #cffafe;
  --bs-cyan-200: #a5f3fc;
  --bs-cyan-300: #67e8f9;
  --bs-cyan-400: #22d3ee;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #0891b2;
  --bs-cyan-700: #0e7490;
  --bs-cyan-800: #155e75;
  --bs-cyan-900: #164e63;
  
  /* Sky Color Scale */
  --bs-sky-100: #e0f2fe;
  --bs-sky-200: #bae6fd;
  --bs-sky-300: #7dd3fc;
  --bs-sky-400: #38bdf8;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #0284c7;
  --bs-sky-700: #0369a1;
  --bs-sky-800: #075985;
  --bs-sky-900: #0c4a6e;
  
  /* Blue Color Scale */
  --bs-blue-100: #dbeafe;
  --bs-blue-200: #bfdbfe;
  --bs-blue-300: #93c5fd;
  --bs-blue-400: #60a5fa;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #2563eb;
  --bs-blue-700: #1d4ed8;
  --bs-blue-800: #1e40af;
  --bs-blue-900: #1e3a8a;
  
  /* Azure Color Scale */
  --bs-azure-100: #e0f2fe;
  --bs-azure-200: #bae6fd;
  --bs-azure-300: #7dd3fc;
  --bs-azure-400: #38bdf8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #0369a1;
  --bs-azure-700: #075985;
  --bs-azure-800: #0c4a6e;
  --bs-azure-900: #082f49;
  
  /* Navy Color Scale */
  --bs-navy-100: #e0e7ff;
  --bs-navy-200: #c7d7fe;
  --bs-navy-300: #9eaffd;
  --bs-navy-400: #7e8ffd;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #0f172a;
  --bs-navy-700: #0d1117;
  --bs-navy-800: #09090f;
  --bs-navy-900: #050507;
  
  /* Slate Color Scale */
  --bs-slate-100: #f8fafc;
  --bs-slate-200: #e2e8f0;
  --bs-slate-300: #cbd5e1;
  --bs-slate-400: #94a3b8;
  --bs-slate-500: #64748b;
  --bs-slate-600: #475569;
  --bs-slate-700: #334155;
  --bs-slate-800: #1e293b;
  --bs-slate-900: #0f172a;
  
  /* Stone Color Scale */
  --bs-stone-100: #fafaf9;
  --bs-stone-200: #e7e5e4;
  --bs-stone-300: #d6d3d1;
  --bs-stone-400: #a8a29e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #57534e;
  --bs-stone-700: #44403c;
  --bs-stone-800: #292524;
  --bs-stone-900: #1c1917;
  
  /* Brown Color Scale */
  --bs-brown-100: #faf5f0;
  --bs-brown-200: #f3e8d6;
  --bs-brown-300: #e7d5b1;
  --bs-brown-400: #dcb48d;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #8a4a25;
  --bs-brown-700: #703a1d;
  --bs-brown-800: #5c2e17;
  --bs-brown-900: #482212;
  
  /* Coral Color Scale */
  --bs-coral-100: #ffe4d6;
  --bs-coral-200: #ffd5ba;
  --bs-coral-300: #ffc49e;
  --bs-coral-400: #ffb381;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ff8c5c;
  --bs-coral-700: #ff7a4a;
  --bs-coral-800: #ff6738;
  --bs-coral-900: #ff4e26;
}

/* ===================================================================
   SECTION: Dark Mode
   Dark theme color overrides for all 25 colors
   =================================================================== */

[data-bs-theme="dark"] {
  /* Indigo Dark Mode */
  --bs-indigo-100: #1e1e3f;
  --bs-indigo-200: #2e2e5f;
  --bs-indigo-300: #3e3e7f;
  --bs-indigo-400: #4e4e9f;
  --bs-indigo-500: #6366f1;
  --bs-indigo-600: #7e8fff;
  --bs-indigo-700: #9eaffd;
  --bs-indigo-800: #bfcfff;
  --bs-indigo-900: #dfdeff;
  
  /* Purple Dark Mode */
  --bs-purple-100: #2a1e2e;
  --bs-purple-200: #3a2e3e;
  --bs-purple-300: #4a3e4e;
  --bs-purple-400: #5a4e5e;
  --bs-purple-500: #9b59b6;
  --bs-purple-600: #b26bce;
  --bs-purple-700: #c58ae0;
  --bs-purple-800: #d9b1ed;
  --bs-purple-900: #ecc3fc;
  
  /* Violet Dark Mode */
  --bs-violet-100: #221c2d;
  --bs-violet-200: #322c3d;
  --bs-violet-300: #42364d;
  --bs-violet-400: #52405d;
  --bs-violet-500: #8b5cf6;
  --bs-violet-600: #a279fa;
  --bs-violet-700: #b799fd;
  --bs-violet-800: #c9b9fe;
  --bs-violet-900: #dbb9ff;
  
  /* Fuchsia Dark Mode */
  --bs-fuchsia-100: #2e0d1a;
  --bs-fuchsia-200: #3e1d2a;
  --bs-fuchsia-300: #4e2d3a;
  --bs-fuchsia-400: #5e3d4a;
  --bs-fuchsia-500: #e91e63;
  --bs-fuchsia-600: #f04977;
  --bs-fuchsia-700: #f4718c;
  --bs-fuchsia-800: #f69ba0;
  --bs-fuchsia-900: #f9bcc1;
  
  /* Pink Dark Mode */
  --bs-pink-100: #2e0d1a;
  --bs-pink-200: #3e1d2a;
  --bs-pink-300: #4e2d3a;
  --bs-pink-400: #5e3d4a;
  --bs-pink-500: #e91e63;
  --bs-pink-600: #f04977;
  --bs-pink-700: #f4718c;
  --bs-pink-800: #f69ba0;
  --bs-pink-900: #f9bcc1;
  
  /* Rose Dark Mode */
  --bs-rose-100: #2e0e13;
  --bs-rose-200: #3e1e23;
  --bs-rose-300: #4e2e33;
  --bs-rose-400: #5e3e43;
  --bs-rose-500: #f43f5e;
  --bs-rose-600: #f66578;
  --bs-rose-700: #f8879d;
  --bs-rose-800: #fa98ac;
  --bs-rose-900: #fcaab6;
  
  /* Crimson Dark Mode */
  --bs-crimson-100: #2e0d12;
  --bs-crimson-200: #3e1d22;
  --bs-crimson-300: #4e2d32;
  --bs-crimson-400: #5e3d42;
  --bs-crimson-500: #e11d48;
  --bs-crimson-600: #e44567;
  --bs-crimson-700: #e76d87;
  --bs-crimson-800: #ea8fa5;
  --bs-crimson-900: #edafbe;
  
  /* Red Dark Mode */
  --bs-red-100: #2e0e0e;
  --bs-red-200: #3e1e1e;
  --bs-red-300: #4e2e2e;
  --bs-red-400: #5e3e3e;
  --bs-red-500: #ef4444;
  --bs-red-600: #f16767;
  --bs-red-700: #f38a8a;
  --bs-red-800: #f4abab;
  --bs-red-900: #f7bcbc;
  
  /* Orange Dark Mode */
  --bs-orange-100: #2e1907;
  --bs-orange-200: #3e271b;
  --bs-orange-300: #4e3520;
  --bs-orange-400: #5e4324;
  --bs-orange-500: #f97316;
  --bs-orange-600: #fba541;
  --bs-orange-700: #fcc46b;
  --bs-orange-800: #fcd795;
  --bs-orange-900: #fde8b9;
  
  /* Amber Dark Mode */
  --bs-amber-100: #2e1f0b;
  --bs-amber-200: #3e2b18;
  --bs-amber-300: #4e3726;
  --bs-amber-400: #5e4334;
  --bs-amber-500: #f59e0b;
  --bs-amber-600: #f7b933;
  --bs-amber-700: #f8d158;
  --bs-amber-800: #f9d77d;
  --bs-amber-900: #fae9a2;
  
  /* Gold Dark Mode */
  --bs-gold-100: #2e210d;
  --bs-gold-200: #3e2c19;
  --bs-gold-300: #4e3825;
  --bs-gold-400: #5e4432;
  --bs-gold-500: #d4af37;
  --bs-gold-600: #d8c35f;
  --bs-gold-700: #dcc886;
  --bs-gold-800: #e0cda8;
  --bs-gold-900: #e4d1ce;
  
  /* Yellow Dark Mode */
  --bs-yellow-100: #2e1f0b;
  --bs-yellow-200: #3e2b18;
  --bs-yellow-300: #4e3726;
  --bs-yellow-400: #5e4334;
  --bs-yellow-500: #eab308;
  --bs-yellow-600: #e7c30f;
  --bs-yellow-700: #e4b216;
  --bs-yellow-800: #e1a11e;
  --bs-yellow-900: #de9f25;
  
  /* Lime Dark Mode */
  --bs-lime-100: #1e2509;
  --bs-lime-200: #2d3a0d;
  --bs-lime-300: #3c4f12;
  --bs-lime-400: #4b6416;
  --bs-lime-500: #84cc16;
  --bs-lime-600: #a0e42e;
  --bs-lime-700: #bcec52;
  --bs-lime-800: #d0f177;
  --bs-lime-900: #d4f18b;
  
  /* Green Dark Mode */
  --bs-green-100: #0e1f0b;
  --bs-green-200: #1e3b1e;
  --bs-green-300: #2d5831;
  --bs-green-400: #3c742f;
  --bs-green-500: #22c55e;
  --bs-green-600: #4dd47c;
  --bs-green-700: #79e19b;
  --bs-green-800: #a6eec9;
  --bs-green-900: #c3fee7;
  
  /* Emerald Dark Mode */
  --bs-emerald-100: #052f23;
  --bs-emerald-200: #075436;
  --bs-emerald-300: #086949;
  --bs-emerald-400: #0a7f5b;
  --bs-emerald-500: #10b981;
  --bs-emerald-600: #3dd0a7;
  --bs-emerald-700: #60e6cc;
  --bs-emerald-800: #92ede2;
  --bs-emerald-900: #a5f0e8;
  
  /* Teal Dark Mode */
  --bs-teal-100: #042e28;
  --bs-teal-200: #065e56;
  --bs-teal-300: #087e85;
  --bs-teal-400: #0a9db3;
  --bs-teal-500: #14b8a6;
  --bs-teal-600: #3cc9c0;
  --bs-teal-700: #63dad5;
  --bs-teal-800: #86ebe9;
  --bs-teal-900: #a9fcf5;
  
  /* Cyan Dark Mode */
  --bs-cyan-100: #04223a;
  --bs-cyan-200: #094c6a;
  --bs-cyan-300: #0b7299;
  --bs-cyan-400: #0d98b8;
  --bs-cyan-500: #06b6d4;
  --bs-cyan-600: #38d1ec;
  --bs-cyan-700: #5ae7f5;
  --bs-cyan-800: #8deeed;
  --bs-cyan-900: #c0f4f7;
  
  /* Sky Dark Mode */
  --bs-sky-100: #04233a;
  --bs-sky-200: #094870;
  --bs-sky-300: #0b6ca7;
  --bs-sky-400: #0d8fd7;
  --bs-sky-500: #0ea5e9;
  --bs-sky-600: #3bbdf0;
  --bs-sky-700: #62d2f2;
  --bs-sky-800: #94e6f4;
  --bs-sky-900: #c6f9f7;
  
  /* Blue Dark Mode */
  --bs-blue-100: #11183a;
  --bs-blue-200: #1c2c5e;
  --bs-blue-300: #273081;
  --bs-blue-400: #3243a3;
  --bs-blue-500: #3b82f6;
  --bs-blue-600: #6699f9;
  --bs-blue-700: #8bb0fa;
  --bs-blue-800: #b1c6fb;
  --bs-blue-900: #d7ddfc;
  
  /* Azure Dark Mode */
  --bs-azure-100: #04223a;
  --bs-azure-200: #094c6a;
  --bs-azure-300: #0b7299;
  --bs-azure-400: #0d98b8;
  --bs-azure-500: #0284c7;
  --bs-azure-600: #3b9fd0;
  --bs-azure-700: #5bb6d7;
  --bs-azure-800: #80cde0;
  --bs-azure-900: #a6d4e9;
  
  /* Navy Dark Mode */
  --bs-navy-100: #0a0f19;
  --bs-navy-200: #141c2e;
  --bs-navy-300: #1e293b;
  --bs-navy-400: #273449;
  --bs-navy-500: #1e293b;
  --bs-navy-600: #334155;
  --bs-navy-700: #475569;
  --bs-navy-800: #64748b;
  --bs-navy-900: #94a3b8;
  
  /* Slate Dark Mode */
  --bs-slate-100: #0f172a;
  --bs-slate-200: #1e293b;
  --bs-slate-300: #273449;
  --bs-slate-400: #334155;
  --bs-slate-500: #64748b;
  --bs-slate-600: #94a3b8;
  --bs-slate-700: #cbd5e1;
  --bs-slate-800: #e2e8f0;
  --bs-slate-900: #f8fafc;
  
  /* Stone Dark Mode */
  --bs-stone-100: #1c1917;
  --bs-stone-200: #292524;
  --bs-stone-300: #44403c;
  --bs-stone-400: #57534e;
  --bs-stone-500: #78716c;
  --bs-stone-600: #a8a29e;
  --bs-stone-700: #d6d3d1;
  --bs-stone-800: #e7e5e4;
  --bs-stone-900: #fafaf9;
  
  /* Brown Dark Mode */
  --bs-brown-100: #27190e;
  --bs-brown-200: #3d2514;
  --bs-brown-300: #53311a;
  --bs-brown-400: #694c21;
  --bs-brown-500: #a0522d;
  --bs-brown-600: #bf7a46;
  --bs-brown-700: #d5a16d;
  --bs-brown-800: #e5c395;
  --bs-brown-900: #f6e5bd;
  
  /* Coral Dark Mode */
  --bs-coral-100: #2b0f0a;
  --bs-coral-200: #46251b;
  --bs-coral-300: #61402c;
  --bs-coral-400: #7c4a3d;
  --bs-coral-500: #ff9f6e;
  --bs-coral-600: #ffb58a;
  --bs-coral-700: #ffc6a2;
  --bs-coral-800: #ffd7ba;
  --bs-coral-900: #ffe9d1;
}

/* ===================================================================
   SECTION: Text Colors
   Text color utilities for all 25 colors with emphasis and tertiary variants
   =================================================================== */

.text-indigo {
  color: var(--bs-indigo-500) !important;
}
.text-indigo-emphasis {
  color: var(--bs-indigo-900) !important;
}
.text-indigo-tertiary {
  color: var(--bs-indigo-700) !important;
}
.text-purple {
  color: var(--bs-purple-500) !important;
}
.text-purple-emphasis {
  color: var(--bs-purple-900) !important;
}
.text-purple-tertiary {
  color: var(--bs-purple-700) !important;
}
.text-violet {
  color: var(--bs-violet-500) !important;
}
.text-violet-emphasis {
  color: var(--bs-violet-900) !important;
}
.text-violet-tertiary {
  color: var(--bs-violet-700) !important;
}
.text-fuchsia {
  color: var(--bs-fuchsia-500) !important;
}
.text-fuchsia-emphasis {
  color: var(--bs-fuchsia-900) !important;
}
.text-fuchsia-tertiary {
  color: var(--bs-fuchsia-700) !important;
}
.text-pink {
  color: var(--bs-pink-500) !important;
}
.text-pink-emphasis {
  color: var(--bs-pink-900) !important;
}
.text-pink-tertiary {
  color: var(--bs-pink-700) !important;
}
.text-rose {
  color: var(--bs-rose-500) !important;
}
.text-rose-emphasis {
  color: var(--bs-rose-900) !important;
}
.text-rose-tertiary {
  color: var(--bs-rose-700) !important;
}
.text-crimson {
  color: var(--bs-crimson-500) !important;
}
.text-crimson-emphasis {
  color: var(--bs-crimson-900) !important;
}
.text-crimson-tertiary {
  color: var(--bs-crimson-700) !important;
}
.text-red {
  color: var(--bs-red-500) !important;
}
.text-red-emphasis {
  color: var(--bs-red-900) !important;
}
.text-red-tertiary {
  color: var(--bs-red-700) !important;
}
.text-orange {
  color: var(--bs-orange-500) !important;
}
.text-orange-emphasis {
  color: var(--bs-orange-900) !important;
}
.text-orange-tertiary {
  color: var(--bs-orange-700) !important;
}
.text-amber {
  color: var(--bs-amber-500) !important;
}
.text-amber-emphasis {
  color: var(--bs-amber-900) !important;
}
.text-amber-tertiary {
  color: var(--bs-amber-700) !important;
}
.text-gold {
  color: var(--bs-gold-500) !important;
}
.text-gold-emphasis {
  color: var(--bs-gold-900) !important;
}
.text-gold-tertiary {
  color: var(--bs-gold-700) !important;
}
.text-yellow {
  color: var(--bs-yellow-500) !important;
}
.text-yellow-emphasis {
  color: var(--bs-yellow-900) !important;
}
.text-yellow-tertiary {
  color: var(--bs-yellow-700) !important;
}
.text-lime {
  color: var(--bs-lime-500) !important;
}
.text-lime-emphasis {
  color: var(--bs-lime-900) !important;
}
.text-lime-tertiary {
  color: var(--bs-lime-700) !important;
}
.text-green {
  color: var(--bs-green-500) !important;
}
.text-green-emphasis {
  color: var(--bs-green-900) !important;
}
.text-green-tertiary {
  color: var(--bs-green-700) !important;
}
.text-emerald {
  color: var(--bs-emerald-500) !important;
}
.text-emerald-emphasis {
  color: var(--bs-emerald-900) !important;
}
.text-emerald-tertiary {
  color: var(--bs-emerald-700) !important;
}
.text-teal {
  color: var(--bs-teal-500) !important;
}
.text-teal-emphasis {
  color: var(--bs-teal-900) !important;
}
.text-teal-tertiary {
  color: var(--bs-teal-700) !important;
}
.text-cyan {
  color: var(--bs-cyan-500) !important;
}
.text-cyan-emphasis {
  color: var(--bs-cyan-900) !important;
}
.text-cyan-tertiary {
  color: var(--bs-cyan-700) !important;
}
.text-sky {
  color: var(--bs-sky-500) !important;
}
.text-sky-emphasis {
  color: var(--bs-sky-900) !important;
}
.text-sky-tertiary {
  color: var(--bs-sky-700) !important;
}
.text-blue {
  color: var(--bs-blue-500) !important;
}
.text-blue-emphasis {
  color: var(--bs-blue-900) !important;
}
.text-blue-tertiary {
  color: var(--bs-blue-700) !important;
}
.text-azure {
  color: var(--bs-azure-500) !important;
}
.text-azure-emphasis {
  color: var(--bs-azure-900) !important;
}
.text-azure-tertiary {
  color: var(--bs-azure-700) !important;
}
.text-navy {
  color: var(--bs-navy-500) !important;
}
.text-navy-emphasis {
  color: var(--bs-navy-900) !important;
}
.text-navy-tertiary {
  color: var(--bs-navy-700) !important;
}
.text-slate {
  color: var(--bs-slate-500) !important;
}
.text-slate-emphasis {
  color: var(--bs-slate-900) !important;
}
.text-slate-tertiary {
  color: var(--bs-slate-700) !important;
}
.text-stone {
  color: var(--bs-stone-500) !important;
}
.text-stone-emphasis {
  color: var(--bs-stone-900) !important;
}
.text-stone-tertiary {
  color: var(--bs-stone-700) !important;
}
.text-brown {
  color: var(--bs-brown-500) !important;
}
.text-brown-emphasis {
  color: var(--bs-brown-900) !important;
}
.text-brown-tertiary {
  color: var(--bs-brown-700) !important;
}
.text-coral {
  color: var(--bs-coral-500) !important;
}
.text-coral-emphasis {
  color: var(--bs-coral-900) !important;
}
.text-coral-tertiary {
  color: var(--bs-coral-700) !important;
}

/* ===================================================================
   SECTION: Background Colors
   Background color utilities for all 25 colors with subtle variants
   =================================================================== */

.bg-indigo {
  background-color: var(--bs-indigo-500) !important;
}
.bg-indigo-subtle {
  background-color: var(--bs-indigo-100) !important;
}
.bg-purple {
  background-color: var(--bs-purple-500) !important;
}
.bg-purple-subtle {
  background-color: var(--bs-purple-100) !important;
}
.bg-violet {
  background-color: var(--bs-violet-500) !important;
}
.bg-violet-subtle {
  background-color: var(--bs-violet-100) !important;
}
.bg-fuchsia {
  background-color: var(--bs-fuchsia-500) !important;
}
.bg-fuchsia-subtle {
  background-color: var(--bs-fuchsia-100) !important;
}
.bg-pink {
  background-color: var(--bs-pink-500) !important;
}
.bg-pink-subtle {
  background-color: var(--bs-pink-100) !important;
}
.bg-rose {
  background-color: var(--bs-rose-500) !important;
}
.bg-rose-subtle {
  background-color: var(--bs-rose-100) !important;
}
.bg-crimson {
  background-color: var(--bs-crimson-500) !important;
}
.bg-crimson-subtle {
  background-color: var(--bs-crimson-100) !important;
}
.bg-red {
  background-color: var(--bs-red-500) !important;
}
.bg-red-subtle {
  background-color: var(--bs-red-100) !important;
}
.bg-orange {
  background-color: var(--bs-orange-500) !important;
}
.bg-orange-subtle {
  background-color: var(--bs-orange-100) !important;
}
.bg-amber {
  background-color: var(--bs-amber-500) !important;
}
.bg-amber-subtle {
  background-color: var(--bs-amber-100) !important;
}
.bg-gold {
  background-color: var(--bs-gold-500) !important;
}
.bg-gold-subtle {
  background-color: var(--bs-gold-100) !important;
}
.bg-yellow {
  background-color: var(--bs-yellow-500) !important;
}
.bg-yellow-subtle {
  background-color: var(--bs-yellow-100) !important;
}
.bg-lime {
  background-color: var(--bs-lime-500) !important;
}
.bg-lime-subtle {
  background-color: var(--bs-lime-100) !important;
}
.bg-green {
  background-color: var(--bs-green-500) !important;
}
.bg-green-subtle {
  background-color: var(--bs-green-100) !important;
}
.bg-emerald {
  background-color: var(--bs-emerald-500) !important;
}
.bg-emerald-subtle {
  background-color: var(--bs-emerald-100) !important;
}
.bg-teal {
  background-color: var(--bs-teal-500) !important;
}
.bg-teal-subtle {
  background-color: var(--bs-teal-100) !important;
}
.bg-cyan {
  background-color: var(--bs-cyan-500) !important;
}
.bg-cyan-subtle {
  background-color: var(--bs-cyan-100) !important;
}
.bg-sky {
  background-color: var(--bs-sky-500) !important;
}
.bg-sky-subtle {
  background-color: var(--bs-sky-100) !important;
}
.bg-blue {
  background-color: var(--bs-blue-500) !important;
}
.bg-blue-subtle {
  background-color: var(--bs-blue-100) !important;
}
.bg-azure {
  background-color: var(--bs-azure-500) !important;
}
.bg-azure-subtle {
  background-color: var(--bs-azure-100) !important;
}
.bg-navy {
  background-color: var(--bs-navy-500) !important;
}
.bg-navy-subtle {
  background-color: var(--bs-navy-100) !important;
}
.bg-slate {
  background-color: var(--bs-slate-500) !important;
}
.bg-slate-subtle {
  background-color: var(--bs-slate-100) !important;
}
.bg-stone {
  background-color: var(--bs-stone-500) !important;
}
.bg-stone-subtle {
  background-color: var(--bs-stone-100) !important;
}
.bg-brown {
  background-color: var(--bs-brown-500) !important;
}
.bg-brown-subtle {
  background-color: var(--bs-brown-100) !important;
}
.bg-coral {
  background-color: var(--bs-coral-500) !important;
}
.bg-coral-subtle {
  background-color: var(--bs-coral-100) !important;
}

/* ===================================================================
   SECTION: Border Colors
   Border color utilities for all 25 colors with subtle variants
   =================================================================== */

.border-indigo {
  border-color: var(--bs-indigo-500) !important;
}
.border-indigo-subtle {
  border-color: var(--bs-indigo-300) !important;
}
.border-purple {
  border-color: var(--bs-purple-500) !important;
}
.border-purple-subtle {
  border-color: var(--bs-purple-300) !important;
}
.border-violet {
  border-color: var(--bs-violet-500) !important;
}
.border-violet-subtle {
  border-color: var(--bs-violet-300) !important;
}
.border-fuchsia {
  border-color: var(--bs-fuchsia-500) !important;
}
.border-fuchsia-subtle {
  border-color: var(--bs-fuchsia-300) !important;
}
.border-pink {
  border-color: var(--bs-pink-500) !important;
}
.border-pink-subtle {
  border-color: var(--bs-pink-300) !important;
}
.border-rose {
  border-color: var(--bs-rose-500) !important;
}
.border-rose-subtle {
  border-color: var(--bs-rose-300) !important;
}
.border-crimson {
  border-color: var(--bs-crimson-500) !important;
}
.border-crimson-subtle {
  border-color: var(--bs-crimson-300) !important;
}
.border-red {
  border-color: var(--bs-red-500) !important;
}
.border-red-subtle {
  border-color: var(--bs-red-300) !important;
}
.border-orange {
  border-color: var(--bs-orange-500) !important;
}
.border-orange-subtle {
  border-color: var(--bs-orange-300) !important;
}
.border-amber {
  border-color: var(--bs-amber-500) !important;
}
.border-amber-subtle {
  border-color: var(--bs-amber-300) !important;
}
.border-gold {
  border-color: var(--bs-gold-500) !important;
}
.border-gold-subtle {
  border-color: var(--bs-gold-300) !important;
}
.border-yellow {
  border-color: var(--bs-yellow-500) !important;
}
.border-yellow-subtle {
  border-color: var(--bs-yellow-300) !important;
}
.border-lime {
  border-color: var(--bs-lime-500) !important;
}
.border-lime-subtle {
  border-color: var(--bs-lime-300) !important;
}
.border-green {
  border-color: var(--bs-green-500) !important;
}
.border-green-subtle {
  border-color: var(--bs-green-300) !important;
}
.border-emerald {
  border-color: var(--bs-emerald-500) !important;
}
.border-emerald-subtle {
  border-color: var(--bs-emerald-300) !important;
}
.border-teal {
  border-color: var(--bs-teal-500) !important;
}
.border-teal-subtle {
  border-color: var(--bs-teal-300) !important;
}
.border-cyan {
  border-color: var(--bs-cyan-500) !important;
}
.border-cyan-subtle {
  border-color: var(--bs-cyan-300) !important;
}
.border-sky {
  border-color: var(--bs-sky-500) !important;
}
.border-sky-subtle {
  border-color: var(--bs-sky-300) !important;
}
.border-blue {
  border-color: var(--bs-blue-500) !important;
}
.border-blue-subtle {
  border-color: var(--bs-blue-300) !important;
}
.border-azure {
  border-color: var(--bs-azure-500) !important;
}
.border-azure-subtle {
  border-color: var(--bs-azure-300) !important;
}
.border-navy {
  border-color: var(--bs-navy-500) !important;
}
.border-navy-subtle {
  border-color: var(--bs-navy-300) !important;
}
.border-slate {
  border-color: var(--bs-slate-500) !important;
}
.border-slate-subtle {
  border-color: var(--bs-slate-300) !important;
}
.border-stone {
  border-color: var(--bs-stone-500) !important;
}
.border-stone-subtle {
  border-color: var(--bs-stone-300) !important;
}
.border-brown {
  border-color: var(--bs-brown-500) !important;
}
.border-brown-subtle {
  border-color: var(--bs-brown-300) !important;
}
.border-coral {
  border-color: var(--bs-coral-500) !important;
}
.border-coral-subtle {
  border-color: var(--bs-coral-300) !important;
}

/* ===================================================================
   SECTION: Buttons
   Comprehensive button styling for all 25 colors with full states
   =================================================================== */

/* Indigo Button Styles */
.btn-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: var(--bs-indigo-500);
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-600);
  --bs-btn-hover-border-color: var(--bs-indigo-600);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-700);
  --bs-btn-active-border-color: var(--bs-indigo-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-indigo-300);
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-indigo {
  --bs-btn-color: var(--bs-indigo-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-indigo-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-indigo-500);
  --bs-btn-hover-border-color: var(--bs-indigo-500);
  --bs-btn-focus-shadow-rgb: 99, 102, 241;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-indigo-600);
  --bs-btn-active-border-color: var(--bs-indigo-600);
  --bs-btn-disabled-color: var(--bs-indigo-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-indigo-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-indigo:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-indigo:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-indigo:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-indigo:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Purple Button Styles */
.btn-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: var(--bs-purple-500);
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-600);
  --bs-btn-hover-border-color: var(--bs-purple-600);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-700);
  --bs-btn-active-border-color: var(--bs-purple-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-purple-300);
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-purple {
  --bs-btn-color: var(--bs-purple-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-purple-500);
  --bs-btn-hover-border-color: var(--bs-purple-500);
  --bs-btn-focus-shadow-rgb: 155, 89, 182;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-purple-600);
  --bs-btn-active-border-color: var(--bs-purple-600);
  --bs-btn-disabled-color: var(--bs-purple-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-purple-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-purple:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-purple:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-purple:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-purple:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Violet Button Styles */
.btn-violet {
  --bs-btn-color: var(--bs-violet-500);
  --bs-btn-bg: var(--bs-violet-500);
  --bs-btn-border-color: var(--bs-violet-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-violet-600);
  --bs-btn-hover-border-color: var(--bs-violet-600);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-violet-700);
  --bs-btn-active-border-color: var(--bs-violet-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-violet-300);
  --bs-btn-disabled-border-color: var(--bs-violet-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-violet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-violet:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-violet:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-violet:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-violet {
  --bs-btn-color: var(--bs-violet-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-violet-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-violet-500);
  --bs-btn-hover-border-color: var(--bs-violet-500);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-violet-600);
  --bs-btn-active-border-color: var(--bs-violet-600);
  --bs-btn-disabled-color: var(--bs-violet-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-violet-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-violet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-violet:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-violet:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-violet:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Fuchsia Button Styles */
.btn-fuchsia {
  --bs-btn-color: var(--bs-fuchsia-500);
  --bs-btn-bg: var(--bs-fuchsia-500);
  --bs-btn-border-color: var(--bs-fuchsia-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-fuchsia-600);
  --bs-btn-hover-border-color: var(--bs-fuchsia-600);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-fuchsia-700);
  --bs-btn-active-border-color: var(--bs-fuchsia-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-fuchsia-300);
  --bs-btn-disabled-border-color: var(--bs-fuchsia-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-fuchsia:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-fuchsia:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-fuchsia:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-fuchsia:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-fuchsia {
  --bs-btn-color: var(--bs-fuchsia-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-fuchsia-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-fuchsia-500);
  --bs-btn-hover-border-color: var(--bs-fuchsia-500);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-fuchsia-600);
  --bs-btn-active-border-color: var(--bs-fuchsia-600);
  --bs-btn-disabled-color: var(--bs-fuchsia-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-fuchsia-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-fuchsia:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-fuchsia:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-fuchsia:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-fuchsia:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

/* Continue with remaining button styles for pink, rose, crimson, red, orange, amber, gold, yellow, lime, green, emerald, teal, cyan, sky, blue, azure, navy, slate, stone, brown, coral... */

.btn-pink {
  --bs-btn-color: var(--bs-pink-500);
  --bs-btn-bg: var(--bs-pink-500);
  --bs-btn-border-color: var(--bs-pink-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-pink-600);
  --bs-btn-hover-border-color: var(--bs-pink-600);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-pink-700);
  --bs-btn-active-border-color: var(--bs-pink-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-pink-300);
  --bs-btn-disabled-border-color: var(--bs-pink-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-pink:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-pink:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-pink:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-pink:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}

.btn-outline-pink {
  --bs-btn-color: var(--bs-pink-500);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-pink-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-pink-500);
  --bs-btn-hover-border-color: var(--bs-pink-500);
  --bs-btn-focus-shadow-rgb: 233, 30, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-pink-600);
  --bs-btn-active-border-color: var(--bs-pink-600);
  --bs-btn-disabled-color: var(--bs-pink-500);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-pink-300);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-outline-pink:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-pink:focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-pink:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-pink:disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
  pointer-events: none;
}