:root {
  --color-main-900: #ad7a00;
  --color-main-700: #dfa61d;
  --color-main-500: #e3b548;
  --color-main-200: #e9c673;
  --color-main-100: #f7ebce;
  --color-main-050: #fcf7eb;
  --color-complementary-900: #2e4355;
  --color-complementary-700: #4a6378;
  --color-complementary-500: #647d93;
  --color-complementary-200: #8397a9;
  --color-complementary-100: #cad3da;
  --color-complementary-050: #edf0f2;
  --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 "AlmarenaDisplay";
  --typography-headline-01: 500 32px/32px "AlmarenaDisplay";
  --typography-headline-02: 500 28px/32px "AlmarenaDisplay";
  --typography-headline-03: 500 24px/24px "AlmarenaDisplay";
  --typography-headline-04: 500 22px/24px "AlmarenaDisplay";
  --typography-headline-05: 500 20px/24px "AlmarenaDisplay";
  --typography-headline-06: 500 18px/24px "AlmarenaDisplay";
  --typography-label-m: 500 16px/20px "Almarena";
  --typography-label-s: 500 14px/20px "Almarena";
  --typography-label-xs: 500 12px/16px "Almarena";
  --typography-paragraph-l: 20px/24px "Almarena";
  --typography-paragraph-m: 16px/24px "Almarena";
  --typography-paragraph-s: 14px/20px "Almarena";
  --typography-paragraph-xs: 12px/16px "Almarena";
  --border-radius-s: 0;
  --header-color: var(--color-gray-900);
  --header-color-not-scrolled: var(--color-gray-900);
  --header-background-color: var(--color-main-700);
  --hero-background-color: var(--color-main-700);
  --button-background-color: var(--color-complementary-700);
  --button-background-color-hover: var(--color-complementary-500);
  --icon-color-contrast: var(--color-complementary-700);
  --icon-background-contrast: var(--color-complementary-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-700);
  --theme-accent-color: var(--color-complementary-700);
  --theme-contrast-color: var(--color-gray-900);
  --theme-contrast-background-color: var(--color-complementary-050);
  --theme-featured-color: var(--color-gray-800);
  --theme-featured-background-color: var(--color-main-100);
  --theme-featured-border-color: var(--color-main-200);
}

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

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

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

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