:root {

  /* Typography */
  /* font-family: "bentonsans-regular",Arial --> Roboto
     font-family: "HCo Gotham SSm","Arial"; --> NaN Rage Sans XCondensed Black
   */

  --font-primary: "Roboto", Arial, sans-serif;
  --font-secondary: "NaN Rage Sans X Condensed", Arial, sans-serif;
  --font-tertiary: "NaN Rage Sans Condensed", Arial, sans-serif;

  /* Type Scale */
  /* Utility: Roboto 400 15px / 0.9375rem
     Menu: Roboto 600 22px / 1.375rem
     Subline: Roboto 700 28px / 1.5rem
     Button: Roboto 600 22px / 1.375rem
     Hero/Display: NaN Rage 900 100px / 6.25rem
     */

  /* raw type sizes */
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-22: 1.375rem;
  --text-28: 1.8rem;
  --text-100: 6.25rem;

  /* semantic type tokens */
  --text-utility: var(--text-15);
  --text-body: var(--text-16);
  --text-menu: var(--text-22);
  --text-button: var(--text-16);
  --text-eyebrow: var(--text-28);
  --text-subline: var(--text-22);
  --text-hero: var(--text-100);


  /* Brand roles */
  /* Current colour palette
     purple: #7f58a1, 6b478b, 51346b, 875bae, 6c54a3 --> #00C2D4
     teal: #15c4b8 --> #FF4DF6
     yellow: #ffcf02 --> #FF6D13
     default blue: #1779ba -->
  */
  --color-primary: #00C2D4;
  --color-primary-hover: #FF4DF6;
  --color-secondary: #FF4DF6;
  --color-tertiary: #FF6D13;
  --color-primary-light: #50F0FF;
}