/* Color Utilities */

/* Background Colors */
/* .transparent { color: transparent; } */

.primary { color: var(--primary-color); }
.secondary { color: var(--secondary-color); }
.terciary { color: var(--terciary-color) }

.black { color: #000; }

.white { color: #fff; }

/* Red Colors */
.red-50 { color: #fef2f2; }

.red-100 { color: #fee2e2; }

.red-200 { color: #fecaca; }

.red-300 { color: #fca5a5; }

.red-400 { color: #f87171; }

.red-500 { color: #ef4444; }

.red-600 { color: #dc2626; }

.red-700 { color: #b91c1c; }

.red-800 { color: #991b1b; }

.red-900 { color: #7f1d1d; }

/* Blue Colors */
.blue-50 { color: #eff6ff; }

.blue-100 { color: #dbeafe; }

.blue-200 { color: #bfdbfe; }

.blue-300 { color: #93c5fd; }

.blue-400 { color: #60a5fa; }

.blue-500 { color: #3b82f6; }

.blue-600 { color: #2563eb; }

.blue-700 { color: #1d4ed8; }

.blue-800 { color: #1e40af; }

.blue-900 { color: #1e3a8a; }

/* Yellow Colors */
.yellow-50 { color: #fefce8; }

.yellow-100 { color: #fef9c3; }

.yellow-200 { color: #fef08a; }

.yellow-300 { color: #fde047; }

.yellow-400 { color: #facc15; }

.yellow-500 { color: #eab308; }

.yellow-600 { color: #ca8a04; }

.yellow-700 { color: #a16207; }

.yellow-800 { color: #854d0e; }

.yellow-900 { color: #713f12; }