/* === EvEffect Custom Theme Colors === */
:root {
  --primary: #4a75a8;
  --success: #3b8f72;
  --danger: #c5393d;
  --danger-light: #e57373;
  --danger-dark: #812c2c;

  --navy:    #232e43;
  --navy2:   #242e43;
  --navy3:   #232e42;
  --purple:  #a18cb3;
  --slate:   #3f4d61;
  --brown:   #4b3d35;
  --ash:     #bfbfbf;
  --sand:    #8e7962;
  --dust:    #6f6355;
  --offwhite: #FEFEFA;

  --bs-primary: var(--primary);
  --bs-success: var(--success);
  --bs-danger: var(--danger);
}

/* === Backgrounds === */
.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger  { background-color: var(--danger) !important; }
.bg-danger-light { background-color: var(--danger-light) !important; }
.bg-danger-dark  { background-color: var(--danger-dark) !important; }
.bg-navy     { background-color: var(--navy) !important; }
.bg-navy2    { background-color: var(--navy2) !important; }
.bg-navy3    { background-color: var(--navy3) !important; }
.bg-purple   { background-color: var(--purple) !important; }
.bg-slate    { background-color: var(--slate) !important; }
.bg-brown    { background-color: var(--brown) !important; }
.bg-ash      { background-color: var(--ash) !important; }
.bg-sand     { background-color: var(--sand) !important; }
.bg-dust     { background-color: var(--dust) !important; }
.bg-offwhite { background-color: var(--offwhite) !important; }

/* === Text Colors === */
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-danger-light { color: var(--danger-light) !important; }
.text-danger-dark  { color: var(--danger-dark) !important; }
.text-navy     { color: var(--navy) !important; }
.text-navy2    { color: var(--navy2) !important; }
.text-navy3    { color: var(--navy3) !important; }
.text-purple   { color: var(--purple) !important; }
.text-slate    { color: var(--slate) !important; }
.text-brown    { color: var(--brown) !important; }
.text-ash      { color: var(--ash) !important; }
.text-sand     { color: var(--sand) !important; }
.text-dust     { color: var(--dust) !important; }
.text-offwhite { color: var(--offwhite) !important; }
.text-orange {  color: #f28c28;}
.text-blue {  color: #343E71;}
/* === Borders === */
.border-primary { border-color: var(--primary) !important; }
.border-success { border-color: var(--success) !important; }
.border-danger  { border-color: var(--danger) !important; }
.border-navy     { border-color: var(--navy) !important; }
.border-navy2    { border-color: var(--navy2) !important; }
.border-navy3    { border-color: var(--navy3) !important; }
.border-purple   { border-color: var(--purple) !important; }
.border-slate    { border-color: var(--slate) !important; }
.border-brown    { border-color: var(--brown) !important; }
.border-ash      { border-color: var(--ash) !important; }
.border-sand     { border-color: var(--sand) !important; }
.border-dust     { border-color: var(--dust) !important; }
.border-offwhite { border-color: var(--offwhite) !important; }

/* === Buttons: Custom Themed === */
.btn-navy {
  background-color: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-navy:hover,
.btn-navy:focus {
  background-color: #1c2438;
  border-color: #1c2438;
  color: #fff;
}
.btn-outline-navy {
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background-color: var(--navy);
  color: #fff;
}

.btn-purple {
  background-color: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.btn-purple:hover,
.btn-purple:focus {
  background-color: #8f78a2;
  border-color: #8f78a2;
}
.btn-outline-purple {
  color: var(--purple);
  border-color: var(--purple);
}
.btn-outline-purple:hover,
.btn-outline-purple:focus {
  background-color: var(--purple);
  color: #fff;
}

.btn-slate {
  background-color: var(--slate);
  color: #fff;
  border-color: var(--slate);
}
.btn-slate:hover,
.btn-slate:focus {
  background-color: #2e3c4f;
  border-color: #2e3c4f;
}
.btn-outline-slate {
  color: var(--slate);
  border-color: var(--slate);
}
.btn-outline-slate:hover,
.btn-outline-slate:focus {
  background-color: var(--slate);
  color: #fff;
}

/* === Navy2 === */
.btn-navy2 {
  background-color: var(--navy2);
  color: #fff;
  border-color: var(--navy2);
}
.btn-navy2:hover,
.btn-navy2:focus {
  background-color: #1e2536;
  border-color: #1e2536;
}
.btn-outline-navy2 {
  color: var(--navy2);
  border-color: var(--navy2);
}
.btn-outline-navy2:hover,
.btn-outline-navy2:focus {
  background-color: var(--navy2);
  color: #fff;
}

/* === Navy3 === */
.btn-navy3 {
  background-color: var(--navy3);
  color: #fff;
  border-color: var(--navy3);
}
.btn-navy3:hover,
.btn-navy3:focus {
  background-color: #1c2234;
  border-color: #1c2234;
}
.btn-outline-navy3 {
  color: var(--navy3);
  border-color: var(--navy3);
}
.btn-outline-navy3:hover,
.btn-outline-navy3:focus {
  background-color: var(--navy3);
  color: #fff;
}

/* === Brown === */
.btn-brown {
  background-color: var(--brown);
  color: #fff;
  border-color: var(--brown);
}
.btn-brown:hover,
.btn-brown:focus {
  background-color: #3b312b;
  border-color: #3b312b;
}
.btn-outline-brown {
  color: var(--brown);
  border-color: var(--brown);
}
.btn-outline-brown:hover,
.btn-outline-brown:focus {
  background-color: var(--brown);
  color: #fff;
}

/* === Ash === */
.btn-ash {
  background-color: var(--ash);
  color: #000;
  border-color: var(--ash);
}
.btn-ash:hover,
.btn-ash:focus {
  background-color: #a0a0a0;
  border-color: #a0a0a0;
}
.btn-outline-ash {
  color: var(--ash);
  border-color: var(--ash);
}
.btn-outline-ash:hover,
.btn-outline-ash:focus {
  background-color: var(--ash);
  color: #000;
}

/* === Sand === */
.btn-sand {
  background-color: var(--sand);
  color: #fff;
  border-color: var(--sand);
}
.btn-sand:hover,
.btn-sand:focus {
  background-color: #786654;
  border-color: #786654;
}
.btn-outline-sand {
  color: var(--sand);
  border-color: var(--sand);
}
.btn-outline-sand:hover,
.btn-outline-sand:focus {
  background-color: var(--sand);
  color: #fff;
}

/* === Dust === */
.btn-dust {
  background-color: var(--dust);
  color: #fff;
  border-color: var(--dust);
}
.btn-dust:hover,
.btn-dust:focus {
  background-color: #5c5146;
  border-color: #5c5146;
}
.btn-outline-dust {
  color: var(--dust);
  border-color: var(--dust);
}
.btn-outline-dust:hover,
.btn-outline-dust:focus {
  background-color: var(--dust);
  color: #fff;
}

/* === Offwhite === */
.btn-offwhite {
  background-color: var(--offwhite);
  color: #000;
  border-color: var(--offwhite);
}
.btn-offwhite:hover,
.btn-offwhite:focus {
  background-color: #e1e1e1;
  border-color: #e1e1e1;
}
.btn-outline-offwhite {
  color: #444;
  border-color: var(--offwhite);
}
.btn-outline-offwhite:hover,
.btn-outline-offwhite:focus {
  background-color: var(--offwhite);
  color: #000;
}


/* === Buttons: Bootstrap Overrides === */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #3b5f8b;
  border-color: #3b5f8b;
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #2c7059;
  border-color: #2c7059;
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--danger-dark);
  border-color: var(--danger-dark);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary);
  color: #fff;
}

.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--success);
  color: #fff;
}

.btn-outline-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--danger);
  color: #fff;
}

/* === Toasts === */
.toast-primary {
  background-color: var(--primary);
  color: #fff;
}
.toast-success {
  background-color: var(--success);
  color: #fff;
}
.toast-danger {
  background-color: var(--danger);
  color: #fff;
}

/* === Modals === */
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-danger {
  color: #fff;
}

/* === Cards === */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger {
  color: #fff;
}

/* === Badges === */
.badge-primary {
  background-color: var(--primary);
  color: #fff;
}
.badge-success {
  background-color: var(--success);
  color: #fff;
}
.badge-danger {
  background-color: var(--danger);
  color: #fff;
}

/* === Accordion === */
.accordion-button:not(.collapsed) {
  background-color: var(--primary);
  color: #fff;
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(74, 117, 168, 0.4);
}
.accordion-button.collapsed {
  background-color: #f8f9fa;
  color: var(--primary);
}

/* === Forms === */
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(74, 117, 168, 0.25);
}

/* === Nav Links === */
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
  color: var(--primary) !important;
}

/* === Close Button === */
.btn-close {
  filter: brightness(0.5);
}
.btn-close:hover,
.btn-close:focus {
  filter: brightness(0.2);
}