/* 1) Set CSS vars for primary under light & dark themes */
body.light-theme {
    background-color: #ffffff; /* keep page white */
    --bs-primary: #008080; /* override Bootstrap primary */
    --bs-primary-rgb: 0,128,128;
}

body.dark-theme {
    background-color: #000000;
    --bs-primary: #008080; /* same teal if you like */
    --bs-primary-rgb: 0,128,128;
    color: #fff !important;
}

/* 2) Ensure any bg-, text-, border-, and btn-primary classes pick up the var */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

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

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

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

/* 3) If you use form controls or links */
.form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
    border-color: var(--bs-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--bs-primary) !important;
    opacity: .85;
}