/* ═══════════════════════════════════════════════════════════════════════
   DRAHMI — SYSTÈME DE COULEUR
   Source unique pour toutes les pages du site. Chaque page charge ce
   fichier ; aucune page ne redéclare une couleur en dur. C'est ce qui a
   dérivé la dernière fois : --muted valait #6B655A sur l'accueil et
   #8A8578 sur le blog, soit onze pages sous le seuil de contraste.

   Deux couches :
     1. PRIMITIVES — les quatre couleurs de marque (PRODUCT.md) et la
        rampe neutre chaude dont elles ont besoin.
     2. RÔLES — ce que la couleur veut dire ici. Le reste du CSS ne parle
        qu'en rôles. Changer un thème = remapper les rôles, jamais
        rechercher un hex dans seize fichiers.

   Les ratios en commentaire sont mesurés (WCAG 2.1), pas estimés.
   Seuils : texte 4.5:1 · grand texte 3:1 · contrôles et graphiques 3:1.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────
     1. PRIMITIVES
     ───────────────────────────────────────────────────────────────── */

  /* Marque — engagements, ne pas modifier sans mettre à jour
     PRODUCT.md et apps/mobile/lib/theme.ts. */
  --brand-sand:    #F5F0E8;
  --brand-ink:     #0F0E0B;
  --brand-emerald: #1A6B4A;
  --brand-gold:    #D4A847;

  /* Rampe neutre chaude (teinte 80°, chroma bas). Un gris neutre vire au
     bleu sale sur le sable ; celle-ci reste dans la même famille. */
  --n-00: #FFFFFF;
  --n-05: #F5F0E8;  /* = sable */
  --n-10: #EDE6D6;
  --n-20: #DCD7CF;
  --n-30: #AFAAA3;
  --n-40: #857F77;
  --n-50: #6B655A;
  --n-60: #5C5850;
  --n-80: #2A2820;
  --n-95: #0F0E0B;  /* = encre */

  /* Neutres lisibles SUR l'encre. Valeurs pleines, pas des alpha empilés :
     rgba(245,240,232,0.45) donnait 4.14:1 — un échec mesuré, invisible
     tant que personne ne calculait la couleur composite. */
  --n-inv-70: #A9A49C;
  --n-inv-80: #BBB7AF;
  --n-inv-raised: #27241F;
  --n-inv-line:   #302D28;

  /* Émeraude — l'action. */
  --em-40: #0C5B3D;
  --em-50: #1A6B4A;
  --em-60: #07865B;
  --em-70: #54BC8C;
  --em-80: #2EBF7A;
  --em-wash: #DFF7EA;

  /* Or — l'argent. Contrainte structurante : l'or de marque (#D4A847)
     fait 1.95:1 sur le sable. Il ne peut donc JAMAIS porter du texte sur
     fond clair, quelle que soit la taille. Sur fond clair il n'existe
     qu'en aplat ou en filet ; le texte passe par --au-40, un or profond
     de la même teinte (84°). Sur l'encre, l'or de marque est à 8.72:1 et
     redevient une couleur de texte. */
  --au-40: #7E5D09;
  --au-55: #A97F0A;
  --au-70: #D4A847;
  --au-85: #F0C860;
  --au-wash: #FBEFD6;

  /* Ocre — le marché parallèle. Dérivé de l'or (teinte 84° → 58°), pas
     une cinquième couleur de marque. */
  --oc-45: #935927;
  --oc-60: #B37646;
  --oc-wash: #FDE8DA;

  /* Alerte */
  --rd-50: #B23A2E;

  /* ─────────────────────────────────────────────────────────────────
     2. RÔLES — le seul vocabulaire que le reste du CSS doit employer
     ───────────────────────────────────────────────────────────────── */

  /* Surfaces */
  --surface:            var(--n-05);
  --surface-raised:     var(--n-00);
  --surface-sunken:     var(--n-10);
  --surface-invert:     var(--n-95);
  --surface-invert-raised: var(--n-inv-raised);
  --surface-money:      var(--au-wash);   /* encre dessus : 16.93:1 */
  --surface-parallel:   var(--oc-wash);   /* encre dessus : 16.30:1 */
  --surface-action:     var(--em-wash);

  /* Texte sur surfaces claires */
  --text:           var(--n-95);  /* 16.4:1 sur sable  */
  --text-secondary: var(--n-80);  /* 13.01:1           */
  --text-muted:     var(--n-50);  /*  5.09:1 · corps   */
  --text-subtle:    var(--n-60);  /*  6.24:1 · ≤0.85rem, plus petit donc plus contrasté */

  /* Texte sur l'encre */
  --text-on-invert:           var(--n-05);      /* 16.4:1 */
  --text-on-invert-secondary: var(--n-inv-80);  /*  9.66:1 */
  --text-on-invert-muted:     var(--n-inv-70);  /*  7.79:1 */

  /* Action — émeraude, et rien d'autre. Un bouton doit être l'émeraude
     la plus forte de l'écran ; chaque émeraude décorative lui vole ça. */
  --action:            var(--em-50);  /* 5.70:1 sable · blanc dessus 6.47:1 */
  --action-hover:      var(--em-40);  /* plus SOMBRE au survol : blanc dessus 8.14:1.
                                         L'ancien survol #23925F tombait à 3.93:1. */
  --action-contrast:   var(--n-00);
  --action-on-invert:  var(--em-70);  /* 8.23:1 sur encre — l'émeraude de marque n'y fait que 2.98:1 */
  --focus:             var(--em-50);

  /* Direct — l'indicateur « c'est vrai en ce moment ». */
  --live:            var(--em-60);  /* 4.05:1 sable — l'ancien #2EBF7A faisait 2.09:1 */
  --live-on-invert:  var(--em-80);  /* 8.13:1 sur encre */

  /* Argent — dinars, taux, montants, fraîcheur d'un chiffre. */
  --money:            var(--au-40);  /* 5.36:1 sable · 6.07:1 blanc · 4.89:1 sable foncé */
  --money-rule:       var(--au-55);  /* 3.23:1 — filets et soulignements, jamais du texte */
  --money-fill:       var(--au-70);  /* aplat uniquement sur fond clair ; texte encre dessus */
  --money-on-invert:  var(--au-85);  /* 12.07:1 sur encre */

  /* Marché parallèle — un territoire, pas un chiffre. Drahmi ne publie
     aucun taux parallèle (PRODUCT.md, contrainte légale) : cette couleur
     tient une surface, un filet et une étiquette, jamais un montant.
     C'est la contrainte juridique rendue lisible en couleur. */
  --parallel:       var(--oc-45);  /* 5.00:1 sable · 4.79:1 sur sa propre surface */
  --parallel-rule:  var(--oc-60);  /* 3.31:1 */

  /* Structure */
  --border:            var(--n-20);  /* filets décoratifs */
  --border-strong:     var(--n-40);  /* champs et contrôles : 3.49:1 (WCAG 1.4.11).
                                        L'ancien rgba(15,14,11,0.12) faisait 1.31:1. */
  --border-on-invert:  var(--n-inv-line);

  /* État */
  --danger:  var(--rd-50);  /* 5.23:1 sable · 5.94:1 blanc */

  /* Élévation — décalage + flou, jamais un halo centré */
  --shadow-sm: 0 1px 2px rgba(15, 14, 11, 0.05);
  --shadow-md: 0 6px 24px rgba(15, 14, 11, 0.07);
  --shadow-lg: 0 16px 48px rgba(15, 14, 11, 0.09);

  --radius: 12px;

  /* ─────────────────────────────────────────────────────────────────
     3. COMPATIBILITÉ
     Anciens noms, gardés le temps que les feuilles inline migrent vers
     les rôles. Ils pointent vers les valeurs corrigées : une page encore
     écrite en var(--muted) reçoit malgré tout le 5.09:1.
     Ne pas écrire de nouvelles règles avec ces noms.
     ───────────────────────────────────────────────────────────────── */
  --sand:          var(--brand-sand);
  --sand-dark:     var(--surface-sunken);
  --ink:           var(--text);
  --ink-soft:      var(--text-secondary);
  --ink-muted:     var(--text-muted);
  --muted:         var(--text-muted);
  --white:         var(--surface-raised);
  --emerald:       var(--action);
  --emerald-light: var(--action-hover);
  --emerald-glow:  var(--live);
  --gold:          var(--money-fill);
  --gold-light:    var(--money-on-invert);
  --error:         var(--danger);
  --line:          var(--border);
}