/* ========================================================= */
/* Colors */
/* ========================================================= */

/* Text colors */
.white   { color: var(--white); }
.greige1 { color: var(--greige1); }
.greige2 { color: var(--greige2); }
.greige3 { color: var(--greige3); }
.greige4 { color: var(--greige4); }
.greige5 { color: var(--greige5); }
.greige6 { color: var(--greige6); }
.gray1   { color: var(--gray1); }
.gray2   { color: var(--gray2); }
.gray3   { color: var(--gray3); }
.gray4   { color: var(--gray4); }
.black   { color: var(--black); }
.red1    { color: var(--red1); }
.red2    { color: var(--red2); }

/* Background colors */
.bg-white   { background-color: var(--white); }
.bg-greige1 { background-color: var(--greige1); }
.bg-greige2 { background-color: var(--greige2); }
.bg-greige3 { background-color: var(--greige3); }
.bg-greige4 { background-color: var(--greige4); }
.bg-greige5 { background-color: var(--greige5); }
.bg-greige6 { background-color: var(--greige6); }
.bg-gray1   { background-color: var(--gray1); }
.bg-gray2   { background-color: var(--gray2); }
.bg-gray3   { background-color: var(--gray3); }
.bg-gray4   { background-color: var(--gray4); }
.bg-black   { background-color: var(--black); }
.bg-red1    { background-color: var(--red1); }
.bg-red2    { background-color: var(--red2); }

.bg-header  { background-image: linear-gradient(.25turn, var(--red2) 50%, var(--greige6) 50%); }
.bg-darkLeft  { background-image: linear-gradient(.25turn, var(--greige6) 50%, transparent 50%); }
.bg-card    { background-color: var(--greige1); }
.bg-greige4 .bg-card { background-color: var(--greige2); }

@media (min-width: 48em) {
  .md-bg-greige4 { background-color: var(--greige4); }
}

/* Border colors */
.bc-white { border-color: var(--white); }
.bc-greige2 { border-color: var(--greige2); }
.bc-greige3 { border-color: var(--greige3); }
.bc-greige4 { border-color: var(--greige4); }
.bc-greige5 { border-color: var(--greige5); }
.bc-greige6 { border-color: var(--greige6); }