/* =========================================================
   Global Theme Tokens + Bootstrap Theme Override
   Edit this file only to re-skin the whole template.
   ========================================================= */
:root {
    /* Brand */
    --color-primary: #C9A24A;
    --color-primary-rgb: 201, 162, 74;
    --color-primary-hover: #B8923F;
    --color-primary-active: #A88439;
    --color-primary-soft: #E8D4A1;
    --color-primary-subtle: #F6EED9;
    --color-primary-border: #D7B66A;
    --banner-bg: url("../images/banner-bg.svg");
    /* Secondary brand accents */
    --color-secondary: #6F5B2A;
    --color-secondary-rgb: 111, 91, 42;
    --color-secondary-hover: #5D4C22;
    --color-accent: #F4EFE6;
    --color-accent-strong: #E9DFC8;
    /* Surfaces */
    --color-body: #FCFAF6;
    --color-surface: #F4EFE6;
    --color-surface-alt: #F8F3EA;
    --color-surface-muted: #EEE7DA;
    --color-surface-elevated: #FFFFFF;
    --color-border: #DDD0B4;
    --color-border-soft: #E9E0CF;
    /* Text */
    --color-text: #1E1E1E;
    --color-text-muted: #5E5A50;
    --color-text-soft: #7B766A;
    --color-text-inverse: #FFFFFF;
    --color-heading: #2C2417;
    --color-link: #A88439;
    --color-link-hover: #8B6D2D;
    /* States */
    --color-success: #2F7D4E;
    --color-info: #3B6F91;
    --color-warning: #B7791F;
    --color-danger: #B14545;
    --color-light: #F8F3EA;
    --color-dark: #2C2417;
    /* Effects */
    --color-shadow-soft: rgba(44, 36, 23, 0.08);
    --color-shadow-medium: rgba(44, 36, 23, 0.14);
    --color-shadow-strong: rgba(44, 36, 23, 0.2);
    --color-focus-ring: rgba(201, 162, 74, 0.28);
    --color-selection: rgba(201, 162, 74, 0.22);
    --gradient-primary: linear-gradient(135deg, #D6B467 0%, #B8923F 100%);
    --gradient-soft: linear-gradient(180deg, #FCFAF6 0%, #F4EFE6 100%);
    /* Legacy / template-preserving tokens */
    --color-overlay-strong: rgba(0, 0, 0, 0.99);
    --color-frost-30: rgba(250, 250, 250, 0.3);
    --color-frost-75: rgba(250, 250, 250, 0.75);
    --color-frost-95: rgba(250, 250, 250, 0.95);
    --color-white-10: rgba(255, 255, 255, 0.10);
    --color-white-20: rgba(255, 255, 255, 0.20);
    --color-white-30: rgba(255, 255, 255, 0.30);
    --color-white-50: rgba(255, 255, 255, 0.50);
    --color-accent-soft: rgba(249, 235, 255, 0.15);
    --color-legacy-purple-solid: rgba(85, 0, 227, 1);
    --color-legacy-purple-start: rgb(85, 0, 227);
    --color-legacy-purple-end: rgba(198, 61, 255, 1);
    --color-text-strong: #333333;
    --color-text-strong-dark: #000000;
    --color-shadow-slider: rgba(0, 0, 0, 0.2);
    --color-shadow-slider-2: rgba(0, 0, 0, 0.3);
    --color-shadow-slider-3: rgba(0, 0, 0, 0.5);
    --color-shadow-slider-4: rgba(0, 0, 0, 0.7);
    --color-shadow-slider-5: rgba(0, 0, 0, 0.8);
    --color-shadow-slider-6: rgba(0, 0, 0, 0.9);
    /* Bootstrap root variables */
    --bs-blue: var(--color-info);
    --bs-indigo: var(--color-secondary);
    --bs-purple: var(--color-secondary);
    --bs-pink: #B46F87;
    --bs-red: var(--color-danger);
    --bs-orange: #C58A38;
    --bs-yellow: var(--color-warning);
    --bs-green: var(--color-success);
    --bs-teal: #4D8A78;
    --bs-cyan: #5F8EA8;
    --bs-black: #000000;
    --bs-white: #ffffff;
    --bs-gray: #7B766A;
    --bs-gray-dark: #4E4535;
    --bs-gray-100: #FCFAF6;
    --bs-gray-200: #F4EFE6;
    --bs-gray-300: #E9E0CF;
    --bs-gray-400: #DDD0B4;
    --bs-gray-500: #B9AA88;
    --bs-gray-600: #7B766A;
    --bs-gray-700: #5E5A50;
    --bs-gray-800: #3F392F;
    --bs-gray-900: #241E15;
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-success: var(--color-success);
    --bs-success-rgb: 47, 125, 78;
    --bs-info: var(--color-info);
    --bs-info-rgb: 59, 111, 145;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 183, 121, 31;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 177, 69, 69;
    --bs-light: var(--color-light);
    --bs-light-rgb: 248, 243, 234;
    --bs-dark: var(--color-dark);
    --bs-dark-rgb: 44, 36, 23;
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 30, 30, 30;
    --bs-body-bg: var(--color-body);
    --bs-body-bg-rgb: 252, 250, 246;
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-color-rgb: 94, 90, 80;
    --bs-secondary-bg: var(--color-surface);
    --bs-secondary-bg-rgb: 244, 239, 230;
    --bs-tertiary-color: var(--color-text-soft);
    --bs-tertiary-bg: var(--color-surface-alt);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
    --bs-link-decoration: none;
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: rgba(221, 208, 180, 0.55);
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: 0.75rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 10px 30px var(--color-shadow-soft);
    --bs-box-shadow-sm: 0 6px 18px rgba(44, 36, 23, 0.06);
    --bs-box-shadow-lg: 0 18px 45px var(--color-shadow-medium);
    --bs-focus-ring-color: var(--color-focus-ring);
    --bs-emphasis-color: var(--color-heading);
    --bs-heading-color: var(--color-heading);
    --bs-code-color: #8B5E3C;
    --bs-highlight-bg: #FFF3CD;
    /* Bootstrap component tokens */
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.7rem;
    --bs-card-bg: var(--color-surface-elevated);
    --bs-card-border-color: var(--color-border-soft);
    --bs-card-cap-bg: var(--color-surface-alt);
    --bs-card-box-shadow: var(--bs-box-shadow-sm);
    --bs-dropdown-bg: var(--color-surface-elevated);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-heading);
    --bs-dropdown-link-hover-bg: var(--color-primary-subtle);
    --bs-dropdown-link-active-color: var(--color-heading);
    --bs-dropdown-link-active-bg: var(--color-primary-subtle);
    --bs-dropdown-border-color: var(--color-border-soft);
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-navbar-color: rgba(255,255,255,0.92);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--color-primary);
    --bs-nav-pills-link-active-color: var(--color-heading);
    --bs-nav-pills-link-active-bg: var(--color-primary-subtle);
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-bg: var(--color-surface-elevated);
    --bs-pagination-border-color: var(--color-border-soft);
    --bs-pagination-hover-color: var(--color-heading);
    --bs-pagination-hover-bg: var(--color-primary-subtle);
    --bs-pagination-hover-border-color: var(--color-primary-border);
    --bs-pagination-active-color: var(--color-heading);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
    --bs-pagination-disabled-color: #B9AA88;
    --bs-pagination-disabled-bg: var(--color-surface-alt);
    --bs-pagination-disabled-border-color: var(--color-border-soft);
    --bs-form-control-bg: #ffffff;
    --bs-form-control-color: var(--color-text);
    --bs-form-control-border-color: var(--color-border);
    --bs-form-control-focus-border-color: var(--color-primary);
    --bs-form-control-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
    --bs-form-select-border-color: var(--color-border);
    --bs-form-select-focus-border-color: var(--color-primary);
    --bs-form-select-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
    --bs-accordion-btn-bg: var(--color-surface-elevated);
    --bs-accordion-active-bg: var(--color-primary-subtle);
    --bs-accordion-active-color: var(--color-heading);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
    --bs-accordion-border-color: var(--color-border-soft);
    --bs-modal-bg: var(--color-surface-elevated);
    --bs-modal-border-color: rgba(221, 208, 180, 0.7);
    --bs-modal-header-border-color: var(--color-border-soft);
    --bs-modal-footer-border-color: var(--color-border-soft);
    --bs-progress-bg: var(--color-surface-muted);
    --bs-progress-bar-bg: var(--gradient-primary);
    --bs-list-group-color: var(--color-text);
    --bs-list-group-bg: var(--color-surface-elevated);
    --bs-list-group-border-color: var(--color-border-soft);
    --bs-list-group-hover-bg: var(--color-primary-subtle);
    --bs-list-group-active-color: var(--color-heading);
    --bs-list-group-active-bg: var(--color-primary-subtle);
    --bs-list-group-active-border-color: var(--color-primary-border);
}

::selection {
  background: var(--color-selection);
  color: var(--color-heading);
}

html, body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

body {
  text-rendering: optimizeLegibility;
}

a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Buttons */
.btn {
  box-shadow: var(--bs-box-shadow-sm);
}

.btn-primary {
  --bs-btn-color: var(--color-heading);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-heading);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
  --bs-btn-active-color: var(--color-heading);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-color: var(--color-heading);
  --bs-btn-disabled-bg: var(--color-primary-soft);
  --bs-btn-disabled-border-color: var(--color-primary-soft);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-heading);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
  --bs-btn-active-color: var(--color-heading);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-secondary);
  --bs-btn-border-color: var(--color-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-secondary-hover);
  --bs-btn-hover-border-color: var(--color-secondary-hover);
}

.btn-light,
.btn-outline-light:hover {
  --bs-btn-color: var(--color-heading);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-soft);
}

/* Forms */
.form-control,
.form-select,
.input-group-text {
  border-color: var(--color-border);
  background-color: #fff;
}

.form-control,
.form-select {
  min-height: 3rem;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn-close:focus,
.page-link:focus,
.accordion-button:focus,
.dropdown-item:focus,
.nav-link:focus {
  box-shadow: 0 0 0 .25rem var(--color-focus-ring) !important;
}

/* Cards / surfaces */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.popover,
.tooltip-inner,
.list-group-item,
.accordion-item {
  border-color: var(--color-border-soft);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast,
.popover,
.accordion-item {
  box-shadow: var(--bs-box-shadow-sm);
}

.card,
.list-group-item,
.accordion-item,
.table,
.modal-content,
.dropdown-menu {
  background-color: var(--color-surface-elevated);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.list-group-item.active,
.accordion-button:not(.collapsed) {
  background-color: var(--color-primary-subtle);
}

/* Navigation */
.nav-pills .nav-link,
.nav-tabs .nav-link,
.page-link,
.dropdown-item {
  border-radius: 999px;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active,
.page-item.active .page-link {
  color: var(--color-heading);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.nav-tabs {
  border-bottom-color: var(--color-border-soft);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--color-primary-subtle) var(--color-primary-subtle) var(--color-border-soft);
  background-color: var(--color-primary-subtle);
}

.dropdown-item:hover,
.dropdown-item:focus,
.page-link:hover,
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--color-heading);
  background-color: var(--color-primary-subtle);
}

/* Navbar supported classes */
.navbar,
.bg-primary {
  background: var(--gradient-primary) !important;
}

 

/* Tables */
.table {
  --bs-table-color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border-soft);
  --bs-table-striped-bg: rgba(244, 239, 230, .55);
  --bs-table-hover-bg: rgba(201, 162, 74, .08);
  vertical-align: middle;
}

.table thead th {
  color: var(--color-heading);
  background: var(--color-surface-alt);
}

.table-primary {
  --bs-table-bg: var(--color-primary-subtle);
  --bs-table-border-color: var(--color-primary-border);
}

/* Alerts / badges */
.alert-primary {
  --bs-alert-color: var(--color-heading);
  --bs-alert-bg: var(--color-primary-subtle);
  --bs-alert-border-color: var(--color-primary-border);
}

.badge.bg-primary,
.text-bg-primary {
  color: var(--color-heading) !important;
  background: var(--color-primary) !important;
}

.badge.bg-light,
.text-bg-light {
  color: var(--color-heading) !important;
  background: var(--color-light) !important;
}

/* Accordion / progress / spinner */
.accordion-button {
  color: var(--color-heading);
}

.progress {
  background-color: var(--color-surface-muted);
}

.progress-bar {
  background: var(--gradient-primary);
}

.spinner-border.text-primary,
.spinner-grow.text-primary,
.text-primary {
  color: var(--color-primary) !important;
}

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

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

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

/* Close button for light surfaces */
.btn-close {
  filter: none;
}

/* Scrollbar for modern browsers */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-surface);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--color-surface);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}

/* Utility helpers for template consistency */
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }
.shadow { box-shadow: var(--bs-box-shadow) !important; }
.shadow-lg { box-shadow: var(--bs-box-shadow-lg) !important; }
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 1.5rem !important; }


/* Theme toggle */
.theme-toggle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  text-align: center;
  cursor: pointer;
}

.theme-toggle-link i {
  font-size: 14px;
}

html[data-theme="navy"] .theme-toggle-link {
  color: #ffffff !important;
}

@media (max-width: 767px) {
  .header-area .main-nav .nav li.theme-switcher a.theme-toggle-link {
    display: flex !important;
    justify-content: center;
    margin-top: 10px;
  }
}