/* ==========================================================
   Documentation Theme
   ========================================================== */

:root {
  --documentation-bg: #faf8f2;
  --documentation-hover: #f3eee1;
  --documentation-active: #ebe3d0;
  --documentation-border: #d8c9a8;
  --documentation-text: #333333;
}

/* ==========================================================
   Pieces Theme
   ========================================================== */

:root {
  --pieces-bg: #f4fff0;
  --pieces-hover: #edfbe8;
  --pieces-active: #e3f6dc;
  --pieces-border: #66cc66;
  --pieces-text: #333333;
}

.theme-pieces {
  background-color: var(--pieces-bg);
  border: 1px solid var(--pieces-border);
  color: var(--pieces-text);
}

/* ==========================================================
   Products Theme
   ========================================================== */

:root {
  --products-bg: #f0f7ff;
  --products-hover: #e6f3ff;
  --products-active: #d9ecff;
  --products-border: #66aaff;
  --products-text: #333333;
}

.theme-products {
  background-color: var(--products-bg);
  border: 1px solid var(--products-border);
  color: var(--products-text);
}

/* =========================================================
   Supplies Theme
   ========================================================= */

:root {
  --supplies-bg: #fff1f1;
  --supplies-border: #f2caca;
  --supplies-hover: #ffe2e2;
  --supplies-active: #ffd0d0;
  --supplies-text: #333333;
}

.theme-supplies {
  background-color: var(--supplies-bg);
  border: 1px solid var(--supplies-border);
  color: var(--supplies-text);
}

/* ==========================================================
   Project Theme
   ========================================================== */

:root {
  --project-bg: #fffaf0;
  --project-border: #e6b800;
  --project-hover: #fff3d9;
  --project-active: #ffedbf;
  --project-text: #333333;
}

.theme-project {
  background-color: var(--project-bg);
  border: 1px solid var(--project-border);
  color: var(--project-text);
}

/* ==========================================================
   Results Theme
   ========================================================== */

:root {
  --results-bg: #fef0f7;
  --results-border: #cc6699;
  --results-hover: #fde6f1;
  --results-active: #fbd9ea;
  --results-text: #333333;
}

.theme-results {
  background-color: var(--results-bg);
  border: 1px solid var(--results-border);
  color: var(--results-text);
}

/* ==========================================================
   Design Theme
   ========================================================== */

:root {
  --design-bg: #f6f7fb;
  --design-border: #c7d0e8;
  --design-hover: #edf1f9;
  --design-active: #e2e8f5;
  --design-text: #333333;
}

.theme-design {
  background-color: var(--design-bg);
  border: 1px solid var(--design-border);
  color: var(--design-text);
}

/* ==========================================================
   Conditioning Theme
   ========================================================== */

:root {
  --conditioning-bg: #f4f9f4;
  --conditioning-border: #bfd8bf;
  --conditioning-hover: #e8f3e8;
  --conditioning-active: #dcecdc;
  --conditioning-text: #333333;
}

.theme-conditioning {
  background-color: var(--conditioning-bg);
  border: 1px solid var(--conditioning-border);
  color: var(--conditioning-text);
}

/* ==========================================================
   Gallery Theme
   ========================================================== */

:root {
  --gallery-bg: #f8f8f8;
  --gallery-border: #d0d0d0;
  --gallery-hover: #f0f0f0;
  --gallery-active: #e6e6e6;
  --gallery-text: #333333;
}

.theme-gallery {
  background-color: var(--gallery-bg);
  border: 1px solid var(--gallery-border);
  color: var(--gallery-text);
}