/* ========================
  variables
  ======================= */

:root {
  /* colors
    ======================= */

  --primary-color: hsla(120, 100%, 20%, 1);
  --primary-color-light: hsla(120, 100%, 32%, 1);
  --primary-color-dark: hsla(120, 100%, 16%, 1);
  --transparent-primary-color-light: hsla(120, 100%, 32%, 0.8);
  --secondary-color: hsla(0, 100%, 46%, 1);
  --secondary-color-light: hsla(0, 100%, 54%, 1);
  --secondary-color-dark: hsla(0, 100%, 36%, 1);
  --transparent-secondary-color-light: hsla(0, 100%, 54%, 0.8);
  --accent-yellow: hsl(41, 89%, 53%, 1);
  --light-grey: hsl(0, 0%, 93%, 1);
  --off-white: hsla(0, 0%, 99%, 1);
  --off-black: hsl(0, 0%, 6%, 1);
  --link-color: var(--secondary-color-dark);

  /* peorple variant */
  /*
  --secondary-color: hsla(300, 100%, 28%, 1);
  --secondary-color-light: hsla(300, 100%, 40%, 1);
  --secondary-color-dark: hsla(300, 100%, 24%, 1);
  */

  /* sizes
    ======================= */

  --header-height: 80px;

  /* fonts
    ======================= */

  /* font types */
  --bs-body-font-family: "Inter", "Roboto", sans-serif;

  /* font-sizes */
  --h1-size: 2.8em;
  --h2-size: 1.8em;
  --h3-size: 1.6em;
  --h4-size: 1.3em;
  --default-font-size: 1.2em;
  --pic-title-size: 1.4em;
  --subtitle-size: 1.7em;
  --main-icon-font-size: 2.4em;
  --main-icon-text-font-size: 0.7em;
  --small-text-size: 0.9em;
  --header-font-size: 0.99em;
  --list-font-size: 1.2em;
  --form-validation-size: 1em;
  --footer-icon-size: 1.5em;

  /* font-weights */
  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 400;
  --default-font-weight: 400;
  --pic-title-weight: 600;
  --subtitle-weight: 400;
  --small-text-weight: 400;
  --header-font-weight: 600;
}