/* ==========================================================================
   Tokens de couleur — site public
   --------------------------------------------------------------------------
   Format : CANAUX RGB séparés ("15 23 42"), jamais de hex.
   C'est ce format qui permet à Tailwind d'appliquer les modificateurs
   d'opacité : rgb(var(--brand) / 0.1) est valide, rgb(#f97316 / 0.1) ne l'est pas.

   CONSOMMATION HORS TAILWIND : toujours rgb(var(--token)).
   Écrire var(--token) seul produit une déclaration INVALIDE (silencieuse).

   Les valeurs ne sont déclarées QU'ICI, une seule fois, en --light-* / --dark-*.
   Les blocs de bascule ne font que ré-aiguiller.
   ========================================================================== */

:root {
  /* ---- Palette SOMBRE ---------------------------------------------------- */
  --dark-surface-base:       15 23 42;
  --dark-surface-card:       30 41 59;
  --dark-surface-elevated:   51 65 85;
  --dark-surface-border:     51 65 85;
  --dark-border-interactive: 100 116 139;

  --dark-text-primary:   241 245 249;
  --dark-text-secondary: 203 213 225;
  --dark-text-muted:     164 178 196;
  --dark-text-faint:     164 178 196;

  --dark-brand:       249 115 22;
  --dark-brand-hover: 234 88 12;
  --dark-brand-ink:   251 146 60;
  --dark-on-brand:    15 23 42;
  --dark-focus-ring:  249 115 22;

  /* ---- Palette CLAIRE (déclarée, pas encore activée — cf. Tâche 5) -------- */
  --light-surface-base:       255 255 255;
  --light-surface-card:       248 250 252;
  --light-surface-elevated:   241 245 249;
  --light-surface-border:     203 213 225;
  --light-border-interactive: 100 116 139;

  --light-text-primary:   15 23 42;
  --light-text-secondary: 71 85 105;
  --light-text-muted:     91 107 127;
  --light-text-faint:     91 107 127;

  --light-brand:       249 115 22;
  --light-brand-hover: 234 88 12;
  --light-brand-ink:   194 65 12;
  --light-on-brand:    15 23 42;
  --light-focus-ring:  194 65 12;

  /* ---- Feedback sémantique -----------------------------------------------
     Le motif historique (bg-red-900/30 + border-red-600/40 + text-red-300)
     était répété ~30 fois dans les templates. Sur fond clair il donne un
     lavis invisible surmonté d'un texte pastel illisible.
     Les fonds sont ici des couleurs PLEINES : prévisibles sur n'importe
     quelle surface, contrairement à un /30 translucide. */
  /* Bordures du thème sombre : elles doivent atteindre 3:1 sur --dark-surface-base.
     Les teintes -700/-800 (naturelles pour un fond sombre) plafonnaient à 2.15:1 —
     recalées sur les -500/-600 par tools/check-contrast.php. */
  --dark-danger-bg:      69 26 26;     --dark-danger-border:  220 38 38;   --dark-danger-ink:  252 165 165;
  --dark-warning-bg:     69 46 12;     --dark-warning-border: 217 119 6;   --dark-warning-ink: 253 224 130;
  --dark-success-bg:     20 61 39;     --dark-success-border: 22 163 74;   --dark-success-ink: 134 239 172;
  --dark-info-bg:        23 45 77;     --dark-info-border:    59 130 246;  --dark-info-ink:    147 197 253;
  --dark-module-bg:      49 33 84;     --dark-module-border:  168 85 247;  --dark-module-ink:  216 180 254;

  --light-danger-bg:     254 242 242;  --light-danger-border:  185 28 28;  --light-danger-ink:  153 27 27;
  --light-warning-bg:    255 251 235;  --light-warning-border: 180 83 9;   --light-warning-ink: 133 77 14;
  --light-success-bg:    240 253 244;  --light-success-border: 21 128 61;  --light-success-ink: 22 101 52;
  --light-info-bg:       239 246 255;  --light-info-border:    29 78 216;  --light-info-ink:    30 64 175;
  --light-module-bg:     250 245 255;  --light-module-border:  126 34 206; --light-module-ink:  107 33 168;

  /* ---- Accents de tier (badges + boutons d'achat) ------------------------
     Aplats pleins, donc CONSTANTS dans les deux thèmes : l'encre d'un aplat
     dépend de l'aplat, pas du thème de la page.
     À ne pas confondre avec --success-ink / --module-ink, qui sont des ENCRES
     posées sur le fond de page et doivent, elles, suivre le thème. */
  --dark-accent-purple:  99 91 255;    --dark-on-accent-purple:  255 255 255;
  --light-accent-purple: 99 91 255;    --light-on-accent-purple: 255 255 255;
  --dark-accent-green:   74 222 128;   --dark-on-accent-green:   15 23 42;
  --light-accent-green:  74 222 128;   --light-on-accent-green:  15 23 42;

  /* ---- Fond du header (suit le thème) ------------------------------------ */
  --dark-header-bg:  15 23 42;
  --light-header-bg: 255 255 255;

  /* ---- Scrims et fonds de média — CONSTANTS dans les deux thèmes ---------
     Un voile posé sur une image ou une vidéo doit rester SOMBRE même en thème
     clair : le texte qu'il rend lisible est blanc. L'éclaircir par cohérence
     de thème rendrait ce texte invisible.
     Idem pour le fond des zones média (--media-backdrop) : les logos produits
     sont détourés pour un fond noir, et c'est sur du noir qu'ils rendent le
     mieux — pas sur le bleu nuit des surfaces.
     Ces trois tokens ne sont donc PAS thémés — c'est délibéré, ne pas
     "corriger". */
  --scrim:          0 0 0;
  --media-backdrop: 0 0 0;
  --on-media:       255 255 255;

  /* ---- Ombres ------------------------------------------------------------
     Une ombre noire à 65 % d'opacité est juste sur fond sombre et devient une
     tache sale sur fond clair. L'opacité doit donc suivre le thème, pas
     seulement la couleur. Valeurs complètes (pas des canaux) : le vérificateur
     de contraste les ignore, ce ne sont pas des couleurs de texte. */
  --dark-shadow-card:  0 1px 3px rgba(0, 0, 0, 0.4);
  --dark-shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.3);
  --dark-shadow-lift:  0 18px 40px -8px rgba(0, 0, 0, 0.65), 0 0 28px -4px rgb(var(--brand) / 0.22);

  --light-shadow-card:  0 1px 3px rgba(15, 23, 42, 0.08);
  --light-shadow-glass: 0 4px 24px rgba(15, 23, 42, 0.10);
  --light-shadow-lift:  0 18px 40px -8px rgba(15, 23, 42, 0.18), 0 0 28px -4px rgb(var(--brand) / 0.22);

  /* ---- Bandeaux de maintenance ------------------------------------------- */
  --dark-maint1-bg:  120 53 15;    --dark-maint1-ink:  253 230 138;
  --dark-maint2-bg:  124 45 18;    --dark-maint2-ink:  254 215 170;
  --dark-maint3-bg:  69 10 10;     --dark-maint3-ink:  252 165 165;
  --light-maint1-bg: 254 243 199;  --light-maint1-ink: 120 53 15;
  --light-maint2-bg: 255 237 213;  --light-maint2-ink: 124 45 18;
  --light-maint3-bg: 254 226 226;  --light-maint3-ink: 127 29 29;

  /* ---- Aiguillage : CLAIR par défaut ------------------------------------- */
  color-scheme: light;

  --surface-base:       var(--light-surface-base);
  --header-bg:          var(--light-header-bg);
  --surface-card:       var(--light-surface-card);
  --surface-elevated:   var(--light-surface-elevated);
  --surface-border:     var(--light-surface-border);
  --border-interactive: var(--light-border-interactive);

  --text-primary:   var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-muted:     var(--light-text-muted);
  --text-faint:     var(--light-text-faint);

  --brand:       var(--light-brand);
  --brand-hover: var(--light-brand-hover);
  --brand-ink:   var(--light-brand-ink);
  --on-brand:    var(--light-on-brand);
  --focus-ring:  var(--light-focus-ring);

  --danger-bg:  var(--light-danger-bg);   --danger-border:  var(--light-danger-border);   --danger-ink:  var(--light-danger-ink);
  --warning-bg: var(--light-warning-bg);  --warning-border: var(--light-warning-border);  --warning-ink: var(--light-warning-ink);
  --success-bg: var(--light-success-bg);  --success-border: var(--light-success-border);  --success-ink: var(--light-success-ink);
  --info-bg:    var(--light-info-bg);     --info-border:    var(--light-info-border);     --info-ink:    var(--light-info-ink);
  --module-bg:  var(--light-module-bg);   --module-border:  var(--light-module-border);   --module-ink:  var(--light-module-ink);

  --accent-purple: var(--light-accent-purple);  --on-accent-purple: var(--light-on-accent-purple);
  --accent-green:  var(--light-accent-green);   --on-accent-green:  var(--light-on-accent-green);

  --maint1-bg: var(--light-maint1-bg);  --maint1-ink: var(--light-maint1-ink);
  --maint2-bg: var(--light-maint2-bg);  --maint2-ink: var(--light-maint2-ink);
  --maint3-bg: var(--light-maint3-bg);  --maint3-ink: var(--light-maint3-ink);
  --shadow-card:  var(--light-shadow-card);
  --shadow-glass: var(--light-shadow-glass);
  --shadow-lift:  var(--light-shadow-lift);
}

/* ==========================================================================
   Bascule SOMBRE
   --------------------------------------------------------------------------
   1. L'OS est en sombre ET l'utilisateur n'a pas forcé le clair  → sombre
   2. L'utilisateur a explicitement forcé le sombre               → sombre

   Ces blocs ne contiennent AUCUN littéral : uniquement des ré-aiguillages
   vers les valeurs déclarées une seule fois dans :root. La duplication entre
   les deux sélecteurs est inévitable en CSS pur — elle est sans risque
   puisqu'aucune valeur n'y figure.
   ========================================================================== */

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

    --surface-base:       var(--dark-surface-base);
    --header-bg:          var(--dark-header-bg);
    --surface-card:       var(--dark-surface-card);
    --surface-elevated:   var(--dark-surface-elevated);
    --surface-border:     var(--dark-surface-border);
    --border-interactive: var(--dark-border-interactive);

    --text-primary:   var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted:     var(--dark-text-muted);
    --text-faint:     var(--dark-text-faint);

    --brand:       var(--dark-brand);
    --brand-hover: var(--dark-brand-hover);
    --brand-ink:   var(--dark-brand-ink);
    --on-brand:    var(--dark-on-brand);
    --focus-ring:  var(--dark-focus-ring);

    --danger-bg:  var(--dark-danger-bg);   --danger-border:  var(--dark-danger-border);   --danger-ink:  var(--dark-danger-ink);
    --warning-bg: var(--dark-warning-bg);  --warning-border: var(--dark-warning-border);  --warning-ink: var(--dark-warning-ink);
    --success-bg: var(--dark-success-bg);  --success-border: var(--dark-success-border);  --success-ink: var(--dark-success-ink);
    --info-bg:    var(--dark-info-bg);     --info-border:    var(--dark-info-border);     --info-ink:    var(--dark-info-ink);
    --module-bg:  var(--dark-module-bg);   --module-border:  var(--dark-module-border);   --module-ink:  var(--dark-module-ink);

    --accent-purple: var(--dark-accent-purple);  --on-accent-purple: var(--dark-on-accent-purple);
    --accent-green:  var(--dark-accent-green);   --on-accent-green:  var(--dark-on-accent-green);

    --maint1-bg: var(--dark-maint1-bg);  --maint1-ink: var(--dark-maint1-ink);
    --maint2-bg: var(--dark-maint2-bg);  --maint2-ink: var(--dark-maint2-ink);
    --maint3-bg: var(--dark-maint3-bg);  --maint3-ink: var(--dark-maint3-ink);
    --shadow-card:  var(--dark-shadow-card);
    --shadow-glass: var(--dark-shadow-glass);
    --shadow-lift:  var(--dark-shadow-lift);
  }
}

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

  --surface-base:       var(--dark-surface-base);
  --header-bg:          var(--dark-header-bg);
  --surface-card:       var(--dark-surface-card);
  --surface-elevated:   var(--dark-surface-elevated);
  --surface-border:     var(--dark-surface-border);
  --border-interactive: var(--dark-border-interactive);

  --text-primary:   var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-muted:     var(--dark-text-muted);
  --text-faint:     var(--dark-text-faint);

  --brand:       var(--dark-brand);
  --brand-hover: var(--dark-brand-hover);
  --brand-ink:   var(--dark-brand-ink);
  --on-brand:    var(--dark-on-brand);
  --focus-ring:  var(--dark-focus-ring);

  --danger-bg:  var(--dark-danger-bg);   --danger-border:  var(--dark-danger-border);   --danger-ink:  var(--dark-danger-ink);
  --warning-bg: var(--dark-warning-bg);  --warning-border: var(--dark-warning-border);  --warning-ink: var(--dark-warning-ink);
  --success-bg: var(--dark-success-bg);  --success-border: var(--dark-success-border);  --success-ink: var(--dark-success-ink);
  --info-bg:    var(--dark-info-bg);     --info-border:    var(--dark-info-border);     --info-ink:    var(--dark-info-ink);
  --module-bg:  var(--dark-module-bg);   --module-border:  var(--dark-module-border);   --module-ink:  var(--dark-module-ink);

  --accent-purple: var(--dark-accent-purple);  --on-accent-purple: var(--dark-on-accent-purple);
  --accent-green:  var(--dark-accent-green);   --on-accent-green:  var(--dark-on-accent-green);

  --maint1-bg: var(--dark-maint1-bg);  --maint1-ink: var(--dark-maint1-ink);
  --maint2-bg: var(--dark-maint2-bg);  --maint2-ink: var(--dark-maint2-ink);
  --maint3-bg: var(--dark-maint3-bg);  --maint3-ink: var(--dark-maint3-ink);

  --shadow-card:  var(--dark-shadow-card);
  --shadow-glass: var(--dark-shadow-glass);
  --shadow-lift:  var(--dark-shadow-lift);
}