@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/*
 * Theme colors as CSS custom properties (R G B, space-separated, no commas — required by
 * Tailwind's rgb(var(--x) / <alpha-value>) pattern in tailwind.config.js). This is the
 * "Garden" default theme. Settings > General > Appearance can pick a different preset, or
 * a custom color; either way the layout prints a small inline <style> block that overrides
 * just these variables — no rebuild needed to change the look.
 */
:root {
    --c-bg: 245 247 246;
    --c-surface: 255 255 255;
    --c-border: 226 232 228;
    --c-ink: 22 33 28;
    --c-ink-muted: 91 107 98;
    --c-ink-faint: 139 151 143;
    --c-primary-50: 232 244 241;
    --c-primary-100: 207 232 226;
    --c-primary-300: 99 171 155;
    --c-primary-500: 15 110 94;
    --c-primary-600: 12 91 78;
    --c-primary-700: 11 83 71;
    --c-primary-900: 7 55 48;
    --c-accent-50: 251 241 225;
    --c-accent-100: 243 221 179;
    --c-accent-500: 201 138 44;
    --c-accent-600: 169 111 30;
    --c-success: 46 139 87;
    --c-danger: 179 64 47;
    --c-warn: 201 138 44;
    --c-info: 42 111 151;
}

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

@layer base {
    body {
        @apply bg-bg text-ink font-sans antialiased;
    }

    h1, h2, h3, h4 {
        @apply font-display text-ink;
    }
}

@layer components {
    /* Cards */
    .card {
        @apply bg-surface border border-border rounded-xl2 shadow-card;
    }

    .card-pad {
        @apply p-5;
    }

    .stat-card {
        @apply card card-pad flex items-start justify-between gap-3;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold leading-none;
    }
    .badge-slate   { @apply bg-ink/5 text-ink-muted; }
    .badge-emerald { @apply bg-success/10 text-success; }
    .badge-rose    { @apply bg-danger/10 text-danger; }
    .badge-amber   { @apply bg-warn/10 text-accent-600; }
    .badge-teal    { @apply bg-primary-50 text-primary-700; }
    .badge-blue    { @apply bg-info/10 text-info; }
    .badge-violet  { @apply bg-purple-100 text-purple-700; }

    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition active:scale-[.98] disabled:opacity-50 disabled:pointer-events-none;
    }
    .btn-primary { @apply btn bg-primary-500 text-white hover:bg-primary-600 shadow-sm; }
    .btn-secondary { @apply btn bg-white text-ink border border-border hover:bg-ink/5; }
    .btn-danger { @apply btn bg-danger text-white hover:bg-danger/90; }
    .btn-ghost { @apply btn text-ink-muted hover:bg-ink/5; }
    .btn-sm { @apply px-3 py-1.5 text-xs; }

    /* Inputs */
    .field-label { @apply block text-xs font-semibold text-ink-muted mb-1.5; }
    .input {
        @apply w-full rounded-lg border border-border bg-white px-3 py-2 text-sm text-ink placeholder:text-ink-faint focus:border-primary-500 focus:ring-2 focus:ring-primary-100 outline-none transition;
    }
    select.input { @apply pr-8; }

    /* Sidebar nav item */
    .nav-item {
        @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/70 hover:bg-white/10 hover:text-white transition;
    }
    .nav-item.active {
        @apply bg-white/15 text-white;
    }

    /* Tabs */
    .tab-btn {
        @apply px-4 py-2.5 text-sm font-semibold text-ink-muted border-b-2 border-transparent hover:text-ink transition;
    }
    .tab-btn.active {
        @apply text-primary-600 border-primary-500;
    }

    /* Table */
    .data-table { @apply w-full text-sm; }
    .data-table thead th { @apply text-left text-xs font-semibold uppercase tracking-wide text-ink-faint px-4 py-3 border-b border-border; }
    .data-table tbody td { @apply px-4 py-3 border-b border-border/70 align-middle; }
    .data-table tbody tr:hover { @apply bg-primary-50/40; }
}