/* 1. Color Schemes with CSS Variables */

/* Color Scheme 0 */
body.color0 {
  --BGColor: #e7eef2;
  --Color1: #397fab;
  --Color2: #467798;
  --BGTop: #8dbedf;
  --Color4: #e9f1f6;
  
  /* Precomputed color variations */
  --Color1-darken-10: #326d91; /* Example darkened color */
  --Color1-lighten-40: #6fa9d6; /* Example lightened color */
}

/* Color Scheme 1 */
body.color1 {
  --BGColor: #FCF4DD;
  --Color1: #ECAD06;
  --Color2: #F6B70A;
  --BGTop: #e88333;
  --Color4: #f6f6e9;
  
  --Color1-darken-10: #d49c05;
  --Color1-lighten-40: #ffcc33;
}

/* Color Scheme 2 */
body.color2 {
  --BGColor: #ecfbd4;
  --Color1: #579e23;
  --Color2: #61ab2c;
  --BGTop: #48652c;
  --Color4: #ecf6e9;
  
  --Color1-darken-10: #4e8b1f;
  --Color1-lighten-40: #8fc95a;
}

/* Color Scheme 3 */
body.color3 {
  --BGColor: #f0e5ef;
  --Color1: #a470a1;
  --Color2: #af75ac;
  --BGTop: #fddac4;
  --Color4: #f1e9f6;
  
  --Color1-darken-10: #915e8c;
  --Color1-lighten-40: #d3a5d2;
}

/* Color Scheme 4 */
body.color4 {
  --BGColor: #e2e69e;
  --Color1: #cdd035;
  --Color2: #e8eb3f;
  --BGTop: #e8e852;
  --Color4: #f5f6e9;
  
  --Color1-darken-10: #b0b72d;
  --Color1-lighten-40: #f2f06a;
}

/* Color Scheme 5 */
body.color5 {
  --BGColor: #999999;
  --Color1: #777777;
  --Color2: #AAAAAA;
  --BGTop: #959595;
  --Color4: #eeeeee;
  
  --Color1-darken-10: #6f6f6f;
  --Color1-lighten-40: #b2b2b2;
}

/* Color Scheme 6 */
body.color6 {
  --BGColor: #f0f4cf;
  --Color1: #878029;
  --Color2: #8f882f;
  --BGTop: #7e8a54;
  --Color4: #f6f3e9;
  
  --Color1-darken-10: #796e26;
  --Color1-lighten-40: #a4a856;
}

/* 2. Common Styles Using Variables */

/* Background and Text Colors */
.CColor12 {
  background: var(--Color2);
}

.BGColor {
  background-color: var(--BGColor) !important;
}

.CColor1 {
  background-color: var(--Color1) !important;
}

.CColor2 {
  background-color: var(--Color2) !important;
}

.CColor3 {
  background-color: var(--Color1-darken-10) !important;
}

.CColor4 {
  background-color: var(--Color4) !important;
}

.TColor3 {
  color: var(--Color1-darken-10) !important;
}

.TColor4 {
  color: var(--Color1-lighten-40) !important;
}

#divBGTop,
.BGTop {
  background-color: var(--BGTop) !important;
}

.BColor {
  border-color: var(--Color2) !important;
}

/* Toolbar Styles */
#LayoutTop .Toolbar .t > a,
#LayoutTop .Toolbar span.t,
#LayoutTop .Toolbar a.t {
  border-color: var(--Color2) !important;
}

#LayoutTop .Toolbar .t > a:hover,
#LayoutTop .Toolbar .t > a:active,
#LayoutTop .Toolbar .t > a.icon-menu,
#LayoutTop .Toolbar span.t:hover,
#LayoutTop .Toolbar span.t:active,
#LayoutTop .Toolbar span.t.icon-menu,
#LayoutTop .Toolbar a.t:hover,
#LayoutTop .Toolbar a.t:active,
#LayoutTop .Toolbar a.t.icon-menu {
  background-color: var(--Color2) !important;
}

/* Text Colors for Specific Classes */
.CColor2,
.CColor1,
.CColor3,
.CColor12,
.CColor2 a,
.CColor1 a,
.CColor3 a,
.CColor12 a {
  color: white;
}

.color4 .CColor1,
.color4 .CColor2,
.color4 .CColor12,
.color4 .CColor1 a,
.color4 .CColor2 a,
.color4 .CColor12 a {
  color: black;
}

/* 3. Color Picker Styles */

#CColors {
  float: left;
  background-color: white;
  padding: 4px;
  width: 127px;
  margin: -2px 15px 0;
}

#CColors span {
  float: right;
  border: solid 1px white;
  font-size: 1px;
  margin-right: 3px;
  height: 13px;
  width: 13px;
  display: inline-block;
  cursor: pointer;
}

#CColors .c0 { background-color: #82A5C3; }
#CColors .c1 { background-color: #F19C28; }
#CColors .c2 { background-color: #63AB2B; }
#CColors .c3 { background-color: #C392C1; }
#CColors .c4 { background-color: #F2F83C; }
#CColors .c5 { background-color: #999999; }
#CColors .c6 { background-color: #878029; }

#CColors .sel {
  border: solid 1px #434343;
}