html[data-wpar-theme="dark"] .wpar-app { --wpar-star: #ffc83d; }
/* Theme: light/dark appearance. Loaded last so component styles can use the shared tokens. */
html[data-wpar-theme="dark"] .wpar-app {
  --bg: #0f1117;
  --surface: #171a22;
  --ink: #f3f5fa;
  --muted: #a8afc2;
  --line: #2b3142;
  --accent: #7886ff;
  --accent-ink: #ffffff;
  --accent-soft: #252c52;
  --navy: #090d2f;
  --glow: #e8c75a;
  --field: #202533;
  color-scheme: dark;
}

html[data-wpar-theme="dark"] body:has(.wpar-app) {
  background-color: var(--wpar-dark-bg, #0f1117);
  color-scheme: dark;
}

/* Shared surfaces that still use literal light colours in individual components. */
html[data-wpar-theme="dark"] .wpar-app .wpar-btn--outline {
  border-color: #424a64;
}

html[data-wpar-theme="dark"] .wpar-app .wpar-menu__panel,
html[data-wpar-theme="dark"] .wpar-app .wpar-notifications__panel,
html[data-wpar-theme="dark"] .wpar-app .wpar-dialog,
html[data-wpar-theme="dark"] .wpar-app .wpar-drawer,
html[data-wpar-theme="dark"] .wpar-app .wpar-offer-drawer {
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

/* Navigation and menus. */
html[data-wpar-theme="dark"] .wpar-app .wpar-notification-item.is-unread { background: #1d2440; }
html[data-wpar-theme="dark"] .wpar-app .wpar-notification-item:hover { background: #202638; }
html[data-wpar-theme="dark"] .wpar-app .wpar-notification-item.is-unread:hover { background: #252d4b; }

/* Form/error surfaces. */
html[data-wpar-theme="dark"] .wpar-app .wpar-dialog__error,
html[data-wpar-theme="dark"] .wpar-app .wpar-auth__error { background: #3a2023; color: #ffb4b4; }
html[data-wpar-theme="dark"] .wpar-app .wpar-auth__google-fallback:hover { background: #252c52; }
html[data-wpar-theme="dark"] .wpar-app .wpar-auth__submit:hover { background: #151a54; }

/* Semantic statuses retain their meaning while gaining enough contrast on dark surfaces. */
html[data-wpar-theme="dark"] .wpar-app .wpar-offer-status--accepted { background: #173b2c; color: #7fe0ad !important; }
html[data-wpar-theme="dark"] .wpar-app .wpar-offer-status--declined { background: #432126; color: #ffaaa8 !important; }
html[data-wpar-theme="dark"] .wpar-app .wpar-offer-status--withdrawn { background: #2b2f37; color: #b8becb !important; }
html[data-wpar-theme="dark"] .wpar-app .wpar-offer-existing { color: #e5bd65; }

/* Small semantic accents. */
html[data-wpar-theme="dark"] .wpar-app .wpar-like-button.is-liked,
html[data-wpar-theme="dark"] .wpar-app .wpar-like-button:hover { background: #3a202c; }
html[data-wpar-theme="dark"] .wpar-app .wpar-like-button.is-liked { border-color: #733d54; color: #ff8fa8; }

/* Profile/image editing overlays remain readable. */
html[data-wpar-theme="dark"] .wpar-app .wpar-profile-image-edit { background: rgba(0, 0, 0, .72); }
html[data-wpar-theme="dark"] .wpar-app .wpar-profile-image-edit:hover { background: rgba(0, 0, 0, .86); }

/* Theme switcher in the Me menu. */
.wpar-menu__theme {
  margin-top: 6px;
  padding: 8px 8px 4px;
  border-top: 1px solid var(--line);
}

.wpar-menu__theme-label {
  display: block;
  margin: 0 2px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wpar-theme-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
}

.wpar-theme-switch__button {
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.wpar-theme-switch__button:hover {
  color: var(--ink);
}

.wpar-theme-switch__button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(3, 7, 91, .10);
}

html[data-wpar-theme="dark"] .wpar-theme-switch__button.is-active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}


@media (max-width: 420px) {
  .wpar-theme-switch__button {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 11.5px;
  }
}

/* Comprehensive dark-mode text and link contrast. Keep semantic component colors, but
 * neutral headings/text and ordinary links must never inherit the host theme's dark text. */
html[data-wpar-theme="dark"] .wpar-app :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ink) !important;
}

html[data-wpar-theme="dark"] .wpar-app a:not(.wpar-btn):not(.wpar-nav__item) {
  color: var(--accent);
}

html[data-wpar-theme="dark"] .wpar-app a:not(.wpar-btn):not(.wpar-nav__item):hover {
  color: #a9b2ff;
}

/* Links that intentionally belong to a neutral text hierarchy. */
html[data-wpar-theme="dark"] .wpar-app .wpar-brand,
html[data-wpar-theme="dark"] .wpar-app .wpar-title a,
html[data-wpar-theme="dark"] .wpar-app .wpar-listing__link,
html[data-wpar-theme="dark"] .wpar-app .wpar-listing__title,
html[data-wpar-theme="dark"] .wpar-app .wpar-profile-link,
html[data-wpar-theme="dark"] .wpar-app .wpar-menu__link,
html[data-wpar-theme="dark"] .wpar-app .wpar-notification-item__text {
  color: var(--ink);
}

html[data-wpar-theme="dark"] .wpar-app .wpar-title a:hover,
html[data-wpar-theme="dark"] .wpar-app .wpar-listing__link:hover .wpar-listing__title,
html[data-wpar-theme="dark"] .wpar-app .wpar-menu__link:hover {
  color: var(--accent);
}

/* Listing cards always use an outlined View listing action in both themes.
 * Keep the CTA visually lightweight and consistent across light/dark mode. */
.wpar-app .wpar-card--listing .wpar-foot .wpar-btn--block {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.wpar-app .wpar-card--listing .wpar-foot .wpar-btn--block:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

html[data-wpar-theme="dark"] .wpar-app .wpar-card--listing .wpar-foot .wpar-btn--block:hover {
  color: #a9b2ff;
  border-color: #a9b2ff;
}

/* Common host-theme leakage points. */
html[data-wpar-theme="dark"] .wpar-app .wpar-name,
html[data-wpar-theme="dark"] .wpar-app .wpar-spec dd,
html[data-wpar-theme="dark"] .wpar-app .wpar-connection-card__name,
html[data-wpar-theme="dark"] .wpar-app .wpar-lv__title,
html[data-wpar-theme="dark"] .wpar-app .wpar-listing__title {
  color: var(--ink);
}

html[data-wpar-theme="dark"] .wpar-app .wpar-spec dt,
html[data-wpar-theme="dark"] .wpar-app .wpar-listing__meta,
html[data-wpar-theme="dark"] .wpar-app .wpar-listing__price small,
html[data-wpar-theme="dark"] .wpar-app .wpar-time,
html[data-wpar-theme="dark"] .wpar-app .wpar-text,
html[data-wpar-theme="dark"] .wpar-app .wpar-connection-card__username,
html[data-wpar-theme="dark"] .wpar-app .wpar-connection-card__body p {
  color: var(--muted);
}

/* Keep form text and placeholders readable on dark fields. */
html[data-wpar-theme="dark"] .wpar-app :is(input, textarea, select) {
  color: var(--ink);
  caret-color: var(--ink);
}

html[data-wpar-theme="dark"] .wpar-app :is(input, textarea, select)::placeholder {
  color: #858da7;
  opacity: 1;
}