:root {
  --monday-grass: #00c875;
  --monday-grass-light: #e6f9f1;
  --monday-sky: #579bfc;
  --monday-sky-light: #e6f0ff;
  --monday-sunset: #ffab00;
  --monday-sunset-light: #fff8e6;
  --monday-berry: #e44258;
  --monday-berry-light: #fce8eb;
  --monday-purple: #a25ddc;
  --monday-purple-light: #f3e8fa;
  --monday-ocean: #0086c0;
  --monday-ocean-light: #e6f4fa;
  --monday-dark: #323338;
  --monday-gray: #676879;
  --monday-light-gray: #c5c7d0;
}

.dark {
  --monday-grass-light: rgba(0, 200, 117, 0.15);
  --monday-sky-light: rgba(87, 155, 252, 0.15);
  --monday-sunset-light: rgba(255, 171, 0, 0.15);
  --monday-berry-light: rgba(228, 66, 88, 0.15);
  --monday-purple-light: rgba(162, 93, 220, 0.15);
  --monday-ocean-light: rgba(0, 134, 192, 0.15);
}

.dashboard {
  animation: dashboardFadeIn 0.4s ease-out;
}

@keyframes dashboardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Contraste des boîtes ────────────────────────────────────────────────────
   Sur les écrans à faible contraste, la bordure slate-200 des cartes se confond
   avec le fond canvas. On descend d'un cran dans la palette (slate-300 en clair,
   slate-600 en sombre) uniquement sur le tableau de bord : le design system
   global reste inchangé. Sélecteurs volontairement plus spécifiques que les
   utilities Tailwind (0,2,0 contre 0,1,0), car cette feuille est chargée avant
   la feuille compilée de Tailwind. */
.dashboard [class~="border-slate-200"] { border-color: #cbd5e1; }
.dashboard [class~="border-gray-300"] { border-color: #cbd5e1; }
.dashboard [class~="border-gray-100"] { border-color: #e2e8f0; }
.dashboard [class~="divide-gray-100"] > * + * { border-color: #e2e8f0; }

.dark .dashboard [class~="dark:border-slate-700"] { border-color: #475569; }
.dark .dashboard [class~="dark:border-gray-600"] { border-color: #475569; }
.dark .dashboard [class~="dark:border-gray-700"] { border-color: #475569; }