/* ============================================================================
   KIT — tokens.css
   Le vocabulaire visuel du portail et des jeux. C'est le SEUL fichier qui
   contient des valeurs de couleur : partout ailleurs, on n'utilise que des
   variables. Copier ce fichier dans un jeu suffit à lui donner la même gamme.

   Direction : « le feutre au mur, le papier au sol ». Fond lin clair à voile
   vert, encre vert-noir, le vert feutre en structure, un seul accent laiton.

   Trois états de thème, dans cet ordre — ne JAMAIS définir une couleur
   uniquement dans un bloc @media ou [data-theme] :
     1. :root                                  -> la palette claire, complète
     2. @media (prefers-color-scheme: dark)    -> l'OS est sombre, sauf choix
        :root:not([data-theme="light"])           explicite de clair
     3. :root[data-theme="dark"]               -> l'interrupteur gagne
   ========================================================================= */

:root {
  color-scheme: light;

  /* ── Surfaces ──────────────────────────────────────────────────────────
     fond           le sol de la page
     fond-creux     un renfoncement : champ de saisie, puits, piste d'onglets
     surface        le carton posé sur la table : carte, panneau
     surface-haute  le carton soulevé : survol, menu, modale
     voile          superposition translucide (arrière-plan de modale)      */
  --fond:            #F4F6F1;
  --fond-creux:      #EAEEE6;
  --surface:         #FFFFFF;
  --surface-haute:   #FFFFFF;
  --voile:           rgba(15, 22, 19, 0.42);

  /* ── Traits ───────────────────────────────────────────────────────────── */
  --trait:           #DBE2D8;
  --trait-fort:      #C2CCBE;
  --trait-vif:       #A8B5A4;

  /* ── Encre ─────────────────────────────────────────────────────────────
     encre  le texte courant · encre-2  le secondaire · encre-3  le ténu    */
  --encre:           #16211C;
  --encre-2:         #52625A;
  --encre-3:         #8A9990;

  /* ── La marque : le feutre (structure) ─────────────────────────────────
     Blocs pleins, en-têtes, bouton principal. Jamais en fond de page.      */
  --feutre:          #1F5C46;
  --feutre-fonce:    #164434;
  --feutre-clair:    #2B7659;
  --sur-feutre:      #FFFFFF;

  /* ── L'accent unique : le laiton ───────────────────────────────────────
     Rare, donc il compte : liens, focus, mise en valeur ponctuelle.        */
  --laiton:          #B0752A;
  --laiton-clair:    #C98E3F;
  --laiton-voile:    rgba(176, 117, 42, 0.10);
  --laiton-trait:    rgba(176, 117, 42, 0.34);
  --sur-laiton:      #FFFFFF;

  /* ── Les pions : le code couleur des rubriques ─────────────────────────
     Deux jeux d'une même rubrique portent le même pion. Ce n'est pas de la
     décoration : c'est de l'information.                                   */
  --pion-sapin:      #2E7D5B;
  --pion-ardoise:    #3D5A80;
  --pion-carmin:     #B94641;
  --pion-prune:      #6D4370;
  --pion-moutarde:   #C08A16;

  /* ── Sémantique : distincte de l'accent ────────────────────────────────
     succes = en ligne, gagné · alerte = attention · danger = erreur, perdu
     repos  = éteint, verrouillé, indisponible (aucune teinte en plus)      */
  --succes:          #227A56;
  --succes-voile:    rgba(34, 122, 86, 0.10);
  --succes-trait:    rgba(34, 122, 86, 0.32);
  --alerte:          #A9700D;
  --alerte-voile:    rgba(169, 112, 13, 0.11);
  --alerte-trait:    rgba(169, 112, 13, 0.32);
  --danger:          #B24A2E;
  --danger-voile:    rgba(178, 74, 46, 0.10);
  --danger-trait:    rgba(178, 74, 46, 0.32);
  --repos:           #8A9990;
  --repos-voile:     rgba(138, 153, 144, 0.10);
  --repos-trait:     rgba(138, 153, 144, 0.30);

  /* ── Profondeur : une carte posée sur une table, pas un néon ───────────
     Deux couches par ombre — un contact net, une diffusion large.          */
  --pose-1: 0 1px 2px rgba(22, 33, 28, .06), 0 1px 1px rgba(22, 33, 28, .04);
  --pose-2: 0 2px 4px rgba(22, 33, 28, .05), 0 8px 18px -8px rgba(22, 33, 28, .16);
  --pose-3: 0 4px 8px rgba(22, 33, 28, .06), 0 22px 44px -14px rgba(22, 33, 28, .26);
  --pose-4: 0 6px 12px rgba(22, 33, 28, .07), 0 40px 80px -20px rgba(22, 33, 28, .34);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* ── Rayons : une règle, quatre valeurs ────────────────────────────────
     pastilles = pilule · contrôles et champs = sm · cartes et panneaux = md
     grandes surfaces = lg. Aucune autre valeur dans le kit.                */
  --r-xs:     6px;
  --r-sm:     10px;
  --r-md:     14px;
  --r-lg:     20px;
  --r-pilule: 999px;

  /* ── Typographie ───────────────────────────────────────────────────────
     titre  Fraunces, variable (opsz/SOFT/WONK) — le seul endroit qui a du
            caractère.
     texte  Instrument Sans.
     mono   DM Mono, réservée aux chiffres qui s'alignent : codes de salon,
            scores, classements.                                            */
  --f-titre: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-texte: "Instrument Sans", "Segoe UI Variable Text", -apple-system,
             BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono:  "DM Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Échelle typographique — aucune valeur hors de cette liste. */
  --t-100:  0.6875rem;   /* 11 px — micro-libellés en capitales */
  --t-200:  0.75rem;     /* 12 px — légendes, mono              */
  --t-300:  0.8125rem;   /* 13 px — texte secondaire            */
  --t-400:  0.875rem;    /* 14 px — texte dense (tableaux)      */
  --t-500:  1rem;        /* 16 px                               */
  --t-600:  1.0625rem;   /* 17 px — texte courant               */
  --t-700:  1.1875rem;   /* 19 px — titre de carte              */
  --t-800:  1.5rem;      /* 24 px — titre de panneau            */
  --t-900:  clamp(1.75rem, 3.4vw, 2.35rem);   /* titre de section */
  --t-1000: clamp(2.4rem, 6.5vw, 4rem);       /* titre de page    */

  /* ── Espacement : une seule gamme, pas de valeur au jugé ──────────────── */
  --pas-1: 0.25rem;
  --pas-2: 0.5rem;
  --pas-3: 0.75rem;
  --pas-4: 1rem;
  --pas-5: 1.5rem;
  --pas-6: 2rem;
  --pas-7: 3rem;
  --pas-8: 4rem;

  /* ── Mouvement ─────────────────────────────────────────────────────────
     Quatre courbes, chacune avec un emploi précis :
       sortie  ce qui arrive et se pose        (décélère longtemps)
       doux    ce qui change d'état sur place  (standard)
       rebond  ce qui a du poids : emblèmes, jetons, pastilles (dépassement)
       franc   ce qui s'en va                  (accélère puis disparaît)     */
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --doux:   cubic-bezier(0.4, 0, 0.2, 1);
  --rebond: cubic-bezier(0.34, 1.42, 0.5, 1);
  --franc:  cubic-bezier(0.4, 0, 1, 0.5);

  --instant: 90ms;
  --vif:     160ms;
  --pose:    260ms;
  --ample:   420ms;
  --long:    700ms;

  /* Décalage entre deux éléments d'une même série (distribution de cartes). */
  --cadence: 38ms;

  /* ── Gabarit ──────────────────────────────────────────────────────────── */
  --largeur:         1180px;
  --largeur-etroite: 640px;
  --gouttiere:       clamp(1rem, 4vw, 2.25rem);
}

/* ── L'OS est sombre, et l'utilisateur n'a pas explicitement choisi clair ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --fond:          #0F1613;
    --fond-creux:    #0A100D;
    --surface:       #17211C;
    --surface-haute: #1E2A24;
    --voile:         rgba(4, 8, 6, 0.66);

    --trait:         #263129;
    --trait-fort:    #38473E;
    --trait-vif:     #4C5E53;

    --encre:         #EAF0EB;
    --encre-2:       #A3B3A9;
    --encre-3:       #77877D;

    --feutre:        #1B4E3B;
    --feutre-fonce:  #123328;
    --feutre-clair:  #2B7659;
    --sur-feutre:    #EAF0EB;

    --laiton:        #D8A44E;
    --laiton-clair:  #E7B966;
    --laiton-voile:  rgba(216, 164, 78, 0.12);
    --laiton-trait:  rgba(216, 164, 78, 0.34);
    --sur-laiton:    #17211C;

    --pion-sapin:    #4FA981;
    --pion-ardoise:  #6C8CBB;
    --pion-carmin:   #D9706B;
    --pion-prune:    #A278A6;
    --pion-moutarde: #DFAE42;

    --succes:        #4FB98A;
    --succes-voile:  rgba(79, 185, 138, 0.12);
    --succes-trait:  rgba(79, 185, 138, 0.32);
    --alerte:        #DDA94B;
    --alerte-voile:  rgba(221, 169, 75, 0.12);
    --alerte-trait:  rgba(221, 169, 75, 0.32);
    --danger:        #E08163;
    --danger-voile:  rgba(224, 129, 99, 0.12);
    --danger-trait:  rgba(224, 129, 99, 0.32);
    --repos:         #77877D;
    --repos-voile:   rgba(119, 135, 125, 0.12);
    --repos-trait:   rgba(119, 135, 125, 0.30);

    --pose-1: 0 1px 2px rgba(0, 0, 0, .5);
    --pose-2: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 22px -10px rgba(0, 0, 0, .7);
    --pose-3: 0 4px 8px rgba(0, 0, 0, .4), 0 26px 50px -16px rgba(0, 0, 0, .8);
    --pose-4: 0 6px 14px rgba(0, 0, 0, .45), 0 44px 88px -22px rgba(0, 0, 0, .85);
    --relief: inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

/* ── L'utilisateur a choisi sombre : l'interrupteur gagne dans tous les cas */
:root[data-theme="dark"] {
  color-scheme: dark;

  --fond:          #0F1613;
  --fond-creux:    #0A100D;
  --surface:       #17211C;
  --surface-haute: #1E2A24;
  --voile:         rgba(4, 8, 6, 0.66);

  --trait:         #263129;
  --trait-fort:    #38473E;
  --trait-vif:     #4C5E53;

  --encre:         #EAF0EB;
  --encre-2:       #A3B3A9;
  --encre-3:       #77877D;

  --feutre:        #1B4E3B;
  --feutre-fonce:  #123328;
  --feutre-clair:  #2B7659;
  --sur-feutre:    #EAF0EB;

  --laiton:        #D8A44E;
  --laiton-clair:  #E7B966;
  --laiton-voile:  rgba(216, 164, 78, 0.12);
  --laiton-trait:  rgba(216, 164, 78, 0.34);
  --sur-laiton:    #17211C;

  --pion-sapin:    #4FA981;
  --pion-ardoise:  #6C8CBB;
  --pion-carmin:   #D9706B;
  --pion-prune:    #A278A6;
  --pion-moutarde: #DFAE42;

  --succes:        #4FB98A;
  --succes-voile:  rgba(79, 185, 138, 0.12);
  --succes-trait:  rgba(79, 185, 138, 0.32);
  --alerte:        #DDA94B;
  --alerte-voile:  rgba(221, 169, 75, 0.12);
  --alerte-trait:  rgba(221, 169, 75, 0.32);
  --danger:        #E08163;
  --danger-voile:  rgba(224, 129, 99, 0.12);
  --danger-trait:  rgba(224, 129, 99, 0.32);
  --repos:         #77877D;
  --repos-voile:   rgba(119, 135, 125, 0.12);
  --repos-trait:   rgba(119, 135, 125, 0.30);

  --pose-1: 0 1px 2px rgba(0, 0, 0, .5);
  --pose-2: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 22px -10px rgba(0, 0, 0, .7);
  --pose-3: 0 4px 8px rgba(0, 0, 0, .4), 0 26px 50px -16px rgba(0, 0, 0, .8);
  --pose-4: 0 6px 14px rgba(0, 0, 0, .45), 0 44px 88px -22px rgba(0, 0, 0, .85);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .05);
}