:root {
  --brand-primary: #0f453b;
  --brand-secondary: #ffffff;
  --brand-accent: #ff105a;
  --brand-light-gray: #ececec;
  --brand-medium-gray: #d7d7d7;
  --brand-white: #ffffff;
  --brand-green: #15a64b;
  --brand-button-primary: #0f453b;
  --brand-button-primary-hover: #0c3931;
}

.fill-brand-primary {
  fill: var(--brand-primary);
}

.fill-brand-medium-gray {
  fill: var(--brand-medium-gray);
}

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

.bg-brand-primary:hover {
  background-color: var(--brand-button-primary-hover);
}

.bg-brand-primary-alt {
  background-color: var(--brand-button-primary);
  border: 0;
  color: var(--brand-white);
}

.bg-brand-primary-alt:hover {
  background-color: var(--brand-button-primary-hover);
}

.bg-brand-green {
  background-color: var(--brand-green);
}

.bg-brand-hover {
  background-color: var(--brand-button-primary-hover);
}

.bg-brand-light-gray {
  background-color: var(--brand-light-gray);
}

.bg-brand-white {
  background-color: var(--brand-white);
}

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

.border-brand-secondary {
  border-color: var(--brand-medium-gray);
}

.btn-brand-primary {
  background-color: var(--brand-button-primary);
  border: 0;
  color: var(--brand-white);
}

.btn-brand-primary:hover {
  background-color: var(--brand-button-primary-hover);
}

.btn-brand-secondary {
  background-color: var(--brand-light-gray);
  border: 0;
}

.btn-brand-secondary:hover {
  background-color: var(--brand-light-gray);
}