frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 245, 247, 250;
  --background-end-rgb: 228, 237, 249;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 15, 23, 42;
    --background-end-rgb: 30, 41, 59;
  }
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(to bottom, 
    rgb(var(--background-start-rgb)) 0%, 
    rgb(var(--background-end-rgb)) 100%);
  color: rgb(var(--foreground-rgb));
  min-height: 100vh;
}

/* Custom styles for our SDG platform */
.sdg-card {
  @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 border border-white/20;
}

.sdg-card-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  @apply rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl border border-white/20;
}

.sdg-btn {
  @apply px-6 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-slate-900;
}

.sdg-btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  @apply text-white hover:opacity-90 focus:ring-indigo-500;
}

.sdg-btn-secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  @apply text-white hover:opacity-90 focus:ring-pink-500;
}

.sdg-btn-tertiary {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  @apply text-white hover:opacity-90 focus:ring-green-500;
}

.mission-icon {
  @apply w-20 h-20 mx-auto mb-6 rounded-2xl flex items-center justify-center text-white text-3xl font-bold shadow-lg transform transition-transform duration-300;
}

.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-bg-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.gradient-bg-3 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.gradient-bg-4 {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.gradient-bg-5 {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.gradient-bg-6 {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
}

.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.feature-card {
  @apply p-6 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg border border-white/20;
}

.stat-card {
  @apply p-6 rounded-2xl shadow-lg bg-white/90 dark:bg-slate-800/90 backdrop-blur-lg border border-white/20;
}

/* Dark mode specific overrides */
.dark {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 15, 23, 42;
  --background-end-rgb: 30, 41, 59;
}

.dark .text-gray-600 {
  @apply text-gray-300;
}

.dark .text-gray-700 {
  @apply text-gray-200;
}

.dark .text-gray-800 {
  @apply text-gray-100;
}

.dark .bg-gray-50 {
  @apply bg-slate-700;
}

.dark input, .dark textarea, .dark select {
  @apply bg-slate-700 border-slate-600 text-white;
}

.dark .border-gray-100 {
  @apply border-slate-700;
}

.dark .border-gray-200 {
  @apply border-slate-600;
}

.dark .border-gray-300 {
  @apply border-slate-600;
}