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

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

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

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

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

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

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

p {
  color: #818183;
}

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

/* Form elements
------------------------------------------------------------------------ */
input, select, textarea, button {
  color: #000;
}
input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

::placeholder {
  color: #000;
  opacity: 1;
}

/* ================================================================================================== 
Reverse 
================================================================================================== */
.background-color-white .background-color-black,
.background-color-black {
  color: var(--color-white);
  /* Form elements
  ------------------------------------------------------------------------ */
}
.background-color-white .background-color-black a, .background-color-white .background-color-black a:visited,
.background-color-black a,
.background-color-black a:visited {
  color: var(--color-white);
}
@media (hover: hover) {
  .background-color-white .background-color-black a:focus, .background-color-white .background-color-black a:hover, .background-color-white .background-color-black a:visited:focus, .background-color-white .background-color-black a:visited:hover,
.background-color-black a:focus,
.background-color-black a:hover,
.background-color-black a:visited:focus,
.background-color-black a:visited:hover {
    color: var(--color-blue);
  }
}
.background-color-white .background-color-black input, .background-color-white .background-color-black select, .background-color-white .background-color-black textarea, .background-color-white .background-color-black button,
.background-color-black input,
.background-color-black select,
.background-color-black textarea,
.background-color-black button {
  color: #fff;
}
.background-color-white .background-color-black input:focus, .background-color-white .background-color-black select:focus, .background-color-white .background-color-black textarea:focus, .background-color-white .background-color-black button:focus,
.background-color-black input:focus,
.background-color-black select:focus,
.background-color-black textarea:focus,
.background-color-black button:focus {
  outline: none;
}
.background-color-white .background-color-black ::placeholder,
.background-color-black ::placeholder {
  color: #fff;
  opacity: 1;
}