@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Geist-Variable.dfa48d5a8537.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Geist-Italic-Variable.1a9d7927a9f5.woff2") format("woff2");
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/GeistMono-Variable.308360d8a547.woff2") format("woff2");
}

/* Type scale. Sizes pair with the line-height of the same rung. Use the role
   classes below in templates rather than raw tokens or Bootstrap fs/fw utilities. */
:root {
    --font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "Geist Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-weight-600: 600;
    --font-weight-500: 500;
    --font-weight-400: 400;
    --font-weight-normal: var(--font-weight-400);
    --font-weight-bold: var(--font-weight-600);
    --font-size-huge: 2rem; /* 32px — h1 */
    --font-size-xxl: 1.5rem; /* 24px — h2 */
    --font-size-xl: 1.25rem; /* 20px — h3 */
    --font-size-lg: 1rem; /* 16px — h4 */
    --font-size-default: 0.875rem; /* 14px — body, h5, buttons, labels */
    --font-size-sm: 0.8125rem; /* 13px — dense copy, table cells */
    --font-size-xs: 0.75rem; /* 12px — captions, small buttons */
    --font-size-xxs: 0.6875rem; /* 11px — overline only */
    --letter-spacing-tighter: -0.04em; /* h1, h2 */
    --letter-spacing-tight: -0.02em; /* h3–h5 */
    --letter-spacing-wide: 0.04em; /* overline */
    --line-height-xxl: 40px; /* h1 */
    --line-height-xl: 32px; /* h2 */
    --line-height-lg: 26px; /* h3 */
    --line-height-md: 24px; /* h4, 16px copy */
    --line-height-sm: 20px; /* 14px */
    --line-height-copy-sm: 18px; /* 13px copy */
    --line-height-xs: 16px; /* 11–13px labels, 12px copy */
    --font-size-icon: 1rem;
    --font-size-icon-large: 1.5rem;
}

/* Headings — introduce a page or a section. The tag gives the outline, the
   class gives the size: <h1 class="text-h2"> is fine. */
.text-h1 {
    font-size: var(--font-size-huge);
    line-height: var(--line-height-xxl);
    font-weight: var(--font-weight-600);
    letter-spacing: var(--letter-spacing-tighter);
}

.text-h2 {
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-xl);
    font-weight: var(--font-weight-600);
    letter-spacing: var(--letter-spacing-tighter);
}

.text-h3 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
    font-weight: var(--font-weight-600);
    letter-spacing: var(--letter-spacing-tight);
}

.text-h4 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-md);
    font-weight: var(--font-weight-600);
    letter-spacing: var(--letter-spacing-tight);
}

.text-h5 {
    font-size: var(--font-size-default);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-600);
    letter-spacing: var(--letter-spacing-tight);
}

/* Copy — several lines of prose. Looser leading than Label. */
.text-copy {
    font-size: var(--font-size-default);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-400);
}

.text-copy-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-copy-sm);
    font-weight: var(--font-weight-400);
}

.text-copy-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-400);
}

.text-copy-sm-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-copy-sm);
}

/* Label — one line. Tighter leading, sits level with an icon. */
.text-label {
    font-size: var(--font-size-default);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-400);
}

.text-label-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-400);
}

.text-label-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-400);
}

.text-label-xs-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
}

/* Overline — the small caps that head a region. A role, not a rung: fixed
   size, uppercase baked in. */
.text-label-overline {
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-500);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* Button — only inside components that render a button. */
.text-button {
    font-size: var(--font-size-default);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-500);
}

.text-button-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    font-weight: var(--font-weight-500);
}