/* ============================================================
   F|FIRST — Charte graphique partagée
   Variables CSS compatibles avec les mockups front/
   Inclure APRÈS app.css dans app.html
   ============================================================ */

:root {
  /* ── Arrière-plans ── */
  --color-bg-primary:   #ffffff;
  --color-bg-secondary: #f5f4f0;
  --color-bg-tertiary:  #eeece8;

  /* ── Texte ── */
  --color-text-primary:   #1a1a18;
  --color-text-secondary: #6b6a65;
  --color-text-tertiary:  #9b9a95;

  /* ── Bordures ── */
  --color-border-light: rgba(0,0,0,0.08);
  --color-border-mid:   rgba(0,0,0,0.15);

  /* ── Sémantique ── */
  --color-danger:  #c0392b;
  --color-success: #1a7a50;
  --color-warning: #b35a00;

  /* ── Violet (principal) ── */
  --color-purple:       #7F77DD;
  --color-purple-dark:  #3C3489;
  --color-purple-light: #EEEDFE;

  /* ── Teal (succès / actif) ── */
  --color-teal:       #1D9E75;
  --color-teal-light: #E1F5EE;

  /* ── Amber (alerte / attention) ── */
  --color-amber:       #BA7517;
  --color-amber-light: #FAEEDA;

  /* ── Radius ── */
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Typographie ── */
  --font:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Courier New", monospace;

  /* ── Alias app.css → charte mockups ──
     Permet aux pages JS d'utiliser les deux systèmes de nommage
     sans casser les composants existants.
  ── */
  --color-bg-primary:    var(--neutral-0,   #ffffff);
  --color-bg-secondary:  var(--neutral-50,  #f5f4f0);
  --color-bg-tertiary:   var(--neutral-100, #eeece8);
  --color-text-primary:  var(--neutral-900, #1a1a18);
  --color-text-secondary:var(--neutral-500, #6b6a65);
  --color-purple:        var(--purple-600,  #7F77DD);
  --color-purple-dark:   var(--purple-700,  #3C3489);
  --color-purple-light:  var(--purple-50,   #EEEDFE);
  --color-teal:          var(--teal-600,    #1D9E75);
  --color-teal-light:    var(--teal-50,     #E1F5EE);
  --color-amber:         var(--amber-600,   #BA7517);
  --color-amber-light:   var(--amber-50,    #FAEEDA);
  --color-danger:        var(--red-600,     #c0392b);
  --color-success:       var(--teal-600,    #1a7a50);

  /* Tertiary text — pas d'alias neutral existant, valeur fixe light */
  --color-text-tertiary: #9b9a95;
}

/* ── DARK MODE — surcharges variables sémantiques FDE ────────── */
body.theme-dark {
  --color-bg-primary:    var(--neutral-0);
  --color-bg-secondary:  var(--neutral-50);
  --color-bg-tertiary:   var(--neutral-100);
  --color-text-primary:  var(--neutral-900);
  --color-text-secondary:var(--neutral-500);
  --color-text-tertiary: var(--neutral-300);

  /* Bordures : rgba(0,0,0,x) illisibles sur fond sombre → rgba blanc */
  --color-border-light:  rgba(255,255,255,0.09);
  --color-border-mid:    rgba(255,255,255,0.16);

  /* Surfaces sémantiques */
  --color-purple-light:  rgba(83,74,183,.20);
  --color-teal-light:    rgba(15,110,86,.18);
  --color-amber-light:   rgba(186,117,23,.18);
}