:root {
  --ic-primary: #229DAA;
  --ic-primary-dark: #177E89;
  --ic-charcoal: #4B5053;
  --ic-charcoal-dark: #363E41;
  --ic-ink: #364247;
  --ic-muted: #738083;
  --ic-soft: #EAF7F8;
  --ic-primary-soft: #EAF7F8;
  --bs-primary: #229DAA;
  --bs-primary-rgb: 34, 157, 170;
  --bs-primary-text-emphasis: #4B5053;
  --bs-primary-bg-subtle: #EAF7F8;
  --bs-primary-border-subtle: #BEECEF;
  --bs-link-color: #229DAA;
  --bs-link-hover-color: #177E89;
}

body { color: var(--ic-ink); }
.text-primary { color: #229DAA !important; }
.bg-primary { background-color: #229DAA !important; }
.border-primary { border-color: #229DAA !important; }
.text-bg-primary { background-color: #229DAA !important; color: #fff !important; }
.bg-label-primary { background-color: rgba(34,157,170,.12) !important; color: #177E89 !important; }
.badge.bg-label-primary { color: #177E89 !important; }
.btn-primary { background-color: #229DAA !important; border-color: #229DAA !important; box-shadow: 0 .125rem .375rem rgba(34,157,170,.22) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: #177E89 !important; border-color: #177E89 !important; }
.btn-outline-primary { color: #229DAA !important; border-color: #229DAA !important; }
.btn-outline-primary:hover { background-color: #229DAA !important; color: #fff !important; }
.form-control:focus, .form-select:focus { border-color: rgba(34,157,170,.55) !important; box-shadow: 0 0 0 .25rem rgba(34,157,170,.10) !important; }
.progress-bar { background-color: #229DAA; }
.dropdown-item.active, .dropdown-item:active { background-color: #229DAA; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: #229DAA; box-shadow: 0 .125rem .375rem rgba(34,157,170,.22); }

/* Sidebar / Vuexy brand cleanup */
.layout-menu { border-right-color: rgba(75,80,83,.08); }
.app-brand-text.demo { color: #4B5053; letter-spacing: .04em; text-transform: uppercase; }
.app-brand-logo.demo svg { display: none !important; }
.app-brand-logo.demo::before {
  content: '';
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: url('../img/branding/logo.png') center / contain no-repeat;
}
.menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(270deg, rgba(34,157,170,.16), rgba(34,157,170,.08)) !important;
  color: #177E89 !important;
}
.menu-item.active > .menu-link:not(.menu-toggle) i,
.menu-item.active > .menu-link:not(.menu-toggle) div { color: #177E89 !important; }
.menu-link:hover { color: #177E89; }
.menu-header-text { color: rgba(75,80,83,.62) !important; }

/* Public/auth reusable branding */
.brand .ic-logo { color: #229DAA !important; }
.brand-logo-img, .brand .ic-logo img { display: block; object-fit: contain; }
.brand svg path[stroke="#17314a"], .brand svg path[stroke="#4B5053"] { stroke: #4B5053 !important; }
.brand span:last-child { color: #4B5053; letter-spacing: .04em; text-transform: uppercase; }
.card-brand, .footer strong { letter-spacing: .04em; }

/* Corporate card feel from the provided reference */
.digital-card, .mini-card {
  background: radial-gradient(circle at 82% 18%, rgba(34,157,170,.30), transparent 24%), linear-gradient(135deg, #4B5053, #363E41) !important;
  box-shadow: 0 18px 38px rgba(75,80,83,.28) !important;
}
.digital-card .card-brand, .mini-card .chip { color: #fff; }
.top-banner, .cta {
  background: radial-gradient(circle at 90% 12%, rgba(34,157,170,.34), transparent 20%), linear-gradient(135deg, #4B5053, #363E41) !important;
  box-shadow: 0 16px 34px rgba(75,80,83,.22) !important;
}
.promo-card { background: linear-gradient(135deg, #EAF7F8, #ffffff) !important; border-color: rgba(34,157,170,.18) !important; }
.promo-link, .percent-badge, .points-chip { background-color: #229DAA !important; color: #fff !important; }
.points-chip { box-shadow: 0 8px 18px rgba(34,157,170,.18); }