:root {
  --color-main-900: #0a0a0a;
  --color-main-700: #1a1a1a;
  --color-main-500: #2d2d2d;
  --color-main-200: #4a4a4a;
  --color-main-100: #6b6b6b;
  --color-main-050: #f8f8f8;
  --color-complementary-900: #1a3a2e;
  --color-complementary-700: #2d5f4d;
  --color-complementary-500: #4a8b72;
  --color-complementary-200: #6ba793;
  --color-complementary-100: #9ac4b5;
  --color-complementary-050: #e8f3f0;
  --color-gray-900: #0f0f0f;
  --color-gray-800: #1f1f1f;
  --color-gray-700: #333;
  --color-gray-600: #666;
  --color-gray-500: #888;
  --color-gray-400: #b0b0b0;
  --color-gray-300: #d4d4d4;
  --color-gray-200: #e8e8e8;
  --color-gray-100: #f5f5f5;
  --color-gray-050: #fafafa;
  --color-gray-000: #fff;
  --color-error-500: #da3735;
  --color-error-050: #ffebee;
  --color-warn-500: #b55802;
  --color-warn-050: #f4e6d9;
  --color-success-500: #4a8b72;
  --color-success-050: #e8f3f0;
  --color-info-500: #1e88e5;
  --color-info-050: #e3f2fd;
  --typography-display: 300 40px/48px lato, -apple-system, blinkmacsystemfont,
    sans-serif;
  --typography-headline-01: 300 32px/40px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-headline-02: 300 28px/36px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-headline-03: 400 24px/32px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-headline-04: 400 22px/28px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-headline-05: 400 20px/28px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-headline-06: 400 18px/24px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-label-m: 400 16px/20px lato, -apple-system, blinkmacsystemfont,
    sans-serif;
  --typography-label-s: 400 14px/20px lato, -apple-system, blinkmacsystemfont,
    sans-serif;
  --typography-label-xs: 400 12px/16px lato, -apple-system, blinkmacsystemfont,
    sans-serif;
  --typography-paragraph-l: 300 18px/28px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-paragraph-m: 300 16px/24px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-paragraph-s: 300 14px/22px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --typography-paragraph-xs: 300 12px/18px lato, -apple-system,
    blinkmacsystemfont, sans-serif;
  --border-radius-s: 2px;
  --button-background-color: var(--color-gray-900);
  --button-background-color-hover: var(--color-main-500);
  --label-color: var(--color-gray-700);
  --section-contrast-background: var(--color-gray-050);
  --section-secondary-background: var(--color-gray-900);
  --section-secondary-card-background: var(--color-gray-800);
  --section-secondary-label-color: var(--color-gray-000);
  --nav-bar-color-selected: var(--color-complementary-500);
  --theme-accent-color: var(--color-complementary-500);
  --theme-contrast-background-color: var(--color-gray-050);
  --theme-contrast-color: var(--color-gray-900);
  --theme-featured-color: var(--color-complementary-500);
  --theme-featured-background-color: var(--color-complementary-050);
  --theme-featured-border-color: var(--color-complementary-500);
}

@media screen and (min-width: 768px) {
  :root {
    --typography-display: 300 56px/64px lato, -apple-system, blinkmacsystemfont,
      sans-serif;
    --typography-headline-01: 300 40px/48px lato, -apple-system,
      blinkmacsystemfont, sans-serif;
    --typography-headline-02: 300 36px/44px lato, -apple-system,
      blinkmacsystemfont, sans-serif;
    --typography-headline-03: 400 32px/40px lato, -apple-system,
      blinkmacsystemfont, sans-serif;
    --typography-headline-04: 400 28px/36px lato, -apple-system,
      blinkmacsystemfont, sans-serif;
    --typography-headline-05: 400 24px/32px lato, -apple-system,
      blinkmacsystemfont, sans-serif;
    --typography-headline-06: 400 18px/26px lato, -apple-system,
      blinkmacsystemfont, sans-serif;
  }
}

@font-face {
  font-display: swap;
  font-family: Lato;
  font-weight: 300;
  src: url("/static/fonts/Lato/Lato-Light.ttf");
}

@font-face {
  font-display: swap;
  font-family: Lato;
  font-weight: 400;
  src: url("/static/fonts/Lato/Lato-Regular.ttf");
}

@font-face {
  font-display: swap;
  font-family: Lato;
  font-weight: 700;
  src: url("/static/fonts/Lato/Lato-Bold.ttf");
}