/* ==========================================================
   Jetons de design « Taverne » — thème fantasy D&D (sombre par défaut)
   Contrastes calculés (WCAG) : texte/fond ≥ 12:1, texte atténué ≥ 6,9:1,
   accents (or, danger, soin) ≥ 4,7:1 sur toutes les surfaces.
   Polices : à héberger soi-même (fichiers .woff2 dans /public/fonts),
   pas de CDN Google (RGPD + autonomie de l'hébergement).
   ========================================================== */

:root {
  color-scheme: dark;

  /* Surfaces (3 niveaux chauds, jamais de noir pur) */
  --bg:        #14100d;
  --surface:   #1e1813;
  --surface-2: #2a2119;
  --overlay:   rgb(10 7 5 / .72);

  /* Texte (jamais de blanc pur : moins d'éblouissement) */
  --text:    #f1e6d0;   /* parchemin  */
  --muted:   #b9a98e;   /* secondaire */
  --on-gold: #1a1208;   /* texte sur bouton or */

  /* Accents sémantiques — toujours doublés d'une icône + d'un libellé */
  --gold:   #d4af5a;    /* action principale, tour actif, ornements */
  --danger: #e0675a;    /* dégâts, PV bas, suppression */
  --heal:   #6fcf8f;    /* soins, réussite */
  --arcane: #9bb5f2;    /* états magiques, information */
  --warn:   #e8a850;    /* attention, concentration */
  --border: #8a6d3b;    /* bordures décoratives (≥3:1 sur --bg) */
  --hairline: #4a3b28;  /* séparateurs discrets (décoratifs seulement) */

  /* Typographie */
  --font-title: "Cinzel", "Trajan Pro", Georgia, serif;          /* titres, noms, n° de round */
  --font-body:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* tout le reste */
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1.0625rem;
  --fs-lg: 1.375rem; --fs-xl: 1.875rem; --fs-2xl: 2.75rem;
  --lh: 1.45;

  /* Espacement (base 8 px) et formes */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius: 6px;            /* angles peu arrondis : plus « gravé » que « app » */
  --target: 44px;           /* taille mini des cibles tactiles principales */
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--gold);   /* anneau de focus 2 couches */

  /* Ornement : double filet or (extérieur 2 px + intérieur discret) */
  --frame: 0 0 0 2px var(--border), inset 0 0 0 1px var(--hairline);
  --shadow: 0 6px 18px rgb(0 0 0 / .45);
}

/* Variante claire « Parchemin » (salle lumineuse, impression) */
:root[data-theme="parchemin"] {
  color-scheme: light;
  --bg: #f3e7cf; --surface: #fbf3e0; --surface-2: #ead9b8;
  --text: #2a1d12; --muted: #6b5538; --on-gold: #1a1208;
  --gold: #8a6212; --danger: #8a1f1f; --heal: #1f6b3a; --arcane: #2c4a8f; --warn: #7a4a08;
  --border: #7a5c2e; --hairline: #cdb78a; --overlay: rgb(40 28 14 / .55);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--text);
}

/* Mode « écran partagé » (TV / vidéoprojecteur vus à ~3 m) :
   texte ≥ 24 px, marges de sécurité 5 %, filets ≥ 2 px, densité réduite. */
:root[data-mode="grand-ecran"] {
  --fs-xs: 1.25rem; --fs-sm: 1.5rem; --fs-md: 1.75rem; --fs-lg: 2.25rem; --fs-xl: 3rem; --fs-2xl: 4.5rem;
  --target: 64px;
  --hairline: var(--border);
}
:root[data-mode="grand-ecran"] body { padding: 5vh 5vw; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-md)/var(--lh) var(--font-body); }
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: .04em; line-height: 1.2; margin: 0; }
.num { font-variant-numeric: tabular-nums; }      /* chiffres alignés : PV, initiative */

/* Focus visible pour clavier et lecteurs d'écran, jamais supprimé */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}