/* ==========================================================================
   Color.css - Modern 50 Color Palette & Utility Classes
   ================================================================---------- */

:root {
    /* --- Gray / Neutral --- */
    --c-gray-50: #f8fafc;
    --c-gray-100: #f1f5f9;
    --c-gray-200: #e2e8f0;
    --c-gray-300: #cbd5e1;
    --c-gray-400: #94a3b8;
    --c-gray-500: #64748b;
    --c-gray-600: #475569;
    --c-gray-700: #334155;
    --c-gray-800: #1e293b;
    --c-gray-900: #0f172a;

    /* --- Red / Rose --- */
    --c-red-100: #ffe4e6;
    --c-red-300: #fda4af;
    --c-red-500: #f43f5e;
    --c-red-700: #be123c;
    --c-red-900: #881337;

    /* --- Orange / Amber --- */
    --c-orange-100: #ffedd5;
    --c-orange-300: #fdba74;
    --c-orange-500: #f97316;
    --c-orange-700: #c2410c;
    --c-orange-900: #7c2d12;

    /* --- Yellow / Gold --- */
    --c-yellow-100: #fef9c3;
    --c-yellow-300: #fde047;
    --c-yellow-500: #eab308;
    --c-yellow-700: #a16207;
    --c-yellow-900: #713f12;

    /* --- Green / Emerald --- */
    --c-green-100: #dcfce7;
    --c-green-300: #86efac;
    --c-green-500: #22c55e;
    --c-green-700: #15803d;
    --c-green-900: #14532d;

    /* --- Teal / Cyan --- */
    --c-teal-100: #ccfbf1;
    --c-teal-300: #5eead4;
    --c-teal-500: #14b8a6;
    --c-teal-700: #0f766e;
    --c-teal-900: #134e4a;

    /* --- Blue / Sky --- */
    --c-blue-100: #e0f2fe;
    --c-blue-300: #7dd3fc;
    --c-blue-500: #0ea5e9;
    --c-blue-700: #0369a1;
    --c-blue-900: #0c4a6e;

    /* --- Indigo / Violet --- */
    --c-indigo-100: #e0e7ff;
    --c-indigo-300: #a5b4fc;
    --c-indigo-500: #6366f1;
    --c-indigo-700: #4338ca;
    --c-indigo-900: #312e81;

    /* --- Purple / Fuchsia --- */
    --c-purple-100: #f3e8ff;
    --c-purple-300: #d8b4fe;
    --c-purple-500: #a855f7;
    --c-purple-700: #7e22ce;
    --c-purple-900: #581c87;

    /* --- Pink / Magenta --- */
    --c-pink-100: #fce7f3;
    --c-pink-300: #f472b6;
    --c-pink-500: #ec4899;
    --c-pink-700: #be185d;
    --c-pink-900: #831843;
}

/* ==========================================
   Background Color Utilities (.bg-*)
   ========================================== */
.bg-gray-50 { background-color: var(--c-gray-50); }
.bg-gray-100 { background-color: var(--c-gray-100); }
.bg-gray-200 { background-color: var(--c-gray-200); }
.bg-gray-300 { background-color: var(--c-gray-300); }
.bg-gray-400 { background-color: var(--c-gray-400); }
.bg-gray-500 { background-color: var(--c-gray-500); }
.bg-gray-600 { background-color: var(--c-gray-600); }
.bg-gray-700 { background-color: var(--c-gray-700); }
.bg-gray-800 { background-color: var(--c-gray-800); }
.bg-gray-900 { background-color: var(--c-gray-900); }

.bg-red-100 { background-color: var(--c-red-100); }
.bg-red-300 { background-color: var(--c-red-300); }
.bg-red-500 { background-color: var(--c-red-500); }
.bg-red-700 { background-color: var(--c-red-700); }
.bg-red-900 { background-color: var(--c-red-900); }

.bg-orange-100 { background-color: var(--c-orange-100); }
.bg-orange-300 { background-color: var(--c-orange-300); }
.bg-orange-500 { background-color: var(--c-orange-500); }
.bg-orange-700 { background-color: var(--c-orange-700); }
.bg-orange-900 { background-color: var(--c-orange-900); }

.bg-yellow-100 { background-color: var(--c-yellow-100); }
.bg-yellow-300 { background-color: var(--c-yellow-300); }
.bg-yellow-500 { background-color: var(--c-yellow-500); }
.bg-yellow-700 { background-color: var(--c-yellow-700); }
.bg-yellow-900 { background-color: var(--c-yellow-900); }

.bg-green-100 { background-color: var(--c-green-100); }
.bg-green-300 { background-color: var(--c-green-300); }
.bg-green-500 { background-color: var(--c-green-500); }
.bg-green-700 { background-color: var(--c-green-700); }
.bg-green-900 { background-color: var(--c-green-900); }

.bg-teal-100 { background-color: var(--c-teal-100); }
.bg-teal-300 { background-color: var(--c-teal-300); }
.bg-teal-500 { background-color: var(--c-teal-500); }
.bg-teal-700 { background-color: var(--c-teal-700); }
.bg-teal-900 { background-color: var(--c-teal-900); }

.bg-blue-100 { background-color: var(--c-blue-100); }
.bg-blue-300 { background-color: var(--c-blue-300); }
.bg-blue-500 { background-color: var(--c-blue-500); }
.bg-blue-700 { background-color: var(--c-blue-700); }
.bg-blue-900 { background-color: var(--c-blue-900); }

.bg-indigo-100 { background-color: var(--c-indigo-100); }
.bg-indigo-300 { background-color: var(--c-indigo-300); }
.bg-indigo-500 { background-color: var(--c-indigo-500); }
.bg-indigo-700 { background-color: var(--c-indigo-700); }
.bg-indigo-900 { background-color: var(--c-indigo-900); }

.bg-purple-100 { background-color: var(--c-purple-100); }
.bg-purple-300 { background-color: var(--c-purple-300); }
.bg-purple-500 { background-color: var(--c-purple-500); }
.bg-purple-700 { background-color: var(--c-purple-700); }
.bg-purple-900 { background-color: var(--c-purple-900); }

.bg-pink-100 { background-color: var(--c-pink-100); }
.bg-pink-300 { background-color: var(--c-pink-300); }
.bg-pink-500 { background-color: var(--c-pink-500); }
.bg-pink-700 { background-color: var(--c-pink-700); }
.bg-pink-900 { background-color: var(--c-pink-900); }


/* ==========================================
   Text Color Utilities (.text-*)
   ========================================== */
.text-gray-500 { color: var(--c-gray-500); }
.text-gray-800 { color: var(--c-gray-800); }
.text-gray-900 { color: var(--c-gray-900); }
.text-red-500 { color: var(--c-red-500); }
.text-red-700 { color: var(--c-red-700); }
.text-green-500 { color: var(--c-green-500); }
.text-green-700 { color: var(--c-green-700); }
.text-blue-500 { color: var(--c-blue-500); }
.text-blue-700 { color: var(--c-blue-700); }


/* ==========================================
   Border Color Utilities (.border-*)
   ========================================== */
.border-gray-200 { border-color: var(--c-gray-200); }
.border-gray-300 { border-color: var(--c-gray-300); }
.border-red-500 { border-color: var(--c-red-500); }
.border-green-500 { border-color: var(--c-green-500); }
.border-blue-500 { border-color: var(--c-blue-500); }