/* =============================================================================
   theme-switch.css — the site-wide theme toggle (light / dark / holiday) + the
   CSS-variable theming layer it drives. Self-contained, droppable on any page.
   JS (theme-switch.js) sets the --stt-* / --st-* variables from the saved config.
   Per-page bespoke dark styling hooks onto `body.theme-dark` / `html[data-theme=…]`.
   ========================================================================== */

:root {
  /* theming variables — JS overwrites these per active theme */
  --st-bg: #ffffff; --st-surface: #f8f9fa; --st-text: #1d2024;
  --st-muted: #666666; --st-accent: #4a90d9; --st-border: #e0e0e0;
  /* switch look — JS overwrites from config */
  --stt-h: 34px; --stt-modes: 2; --stt-top: 20px; --stt-x: 74px;
  --stt-track: linear-gradient(135deg, #2d3748, #1a202c);
  --stt-thumb: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* ── container (fixed; position configurable) ── */
.st-theme-toggle {
  position: fixed; z-index: 1015; display: flex; align-items: center;
  transition: opacity .3s ease, transform .3s ease;
}
.st-theme-toggle[data-pos="top-left"]    { top: var(--stt-top); left: var(--stt-x); }
.st-theme-toggle[data-pos="top-right"]   { top: var(--stt-top); right: var(--stt-x); }
.st-theme-toggle[data-pos="bottom-left"] { bottom: var(--stt-top); left: var(--stt-x); }
.st-theme-toggle[data-pos="bottom-right"]{ bottom: var(--stt-top); right: var(--stt-x); }
body.fab-tooltip-visible .st-theme-toggle { opacity: 0; pointer-events: none; }

/* ── the switch ── */
.st-switch {
  position: relative; display: inline-flex; align-items: center; padding: 0; border: none;
  height: var(--stt-h);
  width: calc(var(--stt-h) * var(--stt-modes));
  border-radius: calc(var(--stt-h) / 2);
  background: var(--stt-track); cursor: pointer; outline: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 3px rgba(0,0,0,.2);
  transition: width .3s cubic-bezier(.4,0,.2,1), box-shadow .25s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.st-switch:hover { box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 3px rgba(0,0,0,.2); transform: scale(1.05); }
.st-switch:active { transform: scale(.98); }
.st-switch:focus-visible { box-shadow: 0 0 0 3px rgba(74,144,217,.5); }

/* faint icons sitting in each slot */
.st-switch .st-slot {
  position: relative; z-index: 1; flex: 0 0 var(--stt-h); width: var(--stt-h); height: var(--stt-h);
  display: grid; place-items: center; font-size: calc(var(--stt-h) * .42); line-height: 1;
  opacity: .45; transition: opacity .25s; user-select: none;
}
.st-switch .st-slot svg { width: calc(var(--stt-h) * .5); height: calc(var(--stt-h) * .5); }
.st-switch .st-slot.is-active { opacity: 0; }   /* hidden under the thumb */

/* sliding thumb */
.st-switch .st-thumb {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  width: calc(var(--stt-h) - 8px); height: calc(var(--stt-h) - 8px); border-radius: 50%;
  background: var(--stt-thumb); box-shadow: 0 2px 6px rgba(0,0,0,.4);
  display: grid; place-items: center; font-size: calc(var(--stt-h) * .46); line-height: 1;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
}
.st-switch .st-thumb svg { width: calc(var(--stt-h) * .52); height: calc(var(--stt-h) * .52); }
.st-theme-toggle[data-state="light"]   .st-thumb { transform: translateX(0); }
.st-theme-toggle[data-state="dark"]    .st-thumb { transform: translateX(var(--stt-h)); }
.st-theme-toggle[data-state="holiday"] .st-thumb { transform: translateX(calc(var(--stt-h) * 2)); }

/* tooltip */
.st-theme-toggle .st-tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #1b1d21; color: #fff; font: 500 12px/1 -apple-system, "Segoe UI", sans-serif;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.st-theme-toggle:hover .st-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* bottom positions: flip the tooltip ABOVE the toggle so it stays on-screen */
.st-theme-toggle[data-pos^="bottom"] .st-tip { top: auto; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
.st-theme-toggle[data-pos^="bottom"]:hover .st-tip { transform: translateX(-50%) translateY(0); }

/* ── holiday background animations (opt-in via body class) ── */
body.st-holiday-anim { position: relative; }
.st-holiday-fx { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; }
.st-holiday-fx .st-fx-particle { position: absolute; top: -5vh; will-change: transform; animation: st-fall linear infinite; }
@keyframes st-fall { to { transform: translateY(110vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .st-holiday-fx { display: none; } }

/* ── generic dark baseline (per-page bespoke sheets refine on top) ── */
body.theme-dark { background: var(--st-bg); color: var(--st-text); }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }