/*
  Design tokens Squashix — source: docs/design-system/v5.html
  Ne pas dupliquer ces valeurs ailleurs : toute page du site doit
  importer ce fichier et consommer les variables ci-dessous.

  --court n'existe pas dans le document v5 (qui ne connaît que 5 couleurs
  d'identité + --blue pour l'info générique) : conservé comme 6ᵉ couleur de
  marque, propre à Squashix, pour l'Arcade — décision actée le 19/08/2026.
*/
:root {
  --joueur: var(--blue-c-etiq); /* le nom d'un joueur : le bleu du coin Paris, contrasté sur fond clair */
  /* Les courbes des animations d'interface (tableau de bord d'accueil : glisser-déposer), en `linear()` — lues par le JS
     (WAAPI n'accepte pas var() dans un easing). --sx-glisse : amortissement critique, aucun dépassement, longue queue —
     pour les blocs qui se réorganisent. --sx-ressort : se pose avec un dépassement d'à peine 1,5 % — pour le bloc lâché. */
  --sx-glisse: linear(0, 0.026, 0.09, 0.173, 0.264, 0.355, 0.442, 0.522, 0.594, 0.657, 0.713, 0.76, 0.801, 0.835, 0.864, 0.888, 0.908, 0.925, 0.939, 0.95, 0.96, 0.967, 0.973, 0.979, 0.983, 0.986, 0.989, 0.991, 0.993, 0.994, 0.995, 0.996, 1);
  --sx-ressort: linear(0, 0.062, 0.202, 0.366, 0.526, 0.665, 0.777, 0.861, 0.922, 0.964, 0.99, 1.005, 1.012, 1.015, 1.015, 1.013, 1.01, 1.008, 1.006, 1.004, 1.002, 1.001, 1.001, 1, 1, 1, 1, 1, 1);
  --bg: #fbf6ec;
  --card: #fffdfa;
  --card-2: #fbf6ec;
  --line: #ded4bf;
  --line-2: #cfc2aa;
  --ink: #26301f;
  --ink-soft: #65705d;
  --ink-muted: #8a927e;

  --sage: #58784b;
  --sage-light: #86a473;
  --sage-2: #3f6339;
  --sage-soft: #e4efdc;

  --terracotta: #d87150;
  --terracotta-2: #b95738;
  --terracotta-soft: #f7dfd3;
  --logo-points-balle: #ffffff; /* les deux points de la balle du logo */

  --mustard: #d7a02c;
  --mustard-2: #a97618;
  --mustard-soft: #f7e9c5;

  --plum: #ab5a89;
  --plum-2: #88406c;
  --plum-soft: #f2ddeb;

  --blue: #47789f;
  --blue-soft: #dcecf6;

  --success: #4f8a58;
  --success-soft: #dff0e1;

  --danger: #8f3540;
  --danger-soft: #f3dde1;
  --danger-ink: #fbe7e8;

  --court: #4a7c8c;
  --court-soft: #dceaee;

  /* Paliers PSA (/paris) — dégradés métalliques par tier, décision actée le
     21/08/2026 sur le même principe que --court : les 6 couleurs de marque ne
     suffisent pas à distinguer 8+ paliers officiels (Mondial/Finals, Diamond,
     Platinum, Gold, Silver, Bronze, Copper), et leur hiérarchie visuelle doit
     rester lisible même sans lire le texte. Chaque badge dégrade de -from à
     -to (voir .paris-tier-badge, public/paris.css) ; -ink est choisi par
     paire pour rester lisible SUR ce dégradé précis, indépendamment du thème
     clair/sombre de la page (un badge est une pastille pleine couleur, pas du
     texte sur le fond de la page).  */
  --tier-major-from: #2b2115;
  --tier-major-to: #d7a02c;
  --tier-major-ink: #fff8e8;
  --tier-diamond-from: #cdeaf7;
  --tier-diamond-to: #6fb3d9;
  --tier-diamond-ink: #17323e;
  --tier-platinum-from: #eef0f2;
  --tier-platinum-to: #b0b7bd;
  --tier-platinum-ink: #33373a;
  --tier-gold-from: #f6dfa0;
  --tier-gold-to: #d4af37;
  --tier-gold-ink: #453609;
  --tier-silver-from: #eef0f1;
  --tier-silver-to: #a8adb3;
  --tier-silver-ink: #33373a;
  --tier-bronze-from: #d8b48f;
  --tier-bronze-to: #8c6239;
  --tier-bronze-ink: #fff6ec;
  --tier-copper-from: #e3a479;
  --tier-copper-to: #b56a3f;
  --tier-copper-ink: #fff6ec;

  /* Échelle de rayons — --radius/--radius-sm restent pour ne rien casser des
     11 fichiers qui les consomment déjà : ils pointent vers cette échelle. */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --pill: 999px;
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);

  /* Ombre douce (élévation), remplace le « pop shadow » (ombre dure décalée +
     bordure épaisse) — pivot d'identité visuelle acté le 19/08/2026. Le nom
     --shadow-pop reste pour ne rien casser des 51 usages existants, seul son
     contenu change. */
  --shadow-subtle: 0 10px 30px rgba(38, 48, 31, 0.08), 0 1px 4px rgba(38, 48, 31, 0.04);
  --shadow-hover: 0 16px 42px rgba(38, 48, 31, 0.13);
  --shadow-pop: var(--shadow-subtle);
  /* Couleur d'ombre pour filter:drop-shadow() (billets du hub Paris) : une
     ombre portée suit la forme découpée du billet, ce que box-shadow ne fait pas. */
  --ombre-billet: rgba(38, 48, 31, 0.22);

  /* Surface la plus élevée du système (cartes match/bracket, denses et très
     nombreuses à l'écran en même temps) — identique à --card en thème clair
     (déjà bien détachée de --bg), redéfinie plus haut en thème sombre où
     --card seul est trop proche de --bg pour "sortir" visuellement, voir
     [data-theme="dark"] plus bas. */
  --card-pop: var(--card);

  /* Voile posé derrière une fenêtre modale (<dialog>::backdrop) — assombrit
     la page sans la faire disparaître, dans les deux thèmes. */
  --voile: rgba(38, 48, 31, 0.45);

  /* Fond des boutons PLEINS (.btn-primary/-terracotta/-mustard/-plum/-danger,
     libellé blanc ou --ink dessus) — distinct de --sage/--terracotta/etc. qui
     servent aussi de COULEUR DE TEXTE sur fond sombre (badges, accents) et
     sont donc éclaircis dans ce thème-là : un bouton plein reprenant --sage
     tel quel devient un fond pastel avec un libellé blanc illisible. --*-solid
     reste la même teinte saturée dans les deux thèmes, calibrée pour porter
     un libellé clair — voir [data-theme="dark"] plus bas pour le constat. */
  --sage-solid: var(--sage);
  /* Le libellé ou l'icône posés SUR un fond --*-solid (bouton de lecture de
     la frise, .frise-lecture) : clair dans les deux thèmes, puisque le fond
     plein, lui, reste saturé dans les deux. */
  --on-solid: #fffdfa;
  --terracotta-solid: var(--terracotta);
  --mustard-solid: var(--mustard);
  --plum-solid: var(--plum);
  --blue-solid: var(--blue);
  --danger-solid: var(--danger);

  /* Fin de dégradé des cartes « en avant » du tableau de bord d'accueil
     (docs/accueil.md) : la teinte pleine --*-solid vers une version plus
     profonde, identique dans les deux thèmes comme les --*-solid. --on-mustard :
     l'encre posée SUR la moutarde pleine — --ink, elle, s'éclaircit en thème
     sombre et deviendrait illisible sur ce fond. */
  --sage-deep: #33502b;
  --blue-deep: #2d5070;
  --mustard-deep: #bf8a1a;
  --plum-deep: #803f66;
  --terracotta-deep: #b0553a;
  --on-mustard: #26301f;

  /* Badge gain/perte sur la bordure d'une carte du tableau : mêmes teintes et
     même encre dans les deux thèmes (celles du thème sombre), pour que le
     badge se lise pareil quel que soit le thème. */
  --badge-gain: #9cc58a;
  --badge-perte: #de7c88;
  --on-badge: #171811;

  /* Fond des badges (section 4) — identique à --*-soft en thème clair (déjà
     un pastel plein, bon contraste avec --*-2). Redéfini en thème sombre où
     --*-soft est un lavis très transparent (~16-18%) pensé pour un fond DÉJÀ
     coloré (bannière, corner-icon) — sur le fond neutre d'un badge, ce même
     lavis devient presque invisible et le badge ne se voit quasi plus comme
     une pastille. */
  --sage-badge: var(--sage-soft);
  --terracotta-badge: var(--terracotta-soft);
  --mustard-badge: var(--mustard-soft);
  --plum-badge: var(--plum-soft);
  --danger-badge: var(--danger-soft);
  --blue-badge: var(--blue-soft);

  /* Cartes du tableau de bord d'accueil (docs/accueil.md), proposition B : carte
     neutre, cadre et accents dans la teinte du coin. Sept rôles par catégorie —
     -c-bord (cadre), -c-etiq (étiquette, intitulés), -c-titre / -c-t2 (encre),
     -c-tuile (fond des tuiles), -c-btn / -c-btn-ink (bouton plein), -c-badge /
     -c-badge-ink (date, décompte, pastilles). Chaque paire texte/fond atteint
     4,5:1 dans les deux thèmes (audit du 30/09/2026). --success-texte : le vert
     du gain posé en TEXTE sur la carte claire (--success y fait 4,0:1). */
  --sage-c-bord: #456935;   --sage-c-etiq: #4c763a;   --sage-c-titre: #374431;  --sage-c-t2: #4d6741;
  --sage-c-tuile: #eef4ec;  --sage-c-btn: #456935;    --sage-c-btn-ink: #fffdfa;
  --sage-c-badge: #e0ebdb;  --sage-c-badge-ink: #426235;
  --blue-c-bord: #2d5e81;   --blue-c-etiq: #33709c;   --blue-c-titre: #30424f;  --blue-c-t2: #3f647e;
  --blue-c-tuile: #eaf1f6;  --blue-c-btn: #2e6084;    --blue-c-btn-ink: #fffdfa;
  --blue-c-badge: #d7e5ef;  --blue-c-badge-ink: #2f5a79;
  --mustard-c-bord: #a77a11; --mustard-c-etiq: #8b650b; --mustard-c-titre: #4b3e20; --mustard-c-t2: #755c22;
  --mustard-c-tuile: #faf4e6; --mustard-c-btn: #b98713; --mustard-c-btn-ink: #1b2416;
  --mustard-c-badge: #f8ebce; --mustard-c-badge-ink: #755815;
  --plum-c-bord: #803764;   --plum-c-etiq: #ab4785;   --plum-c-titre: #543849;  --plum-c-t2: #864d71;
  --plum-c-tuile: #f5ebf1;  --plum-c-btn: #843967;    --plum-c-btn-ink: #fffdfa;
  --plum-c-badge: #edd9e5;  --plum-c-badge-ink: #803c66;
  --success-texte: #358245;

  --mono: "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

[data-theme="dark"] {
  --joueur: var(--ink); /* le nom d'un joueur (tableau de bord d'accueil) : l'encre du thème, 13,1:1 sur la tuile */
  --bg: #171811;
  --card: #201f18;
  --card-2: #27251d;
  --line: #413d31;
  --line-2: #595342;
  --ink: #f8f4ea;
  --ink-soft: #c9c2b1;
  --ink-muted: #9f9786;

  --sage: #9cc58a;
  --sage-light: #b7d9a8;
  --sage-2: #b7d9a8;
  --sage-soft: rgba(156, 197, 138, 0.18);

  --terracotta: #ff936c;
  --terracotta-2: #ffb092;
  --terracotta-soft: rgba(255, 147, 108, 0.17);
  --logo-points-balle: #ffffff;

  --mustard: #f3c45a;
  --mustard-2: #ffd87e;
  --mustard-soft: rgba(243, 196, 90, 0.16);

  --plum: #dc91c4;
  --plum-2: #efafd8;
  --plum-soft: rgba(220, 145, 196, 0.17);

  --blue: #88b9df;
  --blue-soft: rgba(136, 185, 223, 0.18);

  --success: #8bcf96;
  --success-soft: rgba(139, 207, 150, 0.16);

  --danger: #de7c88;
  --danger-soft: rgba(222, 124, 136, 0.17);
  --danger-ink: #2a0d0d;

  --court: #7fb6c6;
  --court-soft: rgba(127, 182, 198, 0.2);

  /* Même famille de teinte que le thème clair, éclaircie/saturée pour porter
     sur fond sombre — même logique que --sage/--terracotta/--mustard
     ci-dessus, voir le commentaire de :root pour le pourquoi de ces tokens. */
  --tier-major-from: #3a2c1a;
  --tier-major-to: #f3c45a;
  --tier-major-ink: #2b2115;
  --tier-diamond-from: #35576a;
  --tier-diamond-to: #8ecbe8;
  --tier-diamond-ink: #0e232b;
  --tier-platinum-from: #4a4e52;
  --tier-platinum-to: #ced3d7;
  --tier-platinum-ink: #24272a;
  --tier-gold-from: #4a3a10;
  --tier-gold-to: #f3c45a;
  --tier-gold-ink: #2b2109;
  --tier-silver-from: #47494b;
  --tier-silver-to: #ced3d7;
  --tier-silver-ink: #24272a;
  --tier-bronze-from: #6e4a26;
  --tier-bronze-to: #c9925c;
  --tier-bronze-ink: #2b1d0f;
  --tier-copper-from: #6e3d22;
  --tier-copper-to: #e09163;
  --tier-copper-ink: #2b1a0f;

  --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.32);
  --shadow-hover: 0 18px 46px rgba(0, 0, 0, 0.46);
  --shadow-pop: var(--shadow-subtle);
  --ombre-billet: rgba(0, 0, 0, 0.5);

  --card-pop: #2e2c22;

  --voile: rgba(10, 12, 8, 0.66);

  /* Mêmes teintes saturées qu'en thème clair (pas les versions --sage/etc.
     éclaircies ci-dessus, calibrées pour du texte sur fond sombre, pas pour
     être elles-mêmes un fond) : un bouton plein garde besoin d'un fond assez
     sombre pour qu'un libellé blanc s'y détache, quel que soit le thème. */
  --sage-solid: #58784b;
  --terracotta-solid: #d87150;
  --mustard-solid: #d7a02c;
  --plum-solid: #ab5a89;
  --blue-solid: #47789f;
  --danger-solid: #8f3540;

  --sage-badge: rgba(156, 197, 138, 0.32);
  --terracotta-badge: rgba(255, 147, 108, 0.3);
  --mustard-badge: rgba(243, 196, 90, 0.28);
  --plum-badge: rgba(220, 145, 196, 0.3);
  --danger-badge: rgba(222, 124, 136, 0.28);
  --blue-badge: rgba(136, 185, 223, 0.3);

  /* Cartes d'accueil, thème sombre : fond de carte neutre, cadre et étiquettes
     en teinte lumineuse, bouton clair à encre sombre. Voir le bloc de :root. */
  --sage-c-bord: #6faa55;   --sage-c-etiq: #669f4e;   --sage-c-titre: #e9eee7;  --sage-c-t2: #86a977;
  --sage-c-tuile: #2b2a21;  --sage-c-btn: #aed09f;    --sage-c-btn-ink: #1b2416;
  --sage-c-badge: #375729;  --sage-c-badge-ink: #c8dcbf;
  --blue-c-bord: #428abd;   --blue-c-etiq: #5497c7;   --blue-c-titre: #e9eef1;  --blue-c-t2: #80a5bf;
  --blue-c-tuile: #2b2a21;  --blue-c-btn: #97c0dd;    --blue-c-btn-ink: #1b2416;
  --blue-c-badge: #204b69;  --blue-c-badge-ink: #b3cee2;
  --mustard-c-bord: #cc9e33; --mustard-c-etiq: #bd890f; --mustard-c-titre: #f1ecdf; --mustard-c-t2: #c49a39;
  --mustard-c-tuile: #2b2a21; --mustard-c-btn: #ecc979; --mustard-c-btn-ink: #1b2416;
  --mustard-c-badge: #634c17; --mustard-c-badge-ink: #edd499;
  --plum-c-bord: #b24d8b;   --plum-c-etiq: #c778a9;   --plum-c-titre: #f2ebef;  --plum-c-t2: #c091ae;
  --plum-c-tuile: #2b2a21;  --plum-c-btn: #daa5c5;    --plum-c-btn-ink: #1b2416;
  --plum-c-badge: #63274c;  --plum-c-badge-ink: #d9aec8;
  --success-texte: var(--success);
}