/* ------------------------------------------------------------------ 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 preference : accent #fe1f58,
   noir #0A0A0A, Kanit pour la marque et les chiffres. Repris du systeme de
   Terrain, et allege de ce qui appartenait aux chantiers.                    */

: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. Distinct de --noir, qui reste le noir de la
     charte pour l'ecran de connexion : celui-ci doit s'inverser en sombre,
     l'autre non. */
  --fort:        #0A0A0A;
  --sur-fort:    #ffffff;

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

  --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);

  --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);

  /* --- Typographie ------------------------------------------------------ */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-marque: 'Kanit', var(--police);
  /* Les lignes de compteur s'alignent en colonne. Prise au systeme et non
     embarquee : une deuxieme police pour quatre lignes couterait plus cher en
     octets que le gain, et toutes les plateformes en ont une bonne. */
  --police-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* 28 px et non 34 : un titre de trois mots tient sur une ligne, et le solde
     reste le plus gros objet de l'ecran, ce qui est son role. La hierarchie 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 64px/64px var(--police-marque);
  --t-mono:        500 12px/16px var(--police-mono);
  --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 */
}

/* 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;
    --sur-ok:      #0A0A0A;
    --alerte:      #fbbf24;
    --alerte-doux: #3a2a08;
    --danger:      #ff6b7a;
    --danger-doux: #3a1015;

  --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;
  --sur-ok:      #0A0A0A;
  --alerte:      #fbbf24;
  --alerte-doux: #3a2a08;
  --danger:      #ff6b7a;
  --danger-doux: #3a1015;

  --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);
    /* 840 et non 1200 : Terrain etale une liste et son detail cote a cote,
       cette app n'a qu'une colonne de cartes. A 1200 px, une ligne de ferie
       laissait quarante caracteres de vide entre la date et le nom. */
    --largeur-contenu: 840px;
  }
}

/* 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; }
}