:root {
    --ui-color-ink: #241D16;
    --ui-color-muted: #6E6252;
    --ui-color-surface: #FFFDF7;
    --ui-color-soft: #F7F4EF;
    --ui-color-line: #DFD4C3;

    /* --- LA PALETTE DE LA CIBLE VALIDEE -----------------------------------
     * La maquette d'accueil et celle de l'en-tete/pied rechauffent les neutres :
     * l'encre et le gris attenue prennent une pointe de terre, et le trait
     * devient un sable. C'est ce qui separe une interface de gestion d'une
     * interface de marche.
     *
     * Les contrastes ont ete recalcules avant adoption, pas apres :
     *   encre    #241D16 sur creme  15,76:1  (l'ancien : 16,10:1)
     *   attenue  #6E6252 sur creme   5,63:1  (l'ancien :  5,61:1)
     *   attenue  #6E6252 sur carte   5,85:1
     * L'ecart avec l'ancienne palette est invisible a l'oeil et nul en lecture.
     *
     * --ui-color-sable-fort porte les traits de champ et l'icone de recherche
     * au repos. La cible proposait #A89778, soit 2,70:1 — sous le seuil de 3:1
     * exige d'un composant d'interface. Assombri de 8 %, il passe a 3,15:1 :
     * l'ecart ne se voit pas, la regle est tenue.
     */
    --ui-color-sable: #E7DCC6;
    --ui-color-sable-fort: #9B8B6E;
    --ui-color-brand: #245A3B;
    /* Creme de la charte §8. Elle n'avait aucun jeton alors qu'elle est l'une
       des trois couleurs d'identite : chaque usage la reecrivait en dur. */
    --ui-color-cream: #FFF8EC;
    --ui-color-brand-soft: #DFE8DC;
    --ui-color-accent: #C86138;
    --ui-color-accent-dark: #A64F31;
    --ui-color-danger: #A64F31;

    --ui-shadow-sm: 0 8px 20px rgba(27, 29, 24, .07);
    --ui-shadow-md: 0 16px 42px rgba(27, 29, 24, .11);

    --ui-radius-sm: 8px;
    --ui-radius-md: clamp(10px, 2.8vw, 14px);
    --ui-radius-lg: clamp(14px, 4vw, 20px);
    --ui-radius-pill: 999px;

    --ui-space-1: clamp(4px, 1.1vw, 8px);
    --ui-space-2: clamp(8px, 2vw, 14px);
    --ui-space-3: clamp(14px, 3.2vw, 24px);
    --ui-space-4: clamp(20px, 4.8vw, 36px);

    --ui-font-xs: clamp(.66rem, 1.8vw, .86rem);
    --ui-font-sm: clamp(.78rem, 2.1vw, 1rem);
    --ui-font-md: clamp(.96rem, 2.55vw, 1.14rem);
    --ui-font-lg: clamp(1.06rem, 2.85vw, 1.32rem);

    --ui-icon-xs: clamp(19px, 5vw, 24px);
    --ui-icon-sm: clamp(22px, 6vw, 30px);
    --ui-icon-md: clamp(28px, 7.4vw, 40px);
    --ui-control-height: clamp(44px, 11.8vw, 56px);

    /* ---- Recette de fusion -------------------------------------------------
       Jetons releves dans les maquettes validees (heop-en-poche,
       heop-inscription-geo) et non inventes. Ils donnent au site la matiere
       « application en poche » sans dupliquer le systeme existant : les jetons
       --ui-* d'origine restent la reference, ceux-ci les completent.
       -------------------------------------------------------------------- */

    /* Stratification cremeuse : trois plans, et tout se pose dessus. */
    --ui-plan-page: #FFF8EC;
    --ui-plan-card: #FFFDF7;
    --ui-plan-sunk: #F4EBD9;

    /* Rayons, releves tels quels des maquettes. */
    --ui-radius-chip: 999px;
    --ui-radius-card: 14px;
    --ui-radius-hero: 18px;
    --ui-radius-sheet: 22px;
    --ui-radius-cta: 12px;

    /* Le flottement : c'est l'ombre qui fait le « en poche ». */
    --ui-shadow-float: 0 16px 42px rgba(27, 29, 24, .11);

    /* Mouvement. Trois registres, trois durees, aucune boucle.
       Rien au-dela de 400ms : au-dela, ce n'est plus une reponse, c'est une
       attente. */
    --ui-motion-response: 220ms;
    --ui-motion-entrance: 380ms;
    --ui-motion-stagger: 50ms;
    --ui-motion-ease: cubic-bezier(.22, .61, .36, 1);
    --ui-motion-lift: 12px;
}