/* =========================================================
   COLOR SYSTEM
   fg-* = text color
   bg-* = background color
   Uses CSS Variables for maintainability
========================================================= */

:root {

    /* ===== RED ===== */
    --red: #e53935;
    --red-light: #ff6f60;
    --red-dark: #b71c1c;

    /* ===== PINK ===== */
    --pink: #d81b60;
    --pink-light: #ff5c8d;
    --pink-dark: #880e4f;

    /* ===== PURPLE ===== */
    --purple: #8e24aa;
    --purple-light: #c158dc;
    --purple-dark: #4a148c;

    /* ===== DEEP PURPLE ===== */
    --deep-purple: #5e35b1;
    --deep-purple-light: #9162e4;
    --deep-purple-dark: #311b92;

    /* ===== INDIGO ===== */
    --indigo: #3949ab;
    --indigo-light: #6f74dd;
    --indigo-dark: #1a237e;

    /* ===== BLUE ===== */
    --blue: #1e88e5;
    --blue-light: #6ab7ff;
    --blue-dark: #0d47a1;

    /* ===== LIGHT BLUE ===== */
    --light-blue: #039be5;
    --light-blue-light: #63ccff;
    --light-blue-dark: #01579b;

    /* ===== CYAN ===== */
    --cyan: #00acc1;
    --cyan-light: #5ddef4;
    --cyan-dark: #006978;

    /* ===== TEAL ===== */
    --teal: #00897b;
    --teal-light: #4ebaaa;
    --teal-dark: #004d40;

    /* ===== GREEN ===== */
    --green: #43a047;
    --green-light: #76d275;
    --green-dark: #1b5e20;

    /* ===== LIGHT GREEN ===== */
    --light-green: #7cb342;
    --light-green-light: #b2dd71;
    --light-green-dark: #33691e;

    /* ===== LIME ===== */
    --lime: #c0ca33;
    --lime-light: #f5fd67;
    --lime-dark: #827717;

    /* ===== YELLOW ===== */
    --yellow: #fdd835;
    --yellow-light: #ffff6b;
    --yellow-dark: #f9a825;

    /* ===== AMBER ===== */
    --amber: #ffb300;
    --amber-light: #ffe54c;
    --amber-dark: #ff6f00;

    /* ===== ORANGE ===== */
    --orange: #fb8c00;
    --orange-light: #ffbd45;
    --orange-dark: #e65100;

    /* ===== DEEP ORANGE ===== */
    --deep-orange: #f4511e;
    --deep-orange-light: #ff844c;
    --deep-orange-dark: #bf360c;

    /* ===== BROWN ===== */
    --brown: #6d4c41;
    --brown-light: #9c786c;
    --brown-dark: #3e2723;

    /* ===== GRAY ===== */
    --gray: #757575;
    --gray-light: #bdbdbd;
    --gray-dark: #424242;

    /* ===== BLUE GRAY ===== */
    --blue-gray: #607d8b;
    --blue-gray-light: #8eacbb;
    --blue-gray-dark: #37474f;

    /* ===== WHITE / BLACK ===== */
    --white: #ffffff;
    --black: #000000;
}


/* =========================================================
   TEXT COLORS
========================================================= */

.fg-red { color: var(--red) !important; }
.fg-red-light { color: var(--red-light) !important; }
.fg-red-dark { color: var(--red-dark) !important; }

.fg-pink { color: var(--pink) !important; }
.fg-pink-light { color: var(--pink-light) !important; }
.fg-pink-dark { color: var(--pink-dark) !important; }

.fg-purple { color: var(--purple) !important; }
.fg-purple-light { color: var(--purple-light) !important; }
.fg-purple-dark { color: var(--purple-dark) !important; }

.fg-deep-purple { color: var(--deep-purple) !important; }
.fg-deep-purple-light { color: var(--deep-purple-light) !important; }
.fg-deep-purple-dark { color: var(--deep-purple-dark) !important; }

.fg-indigo { color: var(--indigo) !important; }
.fg-indigo-light { color: var(--indigo-light) !important; }
.fg-indigo-dark { color: var(--indigo-dark) !important; }

.fg-blue { color: var(--blue) !important; }
.fg-blue-light { color: var(--blue-light) !important; }
.fg-blue-dark { color: var(--blue-dark) !important; }

.fg-light-blue { color: var(--light-blue) !important; }
.fg-light-blue-light { color: var(--light-blue-light) !important; }
.fg-light-blue-dark { color: var(--light-blue-dark) !important; }

.fg-cyan { color: var(--cyan) !important; }
.fg-cyan-light { color: var(--cyan-light) !important; }
.fg-cyan-dark { color: var(--cyan-dark) !important; }

.fg-teal { color: var(--teal) !important; }
.fg-teal-light { color: var(--teal-light) !important; }
.fg-teal-dark { color: var(--teal-dark) !important; }

.fg-green { color: var(--green) !important; }
.fg-green-light { color: var(--green-light) !important; }
.fg-green-dark { color: var(--green-dark) !important; }

.fg-light-green { color: var(--light-green) !important; }
.fg-light-green-light { color: var(--light-green-light) !important; }
.fg-light-green-dark { color: var(--light-green-dark) !important; }

.fg-lime { color: var(--lime) !important; }
.fg-lime-light { color: var(--lime-light) !important; }
.fg-lime-dark { color: var(--lime-dark) !important; }

.fg-yellow { color: var(--yellow) !important; }
.fg-yellow-light { color: var(--yellow-light) !important; }
.fg-yellow-dark { color: var(--yellow-dark) !important; }

.fg-amber { color: var(--amber) !important; }
.fg-amber-light { color: var(--amber-light) !important; }
.fg-amber-dark { color: var(--amber-dark) !important; }

.fg-orange { color: var(--orange) !important; }
.fg-orange-light { color: var(--orange-light) !important; }
.fg-orange-dark { color: var(--orange-dark) !important; }

.fg-deep-orange { color: var(--deep-orange) !important; }
.fg-deep-orange-light { color: var(--deep-orange-light) !important; }
.fg-deep-orange-dark { color: var(--deep-orange-dark) !important; }

.fg-brown { color: var(--brown) !important; }
.fg-brown-light { color: var(--brown-light) !important; }
.fg-brown-dark { color: var(--brown-dark) !important; }

.fg-gray { color: var(--gray) !important; }
.fg-gray-light { color: var(--gray-light) !important; }
.fg-gray-dark { color: var(--gray-dark) !important; }

.fg-blue-gray { color: var(--blue-gray) !important; }
.fg-blue-gray-light { color: var(--blue-gray-light) !important; }
.fg-blue-gray-dark { color: var(--blue-gray-dark) !important; }

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


/* =========================================================
   BACKGROUND COLORS
========================================================= */

.bg-red { background: var(--red) !important; color:#fff !important; }
.bg-red-light { background: var(--red-light) !important; color:#fff !important; }
.bg-red-dark { background: var(--red-dark) !important; color:#fff !important; }

.bg-pink { background: var(--pink) !important; color:#fff !important; }
.bg-pink-light { background: var(--pink-light) !important; color:#fff !important; }
.bg-pink-dark { background: var(--pink-dark) !important; color:#fff !important; }

.bg-purple { background: var(--purple) !important; color:#fff !important; }
.bg-purple-light { background: var(--purple-light) !important; color:#fff !important; }
.bg-purple-dark { background: var(--purple-dark) !important; color:#fff !important; }

.bg-deep-purple { background: var(--deep-purple) !important; color:#fff !important; }
.bg-deep-purple-light { background: var(--deep-purple-light) !important; color:#fff !important; }
.bg-deep-purple-dark { background: var(--deep-purple-dark) !important; color:#fff !important; }

.bg-indigo { background: var(--indigo) !important; color:#fff !important; }
.bg-indigo-light { background: var(--indigo-light) !important; color:#fff !important; }
.bg-indigo-dark { background: var(--indigo-dark) !important; color:#fff !important; }

.bg-blue { background: var(--blue) !important; color:#fff !important; }
.bg-blue-light { background: var(--blue-light) !important; color:#000 !important; }
.bg-blue-dark { background: var(--blue-dark) !important; color:#fff !important; }

.bg-light-blue { background: var(--light-blue) !important; color:#fff !important; }
.bg-light-blue-light { background: var(--light-blue-light) !important; color:#000 !important; }
.bg-light-blue-dark { background: var(--light-blue-dark) !important; color:#fff !important; }

.bg-cyan { background: var(--cyan) !important; color:#fff !important; }
.bg-cyan-light { background: var(--cyan-light) !important; color:#000 !important; }
.bg-cyan-dark { background: var(--cyan-dark) !important; color:#fff !important; }

.bg-teal { background: var(--teal) !important; color:#fff !important; }
.bg-teal-light { background: var(--teal-light) !important; color:#000 !important; }
.bg-teal-dark { background: var(--teal-dark) !important; color:#fff !important; }

.bg-green { background: var(--green) !important; color:#fff !important; }
.bg-green-light { background: var(--green-light) !important; color:#000 !important; }
.bg-green-dark { background: var(--green-dark) !important; color:#fff !important; }

.bg-light-green { background: var(--light-green) !important; color:#fff !important; }
.bg-light-green-light { background: var(--light-green-light) !important; color:#000 !important; }
.bg-light-green-dark { background: var(--light-green-dark) !important; color:#fff !important; }

.bg-lime { background: var(--lime) !important; color:#000 !important; }
.bg-lime-light { background: var(--lime-light) !important; color:#000 !important; }
.bg-lime-dark { background: var(--lime-dark) !important; color:#fff !important; }

.bg-yellow { background: var(--yellow) !important; color:#000 !important; }
.bg-yellow-light { background: var(--yellow-light) !important; color:#000 !important; }
.bg-yellow-dark { background: var(--yellow-dark) !important; color:#fff !important; }

.bg-amber { background: var(--amber) !important; color:#000 !important; }
.bg-amber-light { background: var(--amber-light) !important; color:#000 !important; }
.bg-amber-dark { background: var(--amber-dark) !important; color:#fff !important; }

.bg-orange { background: var(--orange) !important; color:#fff !important; }
.bg-orange-light { background: var(--orange-light) !important; color:#000 !important; }
.bg-orange-dark { background: var(--orange-dark) !important; color:#fff !important; }

.bg-deep-orange { background: var(--deep-orange) !important; color:#fff !important; }
.bg-deep-orange-light { background: var(--deep-orange-light) !important; color:#000 !important; }
.bg-deep-orange-dark { background: var(--deep-orange-dark) !important; color:#fff !important; }

.bg-brown { background: var(--brown) !important; color:#fff !important; }
.bg-brown-light { background: var(--brown-light) !important; color:#000 !important; }
.bg-brown-dark { background: var(--brown-dark) !important; color:#fff !important; }

.bg-gray { background: var(--gray) !important; color:#fff !important; }
.bg-gray-light { background: var(--gray-light) !important; color:#000 !important; }
.bg-gray-dark { background: var(--gray-dark) !important; color:#fff !important; }

.bg-blue-gray { background: var(--blue-gray) !important; color:#fff !important; }
.bg-blue-gray-light { background: var(--blue-gray-light) !important; color:#000 !important; }
.bg-blue-gray-dark { background: var(--blue-gray-dark) !important; color:#fff !important; }

.bg-white { background: var(--white) !important; color:#000 !important; }
.bg-black { background: var(--black) !important; color:#fff !important; }