/* Override Bootstrap Color Classes */

/* Text Color Classes */
.text-primary {
    color: var(--primary-color) !important;
}

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

.text-light {
    color: #ffffff !important;  /* White color for light text */
}

.text-dark {
    color: var(--secondary-color) !important;  /* Black color for dark text */
}

.primary-blue {
    color: var(--primary-color) !important;
}

/* Main headings will use primary font  */
.heading--main {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 34px;
}
/* Main headings will use primary font  */

/* Sub headings will use secondary font   */
.heading--secondary {
    font-family: var(--font-secondary);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
}

.heading--table {
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
}
/* Sub headings will use secondary font   */


/* And rest of body text will use accent font   */
.text--body-large {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
}

.text--body-medium-bold {
    font-family: var(--font-accent);
    font-size: 14px;
    font-weight: 500;
}

.text--body-medium {
    font-family: var(--font-accent);
    font-size: 14px;
    font-weight: 400;
}

.text--body-small {
    font-family: var(--font-accent);
    font-size: 12px;
    font-weight: 400;
}
/* And rest of body text will use accent font   */


/* Background Color Classes */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

.bg-light {
    background-color: #ffffff !important;  /* Light background */
}

.bg-dark {
    background-color: var(--secondary-color) !important;  /* Dark background */
}

/* Button Color Classes */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* .btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
} */

.btn-outline-primary {
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}


.btn-outline-dark:hover {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: var(--primary-color) !important;
}

/* Link Color Classes */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: darken(var(--primary-color), 10%) !important;  /* Darker shade on hover */
}

/* Example of overriding other default Bootstrap components */
.card-header {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.card-body {
    background-color: var(--neutral-background) !important;
}

/* More overrides as needed for other components... */