/* atxbbs theme + font size system
 * Redefines the same CSS variables the site already uses (--bg, --tx, --sf, etc.)
 * so every existing page inherits the new theme without touching its own styles.
 */

/* ===== DEFAULT (phosphor CRT) ===== */
html:not(.theme-light):not(.theme-sepia):not(.theme-contrast) {
  /* uses each page's own :root definitions — no override */
}

/* ===== LIGHT (black on white) ===== */
html.theme-light {
  --bg: #f0f8ea !important;
  --sf: #e5eed6 !important;
  --s2: #dbe5c7 !important;
  --bd: #b8c79e !important;
  --tx: #1a1a1a !important;
  --dm: #555 !important;
  --mt: #777 !important;
  --green: #0a7d2d !important;
  --phosphor: #0a7d2d !important;
  --amber: #8a5a00 !important;
  --red: #aa1c30 !important;
  --purple: #6b21a8 !important;
  --cream: #1a1a1a !important;
  --gray-400: #555 !important;
  --gray-600: #777 !important;
  --text: #1a1a1a !important;
  --text-dim: #555 !important;
  --green-dim: rgba(10,125,45,.1) !important;
  background: #f0f8ea !important;
  color: #1a1a1a !important;
}
html.theme-light body { background: #f0f8ea !important; color: #1a1a1a !important; }
html.theme-light a { color: #0a7d2d !important; }
html.theme-light a:hover { color: #8a5a00 !important; }
html.theme-light code, html.theme-light pre {
  background: #dbe5c7 !important; color: #1a1a1a !important;
}

/* ===== SEPIA (warm low-contrast, easy on eyes) ===== */
html.theme-sepia {
  --bg: #f4ecd8 !important;
  --sf: #ece0c8 !important;
  --s2: #e0d3ba !important;
  --bd: #c4b38a !important;
  --tx: #3d2e1a !important;
  --dm: #6d5633 !important;
  --mt: #8a7355 !important;
  --green: #5a6a1a !important;
  --phosphor: #5a6a1a !important;
  --amber: #8a4a00 !important;
  --purple: #5c2f5c !important;
  --cream: #3d2e1a !important;
  --text: #3d2e1a !important;
  --text-dim: #6d5633 !important;
  --green-dim: rgba(90,106,26,.1) !important;
  background: #f4ecd8 !important;
  color: #3d2e1a !important;
}
html.theme-sepia body { background: #f4ecd8 !important; color: #3d2e1a !important; }
html.theme-sepia a { color: #7a4020 !important; }
html.theme-sepia a:hover { color: #aa5030 !important; }

/* ===== HIGH CONTRAST (bright white on pure black for low vision) ===== */
html.theme-contrast {
  --bg: #000000 !important;
  --sf: #0a0a0a !important;
  --s2: #141414 !important;
  --bd: #555 !important;
  --tx: #ffffff !important;
  --dm: #ccc !important;
  --mt: #aaa !important;
  --green: #00ff00 !important;
  --phosphor: #00ff00 !important;
  --amber: #ffe000 !important;
  --red: #ff4040 !important;
  --purple: #d070ff !important;
  --cream: #ffffff !important;
  --text: #ffffff !important;
  --text-dim: #ddd !important;
  --green-dim: rgba(0,255,0,.2) !important;
  background: #000 !important;
  color: #fff !important;
}
html.theme-contrast body { background: #000 !important; color: #fff !important; }
html.theme-contrast a { color: #00ff00 !important; }
html.theme-contrast a:hover { color: #ffe000 !important; }

/* ===== FONT SIZE (applied to html element) ===== */
html.fs-sm { font-size: 13px !important; }
html.fs-md { font-size: 15.5px !important; }   /* default, subtly bigger than 15 */
html.fs-lg { font-size: 18px !important; }
html.fs-xl { font-size: 22px !important; }

/* Boost readability: more line-height + slightly heavier body weight */
html.fs-lg body, html.fs-xl body { line-height: 1.75 !important; }
html.fs-xl body { letter-spacing: 0.01em; }

/* ===== FLOATING TOGGLE WIDGET ===== */
#theme-toggle-btn {
  position: fixed; bottom: 14px; right: 14px; z-index: 9998;
  background: rgba(0,0,0,.85); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; width: 42px; height: 42px;
  cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace;
  transition: transform .15s, background .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#theme-toggle-btn:hover { transform: scale(1.08); background: rgba(20,20,20,.95); }
html.theme-light #theme-toggle-btn { background: rgba(255,255,255,.9); color: #1a1a1a; border-color: #888; }
html.theme-sepia #theme-toggle-btn { background: rgba(244,236,216,.9); color: #3d2e1a; border-color: #8a7355; }

#theme-toggle-panel {
  position: fixed; bottom: 64px; right: 14px; z-index: 9999;
  background: rgba(15,15,12,.95); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 14px; font-family: 'Courier New', monospace;
  min-width: 220px; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  font-size: 13px !important;  /* widget itself doesn't scale with fs-* */
  line-height: 1.5 !important;
}
#theme-toggle-panel[hidden] { display: none; }
html.theme-light #theme-toggle-panel { background: rgba(255,255,255,.98); color: #1a1a1a; border-color: #888; }
html.theme-sepia #theme-toggle-panel { background: rgba(244,236,216,.98); color: #3d2e1a; border-color: #8a7355; }

#theme-toggle-panel h4 { margin: 0 0 8px; font-size: 11px !important; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; font-weight: normal; }
#theme-toggle-panel .row { display: flex; gap: 6px; margin-bottom: 12px; }
#theme-toggle-panel .row:last-child { margin-bottom: 0; }
#theme-toggle-panel button {
  flex: 1; padding: 6px 4px; font-family: 'Courier New', monospace; font-size: 12px !important;
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 4px; cursor: pointer; opacity: .65; transition: opacity .15s;
}
#theme-toggle-panel button:hover { opacity: 1; }
#theme-toggle-panel button.active { opacity: 1; background: currentColor; color: #000; border-color: transparent; font-weight: bold; }
html.theme-light #theme-toggle-panel button.active { background: #1a1a1a; color: #fff; }
html.theme-sepia #theme-toggle-panel button.active { background: #3d2e1a; color: #f4ecd8; }

/* Color swatches for theme buttons */
#tt-phosphor { background: linear-gradient(135deg, #0d1108 50%, #33ff33 50%) !important; }
#tt-light    { background: linear-gradient(135deg, #fff 50%, #1a1a1a 50%) !important; color: transparent !important; }
#tt-sepia    { background: linear-gradient(135deg, #f4ecd8 50%, #5a6a1a 50%) !important; color: transparent !important; }
#tt-contrast { background: linear-gradient(135deg, #000 50%, #00ff00 50%) !important; color: transparent !important; }
#theme-toggle-panel button[id^="tt-"]:hover { opacity: 1; transform: scale(1.05); }
#theme-toggle-panel button[id^="tt-"].active { border: 3px solid #fbbf24 !important; opacity: 1; }

@media (max-width: 640px) {
  #theme-toggle-btn { bottom: 10px; right: 10px; width: 38px; height: 38px; font-size: 16px; }
  #theme-toggle-panel { right: 10px; bottom: 56px; min-width: 200px; }
}