:root {
  --color-main-900: #110d4d;
  --color-main-700: #241f6b;
  --color-main-500: #35307f;
  --color-main-200: #5852a9;
  --color-main-100: #b7b4e4;
  --color-main-050: #f3f2fd;
  --color-complementary-900: #5a1100;
  --color-complementary-700: #a3270b;
  --color-complementary-500: #e45230;
  --color-complementary-200: #ea7c62;
  --color-complementary-100: #fad0c7;
  --color-complementary-050: #f7c8be;
  --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/48px "ObjectSans";
  --typography-headline-01: 500 32px/32px "ObjectSans";
  --typography-headline-02: 500 28px/32px "ObjectSans";
  --typography-headline-03: 500 24px/24px "ObjectSans";
  --typography-headline-04: 500 22px/24px "ObjectSans";
  --typography-headline-05: 500 20px/24px "ObjectSans";
  --typography-headline-06: 500 18px/24px "ObjectSans";
  --typography-label-m: 500 16px/20px "ObjectSans";
  --typography-label-s: 500 14px/20px "ObjectSans";
  --typography-label-xs: 500 12px/16px "ObjectSans";
  --typography-paragraph-l: 20px/24px "ObjectSans";
  --typography-paragraph-m: 16px/24px "ObjectSans";
  --typography-paragraph-s: 14px/20px "ObjectSans";
  --typography-paragraph-xs: 12px/16px "ObjectSans";
  --border-radius-s: 4px;
  --button-background-color: var(--color-complementary-500);
  --button-background-color-hover: var(--color-complementary-200);
  --label-color: var(--color-complementary-500);
  --section-contrast-background: var(--color-gray-100);
  --section-secondary-background: var(--color-main-900);
  --section-secondary-card-background: var(--color-main-700);
  --section-secondary-label-color: var(--color-complementary-500);
  --nav-bar-color-selected: var(--color-complementary-500);
  --header-background-color: var(--color-main-700);
  --header-color: var(--color-gray-000);
  --theme-accent-color: var(--color-main-700);
  --theme-contrast-background-color: var(--color-main-050);
  --theme-contrast-color: var(--color-main-700);
  --theme-featured-color: var(--color-complementary-700);
  --theme-featured-background-color: var(--color-complementary-050);
  --theme-featured-border-color: var(--color-complementary-700);
}

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

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

@font-face {
  font-display: swap;
  font-family: ObjectSans;
  font-weight: 500;
  src: url("/static/fonts/ObjectSans/ObjectSans-Heavy.otf");
}