@import 'tailwindcss'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source '../views/**/*.blade.php'; @source '../../app/Livewire/**/*.php'; /* Dark mode piloté par la classe .dark sur */ @custom-variant dark (&:where(.dark, .dark *)); @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Accent de marque (indigo → violet) */ --color-brand-50: #eef2ff; --color-brand-100: #e0e7ff; --color-brand-200: #c7d2fe; --color-brand-300: #a5b4fc; --color-brand-400: #818cf8; --color-brand-500: #6366f1; --color-brand-600: #4f46e5; --color-brand-700: #4338ca; --color-brand-800: #3730a3; --color-brand-900: #312e81; --radius-xl: 1rem; --radius-2xl: 1.25rem; } /* ------- Base ------- */ @layer base { html { -webkit-text-size-adjust: 100%; } body { @apply bg-slate-50 text-slate-800 antialiased dark:bg-slate-950 dark:text-slate-200; } ::selection { @apply bg-brand-500/25; } /* Scrollbar discrète */ * { scrollbar-width: thin; scrollbar-color: var(--color-slate-300) transparent; } .dark * { scrollbar-color: var(--color-slate-700) transparent; } } /* Utilitaires applicables via @apply (Tailwind v4) */ @utility btn { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/60 disabled:cursor-not-allowed disabled:opacity-60; } @utility badge { @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium; } /* ------- Composants premium réutilisables ------- */ @layer components { .card { @apply rounded-2xl border border-slate-200/70 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900; } .card-hover { @apply transition duration-200 hover:-translate-y-0.5 hover:shadow-md; } .glass { @apply border border-white/40 bg-white/70 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/70; } .btn-primary { @apply btn text-white shadow-sm bg-gradient-to-br from-brand-500 to-brand-700 hover:from-brand-500 hover:to-brand-600 active:from-brand-600 active:to-brand-700; } .btn-secondary { @apply btn border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700; } .btn-ghost { @apply btn text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800; } .btn-danger { @apply btn bg-rose-600 text-white hover:bg-rose-500; } .input { @apply block w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500; } .label { @apply mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300; } .nav-link { @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white; } .nav-link-active { @apply bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300; } } /* Halo décoratif d'arrière-plan (pages auth) */ .auth-aurora { background: radial-gradient(60% 60% at 15% 10%, color-mix(in oklab, var(--color-brand-500) 30%, transparent), transparent 70%), radial-gradient(50% 50% at 90% 20%, color-mix(in oklab, var(--color-violet-500) 25%, transparent), transparent 70%), radial-gradient(60% 60% at 70% 100%, color-mix(in oklab, var(--color-sky-400) 18%, transparent), transparent 70%); }