/* ⚠️ FICHIER GÉNÉRÉ — ne pas modifier à la main.
   Source : docs/design-system/tokens.md § 8.
   Régénérer : pnpm tokens:css · Vérifier : pnpm tokens:check
   Une valeur corrigée ici et pas là-bas serait perdue au prochain export. */

/* Gamagna — tokens. Source de vérité : docs/design-system/tokens.md.
   Toute valeur est mesurée ; `pnpm contrast:check` le vérifie. */

:root {
  /* Espacement */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Cibles tactiles */
  --target-min: 48px;
  --target-comfort: 56px;
  --target-gap: 8px;

  /* Rayons */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  /* Typographie — la famille est provisoire, voir D030 */
  --font-family-ui:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-size-score: 4.5rem;
  --font-size-display: 2rem;
  --font-size-title: 1.375rem;
  --font-size-body: 1.0625rem;
  --font-size-label: 0.9375rem;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-body: 1.5;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-caps: 0.08em;

  /* Mouvement */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Thème sombre — « Table de nuit », le thème de la direction retenue */
  --surface-base: #0e1116;
  --surface-raised: #171b22;
  --surface-field: #0e1116;
  --scrim: rgba(6, 8, 11, 0.72);
  --border-subtle: #232935;
  --border-strong: #5e6b81;
  --text-primary: #eef1f5;
  --text-secondary: #a2abb7;
  --action-fill: #d5dde8;
  --text-on-action: #0e1116;
  --text-on-accent: #14100a;
  --focus-ring: #eef1f5;
  --danger: #ed8f84;
  --shadow-raised: none;

  /* Palette d'accents — fermée (D015) */
  --accent-amber: #e9a94d;
  --accent-olive: #adbe3c;
  --accent-plum: #e0a2d3;

  /* Un jeu réaffecte --accent à l'un des trois noms ci-dessus. Jamais à une
     valeur littérale : c'est ce que D015 interdit. */
  --accent: var(--accent-amber);

  /* Marques de joueur — fermée, et la même valeur dans les deux thèmes.
     Un joueur ne change pas de couleur quand le téléphone change de mode. */
  --player-red: #d84155;
  --player-orange: #b56425;
  --player-olive: #7d7d1a;
  --player-green: #1d8b33;
  --player-teal: #1b8686;
  --player-blue: #3279d5;
  --player-indigo: #8a60de;
  --player-magenta: #cf2ac9;
}

/* Thème clair — le mode plein soleil. Les rôles sont les mêmes ; les valeurs
   ne sont pas l'inverse des précédentes. Seule la teinte des accents traverse.

   Le bloc est écrit DEUX FOIS, et c'est voulu : une fois pour la préférence
   système, une fois pour l'attribut. CSS ne sait pas combiner une media query
   et un sélecteur dans une seule règle, et l'attribut est nécessaire — sans
   lui, regarder le second thème sur un téléphone oblige à changer le réglage
   du système, ce qui rend le test au doigt impraticable.

   ⚠️ L'attribut est un CRAN, pas un arbitrage : il ne dit pas quel thème
   s'applique par défaut. C'est D031, et elle n'est pas tranchée. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-base: #f2f4f7;
    --surface-raised: #ffffff;
    --surface-field: #ffffff;
    --scrim: rgba(14, 17, 22, 0.44);
    --border-subtle: #dfe3ea;
    --border-strong: #727e8f;
    --text-primary: #0e1116;
    --text-secondary: #455060;
    --action-fill: #1b2430;
    --text-on-action: #ffffff;
    --text-on-accent: #ffffff;
    --focus-ring: #0e1116;
    --danger: #982519;
    --shadow-raised:
      0 1px 2px rgba(14, 17, 22, 0.08), 0 10px 24px rgba(14, 17, 22, 0.07);
    --accent-amber: #6e470e;
    --accent-olive: #4c541a;
    --accent-plum: #832c72;
  }
}

:root[data-theme="light"] {
  --surface-base: #f2f4f7;
  --surface-raised: #ffffff;
  --surface-field: #ffffff;
  --scrim: rgba(14, 17, 22, 0.44);
  --border-subtle: #dfe3ea;
  --border-strong: #727e8f;
  --text-primary: #0e1116;
  --text-secondary: #455060;
  --action-fill: #1b2430;
  --text-on-action: #ffffff;
  --text-on-accent: #ffffff;
  --focus-ring: #0e1116;
  --danger: #982519;
  --shadow-raised:
    0 1px 2px rgba(14, 17, 22, 0.08), 0 10px 24px rgba(14, 17, 22, 0.07);
  --accent-amber: #6e470e;
  --accent-olive: #4c541a;
  --accent-plum: #832c72;
}

/* L'anneau de focus se dessine à l'extérieur, décalé de la couleur de la
   surface : il n'a ainsi jamais à contraster avec un accent rempli. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}