:root {
  /* Layout */
  --container-max-width: 100%;
  --container-max-width-sm: 650px;
  --container-max-width-md: 900px;
  --container-max-width-lg: var(--container-max-width-md);
  --container-max-width-xl: 1074px;
  --container-max-width-ultra: 1360px;

  /* Colors */
  --base-white: white;
  --base-white-translucent: rgba(var(--base-white), 0.7);
  --base-off-white: #f5f5f5;
  --base-grey-0: #eee;
  --base-grey-light: #ccc;
  --base-grey-4: #d9d9d9; /*replaces base-grey-medium */
  --base-grey-5: #707070; /* or secondary color? */
  --base-grey-dark: #979797;
  --base-grey-darker: #4d4d4d;
  --base-grey-10: #404345;
  --base-grey-darkest: #100808;
  --base-black: black;

  --primary-color: #005ea2;
  --primary-color-light: #3391d5;
  --primary-color-dark: #002b6f;
  --secondary-color: var(--base-grey-5);
  --secondary-color-light: #ff6c66;
  --secondary-color-dark: #a50600;
  --tertiary-color: #04c585;
  --tertiary-color-light: #37f8b8;
  --tertiary-color-dark: #009252;

  /* Font family */
  --google-font-url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap';

  --font-primary: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Font weight */
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-book: 350;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Animation */
  --animation-duration: 0.5s;
  --animation-duration--fast: 0.25s;
  --animation-easing: cubic-bezier(0.68, 0, 0.07, 1);
}