@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
     :root {
        --bg-color: #f8fafc;
        --surface-color: #ffffff;
        --text-color: #1e293b;
        --border-color: #e2e8f0;
        --primary-color: #275094;
        --secondary-color: #3c3c3c;
    }
    .dark {
        --bg-color: #0f172a;
        --surface-color: #1e293b;
        --text-color: #f1f5f9;
        --border-color: #334155;
        --primary-color: #1c3a6b;
        --secondary-color: #2a2a2a;
    }
    body {
        @apply bg-theme text-theme transition-colors duration-300;
        font-family: system-ui, -apple-system, sans-serif;
    }
}

@layer components {
    .theme-container {
        @apply bg-theme text-theme transition-colors duration-300;
    }
    .theme-surface {
        @apply bg-surface border border-theme rounded-lg p-4 transition-colors duration-300;
    }
    .theme-card {
        @apply bg-white dark: bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark: border-gray-700 transition-all duration-300 hover: shadow-xl;
    }
    .theme-btn-primary {
        @apply bg-primary hover: bg-primary-light dark: bg-primary-dark dark: hover: bg-primary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
    }
    .theme-btn-secondary {
        @apply bg-secondary hover: bg-secondary-light dark: bg-secondary-dark dark: hover: bg-secondary text-white font-medium py-3 px-6 rounded-lg transition-all duration-200 hover: scale-105 active: scale-95;
    }
    .theme-input {
        @apply w-full px-4 py-3 bg-white dark: bg-gray-800 border border-gray-300 dark: border-gray-600 rounded-lg focus: ring-2 focus: ring-primary focus: border-transparent text-gray-900 dark: text-white placeholder-gray-500 dark: placeholder-gray-400 transition-colors duration-200;
    }
    .theme-nav {
        @apply bg-white dark: bg-gray-800 shadow-md border-b border-gray-200 dark: border-gray-700 transition-colors duration-300;
    }
    .theme-nav-link {
        @apply text-gray-700 dark: text-gray-300 hover: text-primary dark: hover: text-primary-light font-medium transition-colors duration-200 px-4 py-2;
    }
    .theme-section {
        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-white dark: bg-gray-900 transition-colors duration-300;
    }
    .theme-section-alt {
        @apply py-12 md: py-16 lg: py-20 px-4 md: px-8 bg-gray-50 dark: bg-gray-800 transition-colors duration-300;
    }
    .theme-heading {
        @apply text-3xl md: text-4xl lg: text-5xl font-bold text-gray-900 dark: text-white mb-6;
    }
    .theme-subheading {
        @apply text-xl md: text-2xl text-gray-600 dark: text-gray-300 mb-8;
    }
    .theme-text {
        @apply text-gray-700 dark: text-gray-300 leading-relaxed;
    }
    .theme-footer {
        @apply bg-gray-800 dark: bg-gray-900 text-white py-8 border-t border-gray-700 dark: border-gray-800 transition-colors duration-300;
    }
}