:root {
  color-scheme: light;
  --parchment: #eee9dd;
  --paper: #f8f4e9;
  --paper-deep: #e5ddca;
  --ink: #26231f;
  --ink-soft: #686158;
  --gold: #a77b19;
  --gold-bright: #c19a3a;
  --verdigris: #416f60;
  --plum: #4c3749;
  --oxblood: #713f34;
  --line: rgba(83, 67, 45, 0.22);
  --line-light: rgba(248, 244, 233, 0.23);
  --shadow: 0 24px 70px rgba(42, 31, 19, 0.13);
  --display: 'Cormorant Garamond', Garamond, Georgia, serif;
  --body: 'Source Serif 4', Georgia, serif;
  --on-dark: #f8f4e9;
  --on-gold: #211c16;
  --body-glow-gold: rgba(167, 123, 25, 0.08);
  --body-glow-green: rgba(65, 111, 96, 0.08);
  --surface-wash: rgba(248, 244, 233, 0.7);
  --hero-card-background: rgba(248, 244, 233, 0.96);
  --hero-card-border: rgba(167, 123, 25, 0.36);
  --pending-wash: rgba(167, 123, 25, 0.035);
  --glyph-background: rgba(248, 244, 233, 0.56);
  --interactive-shadow: 0 16px 40px rgba(42, 31, 19, 0.1);
  --toggle-background: rgba(248, 244, 233, 0.78);
  --toggle-border: rgba(83, 67, 45, 0.3);
  --toggle-knob: #a77b19;
  --toggle-shift: 0;
  --sun-opacity: 1;
  --moon-opacity: 0.42;
  --plate-background: rgba(248, 244, 233, 0.82);
  --plate-border: rgba(167, 123, 25, 0.35);
  --register-glow: rgba(195, 154, 56, 0.14);
  --register-card: rgba(39, 27, 38, 0.58);
  --interlude-background: #27231f;
  --light-art-display: block;
  --dark-art-display: none;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --parchment: #151317;
  --paper: #211d22;
  --paper-deep: #2a242b;
  --ink: #f0e7d8;
  --ink-soft: #b9aea0;
  --gold: #d3aa55;
  --gold-bright: #e2bc65;
  --verdigris: #70a08f;
  --plum: #302332;
  --oxblood: #8f5549;
  --line: rgba(230, 207, 166, 0.18);
  --line-light: rgba(248, 244, 233, 0.15);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
  --body-glow-gold: rgba(211, 170, 85, 0.09);
  --body-glow-green: rgba(112, 160, 143, 0.075);
  --surface-wash: rgba(33, 29, 34, 0.68);
  --hero-card-background: rgba(27, 24, 28, 0.95);
  --hero-card-border: rgba(211, 170, 85, 0.38);
  --pending-wash: rgba(211, 170, 85, 0.045);
  --glyph-background: rgba(240, 231, 216, 0.055);
  --interactive-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  --toggle-background: rgba(12, 10, 14, 0.48);
  --toggle-border: rgba(230, 207, 166, 0.26);
  --toggle-knob: #e2bc65;
  --toggle-shift: 1.35rem;
  --sun-opacity: 0.42;
  --moon-opacity: 1;
  --plate-background: rgba(25, 22, 27, 0.9);
  --plate-border: rgba(211, 170, 85, 0.37);
  --register-glow: rgba(226, 188, 101, 0.13);
  --register-card: rgba(12, 10, 14, 0.45);
  --interlude-background: #0e0c10;
  --light-art-display: none;
  --dark-art-display: block;
  --ground: #151317;
  --surface: #211d22;
  --rule: #403942;
  --gold-glow: rgba(226, 188, 101, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --parchment: #151317;
    --paper: #211d22;
    --paper-deep: #2a242b;
    --ink: #f0e7d8;
    --ink-soft: #b9aea0;
    --gold: #d3aa55;
    --gold-bright: #e2bc65;
    --verdigris: #70a08f;
    --plum: #302332;
    --oxblood: #8f5549;
    --line: rgba(230, 207, 166, 0.18);
    --line-light: rgba(248, 244, 233, 0.15);
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
    --body-glow-gold: rgba(211, 170, 85, 0.09);
    --body-glow-green: rgba(112, 160, 143, 0.075);
    --surface-wash: rgba(33, 29, 34, 0.68);
    --hero-card-background: rgba(27, 24, 28, 0.95);
    --hero-card-border: rgba(211, 170, 85, 0.38);
    --pending-wash: rgba(211, 170, 85, 0.045);
    --glyph-background: rgba(240, 231, 216, 0.055);
    --interactive-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
    --toggle-background: rgba(12, 10, 14, 0.48);
    --toggle-border: rgba(230, 207, 166, 0.26);
    --toggle-knob: #e2bc65;
    --toggle-shift: 1.35rem;
    --sun-opacity: 0.42;
    --moon-opacity: 1;
    --plate-background: rgba(25, 22, 27, 0.9);
    --plate-border: rgba(211, 170, 85, 0.37);
    --register-glow: rgba(226, 188, 101, 0.13);
    --register-card: rgba(12, 10, 14, 0.45);
    --interlude-background: #0e0c10;
    --light-art-display: none;
    --dark-art-display: block;
    --ground: #151317;
    --surface: #211d22;
    --rule: #403942;
    --gold-glow: rgba(226, 188, 101, 0.09);
  }
}

body {
  background:
    radial-gradient(circle at 8% 12%, var(--body-glow-gold), transparent 27rem),
    radial-gradient(circle at 92% 58%, var(--body-glow-green), transparent 30rem),
    var(--parchment, var(--ground));
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link { color: var(--parchment, var(--ground)); }
.site-nav--overlay { color: var(--on-dark); }
.hero-card { background: var(--hero-card-background); border-color: var(--hero-card-border); }
.section--paper { background: var(--surface-wash); }
.feature-lexicon,
.field-letter { color: var(--on-dark); }
.room-card--pending,
.route--pending,
.archive-room--pending {
  background:
    linear-gradient(145deg, var(--pending-wash), transparent 58%),
    var(--paper);
}
.chapter-glyph { background: var(--glyph-background); }
a.room-card:hover,
a.room-card:focus-visible { box-shadow: var(--interactive-shadow); }
.field-letter .formkit-input,
.field-letter .formkit-alert { color: var(--on-dark) !important; }
.field-letter .formkit-submit { color: var(--on-gold) !important; }
.button--gold { color: var(--on-dark); }
.button--quiet[href] { cursor: pointer; }
.button--quiet[href]:hover,
.button--quiet[href]:focus-visible {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.theme-toggle {
  flex: 0 0 auto;
  width: 3.15rem;
  height: 1.75rem;
  padding: 0;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.site-nav--overlay .theme-toggle { color: var(--on-dark); }

.theme-toggle__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--toggle-background);
  border: 1px solid var(--toggle-border);
  border-radius: inherit;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12);
}

.site-nav--overlay .theme-toggle__track {
  background: rgba(12, 10, 14, 0.5);
  border-color: rgba(248, 244, 233, 0.42);
}

.theme-toggle__sun,
.theme-toggle__moon {
  position: absolute;
  top: 50%;
  z-index: 1;
  color: currentColor;
  font-family: var(--display, var(--fd));
  font-size: 0.72rem;
  line-height: 1;
  transform: translateY(-50%);
}

.theme-toggle__sun { left: 0.48rem; opacity: var(--sun-opacity); }
.theme-toggle__moon { right: 0.44rem; opacity: var(--moon-opacity); }

.theme-toggle__knob {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--toggle-knob);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
  transform: translateX(var(--toggle-shift));
  transition: transform 180ms ease, background-color 180ms ease;
}

.theme-toggle:hover .theme-toggle__track { border-color: var(--gold); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold-bright, var(--gold)); outline-offset: 4px; }

.lexicon-nav .theme-toggle { margin-left: auto; }

@media (max-width: 560px) {
  .nav-links { gap: 0.9rem; }
  .nav-links a:last-of-type { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__knob { transition: none; }
}