/* ==========================================================================
   la Plateforme — jetons de charte, version 0.3 (3 octobre 2026)
   Cible : socle/jetons. Trois niveaux : primitives → rôles → composants.
   Un écran n'utilise que les rôles et les jetons de composant,
   jamais une primitive, jamais un hexadécimal.
   Trois thèmes : bureau (défaut), bascule, chauffeur.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* ardoise : neutres biaisés bleu acier */
  --ardoise-0: #FFFFFF;
  --ardoise-25: #F6F8F9;
  --ardoise-50: #EDF0F3;
  --ardoise-100: #E4E9ED;
  --ardoise-200: #D3DAE1;
  --ardoise-300: #B4C0CB;
  --ardoise-400: #93A2B0;
  --ardoise-500: #687989;
  --ardoise-600: #5B6C7D;
  --ardoise-700: #435363;
  --ardoise-800: #2C3B4C;
  --ardoise-850: #22303F;
  --ardoise-900: #1D2B3A;
  --ardoise-950: #141E29;
  --ardoise-1000: #0B1118;

  /* signal : orange de signalisation */
  --signal-50: #FFF0E6;
  --signal-100: #FFDDC4;
  --signal-300: #FF9A5C;
  --signal-500: #FF6A13;
  --signal-600: #E05A0B;
  --signal-700: #B0430A;

  /* jauge : la donnée mesurée */
  --jauge-50: #E3F1F2;
  --jauge-200: #A9D3D6;
  --jauge-300: #6CC3CB;
  --jauge-400: #3E9AA3;
  --jauge-500: #0D6E78;
  --jauge-700: #0A5159;

  /* états */
  --vert-50: #E4F3EA;
  --vert-300: #4CC585;
  --vert-500: #1B7F4B;
  --vert-700: #14633A;
  --ambre-50: #FBF1DE;
  --ambre-300: #FFC661;
  --ambre-500: #B37509;
  --ambre-700: #8A5A06;
  --rouge-50: #FBE9E7;
  --rouge-300: #F58A7E;
  --rouge-500: #BE3226;
  --rouge-700: #9E2A20;

  /* marque : les couleurs du logo SCARA 360. Réservées au logo et aux surfaces de marque,
     jamais à un rôle d'écran : le vert de l'écran reste celui de l'état « acquis » */
  --marque-vert: #22C55E;
  --marque-vert-bleu: #0EA5A4;
  --marque-encre: #0F172A; /* l'ardoise de la planche d'identité : le mot « SCARA » sur fond clair, les fonds sombres du logo */

  /* matières : douze emplacements affectables, chacun avec son encre et son voile */
  --matiere-01: #9A6B3A; --matiere-01-encre: #FFFFFF; --matiere-01-voile: #EFE7DF;
  --matiere-02: #6F767E; --matiere-02-encre: #FFFFFF; --matiere-02-voile: #E8E9EA;
  --matiere-03: #3F6DA6; --matiere-03-encre: #FFFFFF; --matiere-03-voile: #E0E8F1;
  --matiere-04: #BC9034; --matiere-04-encre: #141E29; --matiere-04-voile: #F4EDDF;
  --matiere-05: #6B5A7C; --matiere-05-encre: #FFFFFF; --matiere-05-voile: #E7E5EA;
  --matiere-06: #46803F; --matiere-06-encre: #FFFFFF; --matiere-06-voile: #E1EBE0;
  --matiere-07: #A8988A; --matiere-07-encre: #141E29; --matiere-07-voile: #F1EFEC;
  --matiere-08: #B4527A; --matiere-08-encre: #FFFFFF; --matiere-08-voile: #F3E3EA;
  --matiere-09: #3F97A8; --matiere-09-encre: #141E29; --matiere-09-voile: #E0EEF1;
  --matiere-10: #8A8F3A; --matiere-10-encre: #141E29; --matiere-10-voile: #ECEDDF;
  --matiere-11: #4B4FA0; --matiere-11-encre: #FFFFFF; --matiere-11-voile: #E2E3F0;
  --matiere-12: #A8553D; --matiere-12-encre: #FFFFFF; --matiere-12-voile: #F1E4E0;

  /* typographie */
  --police-ui: "Archivo", "Segoe UI", system-ui, sans-serif;
  --police-etroite: "Archivo Narrow", "Archivo", "Segoe UI", sans-serif;
  --police-mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace;

  /* bureau et portail client : rien sous 11 px */
  --t-libelle: 11px;   /* libellé en capitales, Archivo Narrow 600, +0.08em */
  --t-petit: 12px;     /* annotation, pastille, colonne dense */
  --t-corps: 13px;     /* texte courant du bureau */
  --t-moyen: 14px;     /* bouton d'action principale, nom d'étape, unité d'un chiffre */
  --t-fort: 15px;      /* valeur mise en avant, titre de bloc du portail */
  --t-titre: 18px;     /* titre d'écran */
  --t-titre-l: 24px;   /* titre de fiche, bandeau */
  --t-chiffre-s: 28px; /* chiffre de fiche, quand plusieurs se suivent */
  --t-chiffre: 32px;   /* indicateur */

  /* terrain (mobile du chauffeur, bascule, comptoir) : rien sous 14 px */
  --t-terrain-petit: 14px;   /* libellé, annotation, référence */
  --t-terrain-corps: 16px;   /* texte, choix, bouton secondaire */
  --t-terrain-fort: 18px;    /* numéro de benne, valeur, bouton */
  --t-terrain-action: 20px;  /* bouton principal, nom d'une personne */
  --t-terrain-titre: 24px;   /* titre d'étape, chiffre, touche du pavé */
  --t-terrain-titre-l: 28px; /* titre d'écran */
  --t-accueil: 40px;         /* titre d'un écran d'accueil, montant à régler */
  --t-afficheur: 72px;       /* poids net au poste de bascule */

  /* espacement : pas de 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-12: 48px;

  /* rayons */
  --r-1: 2px;  /* étiquette, code matière, numéro de parc */
  --r-2: 4px;  /* contrôle : bouton, champ, puce */
  --r-3: 8px;  /* carte, panneau, superposition */
  --r-rond: 999px;

  /* hauteurs de contrôle, par châssis */
  --h-dense: 28px;    /* bureau, dans une table */
  --h-controle: 32px; /* bureau, par défaut */
  --h-confort: 40px;  /* bureau, action principale d'écran */
  --h-tactile: 56px;  /* chauffeur */
  --h-bascule: 72px;  /* poste de bascule */

  /* relief */
  --ombre-1: 0 1px 2px rgba(20, 30, 41, .08), 0 4px 12px rgba(20, 30, 41, .05);
  --ombre-2: 0 2px 6px rgba(20, 30, 41, .10), 0 16px 40px rgba(20, 30, 41, .14);
  --voile-modal: rgba(20, 30, 41, .5); /* derrière une superposition : recherche, fenêtre */

  /* ---------- 2. RÔLES — thème bureau (défaut) ---------- */
  --fond-page: var(--ardoise-50);
  --fond-surface: var(--ardoise-0);
  --fond-creux: var(--ardoise-25);
  --fond-survol: var(--ardoise-50);
  --fond-inverse: var(--ardoise-950);
  --fond-inverse-2: var(--ardoise-900);

  --texte-fort: var(--ardoise-950);
  --texte: var(--ardoise-700);
  --texte-discret: var(--ardoise-600);
  --texte-inverse: var(--ardoise-0);
  --texte-inverse-discret: var(--ardoise-400);

  --trait: var(--ardoise-200);
  --trait-fin: var(--ardoise-100);
  --trait-fort: var(--ardoise-400);
  --trait-inverse: var(--ardoise-800);

  --action: var(--signal-500);
  --action-encre: var(--ardoise-950);
  --action-survol: var(--signal-600);
  --action-voile: var(--signal-50);
  --action-texte: var(--signal-700);

  --selection: var(--ardoise-950);
  --selection-encre: var(--ardoise-0);

  --donnee: var(--jauge-500);
  --donnee-voile: var(--jauge-50);
  --donnee-texte: var(--jauge-700);

  /* devenir des déchets : du mieux au moins bien, une seule teinte puis le neutre */
  --devenir-recycle: var(--jauge-500);
  --devenir-recycle-encre: var(--ardoise-0);
  --devenir-energie: var(--jauge-400);
  --devenir-energie-encre: var(--ardoise-950);
  --devenir-elimine: var(--ardoise-300);
  --devenir-elimine-encre: var(--ardoise-950);

  --ok: var(--vert-500);
  --ok-voile: var(--vert-50);
  --ok-texte: var(--vert-700);
  --attention: var(--ambre-500);
  --attention-voile: var(--ambre-50);
  --attention-texte: var(--ambre-700);
  --critique: var(--rouge-500);
  --critique-voile: var(--rouge-50);
  --critique-texte: var(--rouge-700);

  --focus: var(--ardoise-950);
}

/* ---------- thème bascule : ambre sur noir, plein écran tactile ---------- */
[data-theme="bascule"] {
  --fond-page: var(--ardoise-1000);
  --fond-surface: var(--ardoise-950);
  --fond-creux: var(--ardoise-1000);
  --fond-survol: var(--ardoise-900);
  --fond-inverse: var(--ardoise-0);
  --fond-inverse-2: var(--ardoise-50);

  --texte-fort: var(--ardoise-0);
  --texte: var(--ardoise-300);
  --texte-discret: var(--ardoise-400);
  --texte-inverse: var(--ardoise-950);
  --texte-inverse-discret: var(--ardoise-600);

  --trait: var(--ardoise-800);
  --trait-fin: var(--ardoise-850);
  --trait-fort: var(--ardoise-500);
  --trait-inverse: var(--ardoise-200);

  --action-voile: #3A1F0C;
  --action-texte: var(--signal-300);

  --selection: var(--ardoise-0);
  --selection-encre: var(--ardoise-950);

  --donnee: var(--ambre-300);
  --donnee-voile: #33270E;
  --donnee-texte: var(--ambre-300);

  --ok: var(--vert-300);
  --ok-voile: #12301F;
  --ok-texte: var(--vert-300);
  --attention: var(--ambre-300);
  --attention-voile: #33270E;
  --attention-texte: var(--ambre-300);
  --critique: var(--rouge-300);
  --critique-voile: #3A1915;
  --critique-texte: var(--rouge-300);

  --focus: var(--ambre-300);
}

/* ---------- thème chauffeur : sombre, cabine, gants ---------- */
[data-theme="chauffeur"] {
  --fond-page: var(--ardoise-950);
  --fond-surface: var(--ardoise-900);
  --fond-creux: var(--ardoise-1000);
  --fond-survol: var(--ardoise-850);
  --fond-inverse: var(--ardoise-0);
  --fond-inverse-2: var(--ardoise-50);

  --texte-fort: var(--ardoise-0);
  --texte: var(--ardoise-300);
  --texte-discret: var(--ardoise-400);
  --texte-inverse: var(--ardoise-950);
  --texte-inverse-discret: var(--ardoise-600);

  --trait: var(--ardoise-800);
  --trait-fin: var(--ardoise-850);
  --trait-fort: var(--ardoise-500);
  --trait-inverse: var(--ardoise-200);

  --action-voile: #3A1F0C;
  --action-texte: var(--signal-300);

  --selection: var(--ardoise-0);
  --selection-encre: var(--ardoise-950);

  --donnee: var(--jauge-300);
  --donnee-voile: #0E2A2E;
  --donnee-texte: var(--jauge-300);

  --ok: var(--vert-300);
  --ok-voile: #12301F;
  --ok-texte: var(--vert-300);
  --attention: var(--ambre-300);
  --attention-voile: #33270E;
  --attention-texte: var(--ambre-300);
  --critique: var(--rouge-300);
  --critique-voile: #3A1915;
  --critique-texte: var(--rouge-300);

  --focus: var(--signal-300);
}