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

@layer base {
    h1, h2, h3 { @apply text-on-surface tracking-tightest; }
    input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
        @apply w-full px-5 py-4 bg-white border border-accent/50 rounded-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all duration-300 font-medium;
    }
}

@layer components {
    .nav-sidebar-link {
        @apply flex items-center gap-4 px-6 py-4 text-sm font-bold uppercase tracking-tighter text-white/60 hover:text-white hover:bg-white/10 transition-all duration-300 border-l-4 border-transparent;
    }
    .nav-sidebar-link.active {
        @apply text-white bg-white/20 border-white shadow-sm;
    }
    .card-premium {
        @apply bg-white p-8 rounded-sm shadow-premium border border-accent/10;
    }
}

@layer utilities {
    .text-balance { text-wrap: balance; }
}