/**
 * User PWA — Theme overlay for common design system
 * Applies Vivid Purple / Material palette to existing layout (no broken IDs/APIs)
 */

/* Use common design tokens for body and wrapper */
body {
  background: var(--bg-base) !important;
  color: var(--color-text) !important;
  font-family: var(--font-family) !important;
}

.popup-wrapper {
  background: var(--bg-base);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  padding-top: var(--header-height, clamp(2.75rem, 5vw + 2.25rem, 4rem)); /* fluid fixed header */
}

/* Header: common navbar look, keep existing structure (fluid height) */
.header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height, clamp(2.75rem, 5vw + 2.25rem, 4rem));
  padding: 0 var(--space-4) !important;
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  box-shadow: var(--shadow-nav) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: var(--z-nav);
}

.brand-name {
  color: var(--color-primary) !important;
}

.brand-subtitle {
  color: var(--color-text-muted) !important;
}

.header-btn {
  background: transparent !important;
  border: none !important;
  color: var(--color-text) !important;
}

.header-btn:hover {
  background: var(--color-gray-100) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Status bar: light surface */
.status-bar {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
}

/* Buttons & cards: styled by common/vvc-components.css (vvc-btn-*, vvc-card) */

/* Auth text colors only */
.auth-title,
.auth-desc { color: var(--color-text) !important; }

/* Modals: light surface */
.profile-modal-content,
.modal-content-box,
.pricing-modal {
  background: var(--bg-surface) !important;
  color: var(--color-text) !important;
}

/* Text utilities to use new palette */
.text-success { color: var(--color-success) !important; }
.text-red { color: #E91E63 !important; }