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

:root {
  --color-primary: #1e3a8a;
  --color-secondary: #06b6d4;
  --color-accent: #0ea5e9;
  --color-light: #f3f4f6;
  --color-dark: #111827;
}

body {
  @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300;
}

.hero-gradient {
  background: linear-gradient(135deg, #1e3a8a 0%, #06b6d4 100%);
}

.card-hover {
  @apply transition-transform duration-300 hover:scale-105;
}

.article-card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 card-hover;
}

.btn-primary {
  @apply bg-blue-900 dark:bg-blue-700 text-white px-6 py-3 rounded-lg hover:bg-blue-800 dark:hover:bg-blue-600 transition-colors;
}

.btn-secondary {
  @apply bg-cyan-500 text-white px-6 py-3 rounded-lg hover:bg-cyan-600 transition-colors;
}

code {
  @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm;
}

pre {
  @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto;
}