/* Jetons de couleur, de rayon et d'ombre (étape E16 du plan de refactoring
   « templates »). Chargé en premier sur toutes les pages (socle de
   chrome/head.php et layouts/auth.php).

   Règle : une couleur qui change entre thème clair et sombre passe par un
   jeton ; html.dark ne redéfinit QUE ces variables. Les feuilles de
   fonctionnalité écrivent `color: var(--text-muted)` au lieu d'un couple
   « valeur claire + règle html.dark ». Les rares règles html.dark restantes
   (voir docs/refactoring-templates.md, E16) sont des exceptions documentées.

   Les palettes d'accent (--accent-50 … --accent-900, permutées par
   html[data-accent], dans app.css) ne changent pas ; les jetons « accent-* »
   ci-dessous s'appuient dessus. */

:root {
  /* Page et surfaces */
  --page-bg:               #f8fafc; /* fond de l'application */
  --surface:               #fff; /* cartes, panneaux, tableaux */
  --surface-muted:         #f1f5f9; /* survol, puces, zones en retrait */
  --surface-subtle:        #f8fafc; /* encadré discret (notice) */
  --surface-translucent:   rgba(255, 255, 255, 0.9); /* en-tête collant (flou dessous) */
  --table-head-bg:         #f8fafc; /* en-tête de tableau */
  --row-hover-bg:          #f0f0f0; /* ligne d'opération survolée */
  --tooltip-bg:            #0f172a; /* infobulle */

  /* Champs */
  --field-bg:              #fff; /* champ de saisie, bouton-champ */
  --field-bg-ghost:        transparent; /* champ sans fond en clair */
  --segment-active-bg:     #fff; /* segment choisi d'un sélecteur segmenté */
  --control-muted:         #cbd5e1; /* piste d'interrupteur, poignée, pastille vide */

  /* Bordures */
  --border:                #e2e8f0; /* bordure standard */
  --border-strong:         #cbd5e1; /* bordure de champ */
  --border-subtle:         #f1f5f9; /* séparateur léger */
  --row-hover-border:      #cbd1d8; /* ligne d'opération survolée */

  /* Textes */
  --text:                  #0f172a; /* texte principal (et contour de même contraste) */
  --text-body:             #0f172a; /* texte courant de la page */
  --text-muted:            #475569; /* texte secondaire */
  --text-subtle:           #64748b; /* texte tertiaire, icônes */
  --text-faint:            #94a3b8; /* intitulés de section, rôle */
  --text-emphasis:         #334155; /* titre d'élément de liste */

  /* Accent */
  --accent-soft:           rgb(var(--accent-50)); /* fond d'élément actif */
  --accent-soft-strong:    rgb(var(--accent-100)); /* pastille d'avatar */
  --accent-text:           rgb(var(--accent-700)); /* texte sur fond d'accent doux */

  /* Danger */
  --danger:                #e11d48; /* texte/icône de danger, dépense */
  --danger-strong:         #be123c; /* texte d'un bandeau d'erreur */
  --danger-bg:             #fff1f2; /* fond de bandeau / survol de danger */
  --danger-bg-hover:       #fee2e2; /* survol d'une action de retrait */
  --danger-border:         #fecdd3; /* bordure de bandeau d'erreur */
  --danger-soft:           #ffe4e6; /* bouton icône de danger */
  --danger-soft-hover:     #fecdd3; /* bouton icône de danger survolé */

  /* Succès */
  --success:               #059669; /* texte/icône de succès, recette */
  --success-strong:        #047857; /* texte d'un bandeau / badge de succès */
  --success-bg:            #ecfdf5; /* fond de bandeau de succès */
  --success-border:        #a7f3d0; /* bordure de bandeau de succès */
  --success-badge-bg:      #d1fae5; /* badge « rapprochée » */
  --success-soft:          #d1fae5; /* bouton icône de succès */
  --success-soft-hover:    #a7f3d0; /* bouton icône de succès survolé */
  --success-soft-text:     #059669; /* icône d'un bouton de succès */

  /* Avertissement */
  --warning-text:          #92400e; /* texte d'avertissement */
  --warning-bg:            #fffbeb; /* fond de bandeau d'avertissement */
  --warning-bg-soft:       #fffbeb; /* encart d'avertissement (carte) */
  --warning-badge-bg:      #fef3c7; /* badge « en attente » */
  --warning-border:        #fde68a; /* bordure de bandeau d'avertissement */
  --warning-border-strong: #fcd34d; /* bordure d'encart d'avertissement */

  /* Information */
  --info-text:             #1d4ed8; /* texte du badge « pointée » */
  --info-icon:             #2563eb; /* icône d'information */
  --info-badge-bg:         #dbeafe; /* badge « pointée » */
  --info-soft:             #dbeafe; /* bouton icône neutre */
  --info-soft-hover:       #bfdbfe; /* bouton icône neutre survolé */
  --info-soft-text:        #2563eb; /* icône d'un bouton neutre */

  /* Formes (identiques dans les deux thèmes) */
  --radius:         0.5rem;
  --radius-full:    9999px;
  --shadow-card:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-pop:     0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-modal:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

html.dark {
  /* Page et surfaces */
  --page-bg:               #020617;
  --surface:               #0f172a;
  --surface-muted:         #1e293b;
  --surface-subtle:        #0f172a;
  --surface-translucent:   rgba(15, 23, 42, 0.9);
  --table-head-bg:         rgba(30, 41, 59, 0.5);
  --row-hover-bg:          #141f38;
  --tooltip-bg:            #1e293b;

  /* Champs */
  --field-bg:              #1e293b;
  --field-bg-ghost:        #1e293b;
  --segment-active-bg:     #334155;
  --control-muted:         #475569;

  /* Bordures */
  --border:                #1e293b;
  --border-strong:         #334155;
  --border-subtle:         #1e293b;
  --row-hover-border:      #2a3953;

  /* Textes */
  --text:                  #fff;
  --text-body:             #f1f5f9;
  --text-muted:            #cbd5e1;
  --text-subtle:           #94a3b8;
  --text-faint:            #64748b;
  --text-emphasis:         #e2e8f0;

  /* Accent */
  --accent-soft:           rgb(var(--accent-900) / 0.4);
  --accent-soft-strong:    rgb(var(--accent-900) / 0.4);
  --accent-text:           rgb(var(--accent-300));

  /* Danger */
  --danger:                #fb7185;
  --danger-strong:         #fda4af;
  --danger-bg:             #4c0519;
  --danger-bg-hover:       #450a0a;
  --danger-border:         #881337;
  --danger-soft:           rgba(76, 5, 25, 0.4);
  --danger-soft-hover:     rgba(76, 5, 25, 0.6);

  /* Succès */
  --success:               #34d399;
  --success-strong:        #6ee7b7;
  --success-bg:            #022c22;
  --success-border:        #065f46;
  --success-badge-bg:      #022c22;
  --success-soft:          rgba(6, 78, 59, 0.4);
  --success-soft-hover:    rgba(6, 78, 59, 0.6);
  --success-soft-text:     #6ee7b7;

  /* Avertissement */
  --warning-text:          #fcd34d;
  --warning-bg:            #451a03;
  --warning-bg-soft:       rgba(69, 26, 3, 0.5);
  --warning-badge-bg:      #451a03;
  --warning-border:        #78350f;
  --warning-border-strong: #78350f;

  /* Information */
  --info-text:             #93c5fd;
  --info-icon:             #60a5fa;
  --info-badge-bg:         #172554;
  --info-soft:             rgba(30, 58, 138, 0.4);
  --info-soft-hover:       rgba(30, 58, 138, 0.6);
  --info-soft-text:        #93c5fd;
}