:root {
    --bs-dark: #151515 !important;
    --bs-dark-rgb: 21, 21, 21 !important;
    /* deep charcoal */
    --bs-primary: #C36312 !important;
    --bs-primary-rgb: 195, 99, 18 !important;
    /* burnt orange */
    --bs-secondary: #02807D !important;
    --bs-secondary-rgb: 2, 128, 125 !important;
    /* teal/nav background */
    --bs-light: #F2C7A2 !important;
    --bs-light-rgb: 242, 199, 162 !important;
    /* light tan */
    --bs-accent: #DD904F !important;
    /* highlight orange */
    --bs-body-bg: #fff !important;
    --bs-body-color: #151515 !important;

    --bs-link-color: var(--bs-primary) !important;
    --bs-link-hover-color: #9a440e !important;

    /* Preserve Bootstrap info/warning colors regardless of theme */
    --bs-info: #0dcaf0 !important;
    /* Bootstrap default cyan */
    --bs-info-rgb: 13, 202, 240 !important;

    --bs-warning: #ffc107 !important;
    /* Bootstrap default yellow */
    --bs-warning-rgb: 255, 193, 7 !important;
}

/* Force alerts to use Bootstrap defaults, regardless of theme */
.alert-info {
    color: #055160 !important;
    background-color: #cff4fc !important;
    border-color: #b6effb !important;
}

.alert-warning {
    color: #664d03 !important;
    background-color: #fff3cd !important;
    border-color: #ffecb5 !important;
}

/* Masthead */
.masthead {
    background-color: var(--bs-dark) !important;
    color: var(--bs-light) !important;
}

.masthead h1 {
    color: var(--bs-accent) !important;
}

/* Masthead links (force theme colors, not Bootstrap default blue) */
.masthead a {
    color: var(--bs-light) !important;
    /* light tan text */
    text-decoration: none;
}

.masthead a:hover {
    color: var(--bs-primary) !important;
    /* burnt orange hover */
    text-decoration: underline;
}

/* Section Variants */
.section-light {
    background-color: var(--bs-light) !important;
    /* light tan */
    color: var(--bs-dark) !important;
}

.section-dark {
    background-color: var(--bs-dark) !important;
    /* charcoal */
    color: var(--bs-light) !important;
}

/* Nav (always teal in Earthy Teal theme) */
#mainNav {
    background-color: var(--bs-secondary) !important;
    /* teal */
}

#mainNav .navbar-brand,
#mainNav .nav-link {
    color: var(--bs-light) !important;
    /* light tan text */
    text-decoration: none;
}

#mainNav .nav-link:hover {
    color: var(--bs-accent) !important;
    /* lighter orange hover */
}

.divider-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--bs-dark) !important;
    /* charcoal */
    color: var(--bs-light) !important;
    /* light tan */
    font-size: 1.75rem;
    border-top: 2px solid var(--bs-primary) !important;
    /* burnt orange */
}

.divider-custom .divider-custom-icon {
    color: inherit;
    margin-right: 0.5rem;
    font-size: 1.75rem;
}

.divider-title {
    font-family: var(--font-heading);
    /* comes from font css */
    font-weight: 700;
    text-transform: none;
    color: inherit;
}

/* Primary button overrides */
.btn-primary,
.btn-outline-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--bs-link-hover-color) !important;
    --bs-btn-hover-border-color: var(--bs-link-hover-color) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--bs-link-hover-color) !important;
    --bs-btn-active-border-color: var(--bs-link-hover-color) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}