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

/**
 * Global variables
 */

:root {

  /** Colors **/

  --color-pf--1: #00205c;
  --color-pf--2: #004a88;
  --color-pf--3: #3db5e6;
  --color-pf--4: #ECF8FC;

  --color-brand--red: #E22C00;
  --color-brand--dark-orange: #CA4900;
  --color-brand--dark-orange-2: #C33F04;
  --color-brand--orange: #E66000;
  --color-brand--medium-orange: #F29500;
  --color-brand--light-orange-1: #FFEBD4;
  --color-brand--light-orange-2: #FFF3E5;

  --color-neutral--black: #1D1D1B;
  --color-neutral--dark-grey: #484B4D;
  --color-neutral--grey: #71777A;
  --color-neutral--light-grey: #F3F5F7;
  --color-neutral--white: #ffff;



  /** Font Size **/

  --content-size-m: 1.125rem /* 18px */;
  --content-size: 1rem /* 16px */;
  --content-size-s: 0.875rem /* 14px */;
  --content-size-xs: 0.75rem /* 12px */;


  --heading-size-l: 2.188rem /* 35px */;
  --heading-size-m: 1.563rem /* 25px */;
  --heading-size-s: 1.563rem /* 25px */;
  --heading-size-xs: 1.25rem /* 20px */;

}

@media (min-width: 800px) {
  :root {
    --heading-size-l: 2.813rem /* 45px */;
    --heading-size-m: 2.188rem /* 35px */;
  }
}