/* =============================
   Site-wide theme tokens
   =============================
   Dark is the default (:root) and matches today's hardcoded colors exactly,
   so loading this file changes nothing visually until a page's other CSS
   is migrated to consume these custom properties. Light overrides live
   under :root[data-theme="light"], toggled by www/js/theme-toggle.js.
   Brand colors (blue/green) are intentionally identical in both themes;
   everything else (backgrounds, text, borders, overlays, shadows, and the
   error/warning colors, which need extra contrast on a white background)
   has a theme-specific value. */

:root {
  /* Backgrounds */
  --bg-page: #0F172A;
  --bg-surface: #1E293B;
  --bg-surface-alt: #1F2937;
  --bg-surface-deep: #111827;
  --bg-page-translucent: rgba(15, 23, 42, 0.92);

  /* Borders */
  --border-default: #334155;
  --border-subtle: #374151;
  --border-strong: #475569;

  /* Text */
  --text-primary: #F9FAFB;
  --text-strong: #FFFFFF;
  --text-secondary: #F1F5F9;
  --text-muted: #9CA3AF;
  --text-muted-2: #94A3B8;
  --text-dim: #6B7280;
  --text-faint: #D1D5DB;
  --text-faint-2: #E5E7EB;
  --text-faint-3: #CBD5E1;
  --text-disabled: #64748B;

  /* Overlay tints — hover/active states layered on a surface */
  --overlay-weak: rgba(255, 255, 255, 0.04);
  --overlay-soft: rgba(255, 255, 255, 0.06);
  --overlay-mid: rgba(255, 255, 255, 0.08);
  --overlay-strong: rgba(255, 255, 255, 0.1);
  --overlay-stronger: rgba(255, 255, 255, 0.12);

  /* Scrims — shadows/overlays on top of content (modals, image captions) */
  --scrim-weak: rgba(0, 0, 0, 0.25);
  --scrim-mid: rgba(0, 0, 0, 0.35);
  --scrim-strong: rgba(0, 0, 0, 0.4);
  --scrim-stronger: rgba(0, 0, 0, 0.55);

  /* Brand — stable across themes */
  --brand-blue: #3B82F6;
  --brand-blue-hover: #2563EB;
  --brand-green: #10B981;
  --brand-green-hover: #059669;
  --accent-link: #7DD3FC;
  --accent-indigo: #818cf8;

  /* Status — contrast-adjusted per theme */
  --status-error: #F87171;
  --status-error-strong: #FCA5A5;
  --status-error-solid: #EF4444;
  --status-error-soft-bg: rgba(239, 68, 68, 0.1);
  --status-warning: #F59E0B;
  --status-warning-strong: #FBBF24;
  --status-warning-soft: #FDE68A;
  --status-warning-soft-bg: rgba(245, 158, 11, 0.1);
  --status-warning-bg: #78350F;
  --status-success-bg: #064E3B;
  --status-success-text: #6EE7B7;

  /* Secondary link blue — lighter than --brand-blue for pop on dark surfaces */
  --link-blue: #60A5FA;
  --link-blue-hover: #93C5FD;
}

:root[data-theme="light"] {
  --bg-page: #F8FAFC;
  --bg-page-translucent: rgba(248, 250, 252, 0.92);
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F1F5F9;
  --bg-surface-deep: #E2E8F0;

  --border-default: #CBD5E1;
  --border-subtle: #E2E8F0;
  --border-strong: #94A3B8;

  --text-primary: #0F172A;
  --text-strong: #0F172A;
  --text-secondary: #1E293B;
  --text-muted: #475569;
  --text-muted-2: #64748B;
  --text-dim: #64748B;
  --text-faint: #334155;
  --text-faint-2: #334155;
  --text-faint-3: #475569;
  --text-disabled: #94A3B8;

  --overlay-weak: rgba(15, 23, 42, 0.04);
  --overlay-soft: rgba(15, 23, 42, 0.06);
  --overlay-mid: rgba(15, 23, 42, 0.08);
  --overlay-strong: rgba(15, 23, 42, 0.1);
  --overlay-stronger: rgba(15, 23, 42, 0.12);

  --scrim-weak: rgba(15, 23, 42, 0.1);
  --scrim-mid: rgba(15, 23, 42, 0.18);
  --scrim-strong: rgba(15, 23, 42, 0.25);
  --scrim-stronger: rgba(15, 23, 42, 0.4);

  /* brand-blue / brand-green / brand hovers: unchanged from :root */
  --accent-link: #0369A1;
  --accent-indigo: #4F46E5;

  --status-error: #DC2626;
  --status-error-strong: #B91C1C;
  --status-error-solid: #DC2626;
  --status-error-soft-bg: rgba(220, 38, 38, 0.08);
  --status-warning: #B45309;
  --status-warning-strong: #92400E;
  --status-warning-soft: #FEF3C7;
  --status-warning-soft-bg: rgba(180, 83, 9, 0.08);
  --status-warning-bg: #FEF3C7;
  --status-success-bg: #D1FAE5;
  --status-success-text: #065F46;

  --link-blue: #1D4ED8;
  --link-blue-hover: #1E40AF;
}

/* =============================
   Theme toggle button
   =============================
   Bottom-right everywhere. Top corners are already occupied on event pages
   by .action-buttons (top-left) and .floating-ad/.attendee-badge (top-right)
   in main.css, so bottom avoids covering the ad banner. Sits above header
   bars and the ad banner (z-index 100) but below full-screen overlays like
   .modal/.loading-screen (z-index 9999), so an open modal covers it. */
.theme-toggle-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 2000;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--overlay-strong);
  background: var(--scrim-stronger);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 24px var(--scrim-weak);
  backdrop-filter: blur(2px);
  transition: background 0.15s ease, transform 0.1s ease;
}

.theme-toggle-btn:hover {
  background: var(--overlay-stronger);
}

.theme-toggle-btn:active {
  transform: scale(0.94);
}

.theme-toggle-btn .icon-moon {
  display: none;
}

[data-theme="light"] .theme-toggle-btn .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle-btn .icon-moon {
  display: block;
}

@media (max-width: 480px) {
  .theme-toggle-btn {
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}