/* Household skins. CEC monogram is filled with the active accent. */

:root, html[data-skin="ocean"] {
  color-scheme: dark;
  --accent: #22d3ee;
  --accent-2: #3fd0ff;
  --accent-ink: #04141a;
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --plane: #0a0b0d;
  --surface-1: #14171c;
  --surface-grad: #101216;
  --surface-2: #191d24;
  --surface-sunk: #0c0e12;
  --text-primary: #f2f4f7;
  --text-secondary: #c3cbd6;
  --text-muted: #9aa3af;
  --link: #3fd0ff;
  --border: #23272f;
  --border-strong: #2d333d;
  --glow: color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-skin="ember"] {
  color-scheme: dark;
  --accent: #f0946e;
  --accent-2: #ffb089;
  --accent-ink: #1a0c08;
  --plane: #120c0a;
  --surface-1: #1c1411;
  --surface-grad: #16100e;
  --surface-2: #241a16;
  --surface-sunk: #0e0908;
  --text-primary: #f7f1ec;
  --text-secondary: #d4c4ba;
  --text-muted: #a8948a;
  --link: #ffb089;
  --border: #32241e;
  --border-strong: #43332c;
}

html[data-skin="gold"] {
  color-scheme: dark;
  --accent: #e0b35c;
  --accent-2: #f0d08a;
  --accent-ink: #1a1408;
  --plane: #12100c;
  --surface-1: #1b1812;
  --surface-grad: #16140f;
  --surface-2: #242018;
  --surface-sunk: #0e0c09;
  --text-primary: #f6f1e4;
  --text-secondary: #d2c8b0;
  --text-muted: #a89b82;
  --link: #f0d08a;
  --border: #322c20;
  --border-strong: #433b2c;
}

html[data-skin="forest"] {
  color-scheme: dark;
  --accent: #34d399;
  --accent-2: #6ee7b7;
  --accent-ink: #04140e;
  --plane: #0b100d;
  --surface-1: #121a16;
  --surface-grad: #0e1612;
  --surface-2: #18241e;
  --surface-sunk: #070c09;
  --text-primary: #eef7f2;
  --text-secondary: #bdd4c6;
  --text-muted: #8eaa9a;
  --link: #6ee7b7;
  --border: #1e3228;
  --border-strong: #2a4336;
}

html[data-skin="violet"] {
  color-scheme: dark;
  --accent: #c4b5fd;
  --accent-2: #a78bfa;
  --accent-ink: #12081c;
  --plane: #100c14;
  --surface-1: #18141f;
  --surface-grad: #14101a;
  --surface-2: #221c2c;
  --surface-sunk: #0b0810;
  --text-primary: #f3eef8;
  --text-secondary: #c9bdd6;
  --text-muted: #9a8eaa;
  --link: #c4b5fd;
  --border: #2c2438;
  --border-strong: #3b3250;
}

html[data-skin="slate"] {
  color-scheme: dark;
  --accent: #94a3b8;
  --accent-2: #cbd5e1;
  --accent-ink: #0b1016;
  --plane: #0c0e12;
  --surface-1: #15181e;
  --surface-grad: #11141a;
  --surface-2: #1c2129;
  --surface-sunk: #08090c;
  --text-primary: #eef2f6;
  --text-secondary: #c0c8d2;
  --text-muted: #8b95a3;
  --link: #cbd5e1;
  --border: #262b34;
  --border-strong: #353c48;
}

html[data-skin="linen"] {
  color-scheme: light;
  --accent: #b45309;
  --accent-2: #d97706;
  --accent-ink: #fff8ed;
  --plane: #f4efe6;
  --surface-1: #fffaf3;
  --surface-grad: #f7f1e8;
  --surface-2: #ece4d6;
  --surface-sunk: #e7dfd2;
  --text-primary: #1c150c;
  --text-secondary: #4a4032;
  --text-muted: #6f6454;
  --link: #b45309;
  --border: #ddd2c0;
  --border-strong: #c9bba4;
}

/* CEC monogram — filled with the active skin accent */
.cec-mark {
  display: block;
  width: 44px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--grad);
  -webkit-mask: url(/cec-monogram.png) center / contain no-repeat;
  mask: url(/cec-monogram.png) center / contain no-repeat;
}

.skin-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skin-swatch {
  width: 42px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
  display: grid;
  place-items: center;
}
.skin-swatch:hover { filter: brightness(1.08); }
.skin-swatch[aria-checked="true"],
.skin-swatch.is-on {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--plane);
}
.skin-swatch .cec-mark {
  width: 28px;
  height: 20px;
  background: var(--swatch-ink);
}
.skin-swatch[data-skin="ocean"] { --swatch-a:#22d3ee; --swatch-b:#3fd0ff; --swatch-ink:#04141a; }
.skin-swatch[data-skin="ember"] { --swatch-a:#f0946e; --swatch-b:#ffb089; --swatch-ink:#1a0c08; }
.skin-swatch[data-skin="gold"] { --swatch-a:#e0b35c; --swatch-b:#f0d08a; --swatch-ink:#1a1408; }
.skin-swatch[data-skin="forest"] { --swatch-a:#34d399; --swatch-b:#6ee7b7; --swatch-ink:#04140e; }
.skin-swatch[data-skin="violet"] { --swatch-a:#c4b5fd; --swatch-b:#a78bfa; --swatch-ink:#12081c; }
.skin-swatch[data-skin="slate"] { --swatch-a:#94a3b8; --swatch-b:#cbd5e1; --swatch-ink:#0b1016; }
.skin-swatch[data-skin="linen"] { --swatch-a:#b45309; --swatch-b:#d97706; --swatch-ink:#fff8ed; }