/* =============================
   BOARD COLOR THEMES
   Inset shadow grid system
   Stronger play-mode contrast
============================= */


/* =============================
   BASE (CLASSIC DEFAULT)
============================= */

.square {
  box-sizing: border-box;
  background: #e6d7b8;
  box-shadow: inset 0 0 0 2px rgba(70,50,30,0.26);
}

.corner,
.throne {
  box-sizing: border-box;
  background: #d6bf8c;
  box-shadow: inset 0 0 0 3px rgba(70,50,30,0.32);
}


/* Edit mode */

.edit-mode .square {
  background: #eee3cc;
  box-shadow: inset 0 0 0 2px rgba(90,70,50,0.16);
}

.edit-mode .corner,
.edit-mode .throne {
  background: #decda6;
  box-shadow: inset 0 0 0 3px rgba(90,70,50,0.18);
}


/* Explicit default theme */

#board.theme-default .square {
  background: #e6d7b8;
  box-shadow: inset 0 0 0 2px rgba(70,50,30,0.26);
}

#board.theme-default .corner,
#board.theme-default .throne {
  background: #d6bf8c;
  box-shadow: inset 0 0 0 3px rgba(70,50,30,0.32);
}


/* =============================
   FOREST
============================= */

#board.theme-forest .square {
  box-sizing: border-box;
  background: #cfe2c9;
  box-shadow: inset 0 0 0 2px rgba(40,70,40,0.26);
}

#board.theme-forest .corner,
#board.theme-forest .throne {
  box-sizing: border-box;
  background: #a8bf9f;
  box-shadow: inset 0 0 0 3px rgba(40,70,40,0.32);
}


/* Edit mode */

#board.edit-mode.theme-forest .square {
  background: #d8ead3;
  box-shadow: inset 0 0 0 2px rgba(60,90,60,0.16);
}

#board.edit-mode.theme-forest .corner,
#board.edit-mode.theme-forest .throne {
  background: #b7cdb0;
  box-shadow: inset 0 0 0 3px rgba(60,90,60,0.18);
}

body.theme-forest {
  background: #6f8e72;
}


/* =============================
   SLATE
============================= */

#board.theme-slate .square {
  box-sizing: border-box;
  background: #d6dce5;
  box-shadow: inset 0 0 0 2px rgba(50,60,80,0.28);
}

#board.theme-slate .corner,
#board.theme-slate .throne {
  box-sizing: border-box;
  background: #aab3c2;
  box-shadow: inset 0 0 0 3px rgba(50,60,80,0.34);
}


/* Edit mode */

#board.edit-mode.theme-slate .square {
  background: #dfe5ee;
  box-shadow: inset 0 0 0 2px rgba(70,80,100,0.18);
}

#board.edit-mode.theme-slate .corner,
#board.edit-mode.theme-slate .throne {
  background: #b7c0cf;
  box-shadow: inset 0 0 0 3px rgba(70,80,100,0.20);
}

body.theme-slate {
  background: #7f8999;
}


/* =============================
   WALNUT
============================= */

#board.theme-walnut .square {
  box-sizing: border-box;
  background: #d6c3ad;
  box-shadow: inset 0 0 0 2px rgba(80,50,30,0.28);
}

#board.theme-walnut .corner,
#board.theme-walnut .throne {
  box-sizing: border-box;
  background: #b79574;
  box-shadow: inset 0 0 0 3px rgba(80,50,30,0.34);
}


/* Edit mode */

#board.edit-mode.theme-walnut .square {
  background: #dfcfbb;
  box-shadow: inset 0 0 0 2px rgba(100,70,50,0.18);
}

#board.edit-mode.theme-walnut .corner,
#board.edit-mode.theme-walnut .throne {
  background: #c5a387;
  box-shadow: inset 0 0 0 3px rgba(100,70,50,0.20);
}

body.theme-walnut {
  background: #8a6348;
}


/* =============================
   MIDNIGHT
============================= */

#board.theme-midnight .square {
  box-sizing: border-box;
  background: #cfd7e2;
  box-shadow: inset 0 0 0 2px rgba(30,40,60,0.32);
}

#board.theme-midnight .corner,
#board.theme-midnight .throne {
  box-sizing: border-box;
  background: #8fa2bd;
  box-shadow: inset 0 0 0 3px rgba(30,40,60,0.38);
}


/* Edit mode */

#board.edit-mode.theme-midnight .square {
  background: #d8e0ea;
  box-shadow: inset 0 0 0 2px rgba(50,60,80,0.24);
}

#board.edit-mode.theme-midnight .corner,
#board.edit-mode.theme-midnight .throne {
  background: #9fb0c8;
  box-shadow: inset 0 0 0 3px rgba(50,60,80,0.26);
}

body.theme-midnight {
  background: #253247;
}