/* Light Theme */
.light-theme {
  /* Primary Colors */
  --primary-color: #FF6B9D;
  --primary-color-light: rgba(255, 107, 157, 0.2);
  --secondary-color: #4ECDC4;
  --secondary-color-light: rgba(78, 205, 196, 0.2);
  
  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(0, 0, 0, 0.1);
  
  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-inverse: #FFFFFF;
  
  /* Border Colors */
  --border-color: #E9ECEF;
  --border-color-hover: #DEE2E6;
  
  /* Status Colors */
  --success-color: #28A745;
  --warning-color: #FFC107;
  --error-color: #DC3545;
  --info-color: #17A2B8;
  
  /* Status Background Colors */
  --success-bg: rgba(40, 167, 69, 0.1);
  --warning-bg: rgba(255, 193, 7, 0.1);
  --error-bg: rgba(220, 53, 69, 0.1);
  --info-bg: rgba(23, 162, 184, 0.1);
}

/* Dark Theme */
.dark-theme {
  /* Primary Colors */
  --primary-color: #FF6B9D;
  --primary-color-light: rgba(255, 107, 157, 0.3);
  --secondary-color: #4ECDC4;
  --secondary-color-light: rgba(78, 205, 196, 0.3);
  
  /* Background Colors */
  --bg-primary: #1A1A1A;
  --bg-secondary: #2D2D2D;
  --bg-card: #2D2D2D;
  --bg-overlay: rgba(255, 255, 255, 0.1);
  
  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  --text-inverse: #333333;
  
  /* Border Colors */
  --border-color: #404040;
  --border-color-hover: #555555;
  
  /* Status Colors */
  --success-color: #4CAF50;
  --warning-color: #FF9800;
  --error-color: #F44336;
  --info-color: #2196F3;
  
  /* Status Background Colors */
  --success-bg: rgba(76, 175, 80, 0.2);
  --warning-bg: rgba(255, 152, 0, 0.2);
  --error-bg: rgba(244, 67, 54, 0.2);
  --info-bg: rgba(33, 150, 243, 0.2);
}

/* Theme Transition Animation */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme-specific adjustments */
.dark-theme .welcome-card::before {
  background: linear-gradient(45deg, transparent, rgba(255, 107, 157, 0.1), transparent);
}

.dark-theme .nav-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Theme toggle icon changes */
.light-theme .theme-toggle .theme-icon::before {
  content: '🌙';
}

.dark-theme .theme-toggle .theme-icon::before {
  content: '☀️';
}

.theme-toggle .theme-icon {
  position: relative;
}

.light-theme .theme-toggle .theme-icon {
  color: #666;
}

.dark-theme .theme-toggle .theme-icon {
  color: #FFD700;
}

/* Cute anime-style enhancements */
.light-theme {
  --cute-pink: #FFB6C1;
  --cute-blue: #87CEEB;
  --cute-purple: #DDA0DD;
  --cute-yellow: #F0E68C;
  --cute-green: #98FB98;
}

.dark-theme {
  --cute-pink: #FF69B4;
  --cute-blue: #4169E1;
  --cute-purple: #9370DB;
  --cute-yellow: #FFD700;
  --cute-green: #00FA9A;
}

/* Kawaii elements */
.kawaii-element {
  position: relative;
}

.kawaii-element::after {
  content: '✨';
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 12px;
  animation: twinkle 1.5s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Pastel gradients for cards */
.light-theme .nav-card:nth-child(1) {
  background: linear-gradient(135deg, #FFE4E1, #FFF0F5);
}

.light-theme .nav-card:nth-child(2) {
  background: linear-gradient(135deg, #E0FFFF, #F0FFFF);
}

.light-theme .nav-card:nth-child(3) {
  background: linear-gradient(135deg, #F0FFF0, #F5FFFA);
}

.light-theme .nav-card:nth-child(4) {
  background: linear-gradient(135deg, #FFF8DC, #FFFACD);
}

.dark-theme .nav-card:nth-child(1) {
  background: linear-gradient(135deg, #2D1B2E, #3D2B3E);
}

.dark-theme .nav-card:nth-child(2) {
  background: linear-gradient(135deg, #1B2D2E, #2B3D3E);
}

.dark-theme .nav-card:nth-child(3) {
  background: linear-gradient(135deg, #1B2E1B, #2B3E2B);
}

.dark-theme .nav-card:nth-child(4) {
  background: linear-gradient(135deg, #2E2D1B, #3E3D2B);
}