/* =============================================================================
   tokens.css — source unique des couleurs, échelles typographiques et durées.
   §6.1 · §6.2 · §6.7 du cahier des charges.

   Aucune valeur de couleur, de taille de police ou de durée d'animation ne doit
   être écrite en dur ailleurs dans le projet. Si vous êtes tenté d'écrire un
   `#hex` dans un autre fichier, c'est qu'il manque un token ici.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- couleur */

  /* Table — noir chaud, jamais le #0A0A0A par défaut : le froid tue les encres. */
  --table:        #23201D;
  --table-raised: #2E2A25;   /* zones surélevées : rail adverses, barre de main */
  --table-line:   #3A342D;   /* filets 1px, séparateurs */

  /* Encres — chacune a une variante « profonde » pour les ombres portées teintées. */
  --ink-red:      #DE3C2F;  --ink-red-deep:    #8F2118;
  --ink-yellow:   #F0B429;  --ink-yellow-deep: #9A6A0C;
  --ink-green:    #17A06A;  --ink-green-deep:  #0B5F3F;
  --ink-blue:     #2D64E3;  --ink-blue-deep:   #16368C;

  /* Papier — la carte, pas le fond. Stock crème légèrement refroidi. */
  --paper:        #F4EFE6;
  --paper-edge:   #DCD4C6;   /* tranche de la carte, donne l'épaisseur */
  --paper-back:   #1B1815;   /* dos de carte */

  --text-hi:      #F4EFE6;
  --text-lo:      #A79E92;   /* ≥ 4.5:1 sur --table */
  --danger:       #E8563F;   /* coup illégal, pénalité */

  /* Encres « glyphe » — AJOUT au §6.1, imposé par sa propre exigence de contraste.
     Le §6.1 fixe un plancher de 7:1 pour le chiffre sur la carte. Les variantes
     `-deep` sont calibrées pour des ombres portées et n'y arrivent pas toutes
     (jaune profond sur papier : 4.1:1, vert profond : 6.7:1). Ces quatre tokens
     sont les seuls autorisés pour un chiffre ou une forme posés sur le papier
     ou sur l'aplat. Ratios mesurés sur --paper : 7.6 · 7.3 · 8.5 · 9.5. */
  --ink-red-glyph:    #8F2118;
  --ink-yellow-glyph: #6B4700;
  --ink-green-glyph:  #094E33;
  --ink-blue-glyph:   #16368C;

  /* Halo de table (§6.4) : la couleur en cours éclaire la table. */
  --halo-opacity: 0.14;

  /* ----------------------------------------------------------- typographie */

  /* Trois rôles, trois familles. Les WOFF2 sous-ensemblés sont auto-hébergés
     dans /client/fonts (cf. fonts/README.md) ; les replis portent des métriques
     ajustées pour qu'aucun saut de mise en page ne survienne au chargement. */
  --font-card:  'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif;
  --font-ui:    'Familjen Grotesk', 'Familjen Fallback', system-ui, sans-serif;
  --font-data:  'Martian Mono', 'Martian Fallback', ui-monospace, monospace;

  /* Échelle fixe, en clamp() : jamais de media query pour du texte. */
  --t-card:  clamp(2.5rem, 11vw, 4rem);
  --t-title: clamp(1.5rem, 6vw, 2.25rem);
  --t-body:  1rem;
  --t-meta:  0.8125rem;

  /* Capitales : jamais sans letter-spacing positif (§6.2). */
  --tracking-caps: 0.08em;

  /* ---------------------------------------------------------------- espace */

  --gap-xs: 0.25rem;
  --gap-s:  0.5rem;
  --gap-m:  1rem;
  --gap-l:  1.5rem;
  --gap-xl: 2.5rem;

  --radius-card: 0.75rem;
  --radius-ui:   0.625rem;
  --radius-pill: 999px;

  /* Cible tactile minimale (§6.5). */
  --tap: 44px;

  /* ------------------------------------------------------------- mouvement */
  /* Budget serré et orchestré (§6.7). Chaque durée sert une lecture. */

  --d-deal:        60ms;   /* décalage entre deux cartes distribuées */
  --d-throw:       220ms;  /* lancer d'une carte */
  --d-draw:        180ms;  /* pioche */
  --d-color:       400ms;  /* fondu croisé du halo de table */
  --d-turn:        250ms;  /* changement de tour */
  --d-uno:         300ms;  /* tampon UNO */
  --d-shake:       120ms;  /* coup illégal */
  --d-fade:        120ms;  /* repli sous prefers-reduced-motion */

  --e-throw: cubic-bezier(0.2, 0.8, 0.25, 1);
  --e-ui:    cubic-bezier(0.32, 0.72, 0, 1);

  /* ------------------------------------------------------------------ carte */

  --card-w: 5.5rem;
  --card-ratio: 0.66;          /* 2:3, proportion d'une carte imprimée */
  --card-edge: 3px;            /* tranche visible, donne l'épaisseur */

  /* Proportions internes de la carte : tout est dérivé de --card-w, donc une
     carte reste juste à n'importe quelle taille (éventail, pile, maquette). */
  --card-glyph-ratio:  0.46;
  --card-corner-ratio: 0.17;
  --card-lift:  10px;          /* décalage d'une carte jouable (§6.5) */
  --card-muted-opacity: 0.55;
  --card-muted-saturation: 0.6;

  /* --------------------------------------------------------------- élévation */

  --shadow-flat:   none;
  --shadow-raised: 0 2px 6px rgb(0 0 0 / 0.45);
  --shadow-thrown: 0 6px 18px rgb(0 0 0 / 0.5);
  --shadow-modal:  0 24px 60px rgb(0 0 0 / 0.6);

  /* Contour de focus — même géométrie partout (§6.10.3). */
  --focus-ring: 2px solid var(--text-hi);
  --focus-offset: 2px;
}

/* Une couleur d'encre = un jeu de trois variables. Toute surface teintée
   (carte, halo, quadrant du sélecteur, avatar) ne lit que --ink / --ink-deep /
   --ink-glyph, jamais un token de couleur nommé. */
.ink-red    { --ink: var(--ink-red);    --ink-deep: var(--ink-red-deep);    --ink-glyph: var(--ink-red-glyph); }
.ink-yellow { --ink: var(--ink-yellow); --ink-deep: var(--ink-yellow-deep); --ink-glyph: var(--ink-yellow-glyph); }
.ink-green  { --ink: var(--ink-green);  --ink-deep: var(--ink-green-deep);  --ink-glyph: var(--ink-green-glyph); }
.ink-blue   { --ink: var(--ink-blue);   --ink-deep: var(--ink-blue-deep);   --ink-glyph: var(--ink-blue-glyph); }
.ink-none   { --ink: var(--table-raised); --ink-deep: var(--table-line);    --ink-glyph: var(--text-hi); }

/* =============================================================================
   Polices — auto-hébergées, WOFF2 sous-ensemblés (latin + chiffres).
   Les fichiers ne sont pas versionnés dans le dépôt : `npm run fonts` les
   télécharge et les sous-ensemble (cf. client/fonts/README.md). Tant qu'ils sont
   absents, les replis métriquement ajustés ci-dessous prennent le relais — sans
   saut de mise en page, et sans casser le mode offline.
   ============================================================================= */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 75% 110%;
  font-display: swap;
}

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../fonts/familjen-grotesk.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('../fonts/martian-mono.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* Replis à métriques ajustées : la boîte occupée par le texte est identique
   avant et après le chargement, donc aucun reflow (§6.10.7). */
@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  font-weight: 700 800;
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Familjen Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 101%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Martian Fallback';
  src: local('Consolas'), local('Menlo'), local('DejaVu Sans Mono');
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}