@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-papier:        #F5F0E6;
  --c-papier-fonce:  #EBE3D3;
  --c-encre:         #1C1F1A;
  --c-encre-douce:   #4A4F47;
  --c-foret:         #1F3A2E;
  --c-foret-nuit:    #142820;
  --c-cuivre:        #B87333;
  --c-cuivre-profond:#8A5223;
  --c-or-pale:       #D4A55A;
  --c-lie-de-vin:    #5E1F2B;
  --c-craie:         #F2EEE4;
  --c-blanc:         #FFFDF8;
  --c-erreur:        #9B2C1F;

  --fond:            var(--c-papier);
  --fond-alt:        var(--c-papier-fonce);
  --fond-inverse:    var(--c-foret);
  --texte:           var(--c-encre);
  --texte-doux:      var(--c-encre-douce);
  --texte-inverse:   var(--c-papier);
  --accent:          var(--c-cuivre-profond);
  --accent-inverse:  var(--c-or-pale);
  --filet:           var(--c-cuivre);
  --bordure:         rgb(28 31 26 / 0.18);
  --focus:           var(--c-cuivre-profond);
  --focus-inverse:   var(--c-or-pale);

  --f-titre:   "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texte:   "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-craie:   "Caveat", "Bradley Hand", "Segoe Print", cursive;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --t-2xl:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --t-3xl:  clamp(2.8rem, 1.8rem + 5.5vw, 6.5rem);
  --t-hero: clamp(3.2rem, 1.5rem + 8.5vw, 9.5rem);

  --lh-serre: 1.02;
  --lh-titre: 1.12;
  --lh-texte: 1.65;
  --tracking-caps: 0.16em;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --s-8: clamp(5rem, 3rem + 8vw, 10rem);

  --largeur-max:   84rem;
  --largeur-texte: 38rem;
  --gouttiere:     clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --hauteur-banniere: 2.25rem;
  --hauteur-header:   4.5rem;
  --hauteur-barre-mobile: 4.25rem;
  --rayon: 2px;

  --ease-doux:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --duree-court: 250ms;
  --duree-moyen: 600ms;
  --duree-long:  900ms;

  --ombre-douce: 0 1px 2px rgb(20 40 32 / 0.06), 0 12px 32px -12px rgb(20 40 32 / 0.25);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-court: 0ms;
    --duree-moyen: 0ms;
    --duree-long:  0ms;
  }
}