@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');
@import 'tailwindcss';

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

@theme {
    --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --color-brand-50: #f4f8fb;
    --color-brand-100: #dbe9f1;
    --color-brand-200: #b7d1e3;
    --color-brand-300: #88b0cf;
    --color-brand-400: #5c8db8;
    --color-brand-500: #3e6f99;
    --color-brand-600: #2f587b;
    --color-brand-700: #26455f;
    --color-brand-800: #1b3144;
    --color-brand-900: #101d2a;
}

@layer base {
    body {
        @apply bg-[#f5f7fa] text-slate-900 antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-display);
    }
}

@layer components {
    .panel {
        @apply rounded-lg border border-slate-200 bg-white shadow-[0_10px_30px_rgba(15,23,42,0.05)];
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-md bg-brand-700 px-3.5 py-2 text-sm font-semibold text-white transition hover:bg-brand-800 focus:outline-none focus:ring-2 focus:ring-brand-300;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-3.5 py-2 text-sm font-semibold text-slate-700 transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-200;
    }

    .status-pill {
        @apply inline-flex items-center gap-2 rounded-md px-2.5 py-1 text-xs font-semibold uppercase tracking-wide;
    }

    .field-control {
        @apply w-full rounded-md border border-slate-300 bg-white px-3 py-2.5 text-sm outline-none transition focus:border-brand-400 focus:ring-2 focus:ring-brand-100;
    }

    .section-title {
        @apply text-base font-semibold text-slate-950;
    }

    .metric-card {
        @apply rounded-lg border border-slate-200 bg-white p-4 shadow-[0_8px_22px_rgba(15,23,42,0.04)];
    }
}