:root {
    --primary-color: #006694;
    --secondary-color: #0f172a;
    --secondary-color: #ae1b57;
    --light-bg: #f8fafc;
    --dark-color: #0f172a;
    --white: #fff;

    /* brand colors */
    --brand-1: #006694;
    --brand-2: #ae1b57;
    --brand-3: #95acb9;
    --brand-4: #d1dfdf;
    --brand-5: #de938e;

    /* backgrounds */
    --bg-white: #fff;
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;

    --bg-100: #f8fafc;
    --bg-200: #dee3e8;

    --bg-brand-1: #006694;
    --bg-brand-2: #ae1b57;
    --bg-brand-3: #95acb9;      
    --bg-brand-4: #d1dfdf;
    --bg-brand-5: #de938e;

    --primary-shade-100:#f8fafc;
    --primary-shade-200:#dee3e8;




    /* Blue-Tinted Grays (Slate Scale) */
    /* Light backgrounds */
    --bg-100: #f0fbff; /* Existing - 199, 15%, 98% */
    --bg-100: #f8fafc; /* Existing - 199, 15%, 98% */
    --bg-200: #dee3e8; /* Existing - 199, 12%, 89% */
    --bg-200: #ebeef4; /* Existing - 199, 12%, 89% */
    --bg-300: #cbd5e1; /* New - Mid-light border/divider */
    
    /* Mid-tones (Good for disabled text or icons) */
    --bg-400: #94a3b8;
    --bg-500: #64748b; 
    
    /* Text-level grays (High contrast) */
    --bg-600: #475569;
    --bg-700: #334155;
    --bg-800: #1e293b;
    --bg-900: #0f172a; /* Matches your --dark-color */

}

/* body, p {
    color: var(--secondary-color);
} */

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

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

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

.bg-primary-200 {
    background-color: var(--primary-shade-200) !important;
}

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

.bg-brand-1 {
    background-color: var(--bg-brand-1) !important;
}

.bg-brand-2 {
    background-color: var(--bg-brand-2) !important;
}

.bg-brand-3 {
    background-color: var(--bg-brand-3) !important;
}

.bg-brand-4 {
    background-color: var(--bg-brand-4) !important;
}

.bg-brand-5 {
    background-color: var(--bg-brand-5) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-brand-1 {
    color: var(--brand-1) !important;
}
.text-brand-2 {
    color: var(--brand-2) !important;
}
.text-brand-3 {
    color: var(--brand-3) !important;
}
.text-brand-4 {
    color: var(--brand-4) !important;
}
.text-brand-5 {
    color: var(--brand-5) !important;
}

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