/* ------------------------------------------------------------------ tokens
   Le vocabulaire visuel de l'app. Tout composant consomme ces variables et
   jamais une valeur brute : c'est ce qui permet de changer le thème sombre
   sans rouvrir dix-huit fichiers, et de prouver le contraste une seule fois.

   La charte Xerus est une contrainte, pas une préférence : accent #fe1f58,
   noir #0A0A0A, Kanit pour la marque et les chiffres.                        */

:root {
  color-scheme: light dark;

  /* --- Couleurs, thème clair ------------------------------------------- */
  --fond:        #ffffff;
  --fond-2:      #f5f5f7;   /* fond des écrans à listes groupées */
  --surface:     #ffffff;   /* cartes posées sur --fond-2 */
  --surface-2:   #f0f0f2;   /* champs, pastilles au repos */
  --surface-3:   #e8e8ec;   /* pressé */
  --trait:       #e3e3e8;   /* filets de séparation */
  --trait-fort:  #d6d6da;   /* bordures de champ */

  --texte:       #111114;
  --texte-2:     #6b6b72;   /* 5,3:1 sur blanc, lisible en corps de texte */
  --texte-3:     #8a8a92;   /* 3,4:1 : décor et désactivé seulement */

  --accent:      #fe1f58;   /* fond de bouton, marque */
  /* Blanc sur l'accent donne 3,8:1 : conforme AA pour du grand texte
     seulement. Un libellé accentué en petit corps sur fond clair passe donc
     par --accent-texte, qui monte à 5,7:1. */
  --accent-texte: #cc0b45;
  --accent-doux: #fff0f4;
  --sur-accent:  #ffffff;

  --noir:        #0A0A0A;
  --sur-noir:    #ffffff;

  /* Le fond du geste principal du terrain. Distinct de --noir, qui reste le
     noir de la charte pour la barre laterale et l'ecran de connexion : celui-ci
     doit s'inverser en sombre, l'autre non. */
  --fort:        #0A0A0A;
  --sur-fort:    #ffffff;

  --ok:          #1c7c3f;
  --ok-doux:     #e8f5ec;
  --alerte:      #b45309;
  --alerte-doux: #fff7e6;
  --danger:      #c0182f;
  --danger-doux: #fdecee;

  /* Huit teintes désaturées pour distinguer les chantiers dans une liste.
     Jamais la couleur d'un client : elles ne veulent rien dire, elles servent
     seulement à ce que l'oeil retrouve la même ligne d'un écran à l'autre. */
  --chantier-1: #64748b;  /* ardoise */
  --chantier-2: #a1887f;  /* sable */
  --chantier-3: #6b8e4e;  /* olive */
  --chantier-4: #c0663c;  /* terracotta */
  --chantier-5: #5b7c99;  /* bleu-gris */
  --chantier-6: #7d5a80;  /* prune */
  --chantier-7: #b08432;  /* ocre */
  --chantier-8: #5f8a7d;  /* sauge */

  --voile:      rgba(0, 0, 0, .4);   /* derrière une feuille */

  /* Les couleurs qui ne suivent pas le thème, parce que leur fond ne le suit
     pas non plus : la barre latérale est toujours noire, un avatar est toujours
     posé sur sa teinte, l'écran de confirmation est toujours vert. Les inverser
     en thème sombre rendrait leur propre texte illisible. */
  --sur-couleur:       #ffffff;
  --sur-couleur-voile: rgba(255, 255, 255, .2);

  /* Le vert d'un bloc entier, distinct de --ok qui est un vert de texte. Il ne
     change pas au thème sombre, et c'est le point : --ok s'y éclaircit pour
     rester lisible SUR le fond, et du blanc sur ce vert clair tombe à 2,3:1.
     L'écran de confirmation du terrain, lui, est vert de bout en bout et son
     texte doit rester blanc. Une seule valeur, donc, dans les deux thèmes. */
  --ok-plein:          #1c7c3f;

  /* L'encre posée sur une teinte de chantier. Elle bascule, elle, parce que les
     teintes s'éclaircissent au thème sombre : du blanc sur l'ocre clair du
     sombre donnerait 2,1:1. */
  --sur-teinte:        #ffffff;
  --sur-noir-2:        #9a9aa2;   /* 4,7:1 sur le noir de la charte */
  --sombre-survol:     rgba(255, 255, 255, .06);
  --sombre-actif:      rgba(255, 255, 255, .12);
  --voile-photo:       rgba(0, 0, 0, .6);
  --voile-photo-fort:  rgba(0, 0, 0, .92);

  /* --- Typographie ------------------------------------------------------ */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-marque: 'Kanit', var(--police);

  /* 28 px et non 34 : un nom de chantier de trois mots tient sur une ligne,
     et le chiffre de tête reste le plus gros objet de l'écran, ce qui est son
     rôle. La hiérarchie se fait par la taille, pas par le poids. */
  --t-grand-titre: 700 28px/34px var(--police-marque);
  --t-titre:       700 20px/26px var(--police);
  --t-sous-titre:  600 17px/22px var(--police);
  --t-corps:       400 17px/22px var(--police);
  --t-corps-fort:  600 17px/22px var(--police);
  --t-secondaire:  400 15px/20px var(--police);
  --t-legende:     600 12px/16px var(--police);
  --t-chiffre:     700 36px/40px var(--police-marque);
  --t-chiffre-2:   700 22px/26px var(--police-marque);

  --interlettre-legende: .08em;

  /* --- Espacement, rayons, ombres, durées -------------------------------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-rond: 999px;

  /* Un liseré à peine visible plus qu'une ombre : c'est ce qui détache une
     carte blanche d'un fond gris clair sans la faire flotter. */
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .035);
  --ombre-2: 0 4px 16px rgba(0, 0, 0, .08);
  --ombre-3: 0 12px 40px rgba(0, 0, 0, .16);

  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms;
  --courbe: cubic-bezier(.2, .8, .2, 1);

  /* --- Gabarit ---------------------------------------------------------- */
  --marge-page: var(--e-4);
  --largeur-contenu: 720px;
  --largeur-laterale: 220px;
  --hauteur-onglets: 64px;
  --touche: 44px;        /* plus petite zone tapable admise */
  --touche-terrain: 56px; /* gestes faits avec des gants */
}

/* Le sombre n'est pas un clair inversé : le fond est le noir de la charte, et
   les surfaces montent par paliers, comme sur iOS. L'accent est éclairci d'un
   cran, sinon il tombe sous le seuil AA sur fond noir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond:        #0A0A0A;
    --fond-2:      #161618;
    --surface:     #1f1f22;
    --surface-2:   #2a2a2e;
    --surface-3:   #34343a;
    --trait:       #2f2f34;
    --trait-fort:  #3d3d44;

    --texte:       #f2f2f4;
    --texte-2:     #a1a1aa;
    --texte-3:     #71717a;

    --accent:      #ff3b6e;
    --accent-texte: #ff3b6e;  /* 5,8:1 sur le noir : lisible tel quel */
    --accent-doux: #3a1220;

    --fort:        #f2f2f4;
    --sur-fort:    #0A0A0A;

    --ok:          #34c26a;
    --ok-doux:     #0f2e1b;
    --alerte:      #fbbf24;
    --alerte-doux: #3a2a08;
    --danger:      #ff6b7a;
    --danger-doux: #3a1015;

    --chantier-1: #94a3b8; --chantier-2: #c3a99f; --chantier-3: #93b071;
    --chantier-4: #db8a63; --chantier-5: #85a5bf; --chantier-6: #a586a8;
    --chantier-7: #d4ad5c; --chantier-8: #86b0a3;

    --sur-teinte:  #0A0A0A;
  --voile: rgba(0, 0, 0, .6);
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-2: 0 4px 16px rgba(0, 0, 0, .5);
    --ombre-3: 0 12px 40px rgba(0, 0, 0, .7);
  }
}

/* Le choix explicite l'emporte sur le réglage du téléphone, dans les deux sens.
   Sans ce second bloc, choisir « sombre » sur un téléphone réglé en clair ne
   ferait rien. */
:root[data-theme="sombre"] {
  --fond:        #0A0A0A;
  --fond-2:      #161618;
  --surface:     #1f1f22;
  --surface-2:   #2a2a2e;
  --surface-3:   #34343a;
  --trait:       #2f2f34;
  --trait-fort:  #3d3d44;

  --texte:       #f2f2f4;
  --texte-2:     #a1a1aa;
  --texte-3:     #71717a;

  --accent:      #ff3b6e;
  --accent-texte: #ff3b6e;
  --accent-doux: #3a1220;

  --fort:        #f2f2f4;
  --sur-fort:    #0A0A0A;

  --ok:          #34c26a;
  --ok-doux:     #0f2e1b;
  --alerte:      #fbbf24;
  --alerte-doux: #3a2a08;
  --danger:      #ff6b7a;
  --danger-doux: #3a1015;

  --chantier-1: #94a3b8; --chantier-2: #c3a99f; --chantier-3: #93b071;
  --chantier-4: #db8a63; --chantier-5: #85a5bf; --chantier-6: #a586a8;
  --chantier-7: #d4ad5c; --chantier-8: #86b0a3;

  --sur-teinte:  #0A0A0A;
  --voile: rgba(0, 0, 0, .6);
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-2: 0 4px 16px rgba(0, 0, 0, .5);
  --ombre-3: 0 12px 40px rgba(0, 0, 0, .7);
}

/* Au-delà de 900 px on est devant un écran, pas dans la main : le corps de
   texte descend d'un point et les marges s'élargissent. C'est le seul point de
   bascule de l'app. */
@media (min-width: 900px) {
  :root {
    --t-grand-titre: 700 32px/38px var(--police-marque);
    --t-corps:      400 16px/22px var(--police);
    --t-corps-fort: 600 16px/22px var(--police);
    --t-secondaire: 400 14px/19px var(--police);
    --marge-page:   var(--e-8);
    --largeur-contenu: 1200px;
  }
}

/* Une personne qui a demandé moins d'animation ne doit pas en subir. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; }
}