/* Thèmes de PingHub (docs/design/ui-mockup.md § 2 et 3). « Spontin » garde les valeurs du comité du
   16/09/2026 ; « encre » et « sauge » datent du 23/09/2026 ; « glass » remplace « lin » le 05/10/2026.
   Aucune couleur ailleurs dans l'application, hors palette fixe des catégories (donnée du club, app.css).
   --danger, --warn et --focus complètent la liste du comité : alerte / refus, avertissement, focus clavier.

   CE QUI N'EST PLUS ICI (05/10/2026) : --radius. Un rayon n'appartient à aucun thème — les quatre ont
   exactement le même cadre — et la famille des rayons (bouton, tuile, panneau, modale, pastille) vit
   désormais dans le :root d'app.css, avec les hauteurs et les ombres. Ici, la palette et rien d'autre.

   LES TROIS POIDS D'UNE ACTION (05/10/2026, vague 16, point 1) : --primary-* (« Payer », « Valider »,
   « Enregistrer »), --secondary-* (« Espèces ») et --tertiary-* (« Carte »). Le troisième est NOUVEAU, et il
   est nommé par son RÔLE, jamais par sa couleur : « le sombre d'action » est un noir sur les trois thèmes
   clairs, mais sur « encre » c'est un gris ardoise plus CLAIR que le fond — « --dark » y mentirait.
   L'utilisateur a demandé le 05/10/2026 que les espèces portent le jaune et la carte le sombre ; le dépôt
   avait les deux inversés (--secondary-bg, le jaune, était lu par « Carte »). CONSÉQUENCE AILLEURS, et elle
   est voulue : « Dépôt en banque » (Compta) est l'autre bouton qui porte .btn-secondary — il passe donc au
   jaune sur « encre » et « sauge », où --secondary-bg était sombre. Le poids du bouton ne change pas.

   DEUX JETONS NOUVEAUX, et ils ne sont pas des couleurs :
   --glass-blur  : le flou d'arrière-plan. DÉCLARÉ PAR LE SEUL THÈME « glass ». Partout ailleurs app.css
                   lit var(--glass-blur, none) et ne paie rien. C'est ce qui rend le flou commutable sans
                   une ligne de JavaScript ni une classe de plus sur le balisage.
   --touch-filter: l'état TOUCHÉ. « Fond assombri de 6 % » se dit brightness(0.94), et cette écriture-là
                   a une raison : elle assombrit AUSSI un dégradé et une surface translucide, ce qu'un
                   voile en box-shadow ne saurait faire sans effacer le reflet du verre ou l'anneau d'une
                   pastille choisie. Le thème sombre, lui, ÉCLAIRCIT : on n'assombrit pas une surface
                   déjà noire. Il appartient donc au thème, parce qu'il dépend du sens de la lumière. */

:root,
[data-theme="spontin"] {
    --bg: #faf8f3;
    --fg: #161616;
    --muted: #6b6862;
    --rail-bg: #161616;
    --rail-fg: #b9b6b0;
    --rail-active-bg: #d81f1f;
    --rail-active-fg: #ffffff;
    --panel-bg: #ffffff;
    /* Traits remontés : #e8e4da ne donnait que 1,27:1 sur --panel-bg, une bordure invisible.
       #989488 donne 3,03:1 sur le blanc des panneaux et 2,86:1 sur --bg. */
    --border: #989488;
    --btn-bg: #ffffff;
    /* #dcd7cb ne donnait que 1,44:1 ; #8c887b donne 3,55:1 sur --panel-bg et 3,34:1 sur --bg. */
    --btn-border: #8c887b;
    --primary-bg: #d81f1f;
    --primary-fg: #ffffff;
    --secondary-bg: #f6c21c;
    --secondary-fg: #161616;
    /* Le sombre d'action, l'encre du thème : son rail et son texte portent déjà ce noir. 17,05:1. */
    --tertiary-bg: #161616;
    --tertiary-fg: #faf8f3;
    --ok: #16a34a;
    --danger: #b91c1c;
    --warn: #a16207;
    --focus: #d81f1f;
    --touch-filter: brightness(0.94);
}

/* ----- Encre : la nuit du comptoir. Bleu-noir profond, laiton chaud pour l'action.
   Successeur d'« Ardoise » (23/09/2026) : même service — vendre à la lumière du bar sans éblouir —
   mais un fond plus dense et un accent laiton plutôt qu'un bleu d'écran. Les traits d'un thème sombre
   restent volontairement discrets ; ils séparent des surfaces, ils ne se lisent pas. ----- */
[data-theme="encre"] {
    --bg: #11151c;
    --fg: #e9ecf2;
    --muted: #9aa3b2;
    --rail-bg: #0b0e14;
    --rail-fg: #9aa3b2;
    --rail-active-bg: #1d2532;
    --rail-active-fg: #e0b573;
    --panel-bg: #181d26;
    /* 2,21:1 sur --panel-bg et 2,39:1 sur --bg : au-dessus du trait d'« Ardoise » (1,3:1), qui ne se voyait pas. */
    --border: #4a5464;
    --btn-bg: #1f2632;
    /* 2,93:1 sur --btn-bg : le bord d'un bouton doit se tenir seul, même de nuit. */
    --btn-border: #606e82;
    --primary-bg: #d8a55a;
    /* Texte sombre sur le laiton : 8,53:1, là où du blanc n'aurait donné que 2,1:1. */
    --primary-fg: #14100a;
    /* Les espèces prennent le JAUNE du thème (son --warn, le laiton chaud de la palette) et non un jaune
       importé, avec l'encre du laiton par-dessus : 9,74:1. Le sombre d'action, lui, garde la valeur que
       --secondary-bg portait ici depuis le 23/09/2026 — sur un thème de nuit, le « sombre » d'action est un
       gris ardoise plus CLAIR que le fond, ce que le nom du jeton (un rôle, pas une couleur) permet de
       dire. 10,60:1. */
    --secondary-bg: #e3b341;
    --secondary-fg: #14100a;
    --tertiary-bg: #2c3441;
    --tertiary-fg: #e9ecf2;
    --ok: #5ec98a;
    --danger: #f08a80;
    --warn: #e3b341;
    --focus: #e0b573;
    /* Le seul thème qui ÉCLAIRCIT au toucher : 6 % de noir sur #181d26 ne se verrait pas. */
    --touch-filter: brightness(1.35);
}

/* ----- Glass : verre dépoli sur un fond de halos dilués. Successeur de « Lin » (05/10/2026, vague 16).
   Un compte resté sur « lin » retombe sur le défaut à la lecture (Themes.OrDefault), sans migration — exactement
   comme « ardoise », « clair » et « club » le 23/09/2026.

   LE FOND. --bg reste une couleur unie, parce que la moitié des règles d'app.css le posent en
   « background-color » (la coque de la caisse, le voile du verrou, le bandeau des catégories) et qu'un
   dégradé n'y entre pas. Les trois halos sont un jeton à part, --bg-image, lu en « background-image » par
   les trois surfaces qui peignent le fond. Dilués : chaque halo part d'un pastel et s'éteint à zéro bien
   avant le bord — c'est ce qui reste derrière le verre, pas un décor qu'on regarde.

   LES CONTRASTES, mesurés sur le fond (#eef0f6) et sur la surface des panneaux (blanc 82 %, soit #fcfcfd) :
     --fg 15,57:1 / 17,30:1 · --muted 4,85:1 / 5,39:1 · --rail-fg 5,20:1 sur le rail (blanc 55 %)
     --rail-active-fg 5,17:1 sur sa pastille rose · --primary-fg 5,08:1 sur le rouge plein d'action,
     4,55:1 sur le haut de son dégradé (--primary-gradient) et 5,80:1 sur son bas
     --secondary-fg 9,73:1 sur le bas du dégradé des espèces · --tertiary-fg 13,94:1 sur le haut de celui de
     la carte · --danger 6,85:1 · --warn 5,30:1 en fond
     --ok 3,21:1 et --focus 4,46:1 (des traits, seuil 3:1).
   #6b7280 (la valeur de la maquette pour le gris) ne donnait que 4,24:1 sur --bg et #d81f1f en texte sur
   #fdeaea que 4,38:1 : les deux sont descendus d'un cran, c'est la seule retouche de la palette.

   LE BORD BLANC À 85 % de la maquette n'est PAS --border : un liseré blanc sur un fond clair vaut 1,05:1, et
   c'est précisément le défaut corrigé le 23/09/2026 (« une bordure invisible »). Il devient le REFLET
   (--glass-sheen dans app.css, un box-shadow intérieur), et --border garde un vrai trait à 3,15:1 sur les
   panneaux — le même compromis que « spontin » (3,03:1 / 2,86:1). ----- */
[data-theme="glass"] {
    --bg: #eef0f6;
    /* Rouge, bleu, jaune. Ancrés hors du cadre pour qu'aucun centre de halo ne tombe sous les tuiles. */
    --bg-image:
        radial-gradient(1100px 700px at 8% -10%, #ffd6cf 0%, rgba(255, 214, 207, 0) 60%),
        radial-gradient(900px 600px at 100% 0%, #d8e4ff 0%, rgba(216, 228, 255, 0) 55%),
        radial-gradient(900px 700px at 60% 120%, #fff1b8 0%, rgba(255, 241, 184, 0) 55%);
    --fg: #17181c;
    --muted: #636974;
    /* Le rail devient du verre : il laisse passer le halo du coin haut gauche. */
    --rail-bg: rgba(255, 255, 255, 0.55);
    --rail-fg: #636974;
    --rail-active-bg: #fdeaea;
    --rail-active-fg: #c41a1a;
    --panel-bg: rgba(255, 255, 255, 0.82);
    /* Les tuiles et les pastilles de catégorie : 90 %, et SANS flou (performance iPad, voir .tile dans
       app.css). Plus opaques que les panneaux, justement parce qu'elles ne floutent pas ce qui est derrière :
       sans flou, un fond trop transparent laisserait lire le halo à travers le nom du produit. */
    --tile-bg: rgba(255, 255, 255, 0.90);
    --border: #8b8f9a;
    --btn-bg: rgba(255, 255, 255, 0.72);
    --btn-border: #80848f;
    --primary-bg: #d81f1f;
    --primary-fg: #ffffff;
    /* TROISIÈME dégradé (06/10/2026, vague 17, point 5), celui de l'action principale — « Payer »,
       « Valider », « Enregistrer ». La maquette l'écrit #e8312f → #c91717 ; son haut est remonté à
       #e02c2a, parce que du blanc sur #e8312f ne vaut que 4,28:1 et qu'un texte courant demande 4,5:1.
       Mesures retenues : blanc à 4,55:1 sur #e02c2a (le haut) et 5,80:1 sur #c91717 (le bas). Le détail
       de l'arbitrage est à .btn-primary dans app.css, avec l'historique du refus du 05/10/2026.
       --primary-bg reste le rouge PLEIN juste au-dessus et ne bouge pas d'un chiffre : il peint encore
       treize surfaces qui ne peuvent pas recevoir de dégradé (traits, pastilles, indicateurs). */
    --primary-gradient: linear-gradient(180deg, #e02c2a, #c91717);
    /* Les DEUX dégradés de la maquette, dans l'ordre que l'utilisateur a demandé : les espèces en jaune,
       la carte en sombre. --secondary-bg comme --tertiary-bg sont lus en « background » (pas
       « background-color »), justement pour qu'un thème puisse y poser un dégradé.
       Contrastes : encre sur le jaune 12,39:1 en haut et 9,73:1 en bas ; blanc sur le sombre 13,94:1 en haut
       et 17,74:1 en bas. Les deux textes ne peuvent pas être de la même couleur — du blanc sur le bas du
       jaune ne vaudrait que 1,82:1, de l'encre sur le bas du sombre 1,00:1. */
    --secondary-bg: linear-gradient(180deg, #ffd34a, #f1b707);
    --secondary-fg: #17181c;
    --tertiary-bg: linear-gradient(180deg, #2a2c33, #17181c);
    --tertiary-fg: #ffffff;
    --ok: #16a34a;
    --danger: #b01818;
    --warn: #a04a07;
    --focus: #d81f1f;
    --touch-filter: brightness(0.94);
    /* LE SEUL THÈME QUI DÉCLARE CES QUATRE JETONS. Ils allument le flou des cinq surfaces listées dans
       app.css (rail, panneau de vente, modales, voile du verrou, toast) et de nulle part ailleurs : les
       tuiles et les pastilles de catégorie restent opaques, c'est une décision de performance iPad.
       Deux flous et non un : 20 px pour une SURFACE de verre (on regarde à travers une plaque épaisse),
       6 px pour un VOILE (on devine l'écran qui attend derrière). Un voile à 20 px effacerait la caisse,
       et c'est justement ce qu'on ne veut pas : la modale cache ce qu'elle recouvre, elle ne l'oublie pas. */
    --glass-blur: blur(20px) saturate(150%);
    --veil-blur: blur(6px);
    --veil-bg: rgba(23, 24, 28, 0.28);
    /* Voile du verrou : 92 % du fond, assez opaque pour qu'on ne lise plus la caisse, assez transparent
       pour que le flou serve à quelque chose. */
    --lock-bg: rgba(238, 240, 246, 0.92);
}

/* ----- Sauge : vert-gris tranquille, teal profond pour l'action. Successeur de « Club » (23/09/2026) :
   il gardait l'orange du maillot sur un fond presque blanc, et l'orange ne tient pas le contraste.
   Ici la couleur du club passe dans le rail, et l'action prend un vert profond qui se lit. ----- */
[data-theme="sauge"] {
    --bg: #eef1ed;
    --fg: #17201c;
    --muted: #5d6b64;
    --rail-bg: #1b2a27;
    --rail-fg: #a9bdb6;
    --rail-active-bg: #27403a;
    --rail-active-fg: #ffffff;
    --panel-bg: #ffffff;
    --border: #8a968f; /* 3,07:1 sur --panel-bg */
    --btn-bg: #ffffff;
    --btn-border: #7f8a84; /* 3,58:1 sur --btn-bg */
    --primary-bg: #0f6b62;
    --primary-fg: #ffffff; /* 6,36:1 */
    /* Les espèces prennent un or mat plutôt que le jaune du verre, qui crierait sur un fond vert-gris :
       8,53:1 avec l'encre du thème. Le sombre d'action garde la valeur que --secondary-bg portait ici — le
       vert-noir de son rail —, à 14,92:1. */
    --secondary-bg: #e2b33c;
    --secondary-fg: #17201c;
    --tertiary-bg: #1b2a27;
    --tertiary-fg: #ffffff;
    --ok: #15803d;
    --danger: #a32017;
    --warn: #8a5a0b;
    --focus: #0f6b62;
    --touch-filter: brightness(0.94);
}

/* Aperçu des thèmes dans le rail : le fond du thème et son action principale, seul endroit où une couleur
   d'un thème est montrée depuis un autre thème (les variables ne sont lisibles que sous leur propre sélecteur). */
[data-theme-swatch="spontin"] { background-color: #faf8f3; }
[data-theme-swatch="spontin"] .rail-theme-dot { background-color: #d81f1f; }
[data-theme-swatch="encre"] { background-color: #11151c; }
[data-theme-swatch="encre"] .rail-theme-dot { background-color: #d8a55a; }
/* « Glass » et « spontin » ont tous deux un fond clair et une action rouge : la pastille du verre montre en
   plus ses trois halos, à l'échelle du disque, sinon les deux aperçus se ressemblent dans le rail. */
[data-theme-swatch="glass"] {
    background-color: #eef0f6;
    background-image:
        radial-gradient(28px 20px at 10% -10%, #ffd6cf 0%, rgba(255, 214, 207, 0) 60%),
        radial-gradient(24px 18px at 100% 0%, #d8e4ff 0%, rgba(216, 228, 255, 0) 55%),
        radial-gradient(24px 20px at 60% 120%, #fff1b8 0%, rgba(255, 241, 184, 0) 55%);
}

[data-theme-swatch="glass"] .rail-theme-dot { background-color: #d81f1f; }
[data-theme-swatch="sauge"] { background-color: #eef1ed; }
[data-theme-swatch="sauge"] .rail-theme-dot { background-color: #0f6b62; }