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

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

@layer base {
    :root {
        --color-primary: #8B5CF6; 
        --color-secondary: #A78BFA; 
        --color-neutral: #F5F3FF; 
    }
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
}

.bg-primary {
    background-color: var(--color-primary);
}
.text-primary {
    color: var(--color-primary);
}
.bg-secondary {
    background-color: var(--color-secondary);
}
.text-secondary {
    color: var(--color-secondary);
}
.bg-neutral {
    background-color: var(--color-neutral);
}
.text-neutral {
    color: var(--color-neutral);
}
.border-violet-100 {
    border-color: #EDE9FE;
}
.border-violet-200 {
    border-color: #DDD6FE;
}
.bg-violet-50 {
    background-color: #F9F5FF;
}
.text-violet-300 {
    color: #C4B5FD;
}

.btn-primary {
    @apply bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors font-medium shadow-md;
}

.input-focus {
    @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

.result-panel {
    @apply mt-4 p-4 bg-violet-50 rounded-lg border border-violet-100;
}

.nav-link {
    @apply hover:text-neutral transition-colors font-medium;
}

.card-hover {
    @apply hover:shadow-lg transition-shadow duration-300;
}

.rounded-default {
    @apply rounded-xl;
}

.shadow-default {
    @apply shadow-md hover:shadow-lg transition-shadow;
}