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

body.dark-theme {
    background-color: #000000;
    --bs-primary: #1891cb; /* 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;
}
:root, [data-bs-theme=light] {
    --bs-link-color-rgb: 0 128 128
}
a {
    color: rgba(var(--bs-link-color-rgb));
    text-decoration: none;
}