/* =============================================================================
   MERLIN — JETONS DE DESIGN
   Charte reprise de la maquette de référence du module de pointage.
   Ne pas inventer de couleur hors de cette liste.
   ============================================================================= */

:root {
  /* --- Identité --------------------------------------------------------- */
  --navy:      #1F2245;   /* couleur maîtresse : chrome, en-têtes, texte */
  --navy-2:    #2C3059;   /* navy éclairci : survol, barres secondaires */
  --ice:       #D3ECF9;   /* bleu glacier : pastilles de marque, sélection */
  --sky:       #97C2E4;   /* bleu intermédiaire : texte secondaire sur navy */

  /* --- Familles secondaires de la charte --------------------------------
     À utiliser par bloc entier, jamais mélangées dans un même écran.
     Chaque famille = fond sombre / teinte moyenne / teinte claire.         */
  --purple-bg: #3B1F50;  --purple-mid: #784D96;  --purple-lt: #F1D9E8;
  --olive-bg:  #554A38;  --olive-mid:  #B5824A;  --olive-lt:  #FCDFC8;
  --green-bg:  #3A4730;  --green-mid:  #51AF6D;  --green-lt:  #D0E7D5;
  --rust-bg:   #923F19;  --rust-mid:   #E67C5C;  --rust-lt:   #F9CCBE;

  /* --- Surfaces ---------------------------------------------------------- */
  --paper:     #FFFFFF;   /* fond des panneaux et des tableaux */
  --canvas:    #EDF0F6;   /* fond d'écran, gris bleuté froid */
  --card:      #F3F5FA;   /* cartes internes, en-têtes de tableau */
  --rule:      #DCE1EC;   /* filets et bordures */

  /* --- Texte -------------------------------------------------------------- */
  --ink:       #1F2245;   /* texte principal (identique à navy) */
  --ink-2:     #5A5E78;   /* texte secondaire, descriptions */
  --ink-3:     #8C8F9E;   /* légendes, en-têtes de colonne, méta */

  /* --- États -------------------------------------------------------------- */
  --ok:        #2F7355;   --ok-bg:   #E3F2EA;   /* validé, conforme */
  --wait:      #8A6224;   --wait-bg: #FBF0DC;   /* en attente, absence */
  --flag:      #A8452B;   --flag-bg: #FAE4DD;   /* alerte, anomalie */

  /* --- Typographie --------------------------------------------------------
     Serif pour les titres d'écran et les grands chiffres : c'est ce qui
     rattache l'interface au wordmark. Sans pour toute la donnée.
     En production, Spectral (serif) et Inter (sans) sont les polices de la
     charte ; les piles ci-dessous sont les substituts sans chargement.      */
  --serif: Georgia, "Liberation Serif", "DejaVu Serif", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, "DejaVu Sans Mono", monospace;

  /* --- Géométrie ---------------------------------------------------------- */
  --r:      10px;   /* rayon des panneaux */
  --r-sm:    6px;   /* rayon des boutons et petits éléments */
  --r-pill:  99px;  /* pastilles */
  --shadow: 0 12px 30px rgba(31, 34, 69, .18);  /* uniquement sur le device mobile */
}

/* =============================================================================
   RÈGLES DE STYLE — à respecter, elles font l'identité
   -----------------------------------------------------------------------------
   1. Le navy porte le chrome (rail, en-tête, en-têtes de tableau). Le contenu
      est sur fond blanc, l'écran sur --canvas.
   2. Les titres d'écran et les grands chiffres sont en serif, taille 26px et
      plus. Tout le reste est en sans.
   3. Aucun dégradé, aucune ombre portée sauf sur le cadre du téléphone.
   4. Les filets décoratifs le long des bords sont interdits. Une carte ou un
      bandeau, oui ; une barre de couleur collée au bord, non.
   5. Les chiffres alignés utilisent font-variant-numeric: tabular-nums.
   6. Les majuscules ne servent qu'aux étiquettes de rail et de section, en
      9 à 10px avec letter-spacing .06em. Jamais pour un titre.
   7. Les pastilles d'état (--ok, --wait, --flag) sont en fond teinté clair et
      texte foncé, jamais l'inverse.
   8. Densité : les tableaux de pointage se lisent à 20 lignes à l'écran.
      Padding de cellule 9px 12px, corps 14px.
   ============================================================================= */