/*--------------------------------------------------------------
# Custom properties
--------------------------------------------------------------*/

:root {
  /* Colours */
  --white-pure: #FFFFFF;
  --black-pure: #000000;

  /* Neutral */
  --grey-5:   #0C0D0D;
  --grey-15:  #242628;
  --grey-30:  #494D50;
  --grey-50:  #798086;
  --grey-70:  #AFB3B6;
  --grey-95:  #F2F2F3;
  --grey-99:  #FCFCFD;

  /* Primary */
  --gold-25:  #634B1D;
  --gold-45:  #B28834;
  --gold-85:  #EEE0C4;

  /* Error */
  --red-25:   #801500;
  --red-45:   #E62600;
  --red-85:   #FFBFB3;

  /* Information */
  --yellow-25:  #806A00;
  --yellow-45:  #E6BF00;
  --yellow-85:  #FFF2B3;

  /* Link */
  --blue-25:  #004080;
  --blue-45:  #0073E6;
  --blue-85:  #B3D9FF;

  /* Breakpoints */
  --phone: 599px;             /* @media (max-width: 599px) */
  --tablet: 600px;            /* @media (min-width: 600px) */
  --tablet-landscape: 900px;  /* @media (min-width: 900px) */
  --desktop: 1200px;          /* @media (min-width: 1200px) */
  --desktop-big: 1800px;      /* @media (min-width: 1800px) */

  /* Fonts */
  --heading-font: Spartan, Raleway, sans-serif;
  --body-font: Muli, sans-serif;
  --code-font: Consolas, monospace;

  /* Text sizing */
  --text-hero: 58px;
  --text-hero-sml: 46px;
  --text-h1: 46px;
  --text-h1-sml: 38px;
  --text-h2: 38px;
  --text-h2-sml: 34px;
  --text-h3: 30px;
  --text-h4: 26px;
  --text-h5: 22px;
  --text-h6: 18px;
  --text-p: 18px;
  --text-body: 16px;
  --text-caption: 14px;
  --text-small: 12px;
}

/*
 * Example
 * color: var(--grey-99);
 */