/** -------------------------------------------------- **/
/** ///////////////////// COLORS ///////////////////// **/
/** -------------------------------------------------- **/

/** //// STANDARD COLOR VALUES //// **/

:root {

  /* Primary colors */
  --color__primary__color1:#483B33;
  --color__primary__color2:#BC9053;
  --color__primary__color3:#F3E8D2;

  /* Secondary colors */
  --color__secondary__color300:#A3B698;
  --color__secondary__color500:#D83C16; 

  /* Funtional colors */
  --color__functional__grey900:#393C39;
  --color__functional__grey500:#848884;
  --color__functional__grey300:#ACAFAC;
;
  --color__functional__grey100:#F2F3F2;
  --color__functional__white:#FFFFFF;

  /* Error and focus colors */
  --color__feedback__errorred700:#ca1d3c;
  --color__feedback__errorred300:#ff93a6;
  --color__feedback__focusblue700:#1377d3;
  --color__feedback__focusblue300:#72b1ec;

}

/** ------------------------------------------------------- **/
/** /////////////////////// CLASSES /////////////////////// **/
/** ------------------------------------------------------- **/

/* Background colors .................................... */

.bg-white {
  background-color: var(--color__functional__white);
}
.bg-green {
  background-color: var(--color__secondary__color300);
}
.bg-brown {
  background-color: var(--color__primary__color1);
  background-image: url(../img/bg-grain-brown.svg);
}
.bg-beige {
  background-color: var(--color__primary__color2);
  background-image: url(../img/bg-grain-beige.svg);
}
.bg-tan {
  background-color: var(--color__primary__color3);
  background-image: url(../img/bg-grain.svg);
}
.bg-orange {
  background-color: var(--color__secondary__color500);
}
.bg-dark-orange {
  background-color: #bb3311;
}

/* Colors .................................... */

.white {
  color: var(--color__functional__white);
}
.green {
  color: var(--color__secondary__color300);
}
.brown {
  color: var(--color__primary__color1);
}
.beige {
  color: var(--color__primary__color2);
}
.tan {
  color: var(--color__primary__color3);
}
.orange {
  color: var(--color__secondary__color500);
}
.dark-orange {
  color: #bb3311;
}

/** ---------------------------------------------------------------- **/
/** /////////////////////// NO MEDIA QUERIES /////////////////////// **/
/** ---------------------------------------------------------------- **/