/* Les recettes de docs/design-system/components.md, en CSS.
   ⚠️ AUCUNE valeur de token ici : ni couleur, ni taille, ni durée en dur.
   Tout vient de tokens.css, donc de la spec. Si une recette a besoin d'une
   valeur qui n'existe pas, c'est tokens.md qui s'amende — pas ce fichier. */

/* ⚠️ Cette feuille ne définit AUCUNE valeur de token. Elle ne fait que
   la mise en page du visualiseur — tout ce qui est couleur, taille,
   rayon ou durée vient de tokens.css, donc de la spec. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--space-5) var(--space-4) var(--space-8);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: var(--font-size-display);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-2);
}

h2 {
  font-size: var(--font-size-title);
  line-height: var(--line-height-snug);
  margin: var(--space-7) 0 var(--space-2);
}

h3 {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--text-secondary);
  margin: var(--space-5) 0 var(--space-3);
}

p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-raised);
  padding: var(--space-4);
}

/* — 1. Bouton ------------------------------------------------------- */
.btn {
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-standard);
  /* Un bouton peut être un <a> quand il navigue : il n'en porte pas le
     soulignement pour autant, et il centre son libellé comme un bouton. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
.btn:active {
  transform: scale(0.98);
}
.btn--tool {
  background: var(--action-fill);
  color: var(--text-on-action);
}
.btn--game {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn--quiet {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn--destructive {
  background: var(--surface-raised);
  border-color: var(--danger);
  color: var(--danger);
}
.btn--primary {
  min-height: var(--target-comfort);
}
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* — 2. Champ -------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.field > label {
  font-size: var(--font-size-label);
  color: var(--text-secondary);
}
.field > input {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  background: var(--surface-field);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  color: var(--text-primary);
  font: inherit;
}
.field--error > input {
  border-color: var(--danger);
}
.field__message {
  font-size: var(--font-size-label);
  color: var(--danger);
}

/* — 3. Carte joueur ------------------------------------------------- */
.player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
/* ⚠️ Aucune encre ne tient 7:1 sur une marque : calibrée pour les deux
   thèmes, elle est à mi-luminance, donc à égale distance du noir et du
   blanc (4,35:1 des deux côtés). La pastille ne porte donc AUCUN texte —
   l'initiale se pose à côté. Voir tokens.md § 5 bis. */
.player__mark {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-pill);
  flex: none;
}
.player__initial {
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}
.player__name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__score {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
}
.player__score--hero {
  font-size: var(--font-size-score);
}

/* — 4. Cible tactile ------------------------------------------------ */
.target-demo {
  display: flex;
  gap: var(--target-gap);
}
.target-demo > div {
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-s);
  color: var(--text-secondary);
  font-size: var(--font-size-label);
}
.target-demo .min {
  inline-size: var(--target-min);
  block-size: var(--target-min);
}
.target-demo .comfort {
  inline-size: var(--target-comfort);
  block-size: var(--target-comfort);
}

/* — 5. Modale ------------------------------------------------------- */
dialog {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-raised);
  padding: var(--space-5);
  max-inline-size: min(28rem, calc(100vw - var(--space-6)));
  font: inherit;
}
dialog::backdrop {
  background: var(--scrim);
}
dialog h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-title);
}
.dialog__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.dialog__actions .btn {
  inline-size: 100%;
}

/* — 6. Jeton de score ----------------------------------------------- */
.chip {
  min-inline-size: var(--target-comfort);
  min-block-size: var(--target-comfort);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* — 7. Dé ------------------------------------------------------------ */
.die {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: var(--space-1);
  padding: var(--space-3);
}
.die.is-rolling {
  animation: shake var(--motion-slow) var(--ease-standard);
}
.die.is-rolling.is-fast {
  animation-duration: var(--motion-fast);
}
@keyframes shake {
  50% {
    transform: rotate(-6deg) scale(1.04);
  }
}
.pip {
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  inline-size: 0.55rem;
  block-size: 0.55rem;
  align-self: center;
  justify-self: center;
}

/* — Nuanciers -------------------------------------------------------- */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-2);
}
.swatch {
  border-radius: var(--radius-s);
  padding: var(--space-2);
  font-size: var(--font-size-label);
  border: 1px solid var(--border-subtle);
}
.swatch__chip {
  block-size: 2.25rem;
  border-radius: var(--radius-s);
  margin-bottom: var(--space-1);
}
.swatch code {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

/* — Barre de réglages du visualiseur --------------------------------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-3);
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}
.toolbar .btn {
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  font-size: var(--font-size-label);
}
.note {
  border-inline-start: 2px solid var(--border-strong);
  padding-inline-start: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-label);
}