/**
 * @file
 * The variables.
 *
 * It includes styles variables for colors.
 */

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-primary: #5C7051;
  --color-secondary: #ABC530 ;
  --color-neutral: #F1F3F3;
  --color-neutral-2: #889693;
  --color-white: #fff;


  /** Font Size **/

  --content-size-s: 0.875rem /* 14px */;
  --content-size: 1rem /* 16px */;
  --content-size-m: 1.125rem /* 18px */;
  --content-size-xl: 1.375rem /* 22px */;
  --content-size-l: 1.25rem /* 20px */;

  --heading-size-l: 2.375rem; /* 38px */
  --heading-size-l-alt: 3.125rem; /* 50px */
  --heading-size-m: 1.688rem;
  --heading-size-s: 1.25rem;
  --heading-size-xs: 1rem;

  /** Letter Spacing **/

  --letter-spacing-s: 0.32px;
  --letter-spacing-m: 3px;


  /** Line Height **/

  --line-height-heading: 130%;
  --line-height-content: 200%;


}

@media (min-width: 900px) {
  :root {
    --heading-size-l: 3.75rem /* 60px */;
    --heading-size-m: 1.5rem /* 24px */;
    --heading-size-s: 1.063rem /* 17px */;
    --heading-size-xs: 0.938rem /* 15px */;

    --content-size-xl: 1.625rem /* 26px */;
   }
}