html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--text-secondary);
  font-family: var(--font-headline);
}

.card,
.dropdown-menu,
.modal-content,
.list-group-item,
.popover,
.toast {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--color-light-grey);
}

.form-control,
.input-group-text,
.custom-select,
.custom-file-label {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--color-light-grey);
}

.table { border-color: var(--color-light-grey); }
.table thead th,
.table td,
.table th {
  border-color: var(--color-light-grey);
}

.bg-dark { background-color: var(--bg-dark) !important; }

.btn-primary {
  background-color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
  color: var(--color-off-white);
}
.btn-outline-primary {
  color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
}
.btn-outline-primary:hover {
  background-color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
  color: var(--color-off-white);
}

a { color: var(--color-lilac-blue); }
a:hover, a:focus { color: var(--color-deep-blue); }

.bg-offwhite, .bg-surface { background-color: var(--color-off-white) !important; }
.text-deep-blue { color: var(--color-deep-blue) !important; }
.text-night { color: var(--color-night-sky-blue) !important; }