/*--------------------------------------------------------------
>>> : root
----------------------------------------------------------------*/
:root {
  --color-primary: #5E9CFF;
  --color-primary-dark: #2B4FC4;
  --color-corporate: #0B3190;

  --color-light-green: #70BE48;
  --color-green: #1C8C00;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg: #f5f6f7;
  --color-text: #000000;
  --color-light-gray: #767676;


  /* Spacing */
  --space-xs: 0.5em;
  --space-sm: 1em;
  --space-sm-2: 1.5em;
  --space-md: 2em;
  --space-lg: 3em;
  --space-xl: 4em;


  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);
  --color-button-bg: var(--color-primary);
  --color-button-bg-hover: var(--color-primary-dark);


  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-24: 24px;
  --font-size-26: 26px;


  /* letter spacing */
  --ls-5: 0.05em;
  --ls-8: 0.08em;
  --ls-10: 0.1em;
  --ls-15: 0.15em;
}


@media screen and (max-width: 699px){
  :root {
    /* Spacing */
    --space-xs: 0.5em;
    --space-sm: 1em;
    --space-sm-2: 1em;
    --space-md: 1em;
    --space-lg: 2em;
    --space-xl: 3em;
  }
}