/* Shared by the initial server HTML and React. Keep families and type tokens here. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-italic.woff2") format("woff2");
}

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Preserve the existing Tailwind scale, but give CSS and SSR the same source. */
  --text-xs: .75rem;
  --text-xs-leading: 1rem;
  --text-sm: .875rem;
  --text-sm-leading: 1.25rem;
  --text-base: 1rem;
  --text-base-leading: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg-leading: 1.75rem;
  --text-xl: 1.25rem;
  --text-xl-leading: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl-leading: 2rem;
  --text-3xl: 1.875rem;
  --text-3xl-leading: 2.25rem;
  --text-4xl: 2.25rem;
  --text-4xl-leading: 2.5rem;
  --text-5xl: 3rem;
  --text-display-leading: 1;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --type-body-size: var(--text-base);
  --type-body-leading: var(--leading-normal);
  --type-reading-leading: 1.75;
  --type-heading-weight: var(--font-weight-bold);
  --type-heading-leading: 1.12;
  --type-nav-size: var(--text-base);
  --type-nav-weight: var(--font-weight-semibold);
  --type-label-size: .9rem;
  --type-label-leading: 1.4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-optical-sizing: auto;
}

button, input, select, textarea {
  font-family: inherit;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
}