@font-face {
    font-family: "Phosphate Inline";
    src: url("/fonts/phosphateinline.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family: "Inter", "Segoe UI", sans-serif;
    --font-family-heading: "Bebas Neue", "Arial Black", sans-serif;
    --font-family-jersey: "Phosphate Inline", "Bebas Neue", "Arial Black", sans-serif;

    --font-xs: .75rem;
    --font-sm: .875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;
    --font-display: clamp(2.8rem,6vw,5rem);

    --h1-size: 3.5rem;
    --h2-size: 2.5rem;
    --h3-size: 1.75rem;
    --h4-size: 1.25rem;
    --body-1-size: 1rem;
    --body-2-size: .875rem;
    --caption-size: .75rem;
}

body {
    font-family: var(--font-family);
    font-size: var(--body-1-size);
    color: var(--text-primary);
    background: var(--surface-default);
}

h1, h2, h3, h4 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.1;
}

h1 {
    font-size: var(--h1-size);
}

h2 {
    font-size: var(--h2-size);
}

h3 {
    font-size: var(--h3-size);
}

h4 {
    font-size: var(--h4-size);
}

p {
    color: var(--text-secondary);
}

small, .caption {
    font-size: var(--caption-size);
}