@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../../resources/js/**/*.vue';

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #2563eb;
    --color-primary-600: #1d4ed8;
    --color-primary-700: #1e3a8a;
    --color-primary-800: #1e293b;
    --color-primary-900: #0f172a;
    --color-primary-950: #020617;

    --color-accent-50: #f0fdf4;
    --color-accent-100: #dcfce7;
    --color-accent-200: #bbf7d0;
    --color-accent-300: #86efac;
    --color-accent-400: #4ade80;
    --color-accent-500: #22c55e;
    --color-accent-600: #16a34a;
    --color-accent-700: #15803d;
}

@layer base {
    body {
        background-color: var(--color-primary-950);
        color: #f1f5f9;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@layer components {
    .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        background-color: var(--color-primary-500);
        color: white;
        font-weight: 600;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .btn-primary:hover {
        background-color: var(--color-primary-600);
    }
    .btn-accent {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        background-color: var(--color-accent-500);
        color: white;
        font-weight: 600;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .btn-accent:hover {
        background-color: var(--color-accent-600);
    }
    .btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border: 2px solid var(--color-primary-500);
        color: var(--color-primary-400);
        font-weight: 600;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .btn-outline:hover {
        background-color: var(--color-primary-500);
        color: white;
    }
    .card {
        background-color: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(30, 41, 59, 0.5);
        border-radius: 0.75rem;
        padding: 1.5rem;
        transition: all 0.3s ease;
    }
    .card:hover {
        border-color: rgba(59, 130, 246, 0.3);
    }
    .section-title {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
        color: white;
    }
    @media (min-width: 768px) {
        .section-title {
            font-size: 2.5rem;
        }
    }
    .section-subtitle {
        font-size: 1.125rem;
        color: #94a3b8;
        margin-top: 1rem;
        max-width: 42rem;
    }
    .input-field {
        width: 100%;
        padding: 0.75rem 1rem;
        background-color: rgba(15, 23, 42, 0.5);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 0.5rem;
        color: white;
        outline: none;
        transition: all 0.3s ease;
    }
    .input-field::placeholder {
        color: #64748b;
    }
    .input-field:focus {
        border-color: var(--color-primary-500);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }
    select.input-field option {
        background-color: #0f172a;
        color: #e2e8f0;
        padding: 0.5rem;
        -webkit-text-fill-color: #e2e8f0;
    }
    select.input-field option[value=""] {
        color: #64748b;
        -webkit-text-fill-color: #64748b;
    }
    select.input-field option:checked {
        background-color: #1e3a8a;
        color: white;
        -webkit-text-fill-color: white;
    }
}