/* ==========================================================================
   BOOTSTRAP 5.3 — PROJECT THEME
   --------------------------------------------------------------------------
   HOW TO USE:
   Load this file in <head> AFTER bootstrap.min.css and BEFORE closing </head>.
   Never load this file via JavaScript — doing so causes FOUC (flash of
   unstyled content) where the page briefly shows Bootstrap's default styles.

   <link rel="stylesheet" href="bootstrap.min.css">
   <link rel="stylesheet" href="theme.css">

   --------------------------------------------------------------------------
   ADDING A NEW PROJECT:
   1. Update all CSS custom properties in the :root block below.
   2. Update the --bs-*-rgb values to match your hex colors (see note below).
   3. If your project has extra colors (tertiary, quaternary…), add them in
      the "EXTENDED PALETTE" section and follow the same pattern.
   4. Do NOT edit bootstrap.min.css — override only here.
   ========================================================================== */


/* ==========================================================================
   CRITICAL ABOVE-THE-FOLD RESET
   --------------------------------------------------------------------------
   Inline these 3 lines in a <style> tag in <head> to eliminate any remaining
   flash, even on slow connections:
      body { background-color: #FFFFFF; color: #454545; }
   ========================================================================== */


/* ==========================================================================
   1. PROJECT TOKENS — edit these for every new project
   ========================================================================== */

:root {

  /* --- Colors ------------------------------------------------------------- */

  --color-white:              #FFFFFF;
  --color-black:              #000000;
  --color-text:               #657070;

  /* Primary */
  --color-primary:            #0DA46F;
  --color-primary-dark:       #028255;
  --color-primary-light:      #2a3f52;   /* optional light variant */

  /* Secondary */
  --color-secondary:          #172C3D;
  --color-secondary-dark:     #c5933b;
  --color-secondary-light:    #e8c07a;   /* optional light variant */

  /* Accent (backgrounds, cards, surfaces) */
  --color-accent:             #F3F8F6;
  --color-accent-dark:        #BAD8CC;

  /* Tertiary — add more blocks below if needed (quaternary, quinary…) */
  --color-tertiary:           #2470AE;
  --color-tertiary-dark:      #1a5a8f;
  --color-tertiary-light:     #3a87c8;

  /* --- Typography --------------------------------------------------------- */

  --font-header:              "Urbanist", sans-serif;
  --font-body:                "IBM Plex Sans", sans-serif;

  --global-weight-black:      900;
  --global-weight-extra-bold: 800;
  --global-weight-bold:       700;
  --global-weight-semi-bold:  600;
  --global-weight-medium:     500;
  --global-weight-normal:     400;

  /* --- Spacing & Shape ---------------------------------------------------- */

  --global-radius:            15px;   /* cards, modals, general containers */
  --global-btn-radius:     9999px;    /* all buttons */
  --global-input-radius:      15px;    /* inputs, selects, textareas */

  --global-transition:        0.3s ease-in-out;   /* global transition duration & easing */

  --global-btn-font-size:     1.0625rem;
  --global-btn-font-weight:   var(--global-weight-medium);
  --global-btn-font-family:   var(--font-header);
  --global-btn-padding-x:     1.5625rem;
  --global-btn-padding-y:     0.625rem;

  --global-gutter:                    1.875rem; /* 30px — sets column gutters and container padding (gutter / 2) */
  --global-container-max-width-lg:    97%;      /* fluid max-width for lg and xl breakpoints */
  --global-container-max-width-xxl:   1440px;   /* fixed max-width for xxl breakpoint (1400px+) */

  --global-input-padding-x:          0.75rem;
  --global-input-padding-y:          0.625rem;

  --global-input-bg:                 var(--color-white);
  --global-input-bg-disabled:        #f8f9fa;
  --global-input-border-color:       #ced4da;
  --global-input-border-width:       1px;
  --global-input-color:              var(--color-text);

  --global-input-focus-border-color: var(--color-primary);
  --global-input-focus-bg:           var(--color-white);
  --global-input-focus-shadow:       rgba(var(--bs-primary-rgb), 0.2);

  --animate-delay: 0.25s;


  /* ==========================================================================
     2. BOOTSTRAP VARIABLE OVERRIDES
     --------------------------------------------------------------------------
     Bootstrap reads these --bs-* variables at runtime, so changing them here
     automatically updates every Bootstrap component that uses them.

     IMPORTANT — RGB values:
     Bootstrap uses comma-separated RGB for generating rgba() colors in
     shadows, focus rings, and opacity utilities. You must keep these in sync
     with your hex values. Convert at: https://www.rapidtables.com/convert/color/hex-to-rgb.html
     Format: R, G, B   (no parentheses, no "rgb()")
     ========================================================================== */

  /* --- Brand colors → Bootstrap slots ------------------------------------ */

  --bs-primary:               var(--color-primary);
  --bs-primary-rgb:           13, 164, 114;        /* #172734 */

  --bs-secondary:             var(--color-secondary);
  --bs-secondary-rgb:         23, 44, 61;      /* #DBAC58 */

  --bs-link-color:            var(--color-primary);
  --bs-link-color-rgb:        13, 164, 111;      /* #3a87c8 — must match --color-tertiary */
  --bs-link-hover-color:      var(--color-primary-dark);
  --bs-link-hover-color-rgb:  2, 130, 85;

  /* --- Body --------------------------------------------------------------- */

  --bs-body-font-family:      var(--font-body);
  --bs-body-color:            var(--color-text);
  --bs-body-bg:               var(--color-white);

  /* --- Headings ----------------------------------------------------------- */

  --bs-heading-color:         var(--color-secondary);

  /* --- Border radius ------------------------------------------------------ */

  --bs-border-radius:         var(--global-radius);
  --bs-border-radius-sm:      var(--global-input-radius);
  --bs-border-radius-lg:      var(--global-radius);
  --bs-border-radius-xl:      var(--global-radius);
  --bs-border-radius-pill:    50rem;

  /* --- Focus ring (accessibility) ---------------------------------------- */

  --bs-focus-ring-color:      rgba(var(--bs-primary-rgb), 0.25);

  /* --- Shadows ------------------------------------------------------------ */
  /* Disabled globally — add box-shadow manually in style.css where needed.  */

  --bs-box-shadow:            none;
  --bs-box-shadow-sm:         none;
  --bs-box-shadow-lg:         none;

  /* --- Grid gutter -------------------------------------------------------- */
  /* Overrides Bootstrap default 24px gutter to match Figma grid (30px).    */
  /* Also sets container padding automatically (gutter / 2 = 15px).         */

  --bs-gutter-x:              var(--global-gutter);

}


/* ==========================================================================
   3. GLOBAL BASE STYLES
   ========================================================================== */

/* --- Images ------------------------------------------------------------- */
/* All images are responsive by default — no need for .img-fluid class.     */

img {
  max-width:                  100%;
  height:                     auto;
}

/* --- Typography --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-header);
  font-weight: var(--global-weight-extra-bold);
}

html {
  overflow-x:                 hidden;
  max-width:                  100%;
}

body {
  overflow-x:                 hidden;
  max-width:                  100%;
  font-family:                var(--font-body);
  font-weight:                var(--global-weight-normal);
  font-variant-numeric:       lining-nums;   /* prevents old-style figures jumping above baseline */
}

/* --- Links -------------------------------------------------------------- */
/* Bootstrap does not set a transition on <a> by default.                   */

a:not(.btn) {
  text-decoration:            none;
  transition:                 color var(--global-transition);
}

a:not(.btn):hover {
  text-decoration:            none;
}

/* --- Focus ring --------------------------------------------------------- */
/* :focus-visible fires only on keyboard navigation, never on mouse click.  */
/* This preserves accessibility without disrupting visual experience.       */

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow:     none;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline:    none;
  box-shadow: none;
}

/* --- Placeholders ------------------------------------------------------- */
/* Match placeholder color to input text color, full opacity.               */

input::placeholder,
textarea::placeholder {
  color:                      var(--global-input-color);
  opacity:                    1;
}

/* --- Paragraph spacing -------------------------------------------------- */
/* Useful in content sections where paragraphs are followed by lists        */
/* or buttons...........................................................    */

p:last-child,
p:last-of-type {
  margin-bottom:              0;
}

p + ul {
  margin-top:                 1rem;
}

p + a.btn {
  margin-top:                 2rem;
}


/* ==========================================================================
   4. CONTAINER
   --------------------------------------------------------------------------
   Bootstrap container max-widths are hardcoded in bootstrap.min.css and
   cannot be changed via CSS variables. We override them here directly.
   lg (992px+)   — fluid 97% to scale naturally between lg and xl
   xxl (1400px+) — fixed max-width matching Figma grid (12 × 90px + 11 × 30px + 2 × 15px padding)
   ========================================================================== */

@media (min-width: 992px) {
  .container {
    max-width: var(--global-container-max-width-lg);
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: var(--global-container-max-width-xxl);
  }
}


/* ==========================================================================
   5. NAVIGATION
   --------------------------------------------------------------------------
   Tokens for top-level nav, dropdown panel, dropdown items, mobile menu,
   and hamburger. All nav components read exclusively from these tokens.
   ========================================================================== */

/* --- Top-level nav items ------------------------------------------------- */

:root {
  --nav-item-font:                      var(--font-header);
  --nav-item-font-size:                 1.125rem;
  --nav-item-font-weight:               var(--global-weight-medium);
  --nav-item-font-color:                var(--color-secondary);
  --nav-item-font-color-hover:          var(--color-primary);
  --nav-item-padding:                   1.1rem 0.9375rem;
  --nav-item-icon-color:                var(--color-secondary);

  /* --- Dropdown panel ----------------------------------------------------- */

  --nav-dropdown-bg:                    var(--color-white);
  --nav-dropdown-border:                var(--color-primary) 0px solid;
  --nav-dropdown-border-radius-top:     var(--global-radius);
  --nav-dropdown-border-radius-bottom:  var(--global-radius);
  --nav-dropdown-shadow:                0px 10px 20px 10px rgba(0, 0, 0, 0.09);
  --nav-dropdown-padding:               0;

  /* --- Dropdown items ----------------------------------------------------- */

  --nav-dropdown-item-font-size:        1rem;
  --nav-dropdown-item-font-weight:      var(--global-weight-medium);
  --nav-dropdown-item-font-color:       var(--color-secondary);
  --nav-dropdown-item-font-color-hover: var(--color-primary);
  --nav-dropdown-item-hover:            var(--color-accent);
  --nav-dropdown-item-padding:          0.6rem 1rem;
  --nav-dropdown-item-icon-color:       var(--color-primary);

  /* --- Mobile ------------------------------------------------------------- */

  --nav-mobile-bg:                      var(--color-white);
  --nav-mobile-spacing:                 20px;
  --nav-mobile-overlay:                 rgba(0, 0, 0, 0.7);
  --nav-mobile-close-color:             var(--color-black);
  --nav-mobile-close-color-hover:       var(--color-primary);
  --nav-mobile-drill-arrow-color:       var(--color-primary);
  --nav-mobile-drill-arrow-color-hover: var(--color-primary);
  --nav-mobile-item-font:               var(--nav-dropdown-item-font);
  --nav-mobile-item-font-size:          var(--nav-dropdown-item-font-size);
  --nav-mobile-item-font-weight:        var(--nav-dropdown-item-font-weight);
  --nav-mobile-item-font-color:         var(--nav-dropdown-item-font-color);
  --nav-mobile-item-font-color-hover:   var(--nav-dropdown-item-font-color-hover);
  --nav-mobile-item-padding:            var(--nav-dropdown-item-padding);
  --nav-mobile-back-font-size:          0.875rem;
  --nav-mobile-back-font-weight:        var(--global-weight-normal);
  --nav-mobile-back-font-color:         var(--color-secondary);
  --nav-mobile-back-font-color-hover:   var(--color-primary);
  --nav-mobile-back-bg:                 var(--color-accent);
  --nav-mobile-back-padding:            var(--nav-dropdown-item-padding);
  --nav-mobile-item-separator:          rgba(var(--bs-primary-rgb), 0.15) 1px solid;
  --nav-mobile-parent-font-color:       var(--color-primary);
  --nav-mobile-parent-bg:               var(--color-white);
  --nav-mobile-parent-font-size:        var(--nav-dropdown-item-font-size);
  --nav-mobile-parent-font-weight:      var(--nav-dropdown-item-font-weight);
  --nav-mobile-parent-padding:          var(--nav-dropdown-item-padding);

  /* --- Misc --------------------------------------------------------------- */

  --nav-item-current-color:             var(--color-secondary);
  --nav-transition:                     0.22s cubic-bezier(.4, 0, .2, 1);
  --nav-icon-size:                      0.75rem;

  /* --- Hamburger ---------------------------------------------------------- */

  --nav-hamburger-width:                24px;
  --nav-hamburger-line-height:          2px;
  --nav-hamburger-line-spacing:         6px;
  --nav-hamburger-line-color:           var(--color-black);
  --nav-hamburger-line-border-radius:   2px;
}


/* ==========================================================================
   6. BUTTONS
   --------------------------------------------------------------------------
   Bootstrap button variables are scoped per-component, so we set them
   globally here and then fine-tune each variant below.
   ========================================================================== */

/* --- Global button defaults --------------------------------------------- */

.btn {
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);
  transition:                       color var(--global-transition), background-color var(--global-transition), border-color var(--global-transition);
}

/* --- btn-primary --------------------------------------------------------- */

.btn-primary {
  --bs-btn-color:                   var(--color-white);
  --bs-btn-bg:                      var(--color-primary);
  --bs-btn-border-color:            var(--color-primary);

  --bs-btn-hover-color:             var(--color-white);
  --bs-btn-hover-bg:                var(--color-primary-dark);
  --bs-btn-hover-border-color:      var(--color-primary-dark);

  --bs-btn-active-color:            var(--color-white);
  --bs-btn-active-bg:               var(--color-primary-dark);
  --bs-btn-active-border-color:     var(--color-primary-dark);

  --bs-btn-focus-shadow-rgb:        var(--bs-primary-rgb);
  --bs-btn-disabled-bg:             var(--color-primary);
  --bs-btn-disabled-border-color:   var(--color-primary);
}

/* --- btn-secondary ------------------------------------------------------- */

.btn-secondary {
  --bs-btn-color:                   var(--color-primary);   /* dark text on gold */
  --bs-btn-bg:                      var(--color-secondary);
  --bs-btn-border-color:            var(--color-secondary);

  --bs-btn-hover-color:             var(--color-primary);
  --bs-btn-hover-bg:                var(--color-secondary-dark);
  --bs-btn-hover-border-color:      var(--color-secondary-dark);

  --bs-btn-active-color:            var(--color-primary);
  --bs-btn-active-bg:               var(--color-secondary-dark);
  --bs-btn-active-border-color:     var(--color-secondary-dark);

  --bs-btn-focus-shadow-rgb:        var(--bs-secondary-rgb);
  --bs-btn-disabled-bg:             var(--color-secondary);
  --bs-btn-disabled-border-color:   var(--color-secondary);
}

/* --- btn-outline variants ------------------------------------------------ */

.btn-outline-primary {
  --bs-btn-color:                   var(--color-primary);
  --bs-btn-border-color:            var(--color-primary);

  --bs-btn-hover-color:             var(--color-white);
  --bs-btn-hover-bg:                var(--color-primary);
  --bs-btn-hover-border-color:      var(--color-primary);

  --bs-btn-active-color:            var(--color-white);
  --bs-btn-active-bg:               var(--color-primary-dark);
  --bs-btn-active-border-color:     var(--color-primary-dark);
}

.btn-outline-secondary {
  --bs-btn-color:                   var(--color-secondary);
  --bs-btn-border-color:            var(--color-secondary);

  --bs-btn-hover-color:             var(--color-primary);
  --bs-btn-hover-bg:                var(--color-secondary);
  --bs-btn-hover-border-color:      var(--color-secondary);

  --bs-btn-active-color:            var(--color-primary);
  --bs-btn-active-bg:               var(--color-secondary-dark);
  --bs-btn-active-border-color:     var(--color-secondary-dark);
}

/* --- btn-white ----------------------------------------------------------- */
/* Solid white bg, white border, black text.                                */
/* Hover: Bootstrap gray-100 (--bs-gray-100) bg and border, black text.    */

.btn-white {
  --bs-btn-color:                   var(--color-black);
  --bs-btn-bg:                      var(--color-white);
  --bs-btn-border-color:            var(--color-white);
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);

  --bs-btn-hover-color:             var(--color-black);
  --bs-btn-hover-bg:                var(--bs-gray-100);
  --bs-btn-hover-border-color:      var(--bs-gray-100);

  --bs-btn-active-color:            var(--color-black);
  --bs-btn-active-bg:               var(--bs-gray-100);
  --bs-btn-active-border-color:     var(--bs-gray-100);

  --bs-btn-disabled-color:          var(--color-black);
  --bs-btn-disabled-bg:             var(--color-white);
  --bs-btn-disabled-border-color:   var(--color-white);
}

/* --- btn-outline-white --------------------------------------------------- */
/* Transparent bg, white border, white text.                                */
/* Hover: solid white bg, white border, black text.                         */

.btn-outline-white {
  --bs-btn-color:                   var(--color-white);
  --bs-btn-bg:                      transparent;
  --bs-btn-border-color:            var(--color-white);
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);

  --bs-btn-hover-color:             var(--color-black);
  --bs-btn-hover-bg:                var(--color-white);
  --bs-btn-hover-border-color:      var(--color-white);

  --bs-btn-active-color:            var(--color-black);
  --bs-btn-active-bg:               var(--color-white);
  --bs-btn-active-border-color:     var(--color-white);
}

/* --- btn-black ----------------------------------------------------------- */
/* Solid black bg, black border, white text.                                */
/* Hover: Bootstrap gray-900 (--bs-gray-900) bg and border, white text.    */

.btn-black {
  --bs-btn-color:                   var(--color-white);
  --bs-btn-bg:                      var(--color-black);
  --bs-btn-border-color:            var(--color-black);
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);

  --bs-btn-hover-color:             var(--color-white);
  --bs-btn-hover-bg:                var(--bs-gray-900);
  --bs-btn-hover-border-color:      var(--bs-gray-900);

  --bs-btn-active-color:            var(--color-white);
  --bs-btn-active-bg:               var(--bs-gray-900);
  --bs-btn-active-border-color:     var(--bs-gray-900);

  --bs-btn-disabled-color:          var(--color-white);
  --bs-btn-disabled-bg:             var(--color-black);
  --bs-btn-disabled-border-color:   var(--color-black);
}

/* --- btn-outline-black --------------------------------------------------- */
/* Transparent bg, black border, black text.                                */
/* Hover: solid black bg, black border, white text.                         */

.btn-outline-black {
  --bs-btn-color:                   var(--color-black);
  --bs-btn-bg:                      transparent;
  --bs-btn-border-color:            var(--color-black);
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);

  --bs-btn-hover-color:             var(--color-white);
  --bs-btn-hover-bg:                var(--color-black);
  --bs-btn-hover-border-color:      var(--color-black);

  --bs-btn-active-color:            var(--color-white);
  --bs-btn-active-bg:               var(--color-black);
  --bs-btn-active-border-color:     var(--color-black);
}


/* ==========================================================================
   7. FORM INPUTS
   ========================================================================== */

/* --- Input & Select ----------------------------------------------------- */

.form-control,
.form-select {
  border-radius:              var(--global-input-radius);
  padding:                    var(--global-input-padding-y) var(--global-input-padding-x);
  background-color:           var(--global-input-bg);
  border:                     var(--global-input-border-width) solid var(--global-input-border-color);
  color:                      var(--global-input-color);
  box-shadow:                 none;
  transition:                 border-color var(--global-transition);
}

.form-control:focus,
.form-select:focus {
  background-color:           var(--global-input-focus-bg);
  border-color:               var(--global-input-focus-border-color);
  box-shadow:                 0 0 0 0.25rem var(--global-input-focus-shadow);
  color:                      var(--global-input-color);
  outline:                    none;
}

.form-control:disabled,
.form-select:disabled {
  background-color:           var(--global-input-bg-disabled);
  cursor:                     not-allowed;
}

.form-label {
  font-weight:                var(--global-weight-medium);
  color:                      var(--color-text);
}


/* ==========================================================================
   8. EXTENDED PALETTE — tertiary and beyond
   --------------------------------------------------------------------------
   Bootstrap does not generate utility classes for custom colors out of the
   box (without SCSS). We create them manually here following the same naming
   convention: bg-*, text-*, btn-*, btn-outline-*.

   To add another color (e.g. quaternary), duplicate this whole section and
   replace every occurrence of "tertiary" with your new name.
   ========================================================================== */

/* --- Tertiary utility classes ------------------------------------------- */

.bg-tertiary          { background-color: var(--color-tertiary) !important; }
.bg-tertiary-light    { background-color: var(--color-tertiary-light) !important; }
.text-tertiary        { color: var(--color-tertiary) !important; }
.border-tertiary      { border-color: var(--color-tertiary) !important; }

/* --- Tertiary button ----------------------------------------------------- */

.btn-tertiary {
  --bs-btn-color:                   var(--color-white);
  --bs-btn-bg:                      var(--color-tertiary);
  --bs-btn-border-color:            var(--color-tertiary);
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);

  --bs-btn-hover-color:             var(--color-white);
  --bs-btn-hover-bg:                var(--color-tertiary-dark);
  --bs-btn-hover-border-color:      var(--color-tertiary-dark);

  --bs-btn-active-color:            var(--color-white);
  --bs-btn-active-bg:               var(--color-tertiary-dark);
  --bs-btn-active-border-color:     var(--color-tertiary-dark);
}

.btn-outline-tertiary {
  --bs-btn-color:                   var(--color-tertiary);
  --bs-btn-border-color:            var(--color-tertiary);
  --bs-btn-border-radius:           var(--global-btn-radius);
  --bs-btn-padding-x:               var(--global-btn-padding-x);
  --bs-btn-padding-y:               var(--global-btn-padding-y);
  --bs-btn-font-size:               var(--global-btn-font-size);
  --bs-btn-font-weight:             var(--global-btn-font-weight);
  --bs-btn-font-family:             var(--global-btn-font-family);

  --bs-btn-hover-color:             var(--color-white);
  --bs-btn-hover-bg:                var(--color-tertiary);
  --bs-btn-hover-border-color:      var(--color-tertiary);

  --bs-btn-active-color:            var(--color-white);
  --bs-btn-active-bg:               var(--color-tertiary-dark);
  --bs-btn-active-border-color:     var(--color-tertiary-dark);
}

/* --- Accent utility classes --------------------------------------------- */

.bg-accent            { background-color: var(--color-accent) !important; }
.bg-accent-secondary  { background-color: var(--color-accent-dark) !important; }
.text-accent          { color: var(--color-accent) !important; }


/* ==========================================================================
   9. CARDS
   ========================================================================== */

.card {
  --bs-card-border-radius:    var(--global-radius);
  --bs-card-border-color:     rgba(0, 0, 0, 0.08);
  --bs-card-bg:               var(--color-white);
}


/* ==========================================================================
   10. MODALS
   ========================================================================== */

.modal-content {
  border-radius:              var(--global-radius);
  border:                     none;
}

.modal-header {
  font-weight:                var(--global-weight-bold);
  color:                      var(--color-primary);
}


/* ==========================================================================
   11. BADGES
   ========================================================================== */

.badge {
  --bs-badge-border-radius:   var(--global-input-radius);
  font-weight:                var(--global-weight-semi-bold);
}


/* ==========================================================================
   12. ALERTS
   ========================================================================== */

.alert {
  --bs-alert-border-radius:   var(--global-radius);
}


/* ==========================================================================
   13. DROPDOWNS
   ========================================================================== */

.dropdown-menu {
  --bs-dropdown-border-radius:  var(--global-input-radius);
  --bs-dropdown-link-active-bg: var(--color-primary);
  --bs-dropdown-link-hover-bg:  var(--color-accent);
}


/* ==========================================================================
   END OF THEME
   --------------------------------------------------------------------------
   Next sections to add as needed:
   - Navbar
   - Tables
   - Pagination
   - Tabs / Pills
   - Toasts
   - Tooltips
   Add them below following the same numbered section pattern.
   ========================================================================== */