/* ==========================================================================
   TOKENS — la source de vérité visuelle du site
   ==========================================================================

   Ce fichier ne dessine rien. Il ne fait que NOMMER les valeurs que tout le
   reste consomme : couleurs, rayons, durées, strates d'empilement.

   Pourquoi il existe :
   la landing (`landing.html`) disposait déjà de ces variables, mais dans un
   `<style>` interne — invisible pour le jeu. Résultat, l'or de la marque
   `#fbbf24` était écrit en dur 60 fois dans `index.html`, 45 fois sous sa
   variante `#facc15`, et le changer demandait une centaine d'éditions.
   Les valeurs ci-dessous sont EXACTEMENT celles de la landing : rien n'a
   changé d'apparence, la définition a seulement changé d'endroit.

   Comment s'en servir :
   à chaque fois qu'on touche à un bloc de style existant, remplacer la
   couleur en dur par sa variable. La migration est progressive et sans
   risque — une couleur non migrée reste juste une couleur en dur.

   Ordre de chargement : ce fichier AVANT `style.css`. Les variables doivent
   exister quand les règles qui les lisent sont évaluées.
   ========================================================================== */

:root {

    /* ── Fonds ─────────────────────────────────────────────────────────── */
    --bg:        #0e0814;   /* fond de référence (aussi <meta theme-color>) */
    --bg2:       #140b1f;   /* section alternée */
    --bg3:       #1c1030;   /* section la plus claire */

    /* ── Or de la marque ───────────────────────────────────────────────── */
    /* Trois usages distincts, à ne pas confondre :
       --gold      le trait, le texte, le bouton principal
       --gold-dim  un fond teinté qui ne doit pas attirer l'œil
       --gold-glow une lueur portée (box-shadow), jamais un aplat         */
    --gold:      #fbbf24;
    --gold-dim:  rgba(251,191,36,.14);
    --gold-glow: rgba(251,191,36,.35);
    /* Variante plus vive, historiquement utilisée dans le jeu pour les
       éléments actifs (curseurs, sélection). Conservée telle quelle. */
    --gold-hot:  #facc15;

    /* ── Couleurs d'état et d'enseigne ─────────────────────────────────── */
    /* Les quatre premières servent à la fois d'enseignes (♥ ♠ ♦ ♣) et de
       sémantique d'interface — c'est volontaire, le jeu de cartes EST le
       langage visuel du site. */
    --red:       #ff4466;   /* ♥ — erreur, échec, adversaire */
    --blue:      #4477ff;   /* ♠ — information, équipe « nous » */
    --orange:    #ff9922;   /* ♦ — avertissement, mise en garde */
    --green:     #22cc66;   /* ♣ — succès, validation */
    --violet:    #7c3aed;   /* accent secondaire (surcoinche, Club) */

    /* Nuances claires des mêmes états, telles qu'employées dans le jeu sur
       fond sombre (un vert vif sur noir est agressif ; ces variantes sont
       les valeurs qui s'y trouvaient déjà). */
    --green-soft: #4ade80;
    --red-soft:   #f87171;
    --blue-soft:  #60a5fa;

    /* ── Texte ─────────────────────────────────────────────────────────── */
    --text:      #f1f5f9;             /* texte principal */
    --muted:     rgba(241,245,249,.55); /* secondaire — 5,8:1 sur --bg, AA */
    --text-soft: rgba(241,245,249,.72); /* intermédiaire — 9,4:1 sur --bg  */

    /* ── Traits et surfaces ────────────────────────────────────────────── */
    --border:    rgba(255,255,255,.09);
    --card-bg:   rgba(255,255,255,.03);
    --radius:    16px;   /* carte, panneau */
    --radius-sm: 10px;   /* bouton, champ */
    --radius-pill: 999px;

    /* ── Mouvement ─────────────────────────────────────────────────────── */
    /* Une seule courbe pour tout ce qui entre à l'écran : c'est ce qui donne
       au site son « geste » reconnaissable. */
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --dur-fast:  .15s;
    --dur-base:  .25s;
    --dur-slow:  .55s;

    /* ── Strates d'empilement ──────────────────────────────────────────── */
    /* Le projet comptait 70 valeurs de z-index allant de 1 à 12000, chaque
       nouvelle surcouche surenchérissant sur la précédente. L'échelle
       ci-dessous DÉCRIT l'existant plutôt que de le renommer : les valeurs
       correspondent à ce qui est déjà en place. Elle sert de référence pour
       ne plus avoir à deviner — un nouvel élément se range dans une strate,
       il n'invente pas un nombre plus grand. */
    --z-tapis:      0;      /* décor du plateau */
    --z-board:     50;      /* mains, avatars, decks */
    --z-panel:    100;      /* panneaux de coin, barre d'outils */
    --z-overlay:  210;      /* enchères, annonces, bulles */
    --z-toast:    300;      /* notifications passagères */
    --z-modal:   1000;      /* fenêtres bloquantes */
    --z-popover: 1300;      /* ce qui s'ouvre PAR-DESSUS une fenêtre */
    --z-critical: 12000;    /* maintenance, coupure serveur — rien au-dessus */
}