/* Light/dark theme for the public pages (home + participant portal).
   Dark is the base; html[data-theme="light"] overrides the palette. theme.js sets
   data-theme before first paint from the saved choice or the OS preference. */
:root {
  color-scheme: dark;
  /* translucent "wash" tints used for subtle panels/borders */
  --w02: rgba(255,255,255,0.02); --w03: rgba(255,255,255,0.03); --w04: rgba(255,255,255,0.04);
  --w06: rgba(255,255,255,0.06); --w08: rgba(255,255,255,0.08); --w12: rgba(255,255,255,0.12);
  --w14: rgba(255,255,255,0.14); --w20: rgba(255,255,255,0.2);
  /* status text colours (readable on their tinted backgrounds) */
  --c-amber-text: #fbbf24; --c-amber: #f59e0b; --c-red-text: #f87171; --c-green-text: #34d399;
  --c-green: #10b981; --c-blue-text: #93c5fd; --c-orange-text: #fb923c; --c-price: #cbd5e1;
  --c-faint: #4b5563; --c-fainter: #374151;
  --menu-bg: #0d1117; --primary-fg: #06101f;
  --glass: rgba(17,24,39,0.85); --glass-strong: rgba(17,24,39,0.9);
  --shadow: rgba(0,0,0,0.35);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9; --panel: #ffffff; --panel2: #f1f5f9; --text: #0f172a; --muted: #52607a;
  --line: rgba(15,23,42,0.12); --btn: rgba(15,23,42,0.05); --btnHover: rgba(15,23,42,0.09);
  --accent: #2563eb; --accent2: #1d4ed8;
  --w02: rgba(15,23,42,0.02); --w03: rgba(15,23,42,0.03); --w04: rgba(15,23,42,0.04);
  --w06: rgba(15,23,42,0.05); --w08: rgba(15,23,42,0.07); --w12: rgba(15,23,42,0.10);
  --w14: rgba(15,23,42,0.12); --w20: rgba(15,23,42,0.18);
  --c-amber-text: #b45309; --c-amber: #d97706; --c-red-text: #dc2626; --c-green-text: #047857;
  --c-green: #059669; --c-blue-text: #1d4ed8; --c-orange-text: #c2410c; --c-price: #1e293b;
  --c-faint: #6b7280; --c-fainter: #9ca3af;
  --menu-bg: #ffffff; --primary-fg: #ffffff;
  --glass: rgba(255,255,255,0.92); --glass-strong: #ffffff;
  --shadow: rgba(15,23,42,0.10);
}
/* Shared app.css components that hard-code dark backgrounds */
html[data-theme="light"] .topbar { background: rgba(255,255,255,0.88); }
html[data-theme="light"] .panel { background: #fff; box-shadow: 0 8px 24px var(--shadow); }
html[data-theme="light"] .inp { background: #fff; }
html[data-theme="light"] .inp option, html[data-theme="light"] .inp optgroup { background: #fff; }
html[data-theme="light"] .btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="light"] .btn.primary:hover { background: #1d4ed8; }
html[data-theme="light"] .btn.danger { color: #b91c1c; }
html[data-theme="light"] .mobileMenu { background: #fff; }
html[data-theme="light"] footer { border-top-color: var(--line) !important; }

/* Toggle button */
.themeToggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--btn); color: var(--text);
  font-size: 16px; line-height: 1; padding: 0;
}
.themeToggle:hover { background: var(--btnHover); }
.themeToggle.floating { position: fixed; top: 12px; right: 12px; z-index: 900; box-shadow: 0 4px 14px var(--shadow); }