:root {
  --color-main-900: #281b16;
  --color-main-700: #50362c;
  --color-main-500: #684d41;
  --color-main-200: #8e796f;
  --color-main-100: #eae6df;
  --color-main-050: #f4f2ef;
  --color-complementary-900: #102626;
  --color-complementary-700: #203d3d;
  --color-complementary-500: #366;
  --color-complementary-200: #658c8c;
  --color-complementary-100: #dae7e7;
  --color-complementary-050: #f7f9f9;
  --color-gray-900: #151515;
  --color-gray-800: #363636;
  --color-gray-700: #494949;
  --color-gray-600: #747474;
  --color-gray-500: #8a8a8a;
  --color-gray-400: #c1c1c1;
  --color-gray-300: #dcdcdc;
  --color-gray-200: #eaeaea;
  --color-gray-100: #f1f1f1;
  --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: #388e3c;
  --color-success-050: #f1f8e9;
  --color-info-500: #1e88e5;
  --color-info-050: #e3f2fd;
  --typography-display: 500 40px/40px "Geomanist";
  --typography-headline-01: 500 32px/32px "Geomanist";
  --typography-headline-02: 500 28px/32px "Geomanist";
  --typography-headline-03: 500 24px/24px "Geomanist";
  --typography-headline-04: 500 22px/24px "Geomanist";
  --typography-headline-05: 500 20px/24px "Geomanist";
  --typography-headline-06: 500 18px/24px "Geomanist";
  --typography-label-m: 500 16px/20px "Geomanist";
  --typography-label-s: 500 14px/20px "Geomanist";
  --typography-label-xs: 500 12px/16px "Geomanist";
  --typography-paragraph-l: 20px/24px "Geomanist";
  --typography-paragraph-m: 16px/24px "Geomanist";
  --typography-paragraph-s: 14px/20px "Geomanist";
  --typography-paragraph-xs: 12px/16px "Geomanist";
  --border-radius-s: 4px;
  --tag-padding: 7px var(--spacing-03) 4px;
  --progress-bar-color: var(--color-main-700);
  --theme-accent-color: var(--color-main-500);
  --theme-contrast-color: var(--color-main-700);
  --theme-contrast-background-color: var(--color-main-050);
  --theme-featured-color: var(--color-main-500);
  --theme-featured-background-color: var(--color-main-100);
  --theme-featured-border-color: var(--color-gray-300);
}

@media screen and (min-width: 768px) {
  :root {
    --typography-display: 500 56px/60px "Geomanist";
    --typography-headline-01: 500 40px/48px "Geomanist";
    --typography-headline-02: 500 36px/40px "Geomanist";
    --typography-headline-03: 500 32px/40px "Geomanist";
    --typography-headline-04: 500 28px/32px "Geomanist";
    --typography-headline-05: 500 24px/28px "Geomanist";
    --typography-headline-06: 500 18px/22px "Geomanist";
  }
}

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

@font-face {
  font-display: swap;
  font-family: Geomanist;
  font-weight: 500;
  src: url("/static/fonts/Geomanist/Geomanist-Book.ttf");
}