/* tokens.css, le vocabulaire visuel du site.
   Toute couleur, tout rayon, toute largeur part d'ici. Modifier une valeur
   ici la propage partout.

   DIRECTION « BLEU ENCRE ». Le bleu du logo EPN est la couleur principale,
   décliné en quatre valeurs, du voile au bleu nuit. Le jaune ne sert plus
   qu'aux actions et aux signaux. Le vert d'eau et la terre cuite ont quitté
   le rôle d'accent : ils ne subsistent que dans le codage des niveaux
   scolaires, sur la tranche des couvertures, où ils portent une information.

   Trois valeurs commandent le reste : --bleu, --jaune, --encre. */

:root {
  /* Marque */
  --bleu:       #0A3FA8;   /* action : boutons, liens, états actifs, logo */
  --jaune:      #FFD84D;   /* signal : actions en second plan, chiffres clés */
  --encre:      #0B1B3A;   /* texte, aplats sombres */

  /* Déclinaisons du bleu */
  --bleu-nuit:  #072253;   /* grands aplats, hero, pied de page */
  --bleu-fonce: #08327F;   /* survol d'un bouton bleu */
  --bleu-vif:   #1B5CD4;   /* accent lumineux sur fond sombre */
  --bleu-voile: #E8EFFC;   /* fonds d'état actif, pastilles douces */
  --jaune-doux: #FFF0B5;

  /* Niveaux scolaires.
     Ces quatre couleurs ne sont pas décoratives : elles forment la tranche à
     gauche de chaque couverture et disent le niveau. Les uniformiser
     supprimerait l'information, c'est pourquoi la terre cuite et le vert
     survivent ici, et nulle part ailleurs. */
  --niv-prescolaire: #C2410C;
  --niv-fondamental: #0A3FA8;
  --niv-secondaire:  #0C786C;
  --niv-litterature: #7A3A8C;

  /* Surfaces */
  --papier:       #F7F9FE;   /* fond général, blanc très légèrement bleuté */
  --papier-creux: #EDF2FC;   /* sections alternées */
  --blanc:        #FFFFFF;
  --ligne:        rgba(11, 27, 58, .14);
  --filet:        rgba(11, 27, 58, .07);

  /* Textes */
  --encre-douce: #465A7E;
  --encre-tenue: #5C6B86;

  /* Familles typographiques */
  --font-titre: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-corps: "Karla", "Helvetica Neue", Arial, sans-serif;

  /* Corps */
  --t-affiche: clamp(2.9rem, 7.4vw, 6.2rem);
  --t-h1: clamp(2.3rem, 5.2vw, 4rem);
  --t-h2: clamp(1.9rem, 3.8vw, 2.9rem);
  --t-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --t-petit: .9375rem;
  --t-mini: .8125rem;
  --t-micro: .6875rem;

  /* Rythme */
  --e1: .5rem;  --e2: 1rem;   --e3: 1.5rem;
  --e4: 2.25rem; --e5: 3.5rem; --e6: 5.75rem;

  /* Gabarit */
  --maxw: 1280px;
  --gouttiere: clamp(1.25rem, 4vw, 3.25rem);

  /* Angles et reliefs */
  --r-petit: 8px;
  --r: 16px;
  --r-grand: 28px;
  --r-rond: 999px;

  --ombre-livre:       0 14px 26px -14px rgba(11, 27, 58, .34);
  --ombre-livre-levee: 0 26px 44px -18px rgba(11, 27, 58, .42);
  --ombre-carte:       0 10px 24px -16px rgba(11, 27, 58, .26);

  --transition: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}