/* Type scale — font-size tokens consumed by base + components.
   Display sizes use clamp() for fluid scaling across viewports.
   UI sizes are fixed so chrome stays predictable. */

@layer tokens {
    :root {
        /* Fluid display scale (headings, hero copy) */
        --fs-display-xl: clamp(3rem,     7vw,   6.5rem);  /*  48 → 104 px */
        --fs-display-l:  clamp(2.5rem,   5.5vw, 5rem);    /*  40 →  80 px */
        --fs-display-m:  clamp(2.25rem,  4.5vw, 4rem);    /*  36 →  64 px  — h1 */
        --fs-display-s:  clamp(2rem,     4vw,   3.5rem);  /*  32 →  56 px  — h2 */

        /* Fixed UI scale (body, labels, chrome) */
        --fs-heading:    1.5rem;      /*  24 px  — h3 + functional-area page titles (.c-page__title, .c-dashboard__greeting) */
        --fs-subheading: 1.25rem;     /*  20 px  — functional-area section titles (.c-dashboard__section-title, .app-review-header-title, .c-sub-banner__title) */
        --fs-body-lg:    1.125rem;    /*  18 px  — h4, emphatic body, functional-area subsection titles (.c-choice__title) */
        --fs-body:       1rem;        /*  16 px  — h5, default body */
        --fs-body-sm:    0.9375rem;   /*  15 px  — h6, secondary body */
        --fs-ui:         0.875rem;    /*  14 px  — UI controls */
        --fs-ui-sm:      0.8125rem;   /*  13 px  — captions, small UI */
        --fs-caption:    0.75rem;     /*  12 px  — smallest */

        /* Line heights — paired with sizes for specific uses */
        --lh-tight:      1.15;        /* headings */
        --lh-snug:       1.3;         /* UI, subheadings */
        --lh-normal:     1.5;         /* body */
        --lh-relaxed:    1.65;        /* long-form reading */
    }
}