/* Ladder Aigri — « sang & or ».
   ---------------------------------------------------------------------
   L'habillage propre à cette instance. Il ne redéfinit QUE des jetons de
   couleur : pas une règle de mise en page, pas un sélecteur de composant.
   C'est ce qui permet de mettre à jour `styles.css` par simple copie sans
   jamais écraser l'identité d'Aigri.

   La direction vient du blason : écu bordé d'or sur champ pourpre, crâne et
   lames croisées. Deux décisions en découlent :

   1. Le POURPRE est la couleur d'identité — fond, panneaux, cartes, marque.
      Elle ne dit rien d'autre que « ici, c'est Aigri ».
   2. L'OR reste l'accent, comme chez LIBRE, et pour la même raison : il ne
      sert qu'à la valeur et à l'action (kamas, bouton principal, état actif).
      En faire du pourpre l'aurait mis en concurrence avec le rouge du danger
      — et sur un outil qui calcule des paiements, la couleur d'une action
      destructive ne se discute pas.

   L'or d'Aigri est plus saturé que le laiton de LIBRE : c'est celui du
   blason, un or d'héraldique et non un métal mat. */

:root {
  /* Trois plans de pourpre très sombre. L'écart entre deux plans voisins
     reste faible : assez pour que l'œil sépare, trop peu pour que ça se voie
     comme un empilement de boîtes. */
  --bg:         #17100f;
  --panel:      #1b1312;
  --card:       #201716;
  --card-2:     #281d1c;
  --card-hover: #302422;
  --input:      #130d0c;
  --border:     #3a2724;
  --border-sub: #2c1f1d;
  --border-strong: #4d332f;

  --text:       #efe6e0;
  --muted:      #b0a09a;
  --faint:      #9a8781;

  /* Or d'héraldique, repris du blason. */
  --accent:      #e0a72e;
  --accent-h:    #c88f1c;
  --accent-ink:  #1a1206;
  --accent-soft: rgba(224,167,46,.13);
  --accent-bd:   rgba(224,167,46,.32);

  /* Les teintes de famille, réaccordées au pourpre. Elles ne servent qu'au
     repérage — intitulé de groupe, onglet courant, pastille de titre. */
  --violet:      #c496e8;
  --violet-soft: rgba(196,150,232,.13);
  --violet-bd:   rgba(196,150,232,.32);

  --cyan:      #6fc0ac;
  --cyan-soft: rgba(111,192,172,.13);
  --cyan-bd:   rgba(111,192,172,.30);

  --ardoise:      #c4a9a4;
  --ardoise-soft: rgba(196,169,164,.13);
  --ardoise-bd:   rgba(196,169,164,.28);

  /* Sémantique. Le rouge de danger est tiré vers l'orangé : sur un fond
     pourpre, un rouge franc se confondrait avec le décor — et une action
     destructive ne doit jamais se fondre dans le paysage. */
  --success:    #63cc8d;
  --success-bg: rgba(99,204,141,.13);
  --danger:     #f0704f;
  --danger-h:   #d55a3b;
  --danger-bg:  rgba(240,112,79,.14);
  --danger-bd:  rgba(240,112,79,.34);
  --danger-plein: #c2452a;
  --danger-plein-h: #a53821;
  --danger-txt:  #ffb7a2;

  --def: #e8845f;
  --atk: #7bb0e0;

  --warn:      #e8ab4a;
  --warn-bg:   rgba(232,171,74,.14);
  --warn-bd:   rgba(232,171,74,.34);

  --survol:      rgba(255,255,255,.045);
  --survol-fort: rgba(255,255,255,.06);
  --rail-fond:   var(--panel);
  --topbar-fond: rgba(23,16,15,.86);
  --discord-txt: #b0b6ff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.34);
  --shadow: 0 20px 44px -22px rgba(0,0,0,.74), 0 2px 6px rgba(0,0,0,.3);
  --shadow-haut: 0 28px 60px -24px rgba(0,0,0,.82), 0 3px 10px rgba(0,0,0,.36);
  --arete: inset 0 1px 0 rgba(255,255,255,.05);

  --avatar-l: 74%; --avatar-s: 30%;
  --avatar-fond-l: 26%; --avatar-fond-s: 22%;
}

/* ---- Thème jour ------------------------------------------------------
   Pas l'inverse du sombre : sur fond clair, l'or du blason est illisible en
   texte (2,1:1 sur blanc). Il passe donc à un brun doré soutenu partout où
   il porte des lettres, et ne reste or que sur les surfaces pleines — bouton
   principal, onglet actif — où c'est le texte sombre posé dessus qui porte
   le contraste. Le papier tire légèrement vers le rose plutôt que vers le
   bleu : c'est ce qui fait que les deux thèmes se reconnaissent comme un
   seul objet. */
:root[data-theme="clair"] {
  --bg:         #f5f0ee;
  --panel:      #fbf8f7;
  --card:       #ffffff;
  --card-2:     #f6f1ef;
  --card-hover: #efe7e4;
  --input:      #ffffff;
  --border:     #e5dbd8;
  --border-sub: #ede5e2;
  --border-strong: #cbbab5;

  --text:       #1f1614;
  --muted:      #6b5b56;
  --faint:      #78655f;

  --accent:      #8a5f14;
  --accent-h:    #6e4b0d;
  --accent-ink:  #fffaf0;
  --accent-soft: rgba(138,95,20,.10);
  --accent-bd:   rgba(138,95,20,.32);

  --violet:      #6a3fa8;
  --violet-soft: rgba(106,63,168,.10);
  --violet-bd:   rgba(106,63,168,.28);

  --cyan:      #0e7062;
  --cyan-soft: rgba(14,112,98,.10);
  --cyan-bd:   rgba(14,112,98,.26);

  --ardoise:      #6b514b;
  --ardoise-soft: rgba(107,81,75,.10);
  --ardoise-bd:   rgba(107,81,75,.24);

  --success:    #1a7541;
  --success-bg: rgba(26,117,65,.11);
  --danger:     #b23415;
  --danger-h:   #8e290f;
  --danger-bg:  rgba(178,52,21,.09);
  --danger-bd:  rgba(178,52,21,.28);
  --danger-plein: #a83017;
  --danger-plein-h: #8a2610;
  --danger-txt: #8e290f;

  --def: #a8461f;
  --atk: #17548a;
  --warn:      #8c5405;
  --warn-bg:   rgba(140,84,5,.11);
  --warn-bd:   rgba(140,84,5,.28);

  --survol:      rgba(31,22,20,.045);
  --survol-fort: rgba(31,22,20,.065);
  --rail-fond:   var(--panel);
  --topbar-fond: rgba(251,248,247,.86);
  --discord-txt: #3b45c4;

  --shadow-sm: 0 1px 2px rgba(31,22,20,.06);
  --shadow: 0 18px 40px -22px rgba(31,22,20,.22), 0 1px 3px rgba(31,22,20,.06);
  --shadow-haut: 0 26px 56px -24px rgba(31,22,20,.28), 0 2px 6px rgba(31,22,20,.08);
  --arete: inset 0 1px 0 rgba(255,255,255,.9);

  --avatar-l: 32%; --avatar-s: 38%;
  --avatar-fond-l: 92%; --avatar-fond-s: 36%;
}

/* La lumière du haut prend la teinte du champ du blason : c'est la seule
   trace de pourpre franc de toute l'interface, et elle est presque
   imperceptible — juste assez pour qu'un écran d'Aigri ne se confonde pas
   avec un écran de LIBRE au premier coup d'œil. */
html::before {
  background: radial-gradient(1100px 560px at 50% -12%,
    rgba(150,30,40,.10), transparent 70%);
}
:root[data-theme="clair"]::before {
  background: radial-gradient(1100px 560px at 50% -12%,
    rgba(150,30,40,.055), transparent 70%);
}