/* S6-Classic-RestoreKnownGood: restore the original working theme palette and selector behavior */

/* THE THREE-STEP LADDER, rebuilt under the no-white ceiling (2026-08-16).
   Each light palette here is a ground, a content card standing on it, and a
   highlight between the two. The card used to be #ffffff and the ground a
   cool grey; with white barred, the card takes the brightest surface the rule
   allows (#f2e6d2, OKLCH L 0.929) and ground and highlight were re-cut BELOW
   it at the same lightness intervals they had before — otherwise all three
   collapse onto the ceiling and the page loses its card entirely, which is
   exactly what the first mechanical pass did. Warm neutrals, hue 80.7, the
   same axis the ceiling itself is tinted along. */
:root,
body[data-theme="scarlet-classic"] {
  --mofa-bg: #dcd1c0;
  --mofa-surface: #f2e6d2;
  --mofa-text: #28231a;
  --mofa-muted: #625c51;
  --mofa-line: #cac1b3;
  --mofa-brand: #bb0000;
  --mofa-brand-strong: #8f0000;
  --mofa-accent: #645e53;
  --mofa-highlight: #e6ddcf;
}

body[data-theme="buckeye-steel"] {
  --mofa-bg: #dcd2c0;
  --mofa-surface: #f2e6d2;
  --mofa-text: #1c170e;
  --mofa-muted: #544e44;
  --mofa-line: #c5bdae;
  --mofa-brand: #a61414;
  --mofa-brand-strong: #7d1010;
  --mofa-accent: #4e4a46;
  --mofa-highlight: #e7decf;
}

body[data-theme="ohio-river"] {
  --mofa-bg: #dfd4c3;
  --mofa-surface: #f2e6d2;
  --mofa-text: #29241b;
  --mofa-muted: #5c574c;
  --mofa-line: #c8c0b1;
  --mofa-brand: #b6211e;
  --mofa-brand-strong: #8e1919;
  --mofa-accent: #58574f;
  --mofa-highlight: #e6ddce;
}

body[data-theme="festival-noir"] {
  --mofa-bg: #211c13;
  --mofa-surface: #2b261c;
  --mofa-text: #f2e6d2;
  --mofa-muted: #c3bbb0;
  --mofa-line: #46433e;
  --mofa-brand: #d93030;
  --mofa-brand-strong: #f05d5d;
  --mofa-accent: #ddd6ca;
  --mofa-highlight: #33302c;
}

.mofa-theme-dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  width: min(220px, calc(100vw - 1.5rem));
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  border: 1px solid var(--mofa-line);
  background: rgba(242, 230, 210, 0.94);
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
  backdrop-filter: blur(4px);
}

body[data-theme="festival-noir"] .mofa-theme-dock {
  background: rgba(43, 38, 28, 0.94);
}

.mofa-theme-dock__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--mofa-muted);
  font: 700 0.74rem/1.2 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mofa-theme-dock__select {
  width: 100%;
  border: 1px solid var(--mofa-line);
  background: var(--mofa-surface);
  color: var(--mofa-text);
  border-radius: 0.5rem;
  padding: 0.42rem 0.5rem;
  font: 600 0.84rem/1.2 "Helvetica Neue", Arial, sans-serif;
}

.mofa-theme-dock__swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.mofa-swatch {
  display: block;
  width: 100%;
  height: 0.45rem;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 16%);
}

.mofa-swatch--scarlet { background: #bb0000; }
.mofa-swatch--red { background: #d43a3a; }
.mofa-swatch--black { background: #161109; }
.mofa-swatch--white { background: #f2e6d2; }
.mofa-swatch--gray { background: #a8a196; }

@media (max-width: 640px) {
  .mofa-theme-dock {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: auto;
  }
}