/* UInvest brand utilities */
:root{
  --brand-primary:#2180B9;
  --brand-dark:#113452;
}

.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--brand-primary);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--brand-dark);
  --bs-btn-hover-border-color:var(--brand-dark);
  --bs-btn-focus-shadow-rgb:33,128,185;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--brand-dark);
  --bs-btn-active-border-color:var(--brand-dark);
}

.brand-card{
  border-color: rgba(17,52,82,.15) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.brand-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(17,52,82,.15) !important;
  background: linear-gradient(0deg, rgba(33,128,185,.05), rgba(33,128,185,.05));
}

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

.badge-brand{ background-color: var(--brand-primary); }
.badge-brand-dark{ background-color: var(--brand-dark); }

.link-brand{ color: var(--brand-primary); }
.link-brand:hover{ color: var(--brand-dark); }

.border-brand{ border-color: rgba(33,128,185,.35) !important; }

/* Outline brand button leveraging Bootstrap CSS variables */
.btn-outline-brand{
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
}