/* -------------------- -------------------- --------------------
 * swarnolata.org/style/style-common.css
 * -------------------- -------------------- -------------------- */
@charset 'UTF-8';
/* -------------------- -------------------- -------------------- */
[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;

  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;

  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;

  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;

  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;

  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;

  --bs-heading-color: inherit;

  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;

  --bs-code-color: #e685b5;

  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;

  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);

  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
/* -------------------- -------------------- -------------------- */
/* | color conversion */
.s-base-hex {
  background-color: var(--s-base-hex);
}
.s-base-rgb {
  background-color: var(--s-base-rgb);
}
.s-base-hsl {
  background-color: var(--s-base-hsl);
}
.s-base-oklch {
  background-color: var(--s-base-oklch);
}
.s-brand {
  background-color: var(--s-brand);
}
/* color conversion | */
/* -------------------- -------------------- */
/* | base */
.s-base-100-fg {
  color: var(--s-base-100);
}
.s-base-100-bg {
  background-color: var(--s-base-100); 
}
.s-base-95-fg {
  color: var(--s-base-95);
}
.s-base-95-bg {
  background-color: var(--s-base-95); 
}
.s-base-90-fg {
  color: var(--s-base-90);
}
.s-base-90-bg {
  background-color: var(--s-base-90); 
}
.s-base-70-fg {
  color: var(--s-base-70);
}
.s-base-70-bg {
  background-color: var(--s-base-70); 
}
.s-base-50-fg {
  color: var(--s-base-50);
}
.s-base-50-bg {
  background-color: var(--s-base-50); 
}
.s-base-50-fg {
  color: var(--s-base-50); /* #fdf7e1; 50 */
}
.s-base-50-bg {
  background-color: var(--s-base-50); /* #fdf7e1; 50 */
}
.s-base-30-fg {
  color: var(--s-base-30);
}
.s-base-30-bg {
  background-color: var(--s-base-30); 
}
.s-base-10-fg {
  color: var(--s-base-10);
}
.s-base-10-bg {
  background-color: var(--s-base-10); 
}
/* applying alpha on top of variable */
/*
  --s-base-a: 1;  
  --s-base-a75: 0.75;             
  --s-base-a50: 0.50;
  --s-base-a25: 0.25;
*/
.s-base-10-bg-a75 {
  background-color: oklch(from var(--s-base-10) l c h / var(--s-base-a75));
}
.s-base-10-bg-a50 {
  background-color: oklch(from var(--s-base-10) l c h / var(--s-base-a50));
}
.s-base-10-bg-a25 {
  background-color: oklch(from var(--s-base-10) l c h / var(--s-base-a25));
}
    .s-base-10-bg-alpha {
      background-color: oklch(from var(--s-base-10) l c h / 0.9);
    }
.s-base-05-fg {
  color: var(--s-base-05);
}
.s-base-05-bg {
  background-color: var(--s-base-05); 
}
.s-base-0-fg {
  color: var(--s-base-0);
}
.s-base-0-bg {
  background-color: var(--s-base-0); 
}
/* base | */
/* -------------------- -------------------- */
/* | alt */
.s-alt-100-fg {
  color: var(--s-alt-100);
}
.s-alt-100-bg {
  background-color: var(--s-alt-100); 
}
.s-alt-95-fg {
  color: var(--s-alt-95);
}
.s-alt-95-bg {
  background-color: var(--s-alt-95); 
}
.s-alt-90-fg {
  color: var(--s-alt-90);
}
.s-alt-90-bg {
  background-color: var(--s-alt-90); 
}
.s-alt-70-fg {
  color: var(--s-alt-70);
}
.s-alt-70-bg {
  background-color: var(--s-alt-70); 
}
.s-alt-50-fg {
  color: var(--s-alt-50);
}
.s-alt-50-bg {
  background-color: var(--s-alt-50); 
}
.s-alt-50-fg {
  color: var(--s-alt-50);
}
.s-alt-50-bg {
  background-color: var(--s-alt-50);
}
.s-alt-30-fg {
  color: var(--s-alt-30);
}
.s-alt-30-bg {
  background-color: var(--s-alt-30); 
}
.s-alt-10-fg {
  color: var(--s-alt-10);
}
.s-alt-10-bg {
  background-color: var(--s-alt-10); 
}
.s-alt-10-bg-alpha {
  /* applying alpha on top of variable */
  background-color: oklch(from var(--s-alt-10) l c h / 0.9);
}
.s-alt-05-fg {
  color: var(--s-alt-05);
}
.s-alt-05-bg {
  background-color: var(--s-alt-05); 
}
.s-alt-0-fg {
  color: var(--s-alt-0);
}
.s-alt-0-bg {
  background-color: var(--s-alt-0); 
}
/* alt | */
/* -------------------- -------------------- */
/* | com */
.s-com-100-fg {
  color: var(--s-com-100);
}
.s-com-100-bg {
  background-color: var(--s-com-100); 
}
.s-com-95-fg {
  color: var(--s-com-95);
}
.s-com-95-bg {
  background-color: var(--s-com-95); 
}
.s-com-90-fg {
  color: var(--s-com-90);
}
.s-com-90-bg {
  background-color: var(--s-com-90); 
}
.s-com-70-fg {
  color: var(--s-com-70);
}
.s-com-70-bg {
  background-color: var(--s-com-70); 
}
.s-com-50-fg {
  color: var(--s-com-50);
}
.s-com-50-bg {
  background-color: var(--s-com-50); 
}
.s-com-50-fg {
  color: var(--s-com-50);
}
.s-com-50-bg {
  background-color: var(--s-com-50);
}
.s-com-30-fg {
  color: var(--s-com-30);
}
.s-com-30-bg {
  background-color: var(--s-com-30); 
}
.s-com-10-fg {
  color: var(--s-com-10);
}
.s-com-10-bg {
  background-color: var(--s-com-10); 
}
.s-com-10-bg-alpha {
  /* applying alpha on top of variable */
  background-color: oklch(from var(--s-com-10) l c h / 0.9);
}
.s-com-05-fg {
  color: var(--s-com-05);
}
.s-com-05-bg {
  background-color: var(--s-com-05); 
}
.s-com-0-fg {
  color: var(--s-com-0);
}
.s-com-0-bg {
  background-color: var(--s-com-0); 
}
/* com | */
/* -------------------- -------------------- -------------------- */
.icon-white {
  filter: invert(100%);
}
/* .icon-custom in respective style */
/* -------------------- -------------------- --------------------



/* -------------------- -------------------- --------------------
3. Structural Components (Navbar & Footer)
Force your 70-20-10 distribution onto structural components so they do not rely on standard gray utility classes.
Navbar uses Base Deep Theme
cf /home/sub834/swarnolata.org/include/navbar-foundation.php 

 * -------------------- -------------------- -------------------- */
/* -------------------- -------------------- -------------------- */
/* | navbar */
/* -------------------- -------------------- */
.navbar {
  --bs-navbar-color: oklch(from var(--s-base-90) l c h / 0.65);
  --bs-navbar-active-color: oklch(from var(--s-base-90) l c h / 1);
  --bs-navbar-hover-color: oklch(from var(--s-base-90) l c h / 0.8);
  --bs-navbar-disabled-color: oklch(from var(--s-base-90) l c h / 0.3);
  --bs-navbar-brand-color: oklch(from var(--s-base-90) l c h / 1);
  --bs-navbar-brand-hover-color: oklch(from var(--s-base-90) l c h / 0.8);

  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: oklch(from var(--s-base-90) l c h / 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
/* -------------------- */
.border-bottom {
  border-bottom: 2px solid oklch(from var(--s-base-10) l c h / 0.5);
}
/* -------------------- -------------------- */
.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--s-base-90);/*var(--bs-navbar-color);*/
  --bs-nav-link-hover-color: var(--s-base-70);/*var(--bs-navbar-hover-color);*/
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
/* -------------------- */
.navbar-custom,
.footer-custom {
  color: var(--s-base-90);
  background-color: var(--s-base-10);
}
.navbar-custom-alpha,
.footer-custom-alpha {
  color: var(--s-base-100);
  /* applying alpha on top of variable */
  background-color: oklch(from var(--s-base-10) l c h / 0.94);
}
/* -------------------- */
.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: var(--s-base-90);
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link.active, 
.navbar-custom .navbar-nav .nav-link.show {
  color: oklch(from var(--s-base-90) l c h / 0.75);
}
.navbar-custom .navbar-text {
  color: var(--s-base-90);
}
.navbar-custom .navbar-text a,
.navbar-custom .navbar-text a:hover,
.navbar-custom .navbar-text a:focus {
  /* applying alpha on top of variable */
  color: oklch(from var(--s-base-90) l c h / 0.75);
}
/* -------------------- */
.navbar-custom .navbar-toggler {
  color: var(--s-base-90) !important;
  background-color: transparent;
  border: 1px solid transparent;
  border: 0 !important;
  border-radius: 0.25rem;
}
.navbar-custom .navbar-toggler:hover {
  color: oklch(from var(--s-base-90) l c h / 0.5);
}
.navbar-custom .navbar-toggler:focus {
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
/* -------------------- */
.navbar-nav-scroll { 
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}
/* -------------------- -------------------- */
/* | dropdown */
.navbar-custom .dropdown-menu {
         /*position: static;*/
  color: var(--s-base-10);
  background-color: var(--s-base-90);
  border: 1px solid var(--s-base-70);
  z-index: 9999;
}
/* 
Remove 'dropdown-toggle' class. Dropdown will still work if you have 'data-toggle' attribute.
or Use css as below.
*/
/* -------------------- -------------------- */
/* rotate caret */

/* -------------------- -------------------- */
.dropdown-item {
  color: var(--s-base-10);
  background-color: var(--s-base-50); /*transparent;*/
}
.dropdown-item:hover, 
.dropdown-item:focus {
  color: oklch(from var(--s-base-10) l c h / 0.5);  
  background-color: oklch(from var(--s-base-50) l c h / 0.75);
}
.dropdown-item.active, 
.dropdown-item:active {
  color: var(--s-base-90); /*#fff;*/
  text-decoration: none;
  background-color: var(--s-base-50);
}
.dropdown-header,
.dropdown-footer {
  color: var(--s-base-10);  
  background-color: oklch(from var(--s-base-50) l c h / 1);  
}
.dropdown-item-text {
  color: var(--bs-dropdown-link-color);
}
.dropdown-divider {
  border-top: 1px solid var(--s-base-70);
}
/* -------------------- -------------------- */

.navbar-toggler {
  color: var(--s-base-90);
  border: 1px solid transparent;
border: 0 !important;
  border-radius: 0.25rem;
}
.navbar-toggler:hover {
  color: oklch(from var(--s-base-90) l c h / 0.5);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
/*
.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}
@media (max-width: 576px) {
  #navbar-container {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
}
@media (max-width: 992px) {
  #themeDropdownContainer {
    margin-bottom: 8rem !important;
          margin-left: 0 !important;
  }
    .dropdown-menu-end {
    right: -5px !important;
    left: auto !important;
  }
    */
  /*
  .dropdown-menu-end {
    left: -5px !important;
    right: auto !important;
  }
    */


/* dropdown | */


/* navbar | */

/* -------------------- -------------------- -------------------- */

/* -------------------- -------------------- -------------------- */
/* | colors social media */
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn-twitter-x {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-twitter-x:hover {
  background-color: oklch(0 0 0); /* #000000 */
  border-color: oklch(0 0 0); /* #000000 */
}
.btn-bluesky {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-bluesky:hover {
  background-color: oklch(0.6035 0.217 257.8); /* #0a7aff */
  border-color: oklch(0.6035 0.217 257.8); /* #0a7aff */
}
.btn-facebook {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-facebook:hover {
  background-color: oklch(0.5891 0.2029 257.86); /* #1877f2 */
  border-color: oklch(0.4724 0.1083 263.58); /* #3b5998 */
}
.btn-instagram {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-instagram:hover {
  background-color: oklch(0.6195 0.1995 14.61); /* #e4405f */
  border-color: oklch(0.5713 0.2213 338.33); /* #c32aa3 */
}
.btn-linkedin {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-linkedin:hover {
  background-color: oklch(0.5156 0.1632 254.73); /* #0a66c2 */
}
.btn-pinterest {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-pinterest:hover {
  background-color: oklch(0.505 0.2018 25.75); /* #bd081c */
}
.btn-youtube {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-youtube:hover {
  background-color: oklch(0.628 0.2577 29.23); /* #ff0000 */
  border-color: oklch(0.5454 0.2059 27.74); /* #cd201f */
}
.btn-whatsapp {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-whatsapp:hover {
  background-color: oklch(0.761 0.2015 149.74); /* #25d366 */
}
.btn-wordpress {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-wordpress:hover {
  background-color: oklch(0.5312 0.0972 232.91); /* #21759b */
}
.btn-github {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-github:hover {
  background-color: oklch(0.1857 0.0087 153.06); /* #101411 */
}
.btn-opencollective {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-opencollective:hover {
  background-color: oklch(0.720844 0.163171 239.2912); /* #00b0ff */
}
.btn-rss {
  background-color: var(--s-com-30);
  border-color: var(--s-com-10);
}
.btn-rss:hover {
  background-color: oklch(0.6759 0.1886 42.04); /* #f26522 */
}
/* colors social media | */
/* -------------------- -------------------- -------------------- */
/* | footer */
/* enable smooth scrolling for page */
html {
  scroll-behavior: smooth;
}
/* smooth color transition configuration */
.theme-transition {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
#btn-scroll-up {
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 0.25rem;
  margin-right: 2rem;
  border-radius: 50%;
  display: none;
  z-index: 1050;
  /*
      display: flex;
      align-items: center;
      justify-content: center;

      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      transition: background-color 0.3s ease, transform 0.3s ease;
  */
}
/* -------------------- -------------------- */
.btn-com {
  color: var(--s-com-95);
  background-color: var(--s-com-10);
  border-color: var(--s-com-30);
}
.btn-com:hover {
  background-color: oklch(from var(--s-com-10) l c h / 0.8);
}
/* edit 
.btn-com {
  --s-btn-color: #000;
  --s-btn-bg: #ffc107;
  --s-btn-border-color: #ffc107;
  --s-btn-hover-color: #000;
  --s-btn-hover-bg: #ffca2c;
  --s-btn-hover-border-color: #ffc720;
  --s-btn-focus-shadow-rgb: 217, 164, 6;
  --s-btn-active-color: #000;
  --s-btn-active-bg: #ffcd39;
  --s-btn-active-border-color: #ffc720;
  --s-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --s-btn-disabled-color: #000;
  --s-btn-disabled-bg: #ffc107;
  --s-btn-disabled-border-color: #ffc107;
}
*/
/* -------------------- -------------------- */
.custom-tooltip {
  --bs-tooltip-font-size: 0.875em;
  --bs-tooltip-color: var(--s-com-0);
  --bs-tooltip-color: var(--s-acc-0);
  --bs-tooltip-bg: var(--s-com-100);
  --bs-tooltip-bg: var(--s-acc-100);
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-border-radius: 0.25rem;
  --bs-tooltip-margin: 2px;
  /* ?
  color: #fff;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 0.25rem;
  */
}
/* -------------------- -------------------- */
/* icon-custom - respective styles for filter */
/* -------------------- -------------------- */
.s-base-10-bg-alpha {
  /* applying alpha on top of variable */
  background-color: oklch(from var(--s-base-10) l c h / 0.85);
}
/* footer | */
/* -------------------- -------------------- -------------------- */
/* | body */

/* body | */
/* -------------------- -------------------- -------------------- */
/* -------------------- -------------------- --------------------
1. Global Variables & Color Architecture (:root)
Define your 5-step tone mapping for Base, Alt, and Com, along with personalized near-whites and near-blacks.
 * -------------------- -------------------- -------------------- */

:root {
  /* --- 70% BASE (e.g., Deep Royal Indigo) --- */
  --color-base-lighter: oklch(0.92 0.03 280); /* #e0e3f9 */
  --color-base-light:   oklch(0.75 0.12 280);
  --color-base:         oklch(0.45 0.22 280); /* Main Brand */
  --color-base-dark:    oklch(0.25 0.18 280);
  --color-base-darker:  oklch(0.12 0.10 280);
  /* --- 70% Base (#18adfe) --- */
  --s-base-50: oklch(0.715 0.1623 241.18); /* #18adfe base */
  --color-base-lighter: var(--s-base-90); /* #b5e7ff lighter */
  --color-base-light:   var(--s-base-70); /* #52c7ff light */
  --color-base:         var(--s-base-50); /* #18adfe base */
  --color-base-dark:    var(--s-base-30); /* #178cda dark */
  --color-base-darker:  var(--s-base-10); /* #135aa4 darker */

  /* --- 20% ALTERNATE (e.g., Vibrant Amber/Orange) --- */
  --color-alt-lighter:  oklch(0.94 0.04 60);
  --color-alt-light:    oklch(0.80 0.16 60);
  --color-alt:          oklch(0.62 0.22 60);  /* Secondary structural elements */
  --color-alt-dark:     oklch(0.40 0.18 60);
  --color-alt-darker:   oklch(0.20 0.10 60);
  /* --- 20% Alternate (#00e6af) --- */
  --color-alt-lighter:  var(--s-alt-90);
  --color-alt-light:    var(--s-alt-70);
  --color-alt:          var(--s-alt-50);  /* Secondary structural elements */
  --color-alt-dark:     var(--s-alt-30);
  --color-alt-darker:   var(--s-alt-10);

  /* --- 10% COMPLEMENTARY (e.g., High-contrast Emerald) --- */
  --color-com-lighter:  oklch(0.93 0.04 150);
  --color-com-light:    oklch(0.78 0.15 150);
  --color-com:          oklch(0.58 0.20 150); /* Accent/CTA */
  --color-com-dark:     oklch(0.35 0.16 150);
  --color-com-darker:   oklch(0.18 0.09 150);
  /* --- 10% Complementary (#) --- */
  --color-com-lighter:  var(--s-com-90);
  --color-com-light:    var(--s-com-70);
  --color-com:          var(--s-com-50); /* Accent/CTA */
  --color-com-dark:     var(--s-com-30);
  --color-com-darker:   var(--s-com-10);
  
  /* --- NEUTRALS (Vibgyor-tinted, never bland black/white) --- */
  --color-near-white:   oklch(0.98 0.01 280); /* Tinted with base hue */
  --color-near-black:   oklch(0.08 0.02 280); /* Deep midnight, not pitch black */

  /* --- BOOTSTRAP MAPPINGS (Light Mode Default) --- */
  --bs-primary: var(--color-base);
  --bs-primary-rgb: 115, 63, 230; /* Keep matching RGB fallback for BS alphas if needed */
  --bs-secondary: var(--color-alt);
  --bs-success: var(--color-com);
  
  --bs-body-bg: var(--color-near-white);
  --bs-body-color: var(--color-near-black);
}

/*
2. Native Dark Mode Overrides
Bootstrap 5.3 uses the data-bs-theme="dark" attribute. Swap the tones to flip the contrast natively.
*/
[data-bs-theme="dark"] {
  --bs-body-bg: var(--color-near-black);
  --bs-body-color: var(--color-near-white);

  /* Shift core branding tokens to lighter/vibrant variants for dark backgrounds */
  --bs-primary: var(--color-base-light);
  --bs-secondary: var(--color-alt-light);
  --bs-success: var(--color-com-light);
  
  /* Tinted card/surface background for dark mode */
  --bs-surface-bg: var(--color-base-darker);
}




/*
4. Interactive & State Components (Buttons, Badges, Alerts)
Overrule component classes directly to absorb your curated palette.
*/
/* --- BUTTONS --- */
.btn-primary {
  --bs-btn-bg: var(--color-base);
  --bs-btn-border-color: var(--color-base);
  --bs-btn-hover-bg: var(--color-base-dark);
  --bs-btn-hover-border-color: var(--color-base-darker);
  --bs-btn-color: var(--color-near-white);
}

/* CTA Accent Button using Complementary color */
.btn-accent {
  background-color: var(--color-com);
  border-color: var(--color-com);
  color: var(--color-near-white);
}
.btn-accent:hover {
  background-color: var(--color-com-dark);
  border-color: var(--color-com-darker);
}

/* --- BADGES --- */
.badge-base { background-color: var(--color-base-light); color: var(--color-base-darker); }
.badge-alt { background-color: var(--color-alt-light); color: var(--color-alt-darker); }
.badge-com { background-color: var(--color-com-light); color: var(--color-com-darker); }

/* --- ALERTS --- */
.alert-custom-base {
  background-color: var(--color-base-lighter);
  border-color: var(--color-base-light);
  color: var(--color-base-dark);
}
.alert-custom-com {
  background-color: var(--color-com-lighter);
  border-color: var(--color-com-light);
  color: var(--color-com-dark);
}
/* ------------------- ----------------- ------------------- */


/* -------------------- -------------------- -------------------- */