/*
 * tokens.css — source unique de jetons pour la PWA Marcel.
 *
 * Règles source :
 *  - DESIGN-SYSTEM.md §1 : palette de marque, nommage français sémantique par la matière
 *    (--carbone, --or, --lcd — jamais --primary).
 *  - DESIGN-SYSTEM.md §1, point 2 : trois jetons d'état DISTINCTS de la palette de marque
 *    (--etat-ok / --etat-attaque / --etat-depassement). Trois, pas quatre. Ne jamais jouer
 *    l'état intermédiaire avec --or (déjà l'accent de marque).
 *  - DESIGN-SYSTEM.md §1, point 1 : --wa est mort, retiré ici — ne le réintroduis pas.
 *  - DESIGN-SYSTEM.md §1, point 3 : ce fichier est la seule source, importé partout,
 *    jamais un second bloc :root.
 *  - DESIGN-SYSTEM.md §6 : trois familles Google Fonts, auto-hébergées dans la PWA
 *    (DESIGN-SYSTEM.md §8.7 : « la PWA doit fonctionner sans Internet »).
 *  - DESIGN-SYSTEM.md §8.4 : cibles tactiles ≥ 56 px — jeton --cible-tactile.
 *  - CARTE-DES-ETATS.md §6.3 : qualificatif « dossier incomplet » — une trame grise
 *    superposée à l'état, jamais une quatrième couleur.
 *  - SCRIPT-CONVERSATION-MARCEL.md §2.2 : jeton de taille forcée pour les marqueurs emoji.
 *
 * Structure : primitif (la matière brute) → sémantique (ce que ça veut dire) → composant
 * (où ça s'applique). Chaque couche ne connaît que celle du dessous.
 */

/* ============================== 1. PRIMITIF ============================== */
/* La matière brute — couleurs et échelles, sans intention d'usage. */
:root {
  /* Carbone — fonds */
  --carbone: #0c0c0e;
  --carbone-2: #141417;
  --carbone-3: #1c1c21;

  /* Texte */
  --blanc: #f4f0e8;   /* blanc cassé, jamais #fff pur */
  --gris: #9b968c;

  /* Accent de marque */
  --or: #d9a63a;
  --or-clair: #f0c568;

  /* Historique — conservés en primitifs pour compat lecture, réassignés en sémantique ci-dessous */
  --lcd: #7de26a;
  --lcd-dim: #3f7a36;
  --rouge: #e04b3a;
  /* --wa (#25D366) est mort — DESIGN-SYSTEM.md §1.1. Ne pas le redéclarer ici. */

  /* Espacement — échelle simple, base 4px */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-8: 48px;

  /* Rayon */
  --rayon-1: 8px;
  --rayon-2: 14px;
  --rayon-pilule: 999px;

  /* Typographie — polices auto-hébergées, DESIGN-SYSTEM.md §6 et §8.7 */
  --font-display: 'Saira Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ============================== 2. SÉMANTIQUE ============================== */
/* Ce que la couleur veut dire, indépendamment de l'endroit où elle s'affiche. */
:root {
  /* Surfaces */
  --surface-fond: var(--carbone);
  --surface-1: var(--carbone-2);
  --surface-2: var(--carbone-3);

  /* Texte */
  --texte-principal: var(--blanc);
  --texte-secondaire: var(--gris);
  --texte-sur-accent: var(--carbone);

  /* Marque */
  --accent: var(--or);
  --accent-survol: var(--or-clair);

  /* Les TROIS états de marge — DESIGN-SYSTEM.md §1.2. Trois jetons distincts de la
     palette de marque. Ne jamais réutiliser --accent ici : un même jeton dirait à la
     fois « la marque » et « attention ». */
  --etat-ok: #7de26a;
  --etat-attaque: #e8873a;
  --etat-depassement: #e04b3a;

  /* Qualificatif « dossier incomplet » (CARTE-DES-ETATS.md §6.3) — une trame, pas une
     quatrième couleur. S'applique EN PLUS d'un des trois états ci-dessus. */
  --incomplet-trame: repeating-linear-gradient(
    135deg,
    rgba(155, 150, 140, 0.35) 0 6px,
    transparent 6px 12px
  );

  /* Bordures et séparateurs */
  --bordure: rgba(244, 240, 232, 0.12);
  --bordure-forte: rgba(244, 240, 232, 0.24);

  /* Focus / accessibilité */
  --anneau-focus: 0 0 0 3px rgba(217, 166, 58, 0.55);
}

/* ============================== 3. COMPOSANT ============================== */
/* Où les jetons sémantiques s'appliquent, dans le vocabulaire du produit. */
:root {
  /* Barre basse (SCRIPT §2.1 / DESIGN-SYSTEM §8) */
  --barre-basse-fond: var(--surface-1);
  --barre-basse-hauteur: 76px;

  /* Cibles tactiles — DESIGN-SYSTEM.md §8.4 : ≥ 56 px, contrainte métier (gants, mains sales) */
  --cible-tactile: 56px;
  --cible-tactile-camera: 72px; /* le geste le plus fréquent : la cible la plus généreuse */

  /* Bulles du fil */
  --bulle-marcel-fond: var(--surface-2);
  --bulle-peintre-fond: var(--accent);
  --bulle-peintre-texte: var(--texte-sur-accent);
  --bulle-rayon: var(--rayon-2);

  /* Marqueurs de statut de capture — exception emoji nommée, DESIGN-SYSTEM.md §5 /
     SCRIPT §2.2. Taille et alignement forcés : c'est le prix de l'exception. */
  --marqueur-taille: 20px;
  --marqueur-hauteur-ligne: 1;
  --marqueur-boite: 28px;

  /* Bandeau véhicule permanent */
  --bandeau-fond: var(--surface-1);
  --bandeau-vignette-taille: 44px;

  /* Écran caméra plein écran — DESIGN-SYSTEM.md §8.3. Noir opaque plutôt que --carbone :
     c'est un fond de viseur (masque le flux vidéo aux bords), pas une surface produit ;
     il reste tout de même nommé ici, jamais en dur dans un composant (règle marcel-revue,
     boucle propreté). */
  --camera-fond: #000;
  --camera-barre-fond: rgba(0, 0, 0, 0.6);
  --camera-declencheur-fond: #fff;
  --camera-declencheur-bordure: rgba(255, 255, 255, 0.4);
  --camera-texte: #fff;

  /* T2 — Véhicule et rapprochement (CARTE-DES-ETATS §2, SCRIPT P3b/G6). Vignettes de
     doute : « les vignettes d'abord, le texte ensuite » (§2.1) — même cible tactile
     généreuse que le reste du parcours peintre. */
  --vignette-doute-taille: 72px;
  --vignette-doute-fond: var(--surface-2);

  /* Alerte gérant (G6) — jeton distinct de --etat-attaque (qui parle de marge) : un
     blocage « non rapproché » est un fait d'exploitation, pas un signal financier. */
  --alerte-fond: rgba(232, 135, 58, 0.12);
  --alerte-bordure: rgba(232, 135, 58, 0.4);

  /* Voile de fenêtre du poste gérant : isole la saisie de commande sans introduire une
     couleur locale dans gerant.html. */
  --voile-modale: rgba(12, 12, 14, 0.74);

  /* QR d'invitation (T4, G4 — CDC §6.1). Blanc pur (pas --blanc, cassé) : contrainte
     fonctionnelle de contraste pour la lecture optique, même logique que --camera-fond
     ci-dessus — nommé ici pour ne jamais réapparaître en dur dans un composant (règle
     marcel-revue, boucle propreté). */
  --qr-fond: #fff;
}

/* ============================== POLICES AUTO-HÉBERGÉES ============================== */
/* DESIGN-SYSTEM.md §8.7 : « la PWA servie en LAN doit fonctionner sans Internet »
   — aucune police distante. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/barlow-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/barlow-400-italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/barlow-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/barlow-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/saira-condensed-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/saira-condensed-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./assets/fonts/saira-condensed-800.ttf') format('truetype');
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./assets/fonts/saira-condensed-900.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/jetbrains-mono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/jetbrains-mono-500.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/jetbrains-mono-700.ttf') format('truetype');
}

/* Respect du mouvement réduit — déjà en place côté vitrine, conservé (DESIGN-SYSTEM.md §6) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}