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

@layer components {
    .form-input {
        @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 px-4 py-3;
    }
}

.cmdk-root {
    --cmdk-font-family: 'Inter', sans-serif;
    --cmdk-background: #fff;
    --cmdk-border-radius: 8px;
    --cmdk-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --cmdk-color-text: #333;
    --cmdk-color-placeholder: #999;
    --cmdk-color-input: #333;
    --cmdk-color-separator: #ddd;
    --cmdk-color-item-hover: #f5f5f5;
    --cmdk-color-item-active: #eee;
    --cmdk-height: 400px;
    --cmdk-padding: 12px;
}

[cmdk-theme='dark'] .cmdk-root {
    --cmdk-background: #1A202C; /* background-dark */
    --cmdk-color-text: #E2E8F0; /* text-dark */
    --cmdk-color-placeholder: #718096; /* text-muted-dark */
    --cmdk-color-input: #E2E8F0;
    --cmdk-color-separator: #4A5568; /* border-dark */
    --cmdk-color-item-hover: #2D3748; /* card-dark */
    --cmdk-color-item-active: #4A5568;
}