@font-face {
  font-family: "BkmDisplay";
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/bkm-display-regular.woff2) format("woff2");
}

@font-face {
  font-family: "BkmDisplay";
  font-display: block;
  font-style: italic;
  font-weight: 400;
  src: url(./fonts/bkm-display-italic.woff2) format("woff2");
}

@font-face {
  font-family: "Bkm";
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/bkm-regular.woff2) format("woff2");
}

@font-face {
  font-family: "Bkm";
  font-display: block;
  font-style: italic;
  font-weight: 400;
  src: url(./fonts/bkm-italic.woff2) format("woff2");
}

/* @font-face {
  font-family: 'LA Regular';
  src: url(./fonts/la-regular-400.eot);
  src: url(./fonts/la-regular-400.eot?#iefix) format('embedded-opentype'),
      url(./fonts/la-regular-400.woff2) format('woff2'),
      url(./fonts/la-regular-400.woff) format('woff'),
      url(./fonts/la-regular-400.ttf) format('truetype'),
      url(./fonts/la-regular-400.svg#la-regular-400) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
} */

:root {
  --spacing-xs: 0.203125rem;
  --spacing-sm: 0.40625rem;
  --spacing-md: 0.8125rem;
  --spacing-lg: 1.625rem;
  --spacing-xl: 3.25rem;
  --spacing-xxl: 6.5rem;

  --spacing-dot-md: 1.25rem;
  --spacing-dot-lg: var(--spacing-lg);

  --borderRadius-sm: 0.5rem;
  --borderRadius-md: 0.8125rem;
  --borderRadius-lg: 1.25rem;
  --borderRadius-full: 999px;

  --fontFamily-body: "Bkm", Arial, ui-sans-serif;
  --fontFamily-display: "BkmDisplay", Arial, ui-sans-serif;
  --fontFamily-icon: "Line Awesome Free";

  --color-primary: #000;
  --color-primary-tint: #786e64;
  --color-secondary: #fff;
  --color-secondary-tint: #fcf6f1;

  --color-accent: #d2c8be;
  --color-error: #ea0000;
  --color-success: #1eff0a;

  --color-brand-primary: #fff500;
  --color-brand-secondary: #8c31ff;

  --color-ticket: #FAF800;
  --color-ticket-tint: #d8d700;
  --color-ticket-tint-dark: #b2b100;
  --color-support: #298A60;
  --color-support-light: #c7d84b;

  --color-overlay-bg: rgba(0, 0, 0, 0.1);

  --border: 1px solid var(--color-ticket-tint-dark);

  --spacing-xs-max: 0.46;
  --spacing-sm-max: 0.92;
  --spacing-md-max: 1.87;
  --spacing-lg-max: 3.75;
  --spacing-xl-max: 7.5;
  --spacing-xxl-max: 11.25;

  --spacing-dot-md-max: 2.22;
  --spacing-dot-lg-max: 3.75;

  --spacing-pill-nudge-sm: 0.16rem;
  --spacing-pill-nudge-lg: 0.125rem;
  --spacing-text-nudge-lg: 0.1875rem;

  --borderRadius-md-max: 1.88;
  --borderRadius-lg-max: 2.81;

  --fontSize-body-max: 1.67;
  --fontSize-label-max: 1.67;
  --fontSize-deck-max: 3.33;
  --fontSize-lead-max: 5.13;
  --fontSize-title-max: 5.13;
  --fontSize-jumbo-max: 10;
}

@media (min-width: 651px) {
  :root {
    --spacing-xs: 0.3125rem;
    --spacing-sm: 0.625rem;
    --spacing-md: 1.25rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 5rem;
    --spacing-xxl: 7.5rem;

    --spacing-dot-md: 1.25rem;
    --spacing-dot-lg: 3.75vw;

    --spacing-pill-nudge-sm: 0.2rem;
    --spacing-pill-nudge-lg: 0;
    --spacing-text-nudge-lg: 0.125rem;

    --borderRadius-sm: 0.75rem;
    --borderRadius-md: 1.25rem;
    --borderRadius-lg: 1.875rem;

    --fontSize-body: 1.125rem;
    --fontSize-label: 1.125rem;
    --fontSize-deck: 3.33vw;
    --fontSize-lead: 5.13vw;
    --fontSize-title: 5.13vw;
    --fontSize-jumbo: 12.5vw;

    --leading-body: 1.3;
    --leading-label: 1.3;
    --leading-deck: 1;
    --leading-lead: 1;
    --leading-title: 1;
    --leading-jumbo: 0.8;
  }
}

@media (min-width: 1100px) {
  :root {
    --spacing-xs: calc(var(--spacing-xs-max) * 1vw);
    --spacing-sm: calc(var(--spacing-sm-max) * 1vw);
    --spacing-md: calc(var(--spacing-md-max) * 1vw);
    --spacing-lg: calc(var(--spacing-lg-max) * 1vw);
    --spacing-xl: calc(var(--spacing-xl-max) * 1vw);
    --spacing-xxl: calc(var(--spacing-xxl-max) * 1vw);

    --spacing-dot-md: calc(var(--spacing-dot-md-max) * 1vw);
    --spacing-dot-lg: calc(var(--spacing-dot-lg-max) * 1vw);

    --spacing-pill-nudge-sm: 0.4rem;
    --spacing-pill-nudge-lg: 0rem;
    --spacing-text-nudge-lg: 0.3125rem;

    --borderRadius-sm: 1rem;
    --borderRadius-md: calc(var(--borderRadius-md-max) * 1vw);
    --borderRadius-lg: calc(var(--borderRadius-lg-max) * 1vw);

    --fontSize-body: min(1.67vw, 28px);
    --fontSize-label: min(1.67vw, 28px);
    --fontSize-deck: min(3.33vw, 54px);
    --fontSize-lead: 5.13vw;
    --fontSize-title: 5.13vw;
    --fontSize-jumbo: 10vw;

    --leading-body: 1.3;
    --leading-label: 1.3;
    --leading-deck: 1;
    --leading-lead: 0.9;
    --leading-title: 0.9;
    --leading-jumbo: 0.8;
  }
}

@media (min-width: 1280px) {
  :root {
    --lg-screen-width: 80rem;

    --spacing-xs: calc((var(--spacing-xs-max) / 100) * var(--lg-screen-width));
    --spacing-sm: calc((var(--spacing-sm-max) / 100) * var(--lg-screen-width));
    --spacing-md: calc((var(--spacing-md-max) / 100) * var(--lg-screen-width));
    --spacing-lg: calc((var(--spacing-lg-max) / 100) * var(--lg-screen-width));
    --spacing-xl: calc((var(--spacing-xl-max) / 100) * var(--lg-screen-width));
    --spacing-xxl: calc((var(--spacing-xxl-max) / 100) * var(--lg-screen-width));

    --spacing-dot-md: calc((var(--spacing-dot-md-max) / 100) * var(--lg-screen-width));
    --spacing-dot-lg: calc((var(--spacing-dot-lg-max) / 100) * var(--lg-screen-width));

    --spacing-pill-nudge-sm: 0.35rem;
    --spacing-pill-nudge-lg: 0rem;
    --spacing-text-nudge-lg: 0.3125rem;

    --borderRadius-sm: 1.5rem;
    --borderRadius-md: calc((var(--borderRadius-md-max) / 100) * var(--lg-screen-width));
    --borderRadius-lg: calc((var(--borderRadius-lg-max) / 100) * var(--lg-screen-width));

    --fontSize-body: calc((var(--fontSize-body-max) / 100) * var(--lg-screen-width));
    --fontSize-label: calc((var(--fontSize-label-max) / 100) * var(--lg-screen-width));
    --fontSize-deck: calc((var(--fontSize-deck-max) / 100) * var(--lg-screen-width));
    --fontSize-lead: calc((var(--fontSize-lead-max) / 100) * var(--lg-screen-width));
    --fontSize-title: calc((var(--fontSize-title-max) / 100) * var(--lg-screen-width));
    --fontSize-jumbo: calc((var(--fontSize-jumbo-max) / 100) * var(--lg-screen-width));

    --leading-body: 1.3;
    --leading-label: 1.3;
    --leading-deck: 1;
    --leading-lead: 0.9;
    --leading-title: 0.9;
    --leading-jumbo: 0.8;
  }
}