/* COLORS */

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #8c8c8c;

  /* 10% opacity */
  --lightgrey: #8c8c8c1A;
  --lightwhite: #FFFFFF9C;
}

/* FONTS */

:root {
  /* name: font-size / line-height / font-family */
  --maru-mega-1: calc(75rem/16) / calc(84rem/16) "gt_maru_mega_mini_shaded";

  --maru-mono-1: calc(11rem/16) / calc(13rem/16) "gt_maru_mono";
  --maru-mono-2: calc(15rem/16) / calc(19rem/16) "gt_maru_mono";
  --maru-mono-3: calc(17rem/16) / calc(22rem/16) "gt_maru_mono";
  --maru-mono-4: calc(22rem/16) / calc(31rem/16) "gt_maru_mono";
  --maru-mono-5: calc(40rem/16) "gt_maru_mono";
  --maru-mono-6: calc(52rem/16) "gt_maru_mono";

  --neue_montreal_squeezed-1: calc(13.5rem/16) / calc(15rem/16) "ot_neue_montreal_squeezed";
  --neue_montreal_squeezed-2: calc(18rem/16) / calc(21rem/16) "ot_neue_montreal_squeezed";
}
@media screen and (max-width: 800px) {
  :root {
    /* name: font-size / line-height / font-family */
    --maru-mega-1: calc(55rem/16) / calc(60rem/16) "gt_maru_mega_mini_shaded";

    --maru-mono-4: calc(19rem/16) / calc(28rem/16) "gt_maru_mono";

  }
}
/*

Pour utiliser les variables de FONTS ci-dessus, il faut mettre la propriété "font"
et appeler la variable correspondante :

Alignement des éléments et avec les varaibles :

- header :
  - titre du site : --maru-mega-1
  - sous-titre du site : -maru-mono-4
- home :
  - description site : --maru-mono-3
  - bouton : --maru-mono-4
- calendrier :
  - description rando : --maru-mono-1
  - titre rando : --maru-mono-2
  - liens, boutons, titres de colonnes, nom du jour : --maru-mono-3
  - nom du mois, date du jour, code rando : --maru-mono-5
  - petites infos rando : --neue_montreal_squeezed-1
- detail rando :
  - description rando : --maru-mono-2
  - titre rando, bouton, total : --maru-mono-4
  - code rando, date sortie : --maru-mono-6
  - petites infos rando : --neue_montreal_squeezed-2
- informations : 
  - description : --maru-mono-4
  - blocs multiples : --maru-mono-2
*/


/* PADDINGS/BORDERS */

:root {
  --padding-x: 2rem;
  --border-radius: calc(12rem/16);
}
@media screen and (max-width: 800px) {
  :root {
    --padding-x: 1rem;
  }
}

/* BREAKPOINTS */

/*

Breakpoints :

- < 1000px
- < 800px

*/