:root {
    --font-family: 'Inter', sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    --font-size-display: 2.25rem;       /* 36px */
    --font-size-h1: 1.875rem;           /* 30px */
    --font-size-h2: 1.5rem;             /* 24px */
    --font-size-h3: 1.25rem;            /* 20px */
    --font-size-body_l: 1.125rem;       /* 18px */
    --font-size-body: 1rem;             /* 16px */
    --font-size-body_s: 0.875rem;       /* 14px */
    --font-size-body_xs: 0.75rem;       /* 12px */
    --font-size-graph_y_axis: 0.625rem; /* 10px */

    --line-height-tight: 1.1;
    --line-height-normal: 1.2;
    --line-height-wide: 1.3;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.01em;
}

.display {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
}

.h1 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
}

.h2 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.h3 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}

.h4 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size-body_l);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-tight);
}

.body_l {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body_l);
    line-height: var(--line-height-wide);
    letter-spacing: var(--letter-spacing-normal);
}

.body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: var(--line-height-wide);
    letter-spacing: var(--letter-spacing-normal);
}

.body_b {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size-body);
    line-height: var(--line-height-wide);
    letter-spacing: var(--letter-spacing-normal);
}

.body_s {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body_s);
    line-height: var(--line-height-wide);
    letter-spacing: var(--letter-spacing-normal);
}

.body_xs {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body_xs);
    line-height: var(--line-height-wide);
    letter-spacing: var(--letter-spacing-normal);
}

.button {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size-body_s);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
}

.graph_y_axis {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-graph_y_axis);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}