/*
 * Mode sombre du site vitrine.
 *
 * Aucune règle de composant ici : les feuilles du site ne portent plus de
 * littéral de couleur, seulement des canaux définis dans base.css. Redéfinir
 * ces canaux suffit donc à basculer les 177 sélecteurs concernés.
 *
 * La palette est celle du dashboard (public/assets/css/dashboard/ui.css) pour
 * que les deux moitiés se ressemblent.
 *
 * MÉCANISME À TROIS ÉTATS, identique au dashboard :
 *
 *   [data-theme=dark]   → sombre forcé
 *   [data-theme=light]  → clair forcé (la media query l’exclut)
 *   attribut ABSENT     → la préférence système tranche, sans JavaScript
 *
 * Les deux sélecteurs ont une spécificité de (0,2,0), supérieure au :root
 * (0,1,0) de base.css : la surcharge gagne quel que soit l’ordre de chargement
 * des feuilles, ce qui évite de dépendre de l’ordre d’injection de useHead.
 *
 * Les deux blocs sont volontairement identiques et doivent le rester : CSS ne
 * permet pas de partager un groupe de déclarations entre une règle et une
 * media query. Toute modification va dans les deux.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Canaux structurels */
    --paper-rgb: 17, 24, 39;
    --ink-rgb: 226, 232, 240;
    --shadow-rgb: 0, 0, 0;
    --slate-rgb: 168, 178, 199;

    /* Encres colorées : elles servent au texte, donc elles s’éclaircissent */
    --violet-ink-rgb: 196, 181, 253;
    --brand-rgb: 167, 139, 250;
    --success-rgb: 74, 222, 128;
    --danger-rgb: 252, 165, 165;

    /* Surfaces teintées */
    --surface-danger: #2a1518;
  --tint-success: rgba(74, 222, 128, 0.12);
  --tint-danger: rgba(252, 165, 165, 0.12);
  --tint-violet: rgba(167, 139, 250, 0.14);
    --surface-danger-soft: #2a1518;
    --surface-success: #0f2a1c;
    --track: #1e293b;

    /* Texte d’état */
    --text-success: #4ade80;
    --text-danger: #fca5a5;
    --text-violet: #c4b5fd;
    --text-info: #7dd3fc;
    --text-warning: #fdba74;

    /* Palette générale, alignée sur celle du dashboard */
    --bg: #0b1020;
    --surface: #111827;
    --surface2: #0f172a;
    --text: #e8ecf5;
    --muted: #a8b0c5;
    --muted2: #8390aa;
    --border: rgba(167, 139, 250, 0.18);
    --shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
    --shadow2: 0 12px 28px rgba(0, 0, 0, 0.4);
    --brand: #8b5cf6;
    --brand2: #a855f7;
    --brand3: rgba(139, 92, 246, 0.16);
    --ink: #c4b5fd;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Canaux structurels */
  --paper-rgb: 17, 24, 39;
  --ink-rgb: 226, 232, 240;
  --shadow-rgb: 0, 0, 0;
  --slate-rgb: 168, 178, 199;

  /* Encres colorées : elles servent au texte, donc elles s’éclaircissent */
  --violet-ink-rgb: 196, 181, 253;
  --brand-rgb: 167, 139, 250;
  --success-rgb: 74, 222, 128;
  --danger-rgb: 252, 165, 165;

  /* Surfaces teintées */
  --surface-danger: #2a1518;
  --tint-success: rgba(74, 222, 128, 0.12);
  --tint-danger: rgba(252, 165, 165, 0.12);
  --tint-violet: rgba(167, 139, 250, 0.14);
  --surface-danger-soft: #2a1518;
  --surface-success: #0f2a1c;
  --track: #1e293b;

  /* Texte d’état */
  --text-success: #4ade80;
  --text-danger: #fca5a5;
  --text-violet: #c4b5fd;
  --text-info: #7dd3fc;
  --text-warning: #fdba74;

  /* Palette générale, alignée sur celle du dashboard */
  --bg: #0b1020;
  --surface: #111827;
  --surface2: #0f172a;
  --text: #e8ecf5;
  --muted: #a8b0c5;
  --muted2: #8390aa;
  --border: rgba(167, 139, 250, 0.18);
  --shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
  --shadow2: 0 12px 28px rgba(0, 0, 0, 0.4);
  --brand: #8b5cf6;
  --brand2: #a855f7;
  --brand3: rgba(139, 92, 246, 0.16);
  --ink: #c4b5fd;
}