/*
==============================
Variables
==============================
*/

:root {
  --siena: #A85F45;
  --siena-light: #C97A5E;
  --sage: #5C7A65;
  --sage-light: #6E9478;
  --dark: #16140F;
  --dark-surface: #1F1D16;
  --dark-border: #3A3528;
  --grey: #F5F0E8;
  --grey-alt: #EAE5DC;
  --grey-border: #D8D3CB;
  --black: #2C2825;
  --black-muted: #5A5450;
  --black-faint: #8A8278;
  --white: #fff;
  --cream: #F0EBE3;
  --dark-body: #2A2720;
}


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

.color-siena {
  color: var(--siena);
}
.color-siena-light {
  color: var(--siena-light);
}
.color-sage {
  color: var(--sage);
}
.color-sage-light {
  color: var(--sage-light);
}
.color-black {
  color: var(--black);
}
.color-black-muted {
  color: var(--black-muted);
}
.color-black-faint {
  color: var(--black-faint);
}
.color-white {
  color: var(--white);
}
.color-cream {
  color: var(--cream);
}
.color-grey {
  color: var(--grey);
}


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

.bg-dark {
  background-color: var(--dark) !important;
}
.bg-dark-surface {
  background-color: var(--dark-surface);
}
.bg-grey {
  background-color: var(--grey);
}
.bg-grey-alt {
  background-color: var(--grey-alt);
}
.bg-siena {
  background-color: var(--siena);
}
.bg-siena-light {
  background-color: var(--siena-light);
}
.bg-sage {
  background-color: var(--sage);
}
.bg-sage-light {
  background-color: var(--sage-light);
}
.bg-white {
  background-color: var(--white);
}
.bg-transp-white {
  background-color: rgba(255, 255, 255, 0.08);
}
.bg-dark-body { 
  background-color: var(--dark-body); 
}


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

.border-dark {
  border-color: var(--dark-border);
}
.border-dark-surface {
  border-color: var(--dark-surface);
}
.border-grey {
  border-color: var(--grey-border);
}
.border-grey-alt {
  border-color: var(--grey-alt);
}
.border-siena {
  border-color: var(--siena);
}
.border-siena-light {
  border-color: var(--siena-light);
}
.border-sage {
  border-color: var(--sage);
}
.border-white {
  border-color: var(--white);
}