/* Light Theme */
[data-theme="light"] {
  --bg-color: #f8fafc;
  --text-color: #0f172a;
  --text-muted: #475569;
  --primary-color: #0ea5e9;
  --secondary-color: #6366f1;
  --accent-color: #a855f7;
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(15, 23, 42, 0.1);
  --card-bg: rgba(255, 255, 255, 0.6);
}

/* Ocean Theme */
[data-theme="ocean"] {
  --bg-color: #0a192f;
  --text-color: #ccd6f6;
  --text-muted: #8892b0;
  --primary-color: #64ffda;
  --secondary-color: #00d4ff;
  --accent-color: #57cbff;
  --glass-bg: rgba(16, 32, 54, 0.7);
  --glass-border: rgba(100, 255, 218, 0.1);
  --card-bg: rgba(16, 32, 54, 0.5);
}

/* Sunset Theme */
[data-theme="sunset"] {
  --bg-color: #1a0b2e;
  --text-color: #f5e6d3;
  --text-muted: #c4a57b;
  --primary-color: #ff6b6b;
  --secondary-color: #ffa500;
  --accent-color: #ff1493;
  --glass-bg: rgba(42, 20, 60, 0.7);
  --glass-border: rgba(255, 107, 107, 0.1);
  --card-bg: rgba(42, 20, 60, 0.5);
}

/* Forest Theme */
[data-theme="forest"] {
  --bg-color: #0d1b0d;
  --text-color: #e8f5e9;
  --text-muted: #a5d6a7;
  --primary-color: #4caf50;
  --secondary-color: #66bb6a;
  --accent-color: #81c784;
  --glass-bg: rgba(27, 44, 27, 0.7);
  --glass-border: rgba(76, 175, 80, 0.1);
  --card-bg: rgba(27, 44, 27, 0.5);
}

/* Purple Dream Theme */
[data-theme="purple"] {
  --bg-color: #1a0033;
  --text-color: #f0e6ff;
  --text-muted: #b794f6;
  --primary-color: #9333ea;
  --secondary-color: #c084fc;
  --accent-color: #e879f9;
  --glass-bg: rgba(42, 20, 80, 0.7);
  --glass-border: rgba(147, 51, 234, 0.1);
  --card-bg: rgba(42, 20, 80, 0.5);
}

/* Cyberpunk Theme */
[data-theme="cyberpunk"] {
  --bg-color: #0a0e27;
  --text-color: #00ff9f;
  --text-muted: #00d9ff;
  --primary-color: #ff00ff;
  --secondary-color: #00ffff;
  --accent-color: #ffff00;
  --glass-bg: rgba(20, 25, 60, 0.7);
  --glass-border: rgba(255, 0, 255, 0.22);
  --card-bg: rgba(20, 25, 60, 0.5);
}

/* Dark theme (explicit tweaks for improved contrast) */
[data-theme="dark"] {
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-bg: rgba(16, 20, 32, 0.78);
  --card-bg: rgba(16, 20, 32, 0.6);
  /* slightly boost primary for better visibility */
  --primary-color: #4fd3ff;
}

/* Warm Light Theme */
[data-theme="warm"] {
  --bg-color: #fef6e4;
  --text-color: #2d3142;
  --text-muted: #4f5d75;
  --primary-color: #f77f00;
  --secondary-color: #d62828;
  --accent-color: #fcbf49;
  --glass-bg: rgba(255, 250, 240, 0.8);
  --glass-border: rgba(45, 49, 66, 0.1);
  --card-bg: rgba(255, 250, 240, 0.6);
}

/* Grayscale / Monochrome Theme */
[data-theme="grayscale"] {
  --bg-color: #0b0b0b;
  --text-color: #f5f5f5;
  --text-muted: #bdbdbd;
  --primary-color: #d1d1d1;
  --secondary-color: #8f8f8f;
  --accent-color: #9e9e9e;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --card-bg: rgba(255, 255, 255, 0.04);
}

/* Make theme labels slightly more legible on top of gradients */
.theme-option span:last-child {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Grayscale theme specific tweaks for header and contact */
[data-theme="grayscale"] .header {
  background: rgba(11, 11, 11, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="grayscale"] .contact-content {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 28, 0.92),
    rgba(12, 12, 12, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="grayscale"] .contact-email {
  border: 2px solid rgba(255, 255, 255, 0.06);
}

[data-theme="grayscale"] .contact-email:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--primary-color);
}

/* Improve visibility of active language button in grayscale */
[data-theme="grayscale"] .lang-btn {
  color: var(--text-muted);
}

[data-theme="grayscale"] .lang-btn.active,
[data-theme="grayscale"] .lang-btn:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) inset;
}

[data-theme="light"] .header {
  background: rgba(248, 250, 252, 0.9);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="warm"] .header {
  background: rgba(254, 246, 228, 0.9);
  border-bottom: 1px solid rgba(45, 49, 66, 0.1);
}

[data-theme="ocean"] .header {
  background: rgba(10, 25, 47, 0.9);
  border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

[data-theme="sunset"] .header {
  background: rgba(26, 11, 46, 0.9);
  border-bottom: 1px solid rgba(255, 107, 107, 0.1);
}

[data-theme="forest"] .header {
  background: rgba(13, 27, 13, 0.9);
  border-bottom: 1px solid rgba(76, 175, 80, 0.1);
}

[data-theme="purple"] .header {
  background: rgba(26, 0, 51, 0.9);
  border-bottom: 1px solid rgba(147, 51, 234, 0.1);
}

[data-theme="cyberpunk"] .header {
  background: rgba(10, 14, 39, 0.9);
  border-bottom: 1px solid rgba(255, 0, 255, 0.2);
}

.theme-preview-dark {
  background: linear-gradient(135deg, #38bdf8, #818cf8);
}

.theme-preview-light {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.theme-preview-ocean {
  background: linear-gradient(135deg, #64ffda, #00d4ff);
}

.theme-preview-sunset {
  background: linear-gradient(135deg, #ff6b6b, #ffa500);
}

.theme-preview-forest {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
}

.theme-preview-purple {
  background: linear-gradient(135deg, #9333ea, #c084fc);
}

.theme-preview-cyberpunk {
  background: linear-gradient(135deg, #ff00ff, #00ffff);
}

.theme-preview-warm {
  background: linear-gradient(135deg, #f77f00, #fcbf49);
}

.theme-preview-grayscale {
  background: linear-gradient(135deg, #ffffff, #6b6b6b);
}