/* Typography from AccessGrid / inter, Figma node 1068:10104.
   Sizes and line heights use rem; Figma percentage tracking uses em.
   Inter Variable supplies the text (opsz 14) and display (opsz 32) designs. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/InterVariable.woff2") format("woff2");
}

:root {
  --font-text: Inter, sans-serif;
  --font-display: "Inter Display", Inter, sans-serif;
  --font-text-variation: "opsz" 14;
  --font-display-variation: "opsz" 32;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* inter/text-6xl */
  --type-6xl-family: var(--font-display);
  --type-6xl-variation: var(--font-display-variation);
  --type-6xl-size: 3.5rem;
  --type-6xl-leading: 4rem;
  --type-6xl-tracking: -0.005em;

  /* inter/text-5xl */
  --type-5xl-family: var(--font-display);
  --type-5xl-variation: var(--font-display-variation);
  --type-5xl-size: 3rem;
  --type-5xl-leading: 3.5rem;
  --type-5xl-tracking: -0.005em;

  /* inter/text-4xl */
  --type-4xl-family: var(--font-display);
  --type-4xl-variation: var(--font-display-variation);
  --type-4xl-size: 2.25rem;
  --type-4xl-leading: 2.75rem;
  --type-4xl-tracking: -0.005em;

  /* inter/text-3xl */
  --type-3xl-family: var(--font-display);
  --type-3xl-variation: var(--font-display-variation);
  --type-3xl-size: 1.875rem;
  --type-3xl-leading: 2.5rem;
  --type-3xl-tracking: -0.015em;

  /* inter/text-2xl */
  --type-2xl-family: var(--font-text);
  --type-2xl-variation: var(--font-text-variation);
  --type-2xl-size: 1.5rem;
  --type-2xl-leading: 2rem;
  --type-2xl-tracking: -0.015em;

  /* inter/text-xl */
  --type-xl-family: var(--font-text);
  --type-xl-variation: var(--font-text-variation);
  --type-xl-size: 1.125rem;
  --type-xl-leading: 1.625rem;
  --type-xl-tracking: -0.015em;

  /* inter/text-lg */
  --type-lg-family: var(--font-text);
  --type-lg-variation: var(--font-text-variation);
  --type-lg-size: 1.0625rem;
  --type-lg-leading: 1.625rem;
  --type-lg-tracking: -0.015em;

  /* inter/text-base */
  --type-base-family: var(--font-text);
  --type-base-variation: var(--font-text-variation);
  --type-base-size: 0.9375rem;
  --type-base-leading: 1.5rem;
  --type-base-tracking: -0.0015em;

  /* inter/text-sm */
  --type-sm-family: var(--font-text);
  --type-sm-variation: var(--font-text-variation);
  --type-sm-size: 0.875rem;
  --type-sm-leading: 1.5rem;
  --type-sm-tracking: -0.01em;

  /* inter/text-xs */
  --type-xs-family: var(--font-text);
  --type-xs-variation: var(--font-text-variation);
  --type-xs-size: 0.75rem;
  --type-xs-leading: 1.25rem;
  --type-xs-tracking: -0.0015em;

  /* Semantic roles used by the landing page. */
  --type-heading-family: var(--type-5xl-family);
  --type-heading-variation: var(--type-5xl-variation);
  --type-heading-size: 2.5rem;
  --type-heading-leading: calc(var(--type-5xl-leading) - 0.5rem);
  --type-heading-tracking: var(--type-5xl-tracking);
  --type-heading-weight: var(--font-weight-semibold);
  --type-body-family: var(--type-base-family);
  --type-body-variation: var(--type-base-variation);
  --type-body-size: var(--type-base-size);
  --type-body-leading: var(--type-base-leading);
  --type-body-tracking: var(--type-base-tracking);
  --type-body-weight: var(--font-weight-regular);
  --type-button-family: var(--type-sm-family);
  --type-button-variation: var(--type-sm-variation);
  --type-button-size: var(--type-sm-size);
  --type-button-leading: var(--type-sm-leading);
  --type-button-tracking: var(--type-sm-tracking);
  --type-button-weight: var(--font-weight-medium);
}

.type-6xl {
  font-family: var(--type-6xl-family);
  font-size: var(--type-6xl-size);
  line-height: var(--type-6xl-leading);
  letter-spacing: var(--type-6xl-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-6xl-variation);
}

.type-5xl {
  font-family: var(--type-5xl-family);
  font-size: var(--type-5xl-size);
  line-height: var(--type-5xl-leading);
  letter-spacing: var(--type-5xl-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-5xl-variation);
}

.type-4xl {
  font-family: var(--type-4xl-family);
  font-size: var(--type-4xl-size);
  line-height: var(--type-4xl-leading);
  letter-spacing: var(--type-4xl-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-4xl-variation);
}

.type-3xl {
  font-family: var(--type-3xl-family);
  font-size: var(--type-3xl-size);
  line-height: var(--type-3xl-leading);
  letter-spacing: var(--type-3xl-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-3xl-variation);
}

.type-2xl {
  font-family: var(--type-2xl-family);
  font-size: var(--type-2xl-size);
  line-height: var(--type-2xl-leading);
  letter-spacing: var(--type-2xl-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-2xl-variation);
}

.type-xl {
  font-family: var(--type-xl-family);
  font-size: var(--type-xl-size);
  line-height: var(--type-xl-leading);
  letter-spacing: var(--type-xl-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-xl-variation);
}

.type-lg {
  font-family: var(--type-lg-family);
  font-size: var(--type-lg-size);
  line-height: var(--type-lg-leading);
  letter-spacing: var(--type-lg-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-lg-variation);
}

.type-base {
  font-family: var(--type-base-family);
  font-size: var(--type-base-size);
  line-height: var(--type-base-leading);
  letter-spacing: var(--type-base-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-base-variation);
}

.type-sm {
  font-family: var(--type-sm-family);
  font-size: var(--type-sm-size);
  line-height: var(--type-sm-leading);
  letter-spacing: var(--type-sm-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-sm-variation);
}

.type-xs {
  font-family: var(--type-xs-family);
  font-size: var(--type-xs-size);
  line-height: var(--type-xs-leading);
  letter-spacing: var(--type-xs-tracking);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  font-optical-sizing: none;
  font-variation-settings: var(--type-xs-variation);
}

.weight-regular { font-weight: var(--font-weight-regular); }
.weight-medium { font-weight: var(--font-weight-medium); }
.weight-semibold { font-weight: var(--font-weight-semibold); }

@media (max-width: 800px) {
  :root {
    --type-heading-family: var(--type-4xl-family);
    --type-heading-variation: var(--type-4xl-variation);
    --type-heading-size: var(--type-4xl-size);
    --type-heading-leading: calc(var(--type-4xl-leading) - 0.5rem);
    --type-heading-tracking: var(--type-4xl-tracking);
  }
}