@import "tailwindcss";

@source "../../templates";
@source "../../src";

/* Couleurs de la charte AMANSA VOYAGE (bleu roi + orange du logo) */
@theme {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

    --color-brand-50: #eef4ff;
    --color-brand-100: #dbe6fe;
    --color-brand-200: #bfd3fe;
    --color-brand-300: #93b4fd;
    --color-brand-400: #608bfa;
    --color-brand-500: #3b65f5;
    --color-brand-600: #2548e0;
    --color-brand-700: #1d3ac2;
    --color-brand-800: #1e339d;
    --color-brand-900: #1e307c;
    --color-brand-950: #15204b;

    --color-accent-50: #fff7ed;
    --color-accent-100: #ffedd5;
    --color-accent-200: #fed7aa;
    --color-accent-300: #fdba74;
    --color-accent-400: #fb923c;
    --color-accent-500: #f97316;
    --color-accent-600: #ea580c;
    --color-accent-700: #c2410c;
    --color-accent-800: #9a3412;
    --color-accent-900: #7c2d12;
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer;
    }
    .btn-primary {
        @apply bg-brand-700 text-white hover:bg-brand-800 focus-visible:ring-brand-500;
    }
    .btn-accent {
        @apply bg-accent-500 text-white hover:bg-accent-600 focus-visible:ring-accent-400;
    }
    .btn-secondary {
        @apply border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus-visible:ring-brand-500;
    }
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500;
    }
    .card {
        @apply rounded-xl border border-slate-200 bg-white shadow-sm;
    }
    .badge {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
    }
    .form-label {
        @apply mb-1 block text-sm font-medium text-slate-700;
    }
    .form-input {
        @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none;
    }
    .form-help {
        @apply mt-1 text-xs text-slate-500;
    }
    .form-error {
        @apply mt-1 text-sm text-red-600;
    }
    .nav-link {
        @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-brand-100 transition hover:bg-white/10 hover:text-white;
    }
    .nav-link-active {
        @apply bg-white/15 text-white;
    }
}