/* ============================================================
   Tuto-CRPE — theme-dark.css
   Mode sombre : on ne réécrit que les variables.
   Activé par la classe « dark » sur <html> (voir js/app.js).
   ============================================================ */

html.dark {
  color-scheme: dark;

  /* Surfaces */
  --bg: #000000;
  --surface: #0a0a0a;
  --border: #1a1a1a;

  /* Texte */
  --text: #e8edf7;
  --muted: #94a3b8;

  /* Marque */
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-soft: rgba(99, 102, 241, .16);
  --primary-soft-text: #a5b4fc;
  --link: #a5b4fc;

  /* Accents sémantiques */
  --accent-soft: rgba(251, 146, 60, .16);
  --accent-soft-text: #fdba74;

  --success: #4ade80;
  --success-soft: rgba(34, 197, 94, .14);
  --success-soft-text: #86efac;

  --danger: #f87171;
  --danger-soft: rgba(239, 68, 68, .14);
  --danger-soft-text: #fca5a5;

  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .14);
  --warn-soft-text: #fcd34d;

  /* Ombres & focus */
  --ring: 0 0 0 3px rgba(129, 140, 248, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45);

  /* Surlignage lisible en sombre */
  --mark-bg: #854d0e;
  --mark-text: #fef9c3;
  --mark-green-bg: #14532d;
  --mark-green-text: #bbf7d0;
}