:root {
  --firula-font-family: "allotrope-variable", sans-serif;
  --firula-weight-hero: 800;
  --firula-weight-heading: 700;
  --firula-weight-emphasis: 600;
  --firula-weight-navigation: 500;
  --firula-weight-body: 400;
}

body,
button,
input,
textarea,
select,
code,
pre {
  font-family: var(--firula-font-family) !important;
  font-variation-settings: "wdth" 100;
}

/* Override the exported style names such as "Allotrope Variable:ExtraBold".
   Adobe's variable face supplies the actual weight through font-weight. */
:is(#container, #mobile-site) .textContents {
  font-family: var(--firula-font-family) !important;
  font-weight: var(--firula-text-weight, var(--firula-weight-body)) !important;
  font-variation-settings: "wdth" 100 !important;
  font-stretch: normal;
}

:is(#container, #mobile-site) .textContents * {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-variation-settings: inherit !important;
}

:is(#container, #mobile-site) [data-typography="hero"] {
  --firula-text-weight: var(--firula-weight-hero);
}

:is(#container, #mobile-site) [data-typography="heading"],
:is(#container, #mobile-site) [data-typography="project"] {
  --firula-text-weight: var(--firula-weight-heading);
}

:is(#container, #mobile-site) [data-typography="name"],
:is(#container, #mobile-site) [data-typography="action"],
:is(#container, #mobile-site) [data-typography="question"] {
  --firula-text-weight: var(--firula-weight-emphasis);
}

:is(#container, #mobile-site) [data-typography="navigation"],
:is(#container, #mobile-site) [data-typography="eyebrow"] {
  --firula-text-weight: var(--firula-weight-navigation);
}

:is(#container, #mobile-site) [data-typography="body"],
:is(#container, #mobile-site) [data-typography="metadata"] {
  --firula-text-weight: var(--firula-weight-body);
}

body { background-color: #1e0c4c; }