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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-green);
  background: var(--color-beige);
}

.btn,
a, a:visited {
  color: var(--color-green);
}
@media (hover: hover) {
  .btn:focus, .btn: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 
================================================================================================== */
.color-white {
  color: var(--color-white);
}
.color-white a, .color-white a:visited {
  color: var(--color-white);
}
@media (hover: hover) {
  .color-white a:focus, .color-white a:hover, .color-white a:visited:focus, .color-white a:visited:hover {
    color: var(--color-blue);
  }
}