@import './fonts/InstrumentSans/InstrumentSans.css';

:where(:root),
:where(:host) {
  --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
  --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);

  --aura-font-family: var(--aura-font-family-instrument-sans);
  --vaadin-icon-baseline-font-family: var(--aura-font-family);

  --aura-base-font-size: 14;
  --_base-font-size-m: var(--aura-base-font-size);
  --aura-base-line-height: 1.4;

  --aura-font-weight-regular: 400;
  --aura-font-weight-medium: 500;
  --aura-font-weight-semibold: 600;
}

@media (pointer: coarse) {
  :where(:root),
  :where(:host) {
    --vaadin-input-field-value-font-size: max(16px, var(--aura-font-size-m));
  }
}

@supports not (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    /* Android optimizations */
  }
}

@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) {
    :where(:root),
    :where(:host) {
      /* iOS/iPadOS optimizations */

      /* Support iOS dynamic text size */
      font: -apple-system-body;
    }
  }
}

:where(:root),
:where(:host),
:where([theme]) {
  --aura-font-size-xs: clamp(0.625rem, round(var(--aura-font-size-m) * 0.85, 0.0625rem), 0.8125rem);
  --aura-font-size-s: round((var(--aura-font-size-m) + var(--aura-font-size-xs)) / 2, 0.0625rem);
  --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, 0.0625rem);
  --aura-font-size-l: round(var(--aura-font-size-m) * 1.125, 0.0625rem);
  --aura-font-size-xl: round(var(--aura-font-size-l) * 1.125, 0.0625rem);

  --_base-font-size-xs: clamp(10, round(var(--_base-font-size-m) * 0.75, 1), 13);
  --_base-font-size-s: round((var(--_base-font-size-m) + var(--_base-font-size-xs)) / 2, 1);
  --_base-font-size-l: round(var(--_base-font-size-m) * 1.125, 1);
  --_base-font-size-xl: round(var(--_base-font-size-l) * 1.125, 1);

  --aura-line-height-xs: round(var(--aura-font-size-xs) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-s: round(var(--aura-font-size-s) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-m: round(var(--aura-font-size-m) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-l: round(var(--aura-font-size-l) * var(--aura-base-line-height), 0.125rem);
  --aura-line-height-xl: round(var(--aura-font-size-xl) * var(--aura-base-line-height), 0.125rem);
}

:where(body),
:where(:host) {
  font-family: var(--aura-font-family);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--aura-font-weight-regular);

  /* Set to auto to disable grayscale/anti-aliased font smoothing (and use default sub-pixel anti-aliasing) */
  -webkit-font-smoothing: var(--aura-font-smoothing, antialiased);
  -moz-osx-font-smoothing: var(--aura-font-smoothing, grayscale);

  /* We assume apps are built with responsive layouting in mind */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

:where(body),
:where(:host),
:where([theme]:not(html)) {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

[theme~='xsmall'] {
  --aura-base-font-size: var(--_base-font-size-xs);
}

[theme~='small'] {
  --aura-base-font-size: var(--_base-font-size-s);
}

[theme~='medium'] {
  --aura-base-font-size: var(--_base-font-size-m);
}

[theme~='large'] {
  --aura-base-font-size: var(--_base-font-size-l);
}

[theme~='xlarge'] {
  --aura-base-font-size: var(--_base-font-size-xl);
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  margin: 0;
  font-weight: var(--aura-font-weight-semibold);
}

:where(h1) {
  font-size: round(var(--aura-font-size-xl) * 1.75, 0.0625rem);
  line-height: round(var(--aura-line-height-xl) * 1.25, 0.125rem);
}

:where(h2) {
  font-size: round(var(--aura-font-size-xl) * 1.25, 0.0625rem);
  line-height: round(var(--aura-line-height-xl) * 1.125, 0.125rem);
}

:where(h3) {
  font-size: var(--aura-font-size-xl);
  line-height: var(--aura-line-height-xl);
}

:where(h4) {
  font-size: var(--aura-font-size-l);
  line-height: var(--aura-line-height-l);
}

:where(h5) {
  font-size: var(--aura-font-size-m);
  line-height: var(--aura-line-height-m);
}

:where(h6) {
  font-size: var(--aura-font-size-s);
  line-height: var(--aura-line-height-s);
}

:where(b, strong) {
  font-weight: var(--aura-font-weight-semibold);
}