/* specificity = (0,1,2) so this beats Bootstrap’s (0,1,0) */
html[data-bs-theme="light"] body {
    /* ——— Semantic palette ——— */
    --background-color:       #ffffff;
    --text-color:             #1a1a1a;
    --brand1-background:      #007bff;
    --brand1-text:            #ffffff;
    --brand2-background:      #6c757d;
    --brand2-text:            #ffffff;
    --highlight-text-color:   #ff7900;
    --link-color:             #7ec0ee;

    /* ——— UI shorthand ——— */
    --ui-bg-default:   var(--background-color);
    --ui-text-default: var(--text-color);
    --ui-text-accent:  var(--highlight-text-color);

    /* ——— Bootstrap vars mapping ——— */
    --bs-body-bg:           var(--background-color);
    --bs-body-color:        var(--text-color);
    --bs-body-bg-rgb:       255,255,255;
    --bs-body-color-rgb:    26,26,26;

    --bs-primary:           var(--brand1-background);
    --bs-primary-rgb:       0,123,255;
    --bs-secondary:         var(--brand2-background);
    --bs-secondary-rgb:     108,117,125;

    --bs-link-color:        var(--link-color);
    --bs-link-color-rgb:    126,192,238;
    --bs-link-hover-color:  var(--highlight-text-color);

    /* optional extras */
    --bs-border-color:      var(--brand2-background);
    --bs-btn-bg:            var(--highlight-text-color);
    --bs-btn-color:         var(--brand1-text);
    --bs-btn-border-color:  transparent;

    --bs-modal-bg:           var(--background-color);
    --bs-modal-color:        var(--text-color);
    --bs-modal-border-color: var(--bs-border-color);

    /* Tables */
    --bs-border-color:      var(--bs-border-color-translucent);
}

/* only non-button links get the link-color */
html[data-bs-theme="light"] a:not(.btn) {
  color: var(--bs-link-color);
}
html[data-bs-theme="light"] a:not(.btn):hover {
  color: var(--bs-link-hover-color);
}

/* ensure buttons keep their proper btn-styles */
html[data-bs-theme="light"] .btn {
  /* these two are already mapped in your vars */
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
/* and on hover, fall back to Bootstrap’s hover var or define your own */
html[data-bs-theme="light"] .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-hover-bg, var(--bs-btn-bg));
}