:root {
  --ecom-primary: #063958;
  --ecom-primary-dark: #031f32;
  --ecom-navy: #063958;
  --ecom-navy-2: #082b46;
  --ecom-accent: #e5b556;
  --ecom-gold: #e5b556;
  --ecom-sage: #f7f1df;
  --ecom-cream: #f7f1df;
  --ecom-ink: #173244;
  --ecom-muted: #64727b;
  --ecom-border: #d9e0e2;
  --bs-primary: #063958;
  --bs-primary-rgb: 6, 57, 88;
  --bs-secondary: #64727b;
  --bs-secondary-rgb: 100, 114, 123;
  --bs-body-color: #173244;
  --bs-body-bg: #fbf9f2;
  --bs-border-color: #d9e0e2;
  --bs-link-color: #063958;
  --bs-link-hover-color: #082b46;
  --bs-focus-ring-color: rgba(229, 181, 86, .28);
}

html { scroll-behavior: smooth; }

body {
  background: #fbf9f2;
  color: var(--ecom-ink);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

body.bg-sage,
.bg-sage { background-color: var(--ecom-cream) !important; }

.text-muted,
.text-muted-soft,
.lead-soft { color: var(--ecom-muted) !important; }

a { color: var(--ecom-navy); }
a:hover { color: var(--ecom-navy-2); }

.navbar,
header.navbar,
.navbar.bg-white {
  background: #fff !important;
  border-bottom: 1px solid var(--ecom-border);
  box-shadow: 0 2px 18px rgba(11, 53, 80, .08);
}

.navbar-brand,
.navbar .nav-link { color: var(--ecom-navy) !important; }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active { color: var(--ecom-navy-2) !important; }
.navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--ecom-gold); }
.navbar-toggler { border-color: rgba(6, 57, 88, .28); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(229, 181, 86, .28); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ecom-navy);
}

.btn {
  border-radius: 6px;
  font-weight: 600;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(229, 181, 86, .3); }

.btn-accent,
.btn-primary {
  --bs-btn-color: #173244;
  --bs-btn-bg: #e5b556;
  --bs-btn-border-color: #e5b556;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #063958;
  --bs-btn-hover-border-color: #063958;
  --bs-btn-focus-shadow-rgb: 229, 181, 86;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #082b46;
  --bs-btn-active-border-color: #082b46;
  --bs-btn-disabled-color: #52616a;
  --bs-btn-disabled-bg: #ead39f;
  --bs-btn-disabled-border-color: #ead39f;
}

.btn-accent {
  color: var(--ecom-ink) !important;
  background-color: var(--ecom-gold) !important;
  border-color: var(--ecom-gold) !important;
  box-shadow: 0 8px 20px rgba(0, 27, 46, .16);
}
.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  color: #fff !important;
  background-color: var(--ecom-navy) !important;
  border-color: var(--ecom-navy) !important;
  box-shadow: 0 8px 20px rgba(3, 31, 50, .22) !important;
}

.btn-ecom {
  color: #fff !important;
  background-color: var(--ecom-navy) !important;
  border-color: var(--ecom-navy) !important;
}
.btn-ecom:hover,
.btn-ecom:focus,
.btn-ecom:active {
  color: var(--ecom-ink) !important;
  background-color: var(--ecom-gold) !important;
  border-color: var(--ecom-gold) !important;
  box-shadow: 0 8px 20px rgba(229, 181, 86, .22) !important;
}

.btn-outline-ecom {
  color: var(--ecom-navy) !important;
  border-color: var(--ecom-navy) !important;
}
.btn-outline-ecom:hover,
.btn-outline-ecom:focus,
.btn-outline-ecom:active {
  color: #fff !important;
  background-color: var(--ecom-navy) !important;
  border-color: var(--ecom-navy) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: #063958;
  --bs-btn-border-color: #063958;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #063958;
  --bs-btn-hover-border-color: #063958;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #082b46;
  --bs-btn-active-border-color: #082b46;
}

.form-label { color: var(--ecom-navy); font-weight: 600; }
.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: #d6c38f !important;
  background-color: #fffdf6;
}
.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ecom-gold) !important;
  box-shadow: 0 0 0 .25rem rgba(229, 181, 86, .2) !important;
}
.form-check-input:checked {
  background-color: var(--ecom-navy);
  border-color: var(--ecom-navy);
}

.card,
.auth-card,
.tab-card,
.kpi-card,
.product-card,
.toc,
.border-soft {
  border-color: var(--ecom-border) !important;
  box-shadow: 0 10px 30px rgba(9, 47, 70, .06);
}
.rounded-xl { border-radius: 10px !important; }
.card-header,
.modal-header { border-color: var(--ecom-border); }
.card-header { background: #fffdf6; }

.hero { background: var(--ecom-cream) !important; }
.hero h1 { color: var(--ecom-navy) !important; }
.hero .lead { color: var(--ecom-muted) !important; }

.card-feature .icon {
  background: var(--ecom-navy) !important;
  color: var(--ecom-gold) !important;
}

.section-steps {
  background: linear-gradient(120deg, var(--ecom-navy-2), var(--ecom-navy)) !important;
  color: #fff;
}
.section-steps h2 { color: #fff !important; }
.step-dot { color: var(--ecom-gold); border: 1px solid rgba(255,255,255,.26); }

.section-testimonials {
  --sage-card: #fff;
  --sage-border: #d9e0e2;
  background: #fffdf6;
}
.section-testimonials .avatar-badge,
.section-testimonials .avatar {
  background: var(--ecom-navy) !important;
  color: var(--ecom-gold) !important;
}
.section-testimonials .stars .bi-star-fill { color: var(--ecom-gold) !important; }

.benefits-card {
  background: var(--ecom-navy) !important;
  color: #fff;
}
.benefits-card h5 { color: #fff; }
.benefits-card .btn-light { color: var(--ecom-navy) !important; }

.nav-tabs { border-bottom-color: var(--ecom-border); }
.nav-tabs .nav-link { color: var(--ecom-muted); }
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--ecom-navy); }
.nav-tabs .nav-link.active,
.tab-card .nav-link.active {
  color: var(--ecom-navy) !important;
  border-color: transparent transparent var(--ecom-gold) !important;
  border-bottom-width: 2px !important;
}

.table { --bs-table-color: #173244; --bs-table-border-color: #d9e0e2; }
.table thead th {
  color: var(--ecom-navy);
  background: #fbf7eb;
  border-bottom-color: #d6c38f;
  font-weight: 700;
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fffaf0; }

.pagination .page-link {
  color: var(--ecom-navy) !important;
  border-color: var(--ecom-border);
}
.pagination .page-link:hover { background: #fbf7eb; border-color: #d6c38f; }
.pagination .page-item.active .page-link {
  background-color: var(--ecom-navy) !important;
  border-color: var(--ecom-navy) !important;
  color: #fff !important;
}

.dropdown-menu { border-color: var(--ecom-border); box-shadow: 0 12px 30px rgba(3, 31, 50, .14); }
.dropdown-item:active,
.dropdown-item.active { color: #fff; background-color: var(--ecom-navy); }

.dash-aside .menu a { color: var(--ecom-ink) !important; }
.dash-aside .menu a:hover,
.dash-aside .menu a.active,
.toc a:hover,
.toc a.active {
  color: var(--ecom-navy) !important;
  background: #fbf7eb;
  box-shadow: inset 3px 0 0 var(--ecom-gold);
}

.icon.bg-sage,
.person > b {
  background: var(--ecom-navy) !important;
  color: var(--ecom-gold) !important;
}

.badge.text-bg-primary { background-color: var(--ecom-navy) !important; }
.progress-bar { background-color: var(--ecom-gold); color: var(--ecom-ink); }

.modal-content { border: 1px solid var(--ecom-border); border-radius: 10px; }
.modal-title { color: var(--ecom-navy); }

#backToTop {
  background: var(--ecom-navy) !important;
  color: #fff !important;
  border-color: var(--ecom-navy) !important;
}
#backToTop:hover { background: var(--ecom-gold) !important; color: var(--ecom-ink) !important; }

footer,
.site-footer,
.footer { background: var(--ecom-primary-dark) !important; color: #dce8ed; }
footer a,
.site-footer a,
.footer a { color: #dce8ed; }
footer a:hover,
.site-footer a:hover,
.footer a:hover { color: var(--ecom-gold); }

@media (max-width: 767.98px) {
  .btn { min-height: 42px; }
  .card,
  .auth-card,
  .tab-card,
  .kpi-card,
  .product-card,
  .toc,
  .border-soft { box-shadow: 0 7px 20px rgba(9, 47, 70, .05); }
  .table-responsive { border-radius: 10px; }
}