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

:root {
    --foreground-rgb: 0, 0, 0;
    --background-rgb: 255, 255, 255;
}

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

body {
    color: rgb(var(--foreground-rgb));
    background: rgb(var(--background-rgb));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.btn {
    @apply px-4 py-2 rounded font-semibold text-white transition-colors;
}

.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-slate-600 hover:bg-slate-700;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700;
}

.card {
    @apply bg-white dark:bg-slate-800 rounded-lg shadow-md p-6 mb-4;
}

.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium mb-1;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500;
}
