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

/* Dark Mode Styles */
@layer base {
    :root {
        @apply bg-white text-gray-900;
    }

    :root.dark {
        @apply bg-gray-900 text-gray-50;
        color-scheme: dark;
    }

    :root.dark {
        --color-bg-primary: #0f172a;
        --color-bg-secondary: #1e293b;
        --color-text-primary: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-border: #334155;
    }
}

@layer components {
    .dark {
        background-color: #0f172a;
        color: #f1f5f9;
    }

    .dark .bg-white {
        @apply bg-slate-800;
    }

    .dark .bg-slate-50 {
        @apply bg-slate-900;
    }

    .dark .bg-slate-100 {
        @apply bg-slate-800;
    }

    .dark .border-slate-200 {
        @apply border-slate-700;
    }

    .dark .text-gray-900 {
        @apply text-gray-50;
    }

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

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

    .dark .hover\:bg-slate-100:hover {
        @apply bg-slate-700;
    }

    .dark .hover\:bg-gray-50:hover {
        @apply bg-slate-800;
    }

    .dark .hover\:bg-slate-50:hover {
        @apply bg-slate-800;
    }
}