/* tokens.css — extrait de la source, ne rien coder en dur ailleurs */

:root {

  /* Familles de police */
  --_typography---font-family--detail: "Roboto Mono",sans-serif;
  --_typography---font-family--primary: Geist,Arial,sans-serif;
  --_typography---font-family--secondary: Geist,Arial,sans-serif;

  /* Graisses */
  --_typography---font-weight--bold: 700;
  --_typography---font-weight--thin: 100;
  --_typography---font-weight--black: 900;
  --_typography---font-weight--light: 300;
  --_typography---font-weight--medium: 500;
  --_typography---font-weight--regular: 400;
  --_typography---font-weight--semibold: 600;
  --_typography---font-weight--extra-bold: 800;
  --_typography---font-weight--extra-light: 200;

  /* Couleurs — primaires */
  --_colors---primary--black: #0a0a0a;
  --_colors---primary--paper: #e8ecf3;
  --_colors---primary--white: white;
  --_colors---primary--accent: #245089;

  /* Couleurs — bleu
     Échelle construite sur une teinte unique (214°). La clarté de chaque
     ton reprend celle du beige d'origine : les contrastes du gabarit sont
     donc conservés. La saturation, elle, est relevée dans les tons moyens
     et sombres — un bleu à 5 % ne se distingue plus d'un gris. */
  --_colors---bleu--50: #eef2f6;
  --_colors---bleu--75: #e8ecf2;
  --_colors---bleu--100: #dfe5ec;
  --_colors---bleu--150: #ccd5e1;
  --_colors---bleu--200: #b3becc;
  --_colors---bleu--250: #99a4b2;
  --_colors---bleu--275: #657386;
  --_colors---bleu--300: #5c697a;
  --_colors---bleu--400: #525f6f;
  --_colors---bleu--500: #3d4857;
  --_colors---bleu--600: #323c48;

  /* Couleurs — gris */
  --_colors---grey--50: whitesmoke;
  --_colors---grey--75: #f1f1f1;
  --_colors---grey--100: #ebebeb;
  --_colors---grey--200: #cacaca;
  --_colors---grey--250: grey;
  --_colors---grey--300: #707070;
  --_colors---grey--400: #666;
  --_colors---grey--500: #4d4d4d;
  --_colors---grey--525: #424242;
  --_colors---grey--550: #363636;
  --_colors---grey--600: #292929;
  --_colors---grey--625: #242424;
  --_colors---grey--650: #1f1f1f;
  --_colors---grey--700: #181818;
  --_colors---grey--800: #111;
  --_colors---grey--900: #0a0a0a;

  /* Couleurs — blanc alpha */
  --_colors---white--10: #ffffff1a;
  --_colors---white--15: #ffffff26;
  --_colors---white--20: #fff3;
  --_colors---white--30: #ffffff4d;
  --_colors---white--40: #fff6;
  --_colors---white--50: #ffffff80;
  --_colors---white--60: #fff9;
  --_colors---white--70: #ffffffb3;
  --_colors---white--80: #fffc;
  --_colors---white--90: #fffc;
  --_colors---white--transparent: transparent;

  /* Couleurs — divers */
  --_colors---animation--timeline: var(--_colors---bleu--200);

  /* Échelle de taille */
  --size--size-0: 0rem;
  --size--size-1: .125rem;
  --size--size-2: .25rem;
  --size--size-3: .375rem;
  --size--size-4: .5rem;
  --size--size-5: .62rem;
  --size--size-6: .75rem;
  --size--size-7: .83rem;
  --size--size-8: .875rem;
  --size--size-9: .9375rem;
  --size--size-10: 1rem;
  --size--size-11: 1.125rem;
  --size--size-12: 1.25rem;
  --size--size-13: 1.5rem;
  --size--size-14: 1.75rem;
  --size--size-15: 2rem;
  --size--size-16: 2.25rem;
  --size--size-17: 2.5rem;
  --size--size-18: 2.75rem;
  --size--size-19: 3rem;
  --size--size-20: 3.25rem;
  --size--size-21: 3.5rem;
  --size--size-22: 4rem;
  --size--size-23: 4.5rem;
  --size--size-24: 5rem;
  --size--size-25: 5.5rem;
  --size--size-26: 6rem;
  --size--size-27: 6.5rem;
  --size--size-28: 7rem;
  --size--size-29: 8rem;
  --size--size-30: 9rem;
  --size--size-31: 10rem;
  --size--size-32: 11rem;
  --size--size-33: 12rem;
  --size--size-34: 13rem;
  --size--size-35: 14rem;
  --size--size-36: 15rem;
  --size--size-37: 16rem;

  /* Typographie */
  --_typography---h1--font-size: var(--size--size-28);
  --_typography---h2--font-size: var(--size--size-23);
  --_typography---h3--font-size: var(--size--size-20);
  --_typography---h4--font-size: var(--size--size-17);
  --_typography---h5--font-size: var(--size--size-14);
  --_typography---h6--font-size: var(--size--size-12);
  --_typography---ol--font-size: var(--size--size-10);
  --_typography---ul--font-size: var(--size--size-10);
  --_typography---h1--font-family: var(--_typography---font-family--primary);
  --_typography---h1--font-weight: var(--_typography---font-weight--medium);
  --_typography---h1--line-height: 95%;
  --_typography---h2--font-family: var(--_typography---font-family--primary);
  --_typography---h2--font-weight: var(--_typography---font-weight--medium);
  --_typography---h2--line-height: 100%;
  --_typography---h3--font-family: var(--_typography---font-family--primary);
  --_typography---h3--font-weight: var(--_typography---font-weight--medium);
  --_typography---h3--line-height: 105%;
  --_typography---h4--font-family: var(--_typography---font-family--primary);
  --_typography---h4--font-weight: var(--_typography---font-weight--medium);
  --_typography---h4--line-height: 110%;
  --_typography---h5--font-family: var(--_typography---font-family--primary);
  --_typography---h5--font-weight: var(--_typography---font-weight--medium);
  --_typography---h5--line-height: 115%;
  --_typography---h6--font-family: var(--_typography---font-family--primary);
  --_typography---h6--font-weight: var(--_typography---font-weight--medium);
  --_typography---h6--line-height: 120%;
  --_typography---ol--font-family: var(--_typography---font-family--primary);
  --_typography---ol--font-weight: var(--_typography---font-weight--regular);
  --_typography---ol--line-height: 130%;
  --_typography---ul--font-family: var(--_typography---font-family--primary);
  --_typography---ul--font-weight: var(--_typography---body-regular--font-weight);
  --_typography---ul--line-height: 130%;
  --_typography---h1--letter-spacing: -.04em;
  --_typography---h2--letter-spacing: -.04em;
  --_typography---h3--letter-spacing: -.04em;
  --_typography---h4--letter-spacing: -.02em;
  --_typography---h5--letter-spacing: -.02em;
  --_typography---h6--letter-spacing: -.02em;
  --_typography---ol--letter-spacing: -.02em;
  --_typography---ul--letter-spacing: -.02em;
  --_typography---body-tiny--font-size: var(--size--size-6);
  --_typography---blockquote--font-size: var(--size--size-12);
  --_typography---body-large--font-size: var(--size--size-12);
  --_typography---body-small--font-size: var(--size--size-8);
  --_typography---body-medium--font-size: var(--size--size-11);
  --_typography---body-tiny--font-family: var(--_typography---font-family--primary);
  --_typography---body-tiny--font-weight: var(--_typography---font-weight--regular);
  --_typography---body-tiny--line-height: 140%;
  --_typography---blockquote--font-family: var(--_typography---font-family--primary);
  --_typography---blockquote--font-weight: var(--_typography---font-weight--medium);
  --_typography---blockquote--line-height: 130%;
  --_typography---body-large--font-family: var(--_typography---font-family--primary);
  --_typography---body-large--font-weight: var(--_typography---font-weight--regular);
  --_typography---body-large--line-height: 130%;
  --_typography---body-regular--font-size: var(--size--size-10);
  --_typography---body-small--font-family: var(--_typography---font-family--primary);
  --_typography---body-small--font-weight: var(--_typography---font-weight--regular);
  --_typography---body-small--line-height: 140%;
  --_typography---body-medium--font-family: var(--_typography---font-family--primary);
  --_typography---body-medium--font-weight: var(--_typography---font-weight--regular);
  --_typography---body-medium--line-height: 140%;
  --_typography---body-regular--font-family: var(--_typography---font-family--primary);
  --_typography---body-regular--font-weight: var(--_typography---font-weight--regular);
  --_typography---body-regular--line-height: 140%;
  --_typography---body-tiny--letter-spacing: -.02em;
  --_typography---blockquote--letter-spacing: -.02em;
  --_typography---body-large--letter-spacing: -.02em;
  --_typography---body-small--letter-spacing: -.02em;
  --_typography---body-medium--letter-spacing: -.02em;
  --_typography---body-regular--letter-spacing: -.02em;

  /* Rayons */
  --border-radius--huge: var(--size--size-11);
  --border-radius--tiny: var(--size--size-2);
  --border-radius--large: var(--size--size-8);
  --border-radius--small: var(--size--size-5);
  --border-radius--ultra: var(--size--size-14);
  --border-radius--xhuge: var(--size--size-12);
  --border-radius--xtiny: var(--size--size-1);
  --border-radius--medium: var(--size--size-6);
  --border-radius--xlarge: var(--size--size-9);
  --border-radius--xsmall: var(--size--size-4);
  --border-radius--xxhuge: var(--size--size-13);
  --border-radius--xxlarge: var(--size--size-10);
  --border-radius--xxsmall: var(--size--size-3);

  /* Espacements */
  --spacer--huge: var(--size--size-26);
  --spacer--tiny: var(--size--size-1);
  --spacer--large: var(--size--size-19);
  --spacer--small: var(--size--size-10);
  --spacer--xhuge: var(--size--size-29);
  --spacer--medium: var(--size--size-15);
  --spacer--xlarge: var(--size--size-22);
  --spacer--xsmall: var(--size--size-4);
  --spacer--xxhuge: var(--size--size-33);
  --spacer--xxlarge: var(--size--size-24);
  --spacer--xxsmall: var(--size--size-2);
  --spacer--custom-1: var(--size--size-12);
  --spacer--custom-2: var(--size--size-13);
  --spacer--custom-3: var(--size--size-17);

  /* Sections */
  --section--large: var(--size--size-31);
  --section--small: var(--size--size-26);
  --section--medium: var(--size--size-29);
  --section--xlarge: var(--size--size-33);
  --section--xsmall: var(--size--size-22);
  --section--xxlarge: var(--size--size-34);

  /* Structure */
  --_structure---container--tiny: 36rem;
  --_structure---container--large: 108rem;
  --_structure---container--small: 75rem;
  --_structure---max-width--large: 49rem;
  --_structure---max-width--small: 28rem;
  --_structure---container--medium: 90rem;
  --_structure---container--xsmall: 54rem;
  --_structure---max-width--medium: 38rem;
  --_structure---max-width--xlarge: 64rem;
  --_structure---max-width--xsmall: 23rem;
  --_structure---container--xxsmall: 38rem;
  --_structure---max-width--xxlarge: 80rem;
  --_structure---max-width--xxsmall: 12rem;
  --_structure---padding-global--padding: var(--size--size-13);
  --_structure---padding-global--padding-tiny: var(--size--size-10);

  /* Divers */
  --animation--menu-border: .375rem;
}

/* =======================================================================
   Échelle typographique par palier

   Le template ne redimensionne pas ses espacements aux petites largeurs,
   seulement ses tailles de titres et de corps de texte. Les valeurs
   ci-dessous sont relevées sur la source, largeur par largeur : sans elles
   le titre du héros reste à 7rem sur un téléphone et sort du cadre.
   ======================================================================= */
@media (max-width: 991px) {
  :root {
    --_typography---h1--font-size: 4rem;
    --_typography---h2--font-size: 3.25rem;
    --_typography---h3--font-size: 2.5rem;
    --_typography---h3--line-height: 110%;
    --_typography---h4--font-size: 2.25rem;
    --_typography---h5--font-size: 1.5rem;
    --_typography---body-large--font-size: 1.125rem;
    --_typography---body-medium--font-size: 1rem;
  }
}

@media (max-width: 767px) {
  :root {
    --_typography---h1--font-size: 2.5rem;
    --_typography---h2--font-size: 2rem;
    --_typography---h3--font-size: 1.75rem;
    --_typography---h3--line-height: 105%;
    --_typography---h4--font-size: 1.5rem;
    --_typography---h5--font-size: 1.25rem;
    --_typography---body-large--font-size: 1rem;
  }
}