/*
 * Shared by the Elysian themes of the guide (elysian.css) and the wiki (wiki.css):
 * the palette, the night sky canvas and the Classic/Elysian theme switch.
 */

/* Palette: the same tokens as the main website */
:root.elysian-theme {
  --el-bg: #11100d;
  --el-surface: #1c1813;
  --el-surface-raised: #241f18;
  --el-gold: #c8a15f;
  --el-gold-bright: #e0bd78;
  --el-text: #c9c0b3;
  --el-text-strong: #f2eee7;
  --el-muted: #93897c;
  --el-line: rgba(242, 238, 231, 0.1);
  --el-line-gold: rgba(200, 161, 95, 0.28);
  --el-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  --el-font-body: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --el-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* Night sky (drawn by stars.js) */
html:not(.elysian-theme) .elysian-sky {
  display: none;
}
.elysian-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html.elysian-theme ::selection {
  background: rgba(200, 161, 95, 0.35);
  color: var(--el-text-strong);
}

/* Footer theme switch: Classic (Bright) [slider] Elysian (Dark). Not scoped to the
   theme, so it looks right in both. */
.elysian-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.3rem 1.4rem; /* sits on the same line as the footer links */
  vertical-align: middle;
}
.elysian-theme-switch .ets-label {
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: #8a8a8a;
  cursor: pointer;
}
.elysian-theme-switch .ets-label.is-active {
  color: #333;
  font-weight: 600;
}
html.elysian-theme .elysian-theme-switch .ets-label {
  color: #7d7468;
}
html.elysian-theme .elysian-theme-switch .ets-label.is-active {
  color: var(--el-gold-bright);
}
.elysian-theme-switch .ets-track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #b9b9b9;
  border-radius: 12px;
  background: #e2e2e2;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.elysian-theme-switch .ets-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 180ms ease, background-color 180ms ease;
}
.elysian-theme-switch .ets-track[aria-checked="true"] {
  background: rgba(200, 161, 95, 0.35);
  border-color: #c8a15f;
}
.elysian-theme-switch .ets-track[aria-checked="true"] .ets-thumb {
  transform: translateX(18px);
  background: #e0bd78;
}
.elysian-theme-switch button:focus-visible {
  outline: 2px solid #c8a15f;
  outline-offset: 2px;
}
/* Phones: the switch gets its own centred line. */
@media (max-width: 600px) {
  .elysian-theme-switch {
    display: flex;
    justify-content: center;
    margin: 0.6rem 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .elysian-theme-switch .ets-track,
  .elysian-theme-switch .ets-thumb {
    transition: none;
  }
}