/* ANAELA, les jetons de la charte.
 *
 * Repris du projet de design « Anaela Landing Mobile », fichiers
 * `tokens/colors.css`, `tokens/borders.css`, `tokens/typography.css`. Les
 * couleurs et les bordures sont VERBATIM : elles font autorité, on ne les
 * harmonise pas avec la palette de l'application.
 *
 * Les tailles, elles, sont celles de la MAQUETTE MOBILE, la seule qui existe.
 * Le `tokens/typography.css` du projet porte une échelle de bureau (titre à
 * 76 px, gouttière à 64 px) qui n'est dessinée nulle part : elle n'est pas
 * reprise ici. Au-delà du téléphone, la page reste une colonne centrée.
 *
 * Ce fichier ne définit AUCUN sélecteur. Il pose des variables, et rien
 * d'autre : c'est ce qui permet de le réviser seul.
 */

/* --------------------------------------------------------------------------
 * Les fontes
 *
 * Les deux sont servies depuis /marque, et /marque seulement.
 *
 * Abril Fatface existe aussi dans moteur/fonts : c'est la fonte des titres du
 * LIVRE, et la charte titre avec la même. J'avais servi celle-là, pour ne pas
 * dupliquer un fichier. C'était une erreur, et un test la nomme : « la
 * typographie de la marque ne touche jamais celle du livre ». Un écran qui
 * lit dans moteur/fonts change d'allure le jour où quelqu'un ajuste la fonte
 * du livre, et ce jour-là, personne ne fait le lien. Deux copies, donc, et
 * deux raisons de les changer.
 * -------------------------------------------------------------------------- */

/* WOFF2 d'abord, TTF en repli. C'est le meme fichier dans un conteneur
   compresse : memes glyphes, memes chasses, rien de la mise en page ne bouge.
   Les quatre pesaient 239 Ko bruts, sur TOUS les ecrans ; elles pesent 74 Ko.
   `moteur/fabriquer_woff2.py` les refabrique a partir des .ttf. */
@font-face { font-family: "Abril Fatface"; src: url("/marque/AbrilFatface-400.woff2") format("woff2"), url("/marque/AbrilFatface-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Jost; src: url("/marque/Jost-300.woff2") format("woff2"), url("/marque/Jost-300.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: Jost; src: url("/marque/Jost-400.woff2") format("woff2"), url("/marque/Jost-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Jost; src: url("/marque/Jost-500.woff2") format("woff2"), url("/marque/Jost-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  /* ---- couleurs, verbatim de tokens/colors.css ---- */
  --ink: #0A0A0A;
  --ink-inverse: #FFFFFF;
  --grey-600: #6E6E6E;
  --grey-400: #9A9A9A;
  --grey-300: #C9C9C9;
  --grey-200: #E8E8E8;
  --grey-100: #F0F0F0;
  --grey-50:  #F5F5F5;
  --off-white: #FBFBFB;

  --text-primary: var(--ink);
  --text-secondary: var(--grey-600);
  --text-muted: var(--grey-400);
  --text-on-dark: var(--ink-inverse);
  --text-on-dark-muted: rgba(255,255,255,.66);

  --surface-page: #FFFFFF;
  --surface-muted: var(--grey-50);
  --surface-card: #FFFFFF;
  --surface-card-alt: var(--off-white);
  --surface-image: var(--grey-50);
  --surface-inverse: var(--ink);
  --surface-header: rgba(255,255,255,.97);

  --line-hairline: var(--grey-200);
  --line-strong: var(--ink);
  --line-step: #E0E0E0;

  --action-fill: var(--ink);
  --action-fill-hover: var(--grey-600);
  --action-outline: var(--ink);

  /* ---- bordures, verbatim de tokens/borders.css ----
     La charte est carrée : aucun rayon, aucune ombre. La séparation se fait
     au filet et au aplat gris. */
  --radius-none: 0px;
  --border-hairline: 1px solid var(--line-hairline);
  --border-strong: 1px solid var(--line-strong);
  --blur-header: blur(8px);
  --transition-hover: 120ms linear;

  /* ---- typographie ---- */
  --font-display: "Abril Fatface", Georgia, serif;
  --font-text: Jost, system-ui, -apple-system, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Échelle d'affichage, toujours EN CAPITALES, graisse 400 : Abril n'a
     qu'une graisse. Valeurs relevées sur la maquette mobile. */
  --display-hero-size: 38px;
  --display-hero-line: 1.06;
  --display-section-size: 27px;
  --display-section-line: 1.1;
  --display-cta-size: 26px;
  --display-cta-line: 1.12;
  --display-price-size: 21px;
  --display-price-line: 1.1;
  --display-step-size: 17px;
  --display-step-line: 1.15;

  /* Échelle de texte, Jost 300 pour le texte courant, 400 pour les libellés */
  --text-lead-size: 16px;
  --text-lead-line: 1.7;
  --text-body-size: 16px;
  --text-body-line: 1.65;
  --text-faq-size: 16px;
  --text-faq-line: 1.45;
  --text-field-size: 16px;

  /* Libellés en capitales. Quatre familles, quatre approches, c'est
     l'approche qui les distingue, pas la taille. */
  --label-size: 14px;
  --label-track: .28em;        /* le surtitre du bandeau */
  --label-section-track: .2em; /* les surtitres de section */
  --label-nav-track: .14em;    /* nav, pied, méta */
  --label-cta-size: 14px;
  --label-cta-track: .16em;    /* boutons */
  --label-cta-small-size: 14px;
  --wordmark-size: 19px;
  --wordmark-track: .14em;

  /* ---- rythme ---- */
  --colonne-max: 390px;        /* la largeur de la maquette */
  --gouttiere: 16px;
  --header-pad-y: 14px;
  --section-gap: 34px;         /* entre deux sections */
  --hero-image-h: 430px;
}