/* Dark Theme with Violet/Cyan Gradient */
:root {
  --primary-gradient-from: #9333EA;  /* Violet */
  --primary-gradient-to: #06B6D4;    /* Cyan */
  --dark-bg: #121212;                /* Dark background */
  --dark-surface: #1E1E1E;           /* Slightly lighter surface */
  --dark-card: #252525;              /* Card background */
  --text-light: #FFFFFF;             /* White text */
  --text-light-secondary: #E0E0E0;   /* Slightly dimmed white */
  --accent-light-1: #2D1B69;         /* Dark violet accent */
  --accent-light-2: #164E63;         /* Dark cyan accent */
}

/* Apply dark background to body and main containers */
body, html {
  background-color: var(--dark-bg);
  color: var(--text-light);
}

/* Header styling */
header.bg-white\/90 {
  background-color: rgba(18, 18, 18, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation links */
header a, nav a {
  color: var(--text-light);
}

/* Apply to buttons */
.bg-gradient-to-r.from-blue-600.to-purple-600,
button, .button, a.button, 
a[href^="#"].bg-gradient-to-r, 
a[href^="#"].text-white.font-semibold {
  background-image: linear-gradient(to right, var(--primary-gradient-from), var(--primary-gradient-to));
  color: var(--text-light);
}

.hover\:from-blue-700.hover\:to-purple-700:hover {
  background-image: linear-gradient(to right, #7E22CE, #0891B2);
}

/* Apply to text gradients */
.bg-gradient-to-r.from-purple-600.via-blue-500.to-cyan-400,
.text-2xl.font-bold.bg-gradient-to-r.from-purple-600.via-blue-500.to-cyan-400.text-transparent.bg-clip-text {
  background-image: linear-gradient(to right, var(--primary-gradient-from), var(--primary-gradient-to));
}

/* Apply to section backgrounds */
.bg-gradient-to-br.from-blue-50.to-purple-50,
.bg-gray-50 {
  background-color: var(--dark-surface);
}

/* Apply to card backgrounds */
.bg-white {
  background-color: var(--dark-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Apply to accent colors */
.bg-blue-100 {
  background-color: var(--accent-light-1);
}

.text-blue-800 {
  color: var(--primary-gradient-from);
}

/* Apply to borders and other elements */
.border-blue-600 {
  border-color: var(--primary-gradient-from);
}

.text-blue-600 {
  color: var(--primary-gradient-to);
}

/* Apply to all section headings */
h2, h3, h4, h5, h6 {
  color: var(--text-light);
}

/* Section labels */
.text-sm.font-semibold.tracking-wider.text-gray-500.uppercase {
  color: var(--primary-gradient-to);
}

/* Paragraph text */
p {
  color: var(--text-light-secondary);
}

/* Footer styling */
footer.bg-gray-900 {
  background-image: linear-gradient(to bottom, #2D1B69, #164E63);
}

/* Problem statement cards */
.bg-white.rounded-lg.shadow-md.p-6 {
  background-color: var(--dark-card);
}

/* Ensure high contrast for all text */
.text-gray-500, .text-gray-600, .text-gray-700 {
  color: var(--text-light-secondary);
}

.text-gray-800, .text-gray-900 {
  color: var(--text-light);
}

/* Add subtle glow to buttons and important elements */
.bg-gradient-to-r.from-blue-600.to-purple-600 {
  box-shadow: 0 0 15px rgba(147, 51, 234, 0.3);
}

/* Add subtle border to sections for better separation */
section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}