html {
  --lift: #fffdf8;
}

html[data-theme="lamp"] {
  --gold: #c4a07a;
  --gold-dim: #d4b48c;
  --flame: #c4a07a;
  --copper: #c4a07a;
  --paper: #1c1814;
  --ink: #f3eee4;
  --muted: #b7aea3;
  --panel: #241f1a;
  --line: rgba(243, 238, 228, 0.16);
  --lift: #2a241e;
}

html[data-theme="oxblood"] {
  --gold: #7a2e2a;
  --gold-dim: #9a4540;
  --flame: #7a2e2a;
  --copper: #7a2e2a;
  --paper: #f4ebe3;
  --ink: #1c1212;
  --muted: #6b4a46;
  --panel: #f8f0e8;
  --line: rgba(28, 18, 18, 0.16);
  --lift: #fff8f3;
}

html[data-theme="ledger"] {
  --gold: #4a5560;
  --gold-dim: #5c6b73;
  --flame: #4a5560;
  --copper: #4a5560;
  --paper: #f3f1ea;
  --ink: #1c2128;
  --muted: #5a616a;
  --panel: #f7f5ef;
  --line: rgba(28, 33, 40, 0.16);
  --lift: #fffcf6;
}

html[data-theme="workshop"] {
  --gold: #8b5a2b;
  --gold-dim: #a56e3e;
  --flame: #8b5a2b;
  --copper: #8b5a2b;
  --paper: #e4d2b4;
  --ink: #2a1f14;
  --muted: #6a5340;
  --panel: #ead9bb;
  --line: rgba(42, 31, 20, 0.2);
  --lift: #f0e0c4;
}

html[data-theme="fog"] {
  --gold: #6d6458;
  --gold-dim: #857a6c;
  --flame: #6d6458;
  --copper: #6d6458;
  --paper: #eceae6;
  --ink: #2c2a28;
  --muted: #6a6560;
  --panel: #f3f1ed;
  --line: rgba(44, 42, 40, 0.16);
  --lift: #f7f5f1;
}

html[data-theme="harbor"] {
  --gold: #3f5c45;
  --gold-dim: #54785c;
  --flame: #3f5c45;
  --copper: #3f5c45;
  --paper: #eef0ea;
  --ink: #1c241c;
  --muted: #546056;
  --panel: #f4f6f0;
  --line: rgba(28, 36, 28, 0.16);
  --lift: #f8faf4;
}

html[data-theme="chalk"] {
  --gold: #d8c48a;
  --gold-dim: #c4b078;
  --flame: #d8c48a;
  --copper: #d8c48a;
  --paper: #1f211c;
  --ink: #e6e1d4;
  --muted: #b7b3a6;
  --panel: #272922;
  --line: rgba(230, 225, 212, 0.16);
  --lift: #2c2f28;
}

html[data-theme="bone"] {
  --gold: #3e4a6b;
  --gold-dim: #5a6a90;
  --flame: #3e4a6b;
  --copper: #3e4a6b;
  --paper: #f6f3ec;
  --ink: #141416;
  --muted: #5a5c66;
  --panel: #f3f0e8;
  --line: rgba(20, 20, 22, 0.16);
  --lift: #fffcf6;
}

.theme-picker { margin: 0 0 14px; }
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
}
.theme-swatch.on {
  outline: 2px solid var(--copper);
  outline-offset: 0;
}
.theme-dots {
  display: flex;
  width: 100%;
  height: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.theme-dots span { flex: 1; }
.theme-swatch strong {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.theme-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}
.theme-builder {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.theme-colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.theme-colors label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.theme-colors input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.theme-builder .btn { width: 100%; }