/* Dark mode theme */
.theme-dark {
  --color-bg: #1a1a1a;
  --color-fg: #e5e5e5;
  --color-accent: #60a5fa;
  --color-muted: #9ca3af;
  --focus-ring: 2px solid #60a5fa;
  --color-card-bg: #2a2a2a;
  --color-border: #404040;
  --color-header-bg: #0f0f0f;
  --color-footer-bg: #0f0f0f;
  --color-accent-bg: #1e3a5f;
  --color-accent-fg: #93c5fd;
  --color-accent-bg-hover: #1e40af;
  --color-tag-bg: #374151;
  --color-tag-fg: #d1d5db;
  --color-hover-bg: #374151;
  --color-hover-fg: #f3f4f6;
  --color-accent-hover: #3b82f6;
  --color-error-bg: #451a1a;
  --color-error-fg: #fca5a5;
}

.theme-dark .demo-banner {
  background: #220000;
  color: #ff7f7f;
  border-bottom: 1px solid #ff7f7f;
}

.theme-dark .btn {
  background: transparent;
}

.theme-dark .wp-wp1 { color: #a7c7e7; }
.theme-dark .wp-wp2 { color: #a7e7c7; }
.theme-dark .wp-wp3 { color: #e7a7c7; }
.theme-dark .wp-wp4 { color: #c7a7e7; }
.theme-dark .wp-wp5 { color: #e7c7a7; }
.theme-dark .wp-wp6 { color: #a7e7e7; }
.theme-dark .wp-wp7 { color: #e7e7a7; }

.theme-dark .member-modal p {
  color: var(--color-tag-fg);
}

/* High contrast theme */
.theme-high-contrast {
  --color-bg: white;
  --color-fg: black;
  --color-accent: black;
  --color-muted: black;
  --color-card-bg: white;
  --color-border: black;
  --color-header-bg: white;
  --color-footer-bg: white;
  --color-accent-bg: black;
  --color-accent-fg: white;
  --color-accent-bg-hover: black;
  --color-tag-bg: black;
  --color-tag-fg: white;
  --color-hover-bg: black;
  --color-hover-fg: white;
  --color-accent-hover: black;
  --color-error-bg: white;
  --color-error-fg: black;
  --focus-ring: 2px solid black;
}

.theme-high-contrast a {
  text-decoration: underline !important;
}

.theme-dark.theme-high-contrast {
  --color-bg: black;
  --color-fg: white;
  --color-accent: white;
  --color-muted: white;
  --color-card-bg: black;
  --color-border: white;
  --color-header-bg: black;
  --color-footer-bg: black;
  --color-accent-bg: white;
  --color-accent-fg: black;
  --color-accent-bg-hover: white;
  --color-tag-bg: white;
  --color-tag-fg: black;
  --color-hover-bg: white;
  --color-hover-fg: black;
  --color-accent-hover: white;
  --color-error-bg: black;
  --color-error-fg: white;
  --focus-ring: 2px solid white;
}

.theme-dark.theme-high-contrast a {
  text-decoration: underline !important;
}

/* Override WP label colors in high contrast */
.theme-high-contrast .wp-wp1,
.theme-high-contrast .wp-wp2,
.theme-high-contrast .wp-wp3,
.theme-high-contrast .wp-wp4,
.theme-high-contrast .wp-wp5,
.theme-high-contrast .wp-wp6,
.theme-high-contrast .wp-wp7 {
  color: black !important;
}

.theme-dark.theme-high-contrast .wp-wp1,
.theme-dark.theme-high-contrast .wp-wp2,
.theme-dark.theme-high-contrast .wp-wp3,
.theme-dark.theme-high-contrast .wp-wp4,
.theme-dark.theme-high-contrast .wp-wp5,
.theme-dark.theme-high-contrast .wp-wp6,
.theme-dark.theme-high-contrast .wp-wp7 {
  color: white !important;
}

/* Override member-card-expand button in high contrast */
.theme-high-contrast .member-card-expand {
  background: #ffd60a !important;
  color: black !important;
}

.theme-dark.theme-high-contrast .member-card-expand {
  background: #ffd60a !important;
  color: black !important;
}

/* Override a11y-toggle-btn in high contrast */
.theme-high-contrast .a11y-toggle-btn {
  background: #ffd60a !important;
  color: black !important;
}

.theme-dark.theme-high-contrast .a11y-toggle-btn {
  background: #ffd60a !important;
  color: black !important;
}

/* Override member-modal-content p in dark high contrast */
.theme-dark.theme-high-contrast .member-modal-content p {
  color: white !important;
}