@import 'tailwindcss';

@theme {
    --font-sans:
        ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

    /* Vert foncé : contraste élevé, lisible en plein soleil sur un pare-brise. */
    --color-brand-50: #eefaf2;
    --color-brand-100: #d5f2e0;
    --color-brand-500: #14805a;
    --color-brand-600: #0f6a4a;
    --color-brand-700: #0f5132;
    --color-brand-900: #06331f;
}

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        /* Évite le zoom involontaire à la saisie sur iOS. */
        touch-action: manipulation;
    }

    body {
        /* Encoches et barre système des téléphones récents. */
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@layer components {
    /*
     * Cibles tactiles du terrain : 56 px de haut minimum, un gant de manutention
     * ne vise pas un bouton de 32 px.
     */
    /*
     * Tailwind v4 ne permet pas d'`@apply` une classe de composant depuis une
     * autre : la base est donc répétée sur chaque variante.
     */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        @apply inline-flex min-h-14 items-center justify-center gap-2 rounded-xl px-5
               text-base font-semibold transition select-none
               focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-500/40
               disabled:pointer-events-none disabled:opacity-50;
    }

    .btn-primary {
        @apply bg-brand-700 text-white hover:bg-brand-600 active:bg-brand-900;
    }

    .btn-secondary {
        @apply bg-white text-slate-800 ring-1 ring-slate-300 hover:bg-slate-50;
    }

    .btn-danger {
        @apply bg-red-700 text-white hover:bg-red-600;
    }

    .btn-sm {
        @apply min-h-10 rounded-lg px-3 text-sm;
    }

    .field {
        @apply block w-full rounded-xl border-0 bg-white px-4 py-3 text-base text-slate-900
               ring-1 ring-slate-300 placeholder:text-slate-400
               focus:ring-2 focus:ring-brand-600 focus:outline-none;
    }

    .label {
        @apply mb-1.5 block text-sm font-medium text-slate-700;
    }

    .card {
        @apply rounded-2xl bg-white shadow-sm ring-1 ring-slate-200;
    }

    .badge {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold;
    }
}