/* =============================================================
   PRISON ISLAND — TOKENS
   Primitives puis sémantiques. Aucune couleur, aucune durée,
   aucune mesure en dur ailleurs que dans ce fichier.
   ============================================================= */

/* -------------------------------------------------------------
   1. POLICES — Vitesse et Vitesse Sans, auto-hébergées, woff2.
   Aucun CDN tiers : pas de requête sortante, pas d'IP visiteur
   transmise, pas de CSS bloquant depuis un autre domaine.
   Les poids déclarés sont exactement ceux fournis : aucun faux
   gras, aucun faux italique.
   ⚠ Licence web Hoefler&Co à confirmer pour 13 domaines — voir ECARTS.md
   ------------------------------------------------------------- */
@font-face {
  font-family: "Vitesse";
  src: url("../fonts/Vitesse-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vitesse";
  src: url("../fonts/Vitesse-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vitesse";
  src: url("../fonts/Vitesse-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vitesse Sans";
  src: url("../fonts/VitesseSans-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vitesse Sans";
  src: url("../fonts/VitesseSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vitesse Sans";
  src: url("../fonts/VitesseSans-Bold-1.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vitesse Sans";
  src: url("../fonts/VitesseSans-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Replis calibrés : size-adjust et métriques mesurées au navigateur
   contre la vraie fonte, pour que le swap ne déplace pas la ligne (CLS). */
@font-face {
  font-family: "Vitesse repli";
  src: local("Rockwell"), local("Bookman Old Style"), local("Georgia"), local("Times New Roman");
  size-adjust: 103%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Vitesse Sans repli";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 101%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

:root {
  /* ---- Primitives : couleur ---- */
  --base-color-noir-900: #0c0b0a;
  --base-color-noir-800: #141211;
  --base-color-noir-700: #1e1b19;
  --base-color-noir-600: #2a2623;
  --base-color-noir-500: #3a3531;
  --base-color-creme-100: #f7efe1;
  --base-color-creme-200: #efe4d0;
  --base-color-creme-300: #e2d5bb;
  --base-color-blanc: #ffffff;
  --base-color-encre-900: #1a1715;
  --base-color-encre-700: #4a443f;
  --base-color-orange-500: #e8582b;   /* marque — grands textes et aplats */
  --base-color-orange-600: #cf4419;   /* fond de bouton : 4,67:1 sur blanc */
  --base-color-orange-700: #b83a15;   /* petit texte sur fond clair : 5,03:1 sur crème */
  --base-color-vert-500: #34d37a;
  --base-color-rouge-500: #ff4a3d;
  --base-color-ambre-500: #ffb02e;
  --base-color-bleu-500: #5aa9ff;
  --base-color-noir-400: #050505;   /* fond de cellule, le plus profond */
  --base-color-noir-450: #121110;
  --base-color-noir-550: #151312;
  --base-color-noir-650: #1a1816;
  --base-color-noir-750: #1c1917;
  --base-color-noir-850: #1f1c1a;
  --base-color-noir-950: #2c2825;
  --base-color-nuit-500: #0a1418;   /* bleu nuit du dernier appel */
  --base-color-creme-050: #d8d0c4;  /* texte secondaire sur photo */
  --base-color-vert-700: #157a3f;   /* vert lisible sur fond clair : 5,40:1 */
  --base-color-rouge-700: #c62f24;  /* rouge lisible sur fond clair : 5,48:1 */
  --base-color-or-google: #fbbc04;  /* étoiles Google, couleur de la marque */

  /* ---- Sémantiques : couleur ---- */
  --background-color-primary: var(--base-color-creme-100);
  --background-color-secondary: var(--base-color-blanc);
  --background-color-alternate: var(--base-color-noir-900);
  --background-color-alternate-raised: var(--base-color-noir-800);
  --text-color-primary: var(--base-color-encre-900);
  --text-color-secondary: var(--base-color-encre-700);
  --text-color-alternate: var(--base-color-creme-100);
  --text-color-alternate-secondary: #bfb7aa;
  --text-color-brand: var(--base-color-orange-500);        /* sur fond sombre uniquement */
  --text-color-brand-strong: var(--base-color-orange-700); /* sur fond clair uniquement */
  --button-color-background: var(--base-color-orange-600);
  --button-color-background-hover: var(--base-color-orange-700);
  --button-color-text: var(--base-color-blanc);
  --border-color-primary: rgba(26, 23, 21, .14);
  --border-color-alternate: rgba(247, 239, 225, .14);
  --background-color-creuse: var(--base-color-noir-400);      /* intérieur des cellules de jeu */
  --background-color-cta: var(--base-color-nuit-500);
  --text-color-sur-photo: var(--base-color-creme-050);
  --text-color-succes: var(--base-color-vert-700);            /* sur fond clair */
  --text-color-echec: var(--base-color-rouge-700);            /* sur fond clair */

  /* Les trois feux : porteurs de sens, jamais décoratifs,
     jamais seuls porteurs d'une information (toujours doublés d'un texte). */
  --feu-color-vert: var(--base-color-vert-500);
  --feu-color-rouge: var(--base-color-rouge-500);
  --feu-color-ambre: var(--base-color-ambre-500);

  /* Familles de cellules — siège : tactique, technique, physique */
  --type-color-physique: var(--base-color-orange-500);
  --type-color-tactique: var(--base-color-bleu-500);
  --type-color-technique: var(--base-color-vert-500);

  /* ---- Typographie ---- */
  --font-family-titre: "Vitesse", "Vitesse repli", Rockwell, Georgia, serif;
  --font-family-texte: "Vitesse Sans", "Vitesse Sans repli", "Segoe UI", Arial, sans-serif;

  /* ---- Mouvement : durées et courbes, pilotées d'ici ---- */
  --duration-rapide: 160ms;
  --duration-moyenne: 320ms;
  --duration-lente: 640ms;
  --easing-sortie: cubic-bezier(.16, 1, .3, 1);
  --easing-porte: cubic-bezier(.22, 1, .36, 1);

  /* ---- Espacement : multiples de 4px, exprimés en rem base 16 ---- */
  --espace-1: .25rem;  --espace-2: .5rem;   --espace-3: .75rem;
  --espace-4: 1rem;    --espace-5: 1.25rem; --espace-6: 1.5rem;
  --espace-8: 2rem;    --espace-10: 2.5rem; --espace-12: 3rem;
  --espace-16: 4rem;   --espace-20: 5rem;   --espace-24: 6rem;

  /* ---- Mesures ---- */
  --container-large: 82rem;   /* 1312px sur frame 1440 */
  --container-medium: 60rem;
  --container-small: 44rem;
  --radius-small: .375rem;
  --radius-medium: .75rem;
  --radius-section: 2.5rem;
  --cible-tactile: 2.75rem;   /* 44px — plancher de toute cible interactive */
  --hauteur-header: 4.5rem;   /* valeur de départ ; app.js publie la hauteur réelle */

  /* ---- Plans ---- */
  --z-index-fond: 0;
  --z-index-contenu: 1;
  --z-index-barre: 20;
  --z-index-header: 30;
  --z-index-modal: 50;
}

/* =============================================================
   THÈME NUIT — `<html data-theme="nuit">`
   Un seul noir, neutre. Les noirs de la charte tirent tous vers le brun
   (#0c0b0a, #141211, #1e1b19…) : empilés, ça faisait des jeux de marrons.
   Ici on les redéfinit en gris purs, dans une plage volontairement serrée —
   du fond le plus profond à la carte posée, il y a 10 points de luminance,
   pas 30. Le relief ne vient plus de la couleur du sol.

   Redéfinir des PRIMITIVES dans un thème est un cas limite assumé : ce sont
   les mêmes rôles, repeints. Les sémantiques en dessous n'ont pas à savoir.
   ============================================================= */
[data-theme="nuit"] {
  --base-color-noir-900: #000000;   /* sections les plus profondes : noir franc */
  --base-color-noir-800: #030303;   /* fond de page */
  --base-color-noir-700: #0c0c0c;   /* surfaces posées : cartes, encarts */
  --base-color-noir-600: #0c0c0c;
  --base-color-noir-500: #1e1e1e;   /* filets, tracés du plan */
  --base-color-noir-400: #000000;   /* intérieur des cellules */
  --base-color-noir-450: #030303;
  --base-color-noir-550: #060606;
  --base-color-noir-650: #080808;
  --base-color-noir-750: #0a0a0a;
  --base-color-noir-850: #020202;
  --base-color-noir-950: #101010;
  --base-color-nuit-500: #000000;   /* le dernier appel n'est plus bleu-vert */

  --background-color-primary: var(--base-color-noir-800);
  --background-color-secondary: var(--base-color-noir-700);
  --background-color-alternate: var(--base-color-noir-900);
  --background-color-alternate-raised: var(--base-color-noir-600);

  --text-color-primary: var(--base-color-creme-100);
  --text-color-secondary: #b9b9b6;

  /* Existait précisément parce que l'orange 700 est illisible sur sombre :
     sur fond noir, c'est l'orange de marque qui reprend la main. */
  --text-color-brand-strong: var(--base-color-orange-500);

  /* Les filets se retournent, et perdent leur teinte crème. */
  --border-color-primary: rgba(255, 255, 255, .13);
  --border-color-alternate: rgba(255, 255, 255, .13);

  /* Les variantes « lisibles sur fond clair » n'ont plus lieu d'être. */
  --text-color-succes: var(--base-color-vert-500);
  --text-color-echec: var(--base-color-rouge-500);

  /* Le fondu commun. Un dégradé LINÉAIRE se voit : sa pente s'interrompt net
     à ses deux bouts, et l'œil attrape cette cassure (bandes de Mach). D'où
     une courbe adoucie en sept arrêts, qui démarre et finit à pente nulle —
     il n'y a plus d'arête à repérer, seulement une extinction.
     --fondu règle la course ; les arrêts en dérivent. */
  --fondu: 22%;
  --masque-fondu: linear-gradient(180deg,
      transparent 0,
      rgba(0, 0, 0, .04) calc(var(--fondu) * .25),
      rgba(0, 0, 0, .20) calc(var(--fondu) * .5),
      rgba(0, 0, 0, .55) calc(var(--fondu) * .72),
      rgba(0, 0, 0, .86) calc(var(--fondu) * .88),
      #000 var(--fondu),
      #000 calc(100% - var(--fondu)),
      rgba(0, 0, 0, .86) calc(100% - var(--fondu) * .88),
      rgba(0, 0, 0, .55) calc(100% - var(--fondu) * .72),
      rgba(0, 0, 0, .20) calc(100% - var(--fondu) * .5),
      rgba(0, 0, 0, .04) calc(100% - var(--fondu) * .25),
      transparent 100%);

  color-scheme: dark;
}

/* Le fond du navigateur derrière la page (rebond de défilement, surimpression
   des barres système) doit suivre, sinon un liseré crème apparaît aux bords. */
[data-theme="nuit"] { background-color: var(--background-color-primary); }