/*
    typography.css
    Font stacks and type scale.

    Font choice rationale: a single system-font stack is used for the
    entire site (minimizes font families to exactly one, per project
    requirement, and adds zero webfont network requests — no external
    font hotlinking, no build step, instant text render on any device).
    Heading character is achieved through weight, size, letter-spacing,
    and case rather than a second family.

    [placeholdertag: Optional] If a self-hosted display webfont is
    added later, place font files in assets/fonts/ and uncomment the
    @font-face block below, then add the family name as the first
    entry in --font-display in variables-scoped fashion (or here).
*/

/*
@font-face {
    font-family: 'LacefireDisplay';
    src: url('../assets/fonts/lacefire-display.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* Typography tokens (--font-*, --fs-*, --lh-*) are defined in
   css/variables.css, which loads before this file — see that file's
   header comment for why it is the single source of truth for every
   design token, including type. This file only consumes them. */

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-body);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: var(--lh-heading);
    font-weight: 800;
    color: var(--color-text-body);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.005em;
}

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

p {
    max-width: 70ch;
}

.section-intro {
    max-width: 60ch;
    color: var(--color-text-muted);
}

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

/* Technical/motorsport-flavored label treatment: uppercase + tracked
   letter-spacing, used sparingly for nav links and small tags rather
   than as a second font family. */
.label-technical {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}