/*
 * FondPas public-site typography tokens
 * --------------------------------------
 * One authority for the marketing site, legal pages and interactive demo.
 * Components may choose a semantic role, but must not invent local sizes.
 */

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

:root {
    --fp-site-font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /*
     * Five-size authority. Components choose one of these five physical sizes.
     * Semantic aliases below preserve meaning without creating extra sizes.
     */
    --fp-type-display: 5.65rem;
    --fp-type-heading: 3.5rem;
    --fp-type-subheading: 1.5rem;
    --fp-type-body: 1rem;
    --fp-type-label: 0.8rem;

    --fp-site-display-xl: var(--fp-type-display);
    --fp-site-display: var(--fp-type-display);
    --fp-site-hero-claim: var(--fp-type-heading);
    --fp-site-section-title: var(--fp-type-heading);
    --fp-site-subheading: var(--fp-type-subheading);
    --fp-site-card-title: var(--fp-type-subheading);
    --fp-site-emphasis: var(--fp-type-subheading);
    --fp-site-lead: var(--fp-type-body);
    --fp-site-body: var(--fp-type-body);
    --fp-site-support: var(--fp-type-body);
    --fp-site-action: var(--fp-type-body);
    --fp-site-caption: var(--fp-type-label);
    --fp-site-label: var(--fp-type-label);
    --fp-site-icon: var(--fp-type-subheading);

    --fp-site-leading-display: 0.98;
    --fp-site-leading-heading: 1.08;
    --fp-site-leading-lead: 1.55;
    --fp-site-leading-body: 1.65;
    --fp-site-leading-ui: 1.4;
    --fp-site-leading-label: 1.25;

    --fp-site-tracking-display: -0.055em;
    --fp-site-tracking-heading: -0.035em;
    --fp-site-tracking-label: 0.18em;
}

@media (max-width: 980px) {
    :root {
        --fp-type-display: 4.4rem;
        --fp-type-heading: 3.1rem;
    }
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--fp-site-font);
}

@media (max-width: 620px) {
    :root {
        --fp-type-display: 2.8rem;
        --fp-type-heading: 2.5rem;
        --fp-type-subheading: 1.375rem;
    }
}