/*
  Typography (visual direction › Typography). The only file with font-family, font-size or font-weight.
  Inter 4 variable, roman only, self-hosted. Sizes in rem; line heights unitless.
*/
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family: "Inter", system-ui, sans-serif;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
}

html {
    font-family: var(--font-family);
    font-optical-sizing: auto;
}

.text-caption {
    font-size: 0.75rem;
    font-weight: var(--weight-regular);
    line-height: 1.333;
}

.text-label {
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    line-height: 1.333;
}

.text-body,
body {
    font-size: 0.875rem;
    font-weight: var(--weight-regular);
    line-height: 1.429;
}

.text-body-strong {
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    line-height: 1.429;
}

.text-subtitle {
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    line-height: 1.5;
}

.text-title {
    font-size: 1.25rem;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
}

.text-display {
    font-size: 1.75rem;
    font-weight: var(--weight-semibold);
    line-height: 1.286;
}

.numeric {
    font-variant-numeric: tabular-nums;
}

/* Keys in the shortcuts dialog and menus: Inter, not the browser's monospace. A class such as text-caption sets the size. */
kbd {
    font-family: inherit;
}