.background-color-black {
  background-color: var(--color-black);
}

.color-black {
  color: var(--color-black);
}

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

.color-white {
  color: var(--color-white);
}

.background-color-gold {
  background-color: var(--color-gold);
}

.color-gold {
  color: var(--color-gold);
}

.background-color-grey {
  background-color: var(--color-grey);
}

.color-grey {
  color: var(--color-grey);
}

.background-color-background-grey {
  background-color: var(--color-background-grey);
}

.color-background-grey {
  color: var(--color-background-grey);
}

/* ================================================================================================== 
General 
================================================================================================== */
body {
  color: var(--color-black);
  background: var(--color-background-grey);
}

a, a:visited {
  color: var(--color-black);
}
@media (hover: hover) {
  a:focus, a:hover, a:visited:focus, a:visited:hover {
    color: inherit;
  }
}

/* Form elements
------------------------------------------------------------------------ */
input, select, textarea, button {
  color: var(--color-black);
}
input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

::placeholder {
  color: var(--color-black);
  opacity: 1;
}

/* ================================================================================================== 
Reverse 
================================================================================================== */
.background-color-black {
  color: var(--color-white);
}
.background-color-black .block-heading > span {
  color: #000;
}

.background-color-gold .block-heading > span {
  background-color: var(--color-black);
  color: #fff;
}
.background-color-gold .block-heading .block-heading__arrow:before {
  filter: invert(1);
}
.background-color-gold .block-heading.white > span {
  background-color: #FFF;
  color: #000;
}