/* ==================================
   KK COLOR v1
================================== */

:root {
  --white: white;
/*   --canvas: rgba(238, 238, 238, 0.7); */
  --canvas: hsl(30, 20%, 97%);
  
  --oak: hsl(30,20%,20%);
  --oak-80: hsl(30,20%,32%);
  --oak-60: hsl(30,20%,48%);
  --oak-40: hsl(30,20%,64%);
  --oak-20: hsl(30,20%,80%);
  --oak-10: hsl(30,20%,92%);
  --oak-5: hsl(30,20%,96%);

  --latte: hsl(50,16%,80%);

  --orange: hsl(26,100%,50%);
  --yellow: hsl(46,100%,50%);
  --green: hsl(138,50%,35%);
}

/* ==================================
   KK COLOR CLASSES v1
   Backgrounds
================================== */

#t4-main-body { background-color: var(--canvas); }
.kk-bg-white  { background-color: var(--white); }
.kk-bg-canvas { background-color: var(--canvas); }

/* Oak scale */
.kk-bg-oak     { background-color: var(--oak); }
.kk-bg-oak-80  { background-color: var(--oak-80); }
.kk-bg-oak-60  { background-color: var(--oak-60); }
.kk-bg-oak-40  { background-color: var(--oak-40); }
.kk-bg-oak-20  { background-color: var(--oak-20); }
.kk-bg-oak-10  { background-color: var(--oak-10); }
.kk-bg-oak-5   { background-color: var(--oak-5); }

/* Accent */
.kk-text-orange { color: var(--orange); }
.kk-text-yellow { color: var(--yellow); }
.kk-text-green  { color: var(--green); }


/* ==================================
   KK COLOR CLASSES v1
   Backgrounds helpers
================================== */

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

.kk-bg-yellow {
  background-color: var(--yellow);
  color: var(--oak);
}

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








.black {background-color: black; color:white; }
.white {background-color: white; }
/* .canvas {background: var(--canvas);} */
.orange {background-color: var(--orange); color: white;}
.oak {background: var(--oak); color: white;}
.oak-10 {background: var(--oak-10);}
.oak-20 {background: var(--oak-20);}
.oak-70 {background: var(--oak-70);}
.green {background-color: var(--green);}