/* ==========================================================================
   THEME SYSTEM
   Beautiful, consistent theming with CSS custom properties
   ========================================================================== */

/* Theme Variables - Default (Wholesome) */
:root {
  --theme-background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f093fb 100%);
  --theme-primary: #ff6f91;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #fff0f5;
  --theme-text-muted: #ffe3e3;
  
  /* Card Gradients - Enhanced Vibrant & Romantic */
  --card-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --card-gradient-2: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  --card-gradient-3: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  
  /* Card Text Colors */
  --card-text-primary: #ffffff;
  --card-text-secondary: rgba(255, 255, 255, 0.95);
  --card-text-muted: rgba(255, 255, 255, 0.85);
}

/* Theme Variants */
[data-theme="wholesome"] {
  --theme-background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f093fb 100%);
  --theme-primary: #ff6f91;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #fff0f5;
  --theme-text-muted: #ffe3e3;
  
  /* Wholesome Card Gradients - Enhanced Vibrant & Romantic */
  --card-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --card-gradient-2: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  --card-gradient-3: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  
  /* Card Text Colors */
  --card-text-primary: #ffffff;
  --card-text-secondary: rgba(255, 255, 255, 0.95);
  --card-text-muted: rgba(255, 255, 255, 0.85);
}

[data-theme="missing"] {
  --theme-background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  --theme-primary: #4a90a4;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #e6f2ff;
  --theme-text-muted: #b3d9ff;
  
  /* Missing You Card Gradients - Deep & Moody with Better Contrast */
  --card-gradient-1: linear-gradient(135deg, #4a90a4 0%, #2c5364 100%);
  --card-gradient-2: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  --card-gradient-3: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  
  /* Card Text Colors - Maximum Contrast for Dark Theme */
  --card-text-primary: #ffffff;
  --card-text-secondary: #ffffff;
  --card-text-muted: rgba(255, 255, 255, 0.9);
}

[data-theme="horny"] {
  --theme-background: linear-gradient(135deg, #ff416c, #ff4b2b);
  --theme-primary: #ff2d55;
  --theme-text-primary: #fff0f5;
  --theme-text-secondary: #ffe6ec;
  --theme-text-muted: #ffccd9;
  
  /* Horny Card Gradients - Intense & Passionate */
  --card-gradient-1: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  --card-gradient-2: linear-gradient(135deg, #ff9ff3 0%, #f368e0 100%);
  --card-gradient-3: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%);
  
  /* Card Text Colors */
  --card-text-primary: #ffffff;
  --card-text-secondary: rgba(255, 255, 255, 0.95);
  --card-text-muted: rgba(255, 255, 255, 0.85);
}

/* Apply theme background */
body {
  background: var(--theme-background);
  transition: all 0.6s ease;
}

/* Smooth theme transitions for all themed elements */
.welcome-title,
.welcome-subtitle,
.bottom-message p,
.activity-card {
  transition: all 0.6s ease;
}

/* Theme selector component */
.theme-selector {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-xl);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.theme-button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: var(--font-primary);
  font-weight: 500;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.theme-button:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.theme-button:hover::before {
  left: 100%;
}

.theme-button:active {
  transform: translateY(-2px) scale(1.01);
}

.theme-button.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .theme-selector {
    margin: var(--spacing-lg) var(--spacing-sm);
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }
  
  .theme-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    min-width: 100px;
    flex: 1;
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .theme-selector {
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-md);
    align-items: stretch;
  }
  
  .theme-button {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    min-width: auto;
  }
  
  .theme-button:hover {
    transform: translateY(-2px) scale(1.01);
  }
}

@media (max-width: 320px) {
  .theme-selector {
    margin: var(--spacing-md) var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .theme-button {
    max-width: 200px;
    font-size: 0.95rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }
}