@import "tailwindcss";
:root {
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(222.2, 84%, 4.9%);
    --primary: hsl(221.2, 83.2%, 53.3%);
    --primary-foreground: hsl(210, 40%, 98%);
    --accent: hsl(20.5, 90.2%, 48.2%);
    --accent-foreground: hsl(210, 40%, 98%);
    --muted: hsl(210, 40%, 96%);
    --muted-foreground: hsl(215.4, 16.3%, 46.9%);
    --border: hsl(214.3, 31.8%, 91.4%);
    --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: hsl(222.2, 84%, 4.9%);
        --foreground: hsl(210, 40%, 98%);
        --primary: hsl(217.2, 91.2%, 59.8%);
        --primary-foreground: hsl(222.2, 84%, 4.9%);
        --accent: hsl(20.5, 90.2%, 48.2%);
        --accent-foreground: hsl(210, 40%, 98%);
        --muted: hsl(217.2, 32.6%, 17.5%);
        --muted-foreground: hsl(215, 20.2%, 65.1%);
        --border: hsl(217.2, 32.6%, 17.5%);
    }
}

.hero-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.brand-chip {
    @apply inline-flex items-center gap-2 px-3 py-2 rounded-full border transition-all duration-200 cursor-pointer select-none;
}

.brand-chip:not(.selected) {
    @apply bg-white border-gray-300 text-gray-600 hover:border-blue-500 hover:text-gray-900;
}

.brand-chip.selected {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.brand-chip.disabled {
    @apply opacity-50 cursor-not-allowed;
}

.brand-chip.disabled:hover {
    @apply border-gray-300 text-gray-600;
}

.toast {
    @apply fixed z-50 bg-white border rounded-lg shadow-lg p-4 min-w-[300px] transform transition-all duration-300;
}

.toast.success {
    @apply border-green-200 bg-green-50 text-green-800;
}

.toast.error {
    @apply border-red-200 bg-red-50 text-red-800;
}

.modal-backdrop {
    @apply fixed inset-0 z-50 bg-black/50;
}

.modal-content {
    @apply fixed inset-4 md:inset-8 lg:inset-16 bg-white border rounded-xl shadow-2xl flex flex-col max-h-[90vh];
}

.form-field {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-field.error {
    @apply border-red-500 focus:ring-red-500;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    @apply px-6 py-2 rounded-lg font-medium transition-colors;
}

.btn-primary:hover {
    background-color: hsl(221.2, 83.2%, 48.3%);
}

.btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.btn-secondary {
    @apply px-6 py-2 border border-gray-300 text-gray-600 hover:text-gray-900 rounded-lg transition-colors;
}

.btn-accent {
    background-color: var(--accent);
    color: var(--accent-foreground);
    @apply px-6 py-2 rounded-lg font-medium transition-colors;
}

.btn-accent:hover {
    background-color: hsl(20.5, 90.2%, 43.2%);
}

/* Loading state */
.loading {
    @apply opacity-50 pointer-events-none;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
.focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2;
}

/* Skip link for accessibility */
.skip-link {
    @apply absolute -top-10 left-4 bg-blue-600 text-white px-4 py-2 rounded;
    @apply focus:top-4 z-50;
}

.custom-transform{
    top: 50%;
    transform: translateY(-50%);
}