/*
 * Archivo, self-hebergee, une famille CSS par role de la charte V2.2.
 *
 * La charte ne porte qu'une police, variable sur `wdth` 62-125 et `wght`
 * 100-900. Les roles sont des reglages de largeur, pas des familles
 * differentes. Reste a les rendre utilisables depuis un canvas.
 *
 * ⚠️ Un canvas ne sait pas epingler une largeur. `font-variation-settings` ne
 * s'applique pas a `ctx.font`, et `font-stretch` dans le raccourci n'est pas
 * lu partout. Dans les deux cas le texte sort en largeur normale **sans
 * erreur** : les titres condenses disparaissent et rien ne le signale.
 *
 * On epingle donc la largeur au niveau du `@font-face`, par son descripteur
 * `font-stretch` a valeur unique. Le navigateur instancie la variable a cette
 * largeur, et le JS n'a plus qu'un nom de famille a poser.
 *
 * Les quatre valeurs viennent de `--font-*-wdth` dans `tokens.css`, genere
 * depuis le design system. Si elles divergent, `npm run tokens -- check`
 * echoue sur tokens.css mais **pas** sur ce fichier : le voir ici est
 * volontaire, une regle `@font-face` ne se genere pas utilement.
 *
 * Self-hebergee et non chargee du CDN Google : le fichier doit etre le meme
 * que celui de la webapp et du renderer video, sinon les exports du site et
 * les publications ne sont pas composes avec la meme police.
 */

/*
 * Les quatre roles, nommes.
 *
 * `tokens.css` porte bien `--font-display` et `--font-body`, mais tous deux
 * valent « Archivo » sans largeur : c'est correct pour la charte, inutilisable
 * tel quel. Ces alias-ci designent les familles epinglees ci-dessous, et c'est
 * eux que la mise en page utilise.
 */
:root {
  --font-titre: 'LPD Titre', sans-serif;
  --font-corps: 'LPD Corps', sans-serif;
  --font-libelle: 'LPD Libelle', sans-serif;
  --font-chiffre: 'LPD Chiffre', sans-serif;
}

/* Titres condenses. --font-display-wdth: 72 */
@font-face {
  font-family: 'LPD Titre';
  src: url('./assets/fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 72%;
  font-display: swap;
}

/* Corps en largeur normale : le condense nuit sous 30 px. --font-body-wdth: 100 */
@font-face {
  font-family: 'LPD Corps';
  src: url('./assets/fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}

/* Libelles d'axe, compromis lisibilite / encombrement. --font-label-wdth: 85 */
@font-face {
  font-family: 'LPD Libelle';
  src: url('./assets/fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 85%;
  font-display: swap;
}

/* Chiffres. Le condense rendrait les colonnes moins lisibles. --font-data-wdth: 100 */
@font-face {
  font-family: 'LPD Chiffre';
  src: url('./assets/fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}

/*
 * Les chiffres s'alignent en colonne. Archivo porte des chiffres tabulaires,
 * c'est ce qui a permis de retirer la police monospace de la charte.
 * En SVG, `font-variant-numeric` ne s'applique qu'en style ; sur un canvas il
 * passe par `ctx.fontVariantCaps` et compagnie, donc on le pose ici pour le
 * DOM et on l'accepte tel quel dans le canvas, ou les chiffres sont centres.
 */
.chiffre {
  font-family: 'LPD Chiffre', sans-serif;
  font-variant-numeric: tabular-nums;
}