/* Shared light / dark tokens for Proverbs and Portraits */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #0c0b0a;
  --parchment: #f2ebe0;
  --brass: #c4a574;
  --brass-soft: rgba(196, 165, 116, 0.45);
  --muted: rgba(242, 235, 224, 0.58);
  --line: rgba(242, 235, 224, 0.12);
  --panel: #161310;
  --page-deep: #0a0908;
  --page-mid: #12100e;
  --overlay: rgba(12, 11, 10, 0.55);
  --overlay-strong: rgba(12, 11, 10, 0.88);
  --chrome-bg: rgba(12, 11, 10, 0.35);
  --chrome-line: rgba(242, 235, 224, 0.35);
  --field-bg: rgba(12, 11, 10, 0.45);
  --field-line: rgba(242, 235, 224, 0.28);
  --placeholder: rgba(242, 235, 224, 0.4);
  --cal-day-bg: rgba(12, 11, 10, 0.45);
  --cal-day-line: rgba(242, 235, 224, 0.28);
  --cal-day-ink: #f2ebe0;
  --cal-label: rgba(242, 235, 224, 0.72);
  --cal-day-muted: rgba(242, 235, 224, 0.55);
  --cal-day-booked-bg: rgba(226, 180, 160, 0.14);
  --cal-day-selected-bg: rgba(196, 165, 116, 0.28);
  --cal-day-off-bg: rgba(226, 180, 160, 0.16);
  --theme-color: #0c0b0a;
}

[data-theme="light"] {
  color-scheme: light;
  --ink: #f3ece1;
  --parchment: #1c1814;
  --brass: #8a6a38;
  --brass-soft: rgba(138, 106, 56, 0.45);
  --muted: rgba(28, 24, 20, 0.68);
  --line: rgba(28, 24, 20, 0.2);
  --panel: #fff9f0;
  --page-deep: #e7dfd2;
  --page-mid: #ece4d6;
  --overlay: rgba(243, 236, 225, 0.72);
  --overlay-strong: #efe6d6;
  --chrome-bg: #f4ead8;
  --chrome-line: rgba(28, 24, 20, 0.22);
  --field-bg: #ffffff;
  --field-line: rgba(28, 24, 20, 0.28);
  --placeholder: rgba(28, 24, 20, 0.45);
  --cal-day-bg: #ffffff;
  --cal-day-line: rgba(28, 24, 20, 0.3);
  --cal-day-ink: #1c1814;
  --cal-label: rgba(28, 24, 20, 0.78);
  --cal-day-muted: rgba(28, 24, 20, 0.7);
  --cal-day-booked-bg: #ead8c8;
  --cal-day-selected-bg: #dfc48a;
  --cal-day-off-bg: #f0d4c6;
  --theme-color: #f3ece1;
}

.chrome {
  position: absolute;
  top: clamp(1rem, 3vh, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-toggle,
.chrome .sound {
  appearance: none;
  border: 1px solid var(--chrome-line);
  background: var(--chrome-bg);
  color: var(--parchment);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.chrome .sound:hover,
.chrome .sound:focus-visible {
  border-color: var(--brass);
  outline: none;
}

.theme-toggle--fixed {
  position: fixed;
  top: clamp(1rem, 3vh, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  z-index: 40;
}

.theme-toggle--inline {
  position: static;
}