/* Color Palette Themes */

/* Theme 1: Neon Contrast - Bright neon pink + cyan with dark navy background */
.theme-neon {
  --primary-color: #FF006E;
  --primary-light: #FF3399;
  --primary-dark: #CC0056;

  --secondary-color: #00F5FF;
  --secondary-light: #33F7FF;
  --secondary-dark: #00C0CC;

  --bg-color: #0F1419;
  --bg-secondary: #1a1f2e;
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0B0;

  --success-color: #00FF88;
  --warning-color: #FFD700;
  --danger-color: #FF0055;
  --info-color: #00E5FF;

  --border-color: rgba(0, 245, 255, 0.15);
}

/* Theme 2: Forest Energy - Forest green + gold/amber with cream background */
.theme-forest {
  --primary-color: #2D6A4F;
  --primary-light: #52B788;
  --primary-dark: #1b4332;

  --secondary-color: #FFB703;
  --secondary-light: #FFD60A;
  --secondary-dark: #CC9000;

  --bg-color: #FBF8F3;
  --bg-secondary: #FFFFFF;
  --text-primary: #1B3A2E;
  --text-secondary: #6B7A73;

  --success-color: #2D6A4F;
  --warning-color: #FFB703;
  --danger-color: #D62828;
  --info-color: #0077B6;

  --border-color: rgba(45, 106, 79, 0.15);
}

/* Theme 3: Ocean Tech - Ocean blue + electric orange with light gray background */
.theme-ocean {
  --primary-color: #0077B6;
  --primary-light: #00B4D8;
  --primary-dark: #005A8D;

  --secondary-color: #FF6B35;
  --secondary-light: #FF8A50;
  --secondary-dark: #CC5429;

  --bg-color: #F0F3F7;
  --bg-secondary: #FFFFFF;
  --text-primary: #0A2342;
  --text-secondary: #4A5568;

  --success-color: #06A77D;
  --warning-color: #FF6B35;
  --danger-color: #E63946;
  --info-color: #0077B6;

  --border-color: rgba(0, 119, 182, 0.15);
}

/* Theme 4: Purple Dream - Deep purple + lime green with white background */
.theme-purple {
  --primary-color: #6A0572;
  --primary-light: #9D0E91;
  --primary-dark: #4A0347;

  --secondary-color: #39FF14;
  --secondary-light: #5FFF3F;
  --secondary-dark: #2ECC00;

  --bg-color: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A6A;

  --success-color: #39FF14;
  --warning-color: #FFA500;
  --danger-color: #FF1744;
  --info-color: #6A0572;

  --border-color: rgba(106, 5, 114, 0.15);
}

/* Theme-specific card styling */
.theme-neon .card-primary {
  background: linear-gradient(135deg, rgba(255, 0, 110, 0.08) 0%, rgba(0, 245, 255, 0.08) 100%);
  border-color: rgba(0, 245, 255, 0.3);
}

.theme-forest .card-primary {
  background: linear-gradient(135deg, rgba(45, 106, 79, 0.08) 0%, rgba(255, 183, 3, 0.08) 100%);
  border-color: rgba(45, 106, 79, 0.3);
}

.theme-ocean .card-primary {
  background: linear-gradient(135deg, rgba(0, 119, 182, 0.08) 0%, rgba(255, 107, 53, 0.08) 100%);
  border-color: rgba(0, 119, 182, 0.3);
}

.theme-purple .card-primary {
  background: linear-gradient(135deg, rgba(106, 5, 114, 0.08) 0%, rgba(57, 255, 20, 0.08) 100%);
  border-color: rgba(106, 5, 114, 0.3);
}

/* Accent text styling per theme */
.accent-text {
  color: var(--secondary-color);
  font-weight: 600;
}

.accent-bg {
  background-color: var(--primary-color);
  color: var(--text-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
}

/* Gradient text effect */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Highlight box for warnings/alerts */
.highlight-box {
  padding: 1rem;
  border-left: 4px solid var(--primary-color);
  border-radius: var(--border-radius);
  background-color: rgba(255, 0, 110, 0.05);
}

.theme-forest .highlight-box {
  border-left-color: var(--primary-color);
  background-color: rgba(45, 106, 79, 0.05);
}

.theme-ocean .highlight-box {
  border-left-color: var(--primary-color);
  background-color: rgba(0, 119, 182, 0.05);
}

.theme-purple .highlight-box {
  border-left-color: var(--primary-color);
  background-color: rgba(106, 5, 114, 0.05);
}

/* Severity indicators */
.severity-safe {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border-left-color: #10B981;
}

.severity-monitor {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border-left-color: #F59E0B;
}

.severity-vet {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border-left-color: #EF4444;
}

.severity-emergency {
  background-color: rgba(239, 68, 68, 0.15);
  color: #DC2626;
  border-left-color: #DC2626;
}

/* Hover effects with primary color */
.hover-accent:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.hover-bg:hover {
  background-color: rgba(255, 0, 110, 0.1);
}

.theme-forest .hover-bg:hover {
  background-color: rgba(45, 106, 79, 0.1);
}

.theme-ocean .hover-bg:hover {
  background-color: rgba(0, 119, 182, 0.1);
}

.theme-purple .hover-bg:hover {
  background-color: rgba(106, 5, 114, 0.1);
}