/* ══════════════════════════════════════════════════════
   TOKENS.CSS — Primitives de la DA, partagées par TOUTES les pages
   (mode classique, mode aventure, tarifs, construire-projet).
   Comics moderne · ville nocturne · néon.

   Rôles couleur :
     • rouge / magenta → action principale, titres forts
     • cyan            → tout ce qui est interactif
     • violet          → secondaire
   ══════════════════════════════════════════════════════ */

:root {
  /* Palette — BLEU NUIT urbain + rouge/magenta/violet/cyan.
     Le noir --stroke ne sert qu'aux contours « encre » et aux ombres. */
  --ink:        #0e1630;   /* fond le plus profond — nuit urbaine */
  --ink-2:      #132048;
  --panel:      #182449;   /* fond des panneaux / modales (relevé) */
  --panel-2:    #20305c;
  --edge:       #3c4c82;   /* liseré discret bleuté */
  --stroke:     #01010a;   /* trait noir épais « encre » comics */
  --night-2:    #14203f;   /* étape intermédiaire de dégradé */
  --urban:      #9fb0d8;   /* gris urbain clair — textes secondaires */

  --red:        #ff123d;   /* action principale / éléments importants */
  --magenta:    #ff2bb0;   /* titres forts / accents chauds */
  --violet:     #8a3bff;   /* secondaire */
  --cyan:       #19e8ff;   /* tout ce qui est interactif */
  --paper:      #f5f6ff;   /* texte */

  --red-deep:   #8f0a24;
  --magenta-deep: #8a1668;
  --cyan-dim:   rgba(25, 232, 255, 0.14);
  --magenta-dim: rgba(255, 43, 176, 0.14);

  /* Trame halftone réutilisable (points) */
  --halftone: radial-gradient(rgba(255,255,255,0.10) 0.8px, transparent 1.4px);
  --halftone-size: 6px 6px;

  /* Fils de toile — diagonales fines croisées, très discrètes (fonds) */
  --weblines: repeating-linear-gradient(58deg,
      transparent 0 26px, rgba(255,255,255,0.028) 26px 27px, transparent 27px 54px),
    repeating-linear-gradient(-58deg,
      transparent 0 26px, rgba(255,255,255,0.028) 26px 27px, transparent 27px 54px);

  /* Quart de toile d'araignée — coin de panneau (SVG original, sans fond) */
  --web-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Cpath d='M0 22A22 22 0 0 1 22 0'/%3E%3Cpath d='M0 48A48 48 0 0 1 48 0'/%3E%3Cpath d='M0 78A78 78 0 0 1 78 0'/%3E%3Cpath d='M0 110A110 110 0 0 1 110 0'/%3E%3Cpath d='M0 0 120 20'/%3E%3Cpath d='M0 0 104 60'/%3E%3Cpath d='M0 0 78 78'/%3E%3Cpath d='M0 0 60 104'/%3E%3Cpath d='M0 0 20 120'/%3E%3C/g%3E%3C/svg%3E");

  /* Pictogramme d'araignée géométrique original — utilisé en mask (couleur = currentColor) */
  --spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cellipse cx='12' cy='13' rx='3' ry='4.2'/%3E%3Ccircle cx='12' cy='8' r='2.1'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M10 9 5.5 4'/%3E%3Cpath d='M14 9 18.5 4'/%3E%3Cpath d='M9 11 4 8 2 10'/%3E%3Cpath d='M9 13 3 13 1 15'/%3E%3Cpath d='M9 15 4 18 2.5 20'/%3E%3Cpath d='M15 11 20 8 22 10'/%3E%3Cpath d='M15 13 21 13 23 15'/%3E%3Cpath d='M15 15 20 18 21.5 20'/%3E%3C/g%3E%3C/svg%3E");

  /* Lignes de vitesse (bandes radiales animables) */
  --speedlines: repeating-linear-gradient(115deg,
      transparent 0 14px,
      rgba(255,255,255,0.035) 14px 15px,
      transparent 15px 30px);

  --pixel-font: 'Press Start 2P', monospace;
  --body-font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Changement de page fluide (classique ⇄ aventure ⇄ tarifs…) : transition
   native entre documents là où elle est supportée, navigation normale sinon. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}