@import 'tailwindcss';

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

/* Couleurs relevées sur le logo de La Ressourcerie du Calaisis :
   bleu #007CBC, vert #76BE02, texte blanc. Le bleu porte les actions, le vert
   reste un accent, comme sur le logo : sur fond blanc il n'offre pas assez de
   contraste pour du texte courant. */
@theme {
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --color-marque-50: #eff8fd;
    --color-marque-100: #d8eefa;
    --color-marque-200: #b9e2f7;
    --color-marque-300: #87d0f1;
    --color-marque-400: #4eb5e7;
    --color-marque-500: #2799d4;
    --color-marque-600: #007cbc;
    --color-marque-700: #016397;
    --color-marque-800: #06547d;
    --color-marque-900: #0a4668;

    --color-accent-50: #f6fce9;
    --color-accent-100: #e9f8cd;
    --color-accent-200: #d4f2a1;
    --color-accent-300: #b7e76b;
    --color-accent-400: #9bd83e;
    --color-accent-500: #76be02;
    --color-accent-600: #5c9701;
    --color-accent-700: #457206;
    --color-accent-800: #395a0a;
    --color-accent-900: #324d0e;
}

/* Cibles tactiles confortables : la saisie se fait debout, sur un téléphone,
   parfois avec des gants. */
@layer components {
    .champ {
        @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-base
               text-slate-900 placeholder-slate-400 shadow-sm
               focus:border-marque-600 focus:ring-2 focus:ring-marque-600/30 focus:outline-none;
    }

    .etiquette {
        @apply mb-1 block text-sm font-medium text-slate-700;
    }

    .bouton-principal {
        @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-lg px-4 py-2.5
               text-base font-semibold transition focus:ring-2 focus:ring-offset-2 focus:outline-none
               bg-marque-600 text-white hover:bg-marque-700 focus:ring-marque-600
               disabled:cursor-not-allowed disabled:opacity-60;
    }

    .bouton-secondaire {
        @apply inline-flex min-h-12 items-center justify-center gap-2 rounded-lg px-4 py-2.5
               text-base font-semibold transition focus:ring-2 focus:ring-offset-2 focus:outline-none
               border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus:ring-slate-400
               disabled:cursor-not-allowed disabled:opacity-60;
    }

    .carte {
        @apply rounded-xl border border-slate-200 bg-white p-4 shadow-sm;
    }
}