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

@layer base {
    body {
        @apply bg-surface dark:bg-surface-dark text-slate-800 dark:text-slate-100;
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='date'],
    textarea {
        @apply block w-full;
    }
}

@layer components {
    .app-card {
        @apply bg-white dark:bg-slate-800 rounded-2xl shadow-soft p-6;
    }

    .app-card--muted {
        @apply bg-slate-50 dark:bg-slate-900/60 border border-slate-200/70 dark:border-slate-700/40;
    }

    .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 text-white/80 hover:bg-white/10 hover:text-white dark:text-slate-200 dark:hover:bg-white/10 dark:hover:text-white;
    }

    .sidebar-link--active {
        @apply bg-accent text-slate-900 font-semibold shadow-lg shadow-accent/30 hover:bg-accentDark hover:text-white;
    }

    .chip {
        @apply inline-flex items-center gap-2 rounded-full bg-slate-100 dark:bg-slate-700 px-3 py-1 text-xs font-semibold uppercase tracking-wide;
    }
}