:root {
  --brand-start: #0ea5e9;
  --brand-end: #7c3aed;
  /* Thème clair moderne */
  --bg: #f6f7fb;        /* fond doux bleuté */
  --fg: #0b1220;        /* texte principal contrasté (bleu nuit) */
  --header: rgba(255,255,255,0.75);
  --border: rgba(11,18,32,0.10);
  --muted: #5b6b88;     /* gris bleuté moderne */
}

.dark {
  --bg: #0f172a;
  --fg: #e2e8f0;
  --header: rgba(2,6,23,0.6);
  --border: rgba(148,163,184,0.15);
  --muted: #94a3b8;
}

.bg-app { background-color: var(--bg); }
.text-app { color: var(--fg); }
.bg-header { background-color: var(--header); }
.border-border { border-color: var(--border); }
.text-muted { color: var(--muted); }

/* Grid background (plus présent en clair, discret en sombre) */
.bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(14,165,233,0.18) 1px, transparent 1px),
    linear-gradient(135deg, rgba(14,165,233,0.06), rgba(124,58,237,0.06));
  background-size: 24px 24px, 100% 100%;
}
.dark .bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(135deg, rgba(14,165,233,0.08), rgba(124,58,237,0.08));
}

/* Animations */
@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-fade-in { animation: fade-in 400ms ease-out both; }
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Buttons and nav */
.nav-link { color: var(--muted); padding: 0.25rem 0.5rem; border-radius: 0.5rem; transition: background-color .15s ease, color .15s ease; }
.nav-link:hover { color: var(--fg); background: rgba(37,99,235,0.12); }
.dark .nav-link:hover { background: rgba(255,255,255,0.06); }

.btn-primary { color: white; background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); border-radius: 0.6rem; box-shadow: 0 10px 24px rgba(37,99,235,0.25); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 30px rgba(37,99,235,0.32); }

.icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px; border-radius: 0.6rem; border: 1px solid var(--border); color: var(--muted); transition: background-color .15s ease; }
.icon-btn:hover { background: rgba(37,99,235,0.10); }
.dark .icon-btn:hover { background: rgba(255,255,255,0.06); }
.icon-sun { display: none; }
.dark .icon-sun { display: inline; }
.icon-moon { display: inline; }
.dark .icon-moon { display: none; }

/* Alerts */
.alert { border-radius: 0.75rem; padding: 0.75rem 1rem; border: 1px solid; }
.alert-success { background-color: rgba(34,197,94,0.15); color: #16a34a; border-color: rgba(34,197,94,0.35); }
.alert-danger { background-color: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.35); }
.alert-info { background-color: rgba(59,130,246,0.15); color: #3b82f6; border-color: rgba(59,130,246,0.35); }

/* Contraste ciblé (cartes, modales, progress) pour le thème clair */
:root:not(.dark) .bg-slate-900\/50 { background-color: #ffffff; }
:root:not(.dark) .bg-slate-900\/60 { background-color: #ffffff; }
:root:not(.dark) .bg-slate-900\/95 { background-color: #ffffff; }
:root:not(.dark) .bg-white\/5 { background-color: rgba(2,6,23,0.03); }
:root:not(.dark) .border-white\/10 { border-color: rgba(11,18,32,0.12); }
:root:not(.dark) .text-slate-400 { color: #475569; }
:root:not(.dark) .bg-white\/10 { background-color: rgba(2,6,23,0.12); }
:root:not(.dark) .shadow-xl { box-shadow: 0 10px 30px rgba(2,6,23,0.08); }
:root:not(.dark) .modal .bg-slate-900\/95 { color: var(--fg); }

/* Liens */
a { color: #2563eb; }
a:hover { color: #1d4ed8; }

/* Progress bar accent en bleu */
.progress-blue { background: linear-gradient(90deg, #22d3ee, #2563eb); }

/* Badges génériques bleus */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(37,99,235,0.35); background: rgba(37,99,235,0.10); color:#2563eb; }

/* Inputs/Selects en mode clair (évite le fond sombre) */
:root:not(.dark) .bg-slate-800\/80 { background-color: #ffffff !important; color: #0b1220; }
:root:not(.dark) select.bg-slate-800\/80, :root:not(.dark) input.bg-slate-800\/80, :root:not(.dark) textarea.bg-slate-800\/80 {
  background-color: #ffffff !important;
  color: #0b1220;
  border-color: rgba(11,18,32,0.16) !important;
}
:root:not(.dark) select.bg-slate-800\/80:focus, :root:not(.dark) input.bg-slate-800\/80:focus, :root:not(.dark) textarea.bg-slate-800\/80:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.25);
  border-color: #38bdf8 !important; /* sky-400 */
}
:root:not(.dark) input::placeholder, :root:not(.dark) textarea::placeholder { color: #64748b; }