/* ============================================================
   TREZZON STORE — DARK MODE OVERRIDES
   Specific component fixes for elements that contain hardcoded
   colors which CSS variables alone cannot solve (e.g., overlays,
   gradients with white, app-card pill).
   ============================================================ */

/* App card — dotted pattern uses light token by default; dark needs lighter dots */
[data-theme="dark"] .app-card__pattern {
  background-image: radial-gradient(var(--bg-pattern-dot) 1px, transparent 1px);
}

[data-theme="dark"] .app-card__pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .app-card__footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .app-card__divider {
  background: rgba(255, 255, 255, 0.08);
}

/* Modal backdrop adjusts via token; ensure modal close uses tokens */
[data-theme="dark"] .modal__close:hover {
  background: var(--clr-danger);
  color: var(--txt-on-primary);
}

/* Buttons that have hardcoded white (e.g., btn-google) */
[data-theme="dark"] .btn-google {
  background: var(--bg-surface-2);
  color: var(--txt-primary);
  border-color: var(--border-color);
}
[data-theme="dark"] .btn-google:hover {
  color: var(--txt-primary);
}

/* Header glass effect adjusts naturally via --bg-overlay token */

/* Search dropdown shadow stronger in dark */
[data-theme="dark"] .search-dropdown {
  box-shadow: var(--shadow-xl);
}

/* Auto theme equivalents — same overrides when OS prefers dark */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .app-card__pattern {
    background-image: radial-gradient(var(--bg-pattern-dot) 1px, transparent 1px);
  }
  [data-theme="auto"] .app-card__pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }
  [data-theme="auto"] .app-card__footer {
    border-top-color: rgba(255, 255, 255, 0.06);
  }
  [data-theme="auto"] .app-card__divider {
    background: rgba(255, 255, 255, 0.08);
  }
  [data-theme="auto"] .btn-google {
    background: var(--bg-surface-2);
    color: var(--txt-primary);
    border-color: var(--border-color);
  }
}

/* Theme toggle — 3-state visualization */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--txt-secondary);
  font-size: 16px;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}
.theme-toggle__icon { display: inline-block; }
.theme-toggle[data-mode="light"] .theme-toggle__icon::before { content: '☀️'; }
.theme-toggle[data-mode="dark"]  .theme-toggle__icon::before { content: '🌙'; }
.theme-toggle[data-mode="auto"]  .theme-toggle__icon::before { content: '🖥️'; }