:root {
    /* Primary (Base: #344afb) */
    --color-primary-50:  #eef1ff;
    --color-primary-100: #d7ddff;
    --color-primary-200: #b1bbff;
    --color-primary-300: #8a99ff;
    --color-primary-400: #5c6fff;
    --color-primary-500: #344afb; /* base */
    --color-primary: #344afb;
    --color-primary-600: #2438d6;
    --color-primary-700: #1b2eaa;
    --color-primary-800: #16247f;
    --color-primary-900: #111b66;

    /* Primary Dark (Base: #011082) */
    --color-primary-dark-100: #ccd2ff;
    --color-primary-dark-200: #99a5ff;
    --color-primary-dark-300: #6678ff;
    --color-primary-dark-400: #334cff;
    --color-primary-dark-500: #011082;
    --color-primary-dark: #011082;
    --color-primary-dark-600: #000b5c;
    --color-primary-dark-700: #000846;
    --color-primary-dark-800: #000630;
    --color-primary-dark-900: #00041f;

    /* Secondary (Base: #546084) */
    --color-secondary-100: #d2d5df;
    --color-secondary-200: #a6abbe;
    --color-secondary-300: #7a819e;
    --color-secondary-400: #5b6480;
    --color-secondary-500: #546084;
    --color-secondary: #546084;
    --color-secondary-600: #3d4663;
    --color-secondary-700: #2d344a;
    --color-secondary-800: #1e2332;
    --color-secondary-900: #11141e;

    /* Gray (Base: #434345) */
    --color-gray-100: #d4d4d5;
    --color-gray-200: #818181;
    --color-gray-300: #7f7f82;
    --color-gray-400: #5d5d60;
    --color-gray: #5d5d60;
    --color-gray-500: #434345;
    --color-gray-600: #2f2f30;
    --color-gray-700: #1f1f20;
    --color-gray-800: #141415;
    --color-gray-900: #0c0c0d;

    /* Whites & Text */
    --color-white: #ffffff;
    --text-dark: #000000;
    --text-light: #ffffff;
}


.bg-primary-100 { background: var(--color-primary-100) !important; }
.bg-primary-200 { background: var(--color-primary-200) !important; }
.bg-primary-300 { background: var(--color-primary-300) !important; }
.bg-primary-400 { background: var(--color-primary-400) !important; }
.bg-primary-500, .bg-primary { background: var(--color-primary-500) !important; }
.bg-primary-600 { background: var(--color-primary-600) !important; }
.bg-primary-700 { background: var(--color-primary-700) !important; }
.bg-primary-800 { background: var(--color-primary-800) !important; }
.bg-primary-900 { background: var(--color-primary-900) !important; }

.bg-primary-dark-100 { background: var(--color-primary-dark-100) !important; }
.bg-primary-dark-200 { background: var(--color-primary-dark-200) !important; }
.bg-primary-dark-300 { background: var(--color-primary-dark-300) !important; }
.bg-primary-dark-400 { background: var(--color-primary-dark-400) !important; }
.bg-primary-dark-500, .bg-primary-dark { background: var(--color-primary-dark-500) !important; }
.bg-primary-dark-600 { background: var(--color-primary-dark-600) !important; }
.bg-primary-dark-700 { background: var(--color-primary-dark-700) !important; }
.bg-primary-dark-800 { background: var(--color-primary-dark-800) !important; }
.bg-primary-dark-900 { background: var(--color-primary-dark-900) !important; }

.bg-secondary-100 { background: var(--color-secondary-100) !important; }
.bg-secondary-200 { background: var(--color-secondary-200) !important; }
.bg-secondary-300 { background: var(--color-secondary-300) !important; }
.bg-secondary-400 { background: var(--color-secondary-400) !important; }
.bg-secondary-500, .bg-secondary { background: var(--color-secondary-500) !important; }
.bg-secondary-600 { background: var(--color-secondary-600) !important; }
.bg-secondary-700 { background: var(--color-secondary-700) !important; }
.bg-secondary-800 { background: var(--color-secondary-800) !important; }
.bg-secondary-900 { background: var(--color-secondary-900) !important; }

.bg-gray-100 { background: var(--color-gray-100) !important; }
.bg-gray-200 { background: var(--color-gray-200) !important; }
.bg-gray-300 { background: var(--color-gray-300) !important; }
.bg-gray-400 { background: var(--color-gray-400) !important; }
.bg-gray-500, .bg-gray { background: var(--color-gray-500) !important; }
.bg-gray-600 { background: var(--color-gray-600) !important; }
.bg-gray-700 { background: var(--color-gray-700) !important; }
.bg-gray-800, .bg-dark, .bg-black { background: var(--color-gray-800) !important; }
.bg-gray-900 { background: var(--color-gray-900) !important; }

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

.text-primary-100 { color: var(--color-primary-100) !important; }
.text-primary-200 { color: var(--color-primary-200) !important; }
.text-primary-300 { color: var(--color-primary-300) !important; }
.text-primary-400 { color: var(--color-primary-400) !important; }
.text-primary-500, .text-primary { color: var(--color-primary-500) !important; }
.text-primary-600 { color: var(--color-primary-600) !important; }
.text-primary-700 { color: var(--color-primary-700) !important; }
.text-primary-800 { color: var(--color-primary-800) !important; }
.text-primary-900 { color: var(--color-primary-900) !important; }

.text-primary-dark-100 { color: var(--color-primary-dark-100) !important; }
.text-primary-dark-200 { color: var(--color-primary-dark-200) !important; }
.text-primary-dark-300 { color: var(--color-primary-dark-300) !important; }
.text-primary-dark-400 { color: var(--color-primary-dark-400) !important; }
.text-primary-dark-500, .text-primary-dark { color: var(--color-primary-dark-500) !important; }
.text-primary-dark-600 { color: var(--color-primary-dark-600) !important; }
.text-primary-dark-700 { color: var(--color-primary-dark-700) !important; }
.text-primary-dark-800 { color: var(--color-primary-dark-800) !important; }
.text-primary-dark-900 { color: var(--color-primary-dark-900) !important; }

.text-secondary-100 { color: var(--color-secondary-100) !important; }
.text-secondary-200 { color: var(--color-secondary-200) !important; }
.text-secondary-300 { color: var(--color-secondary-300) !important; }
.text-secondary-400 { color: var(--color-secondary-400) !important; }
.text-secondary-500, .text-secondary { color: var(--color-secondary-500) !important; }
.text-secondary-600 { color: var(--color-secondary-600) !important; }
.text-secondary-700 { color: var(--color-secondary-700) !important; }
.text-secondary-800 { color: var(--color-secondary-800) !important; }
.text-secondary-900 { color: var(--color-secondary-900) !important; }

.text-gray-100 { color: var(--color-gray-100) !important; }
.text-gray-200 { color: var(--color-gray-200) !important; }
.text-gray-300 { color: var(--color-gray-300) !important; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500, .text-gray { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-800 { color: var(--color-gray-800) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }

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

.btn {
    padding: 10px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: .2s ease;
}

.btn-primary {
    background: var(--color-primary) !important;
    color: var(--text-light) !important;
}
.btn-primary:hover {
    background: var(--color-primary-dark) !important;
}

.btn-white {
    background: var(--color-white) !important;
    color: var(--color-primary-dark) !important;
    border: 1px solid var(--color-primary) !important;
}
.btn-white:hover {
    background: var(--color-primary) !important;
    color: var(--text-light) !important;
}

.btn-gray {
    background: var(--color-gray) !important;
    color: var(--text-light) !important;
}
.btn-gray:hover {
    opacity: 0.85 !important;
}

.btn-secondary {
    background: var(--color-secondary) !important;
    color: var(--text-light) !important;
}
.btn-secondary:hover {
    background: var(--color-primary-dark) !important;
}

.gradient-text{
    color: var(--color-primary) !important;
    background: none !important;
}