@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: 'Instrument Sans', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    --color-brand-50: #fffbea;
    --color-brand-100: #fff3bf;
    --color-brand-300: #f9dc63;
    --color-brand-400: #f5c518;
    --color-brand-500: #dba900;
    --color-ink-950: #111111;
    --color-ink-900: #191919;
}

@layer base {
    html { @apply bg-zinc-100 text-zinc-900 antialiased; }
    body { @apply min-h-screen; }
    button, a, input, select, textarea { @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-400; }
    [wire\:cloak] { display: none !important; }
}

@layer components {
    .surface { @apply rounded-2xl border border-zinc-200 bg-white shadow-sm; }
    .field-label { @apply mb-1.5 block text-sm font-semibold text-zinc-800; }
    .field-control { @apply block w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm text-zinc-950 shadow-sm transition placeholder:text-zinc-400 hover:border-zinc-400 focus:border-brand-400 focus:ring-3 focus:ring-brand-100 disabled:cursor-not-allowed disabled:bg-zinc-100; }
    .field-error { @apply mt-1.5 text-sm font-medium text-red-600; }
    .table-head { @apply px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-zinc-500; }
    .table-cell { @apply px-4 py-4 text-sm text-zinc-700; }
}