/* ============================================================
   THEMES — palette skins over the noir engine.
   The engine's every color routes through tokens.css variables,
   so a theme is a pure palette override. Same cinema, new mood.
     royal     — the original: violet noir + antique gold (default)
     valentine — wine noir + rose gold, drifting hearts
     noel      — evergreen midnight + christmas gold, falling snow
     jubilee   — sapphire midnight + champagne, confetti motes
   ============================================================ */

/* ---- VALENTINE ------------------------------------------ */
html[data-theme="valentine"] {
  --noir-void:      oklch(11% 0.020 15);
  --noir-obsidian:  oklch(14% 0.030 18);
  --noir-surface:   oklch(18% 0.045 20);
  --noir-surface-2: oklch(22% 0.055 22);
  --violet-deep:    oklch(30% 0.100 18);
  --violet-mid:     oklch(40% 0.135 15);
  --violet-glow:    oklch(52% 0.175 12);    /* crimson bloom */

  --gold-antique:   oklch(70% 0.090 40);    /* rose gold */
  --gold:           oklch(77% 0.110 35);
  --gold-bright:    oklch(87% 0.115 30);
  --champagne:      oklch(91% 0.045 35);

  --ink-85: oklch(85% 0.020 25);
  --ink-70: oklch(70% 0.028 22);
  --ink-55: oklch(56% 0.030 20);
  --ink-40: oklch(44% 0.028 18);
}

/* ---- NOEL ------------------------------------------------ */
html[data-theme="noel"] {
  --noir-void:      oklch(11% 0.018 175);
  --noir-obsidian:  oklch(14% 0.026 172);
  --noir-surface:   oklch(18% 0.038 170);
  --noir-surface-2: oklch(22% 0.046 168);
  --violet-deep:    oklch(30% 0.075 165);
  --violet-mid:     oklch(38% 0.095 162);
  --violet-glow:    oklch(50% 0.115 160);   /* emerald bloom */

  /* christmas gold stays warm and bright */
  --gold-antique:   oklch(72% 0.110 80);
  --gold:           oklch(79% 0.130 82);
  --gold-bright:    oklch(88% 0.145 88);
  --champagne:      oklch(92% 0.050 88);

  --ink-85: oklch(85% 0.018 170);
  --ink-70: oklch(70% 0.024 168);
  --ink-55: oklch(56% 0.026 166);
  --ink-40: oklch(44% 0.024 164);
}

/* ---- JUBILEE (birthday) ---------------------------------- */
html[data-theme="jubilee"] {
  --noir-void:      oklch(11% 0.022 268);
  --noir-obsidian:  oklch(14% 0.032 266);
  --noir-surface:   oklch(18% 0.045 264);
  --noir-surface-2: oklch(22% 0.055 262);
  --violet-deep:    oklch(30% 0.100 262);
  --violet-mid:     oklch(40% 0.130 258);
  --violet-glow:    oklch(54% 0.160 255);   /* sapphire bloom */

  --gold-antique:   oklch(72% 0.095 88);    /* champagne */
  --gold:           oklch(80% 0.115 90);
  --gold-bright:    oklch(89% 0.130 94);
  --champagne:      oklch(93% 0.045 92);

  --ink-85: oklch(85% 0.020 265);
  --ink-70: oklch(70% 0.026 262);
  --ink-55: oklch(56% 0.028 260);
  --ink-40: oklch(44% 0.026 258);
}

/* Theme changes glide — the whole room re-lights, no hard cut */
html[data-theme] body,
html body {
  transition: background-color 900ms var(--ease-in-out-cine);
}

/* ============================================================
   THEME DOCK — jewel dots, bottom-left. Rendered only when the
   config enables the toggle (demo/showcase mode).
   ============================================================ */
.theme-dock {
  position: fixed; bottom: 24px; left: 24px; z-index: var(--z-music);
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 10px;
  background: color-mix(in oklch, var(--noir-obsidian) 82%, transparent);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.theme-dock.show { opacity: 1; pointer-events: auto; transform: none; }

.theme-dock__dot {
  position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid color-mix(in oklch, white 25%, transparent);
  cursor: pointer; padding: 0;
  transition: transform var(--dur-xfast) var(--ease-out-expo), box-shadow var(--dur-fast);
}
.theme-dock__dot:hover { transform: scale(1.22); }
.theme-dock__dot[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--noir-void), 0 0 0 3.5px var(--gold), 0 0 18px color-mix(in oklch, var(--gold) 40%, transparent);
}

/* jewel fills */
.theme-dock__dot--royal     { background: radial-gradient(circle at 32% 30%, oklch(62% 0.16 305), oklch(30% 0.10 300) 60%, oklch(16% 0.05 295)); }
.theme-dock__dot--valentine { background: radial-gradient(circle at 32% 30%, oklch(62% 0.19 15),  oklch(32% 0.13 18) 60%, oklch(16% 0.06 20)); }
.theme-dock__dot--noel      { background: radial-gradient(circle at 32% 30%, oklch(58% 0.12 162), oklch(30% 0.08 168) 60%, oklch(15% 0.04 172)); }
.theme-dock__dot--jubilee   { background: radial-gradient(circle at 32% 30%, oklch(64% 0.15 258), oklch(32% 0.11 262) 60%, oklch(16% 0.05 266)); }

/* label whispers out to the right on hover */
.theme-dock__dot::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagne); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-xfast), transform var(--dur-xfast) var(--ease-out-soft);
}
.theme-dock__dot:hover::after { opacity: 0.85; transform: translateY(-50%); }

@media (max-width: 720px) {
  .theme-dock { bottom: 18px; left: 14px; padding: 10px 8px; gap: 8px; }
  .theme-dock__dot { width: 19px; height: 19px; }
  .theme-dock__dot::after { display: none; }
}