:root {
  --max-width: 1366px;
  --medium-max-width: 960px;
  --narrow-max-width: 860px;
  --narrower-max-width: 640px;

  --color-white: #ffffff;
  --color-gray: #E6E6E6;
  --color-cobalt-blue: #1800E7;
  --color-light-blue: #99B6FF;
  --color-ultramarine: #2362DD;
  --color-border-gray: #cfd3d7;
  
  --color-gold: #E6A410;

  --color-text-black: #363636;
  --color-text-gray: #aaaaaa;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --font-family-regular: 'HK Grotesk Wide Regular';
  --font-family-bold: 'HK Grotesk Wide Bold';
  --font-family-black: 'HK Grotesk Wide Black';

  --font-family-body-text: "Roboto", Helvetica, Arial, sans-serif;

  --line-height-tight: 1.2em;
  --line-height-narrow: 1.3em;
  --line-height-standard: 1.4em;
  --line-height-wide: 1.6em;
  --line-height-xwide: 1.75em;

  --gap: 36px;
  --gap10: calc(var(--gap) / 4);
  --gap12: calc(var(--gap) / 3);
  --gap18: calc(var(--gap) / 2);
  --gap24: calc(var(--gap) / 3 * 2);
  --gap48: calc(var(--gap) / 3 * 4);
  --gap72: calc(var(--gap) * 2);
  --gap108: calc(var(--gap) * 3);

  --logo-height: 48px;
}