/* ==========================================================================
   Jetons de la couche mobile FO — source unique des couleurs et dimensions.

   Chargé SANS media query : les custom properties doivent être résolvables à
   toute largeur (une règle mobile peut redéfinir un jeton, l'inverse non).

   Règle tenue par la revue : aucun littéral hexadécimal ailleurs que dans ce
   fichier. Vérifiable par
       grep -rn '#[0-9a-fA-F]\{3,6\}' styles/mobile/ | grep -v tokens.css
   ========================================================================== */
:root {
    /* Charte globale */
    --m-brand: #e7017c;
    --m-navy: #34495e;

    /* Palette chaude de la liste des commandes (relevée sur le rendu réel :
       carte crème, texte brun, bouton d'origine beige). Le rose de la charte
       y détonne, d'où ces jetons distincts. */
    --m-warm-ink: #5a4830;
    --m-warm-line: #b9a894;

    /* Texte */
    --m-ink: #2a2f36;
    --m-ink-2: #333;
    --m-muted: #777;
    /* Le gris le plus clair qui porte encore du texte BLANC au seuil : #777
       n'y arrive pas dans ce sens-là (4.48 mesuré), alors qu'il passe pour du
       texte gris sur fond blanc. À réserver aux aplats à libellé clair. */
    --m-muted-contrast: #6b6b6b;
    --m-muted-2: #888;
    --m-muted-3: #999;
    --m-caret: #bbb;
    /* Filet par défaut d'une rubrique de menu : remplacé en JS par la couleur
       de la rubrique quand le markup desktop en porte une. */
    --m-rule: #ccc;

    /* Fonds et filets */
    --m-bg: #fff;
    --m-bg-alt: #fafafa;
    --m-bg-alt-2: #f6f6f6;
    --m-bg-footer: #f7f7f8;
    --m-line: #eee;
    --m-line-2: #f0f0f0;
    --m-line-3: #e6e6e6;
    --m-line-4: #ddd;
    --m-line-5: #e5e5e5;
    /* Bordure d'un champ saisissable : plus franche que les filets de
       séparation, un champ doit se lire comme une zone où l'on écrit. */
    --m-line-field: #aaa;
    --m-shadow: rgba(0, 0, 0, .08);
    /* Un panneau ancré flotte au-dessus de la page au lieu de la remplacer :
       il lui faut une ombre franche, celle des cartes ne l'en détacherait
       pas. */
    --m-shadow-panel: rgba(0, 0, 0, .22);

    /* États */
    --m-danger: #b00020;
    /* L'orange de marque du legacy — #FF910C et sa variante #FF9900 — donne
       2.26 pour 1 en blanc sur aplat et 2.14 en texte sur blanc, très en
       dessous du seuil. La couche reprend la teinte, assombrie jusqu'à 5.0
       dans les deux sens : c'est le même orange, lisible. */
    --m-warn: #b45309;
    /* Bleu des bandeaux d'étape, repris du legacy (#2b6ca3) : porté par du
       blanc, il donne 5.4 pour 1 et n'a pas besoin d'être corrigé. */
    --m-accent-blue: #2b6ca3;
    /* Vert des étapes validées — repris du libellé que le legacy colore déjà
       ainsi, pour que la pastille et son texte s'accordent. */
    --m-valid: #093;

    /* Rythme */
    --m-space-1: 4px;
    --m-space-2: 8px;
    --m-space-3: 12px;
    --m-space-4: 16px;
    --m-space-5: 20px;
    --m-radius: 10px;
    --m-radius-sm: 8px;

    /* Cible tactile minimale (retour client PEG-4721 : 44px) */
    --m-tap: 44px;

    /* Hauteur de la tabbar fixe. Utilisée par TOUS les panneaux pour leur
       offset bas : sans jeton, cette valeur était répétée en dur dans les
       trois implémentations de panneau. */
    --m-tabbar-h: 64px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);

    /* Empilement. La tabbar passe AU-DESSUS des panneaux : son ombre est
       projetée vers le haut, donc dans leur zone ; si elle passait dessous,
       la délimitation bas de page disparaîtrait (retour client PEG-4721). */
    --m-z-panel: 1200;
    --m-z-tabbar: 1300;

    /* Typo. Le barème doit couvrir TOUS les rôles, y compris la légende
       d'icône : sans échelon en dessous de 13px, la tabbar écrivait ses
       libellés en dur — 11px ici, 12px là, selon l'écran qui les avait
       ajoutés. Un rôle sans jeton est un rôle qui diverge. */
    --m-font-bold: 'klavika_bold', Arial, sans-serif;
    --m-fs-xs: 11px;
    --m-fs-sm: 13px;
    --m-fs: 15px;
    --m-fs-lg: 17px;
    /* Sous 16px, Safari iOS zoome sur le focus d'un champ, sans retour. */
    --m-fs-field: 16px;
}