@font-face {
  font-family: "Volvo Centum VF";
  src: url("./fonts/VolvoCentumVF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Volvo Centum Opsz";
  src: url("./fonts/VolvoCentumOpsz.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  font-family: "Volvo Centum VF", "Volvo Centum Opsz", sans-serif;

  /* random order  */

  /* body back ground color */
  --ids-theme-color-screen-primary: #f6f3f0;
  --ids-component-button-tonal-emphasized-background: rgba(51, 30, 17, 0.06);
  --ids-theme-color-content-secondary: #6e625e;
}

@media (max-width: 767px) {
  :root {
    --system-typography-heading-font-size-xx-large: var(--system-typography-heading-font-size-large);
    --system-typography-heading-font-weight-xx-large: var(--system-typography-heading-font-weight-large);
    --system-typography-heading-line-height-xx-large: var(--system-typography-heading-line-height-large);
    --system-typography-heading-font-variation-settings-xx-large: var(--system-typography-heading-font-variation-settings-large);
  }
}

/* Option B: same result, H1 only, we can decide later
@media (max-width: 767px) {
  h1.if.text.heading.xx-large {
    font-size: var(--system-typography-heading-font-size-large);
    font-weight: var(--system-typography-heading-font-weight-large);
    line-height: var(--system-typography-heading-line-height-large);
    font-variation-settings: var(--system-typography-heading-font-variation-settings-large);
  }
}
*/