/* file: portal/app/static/css/typography.css
 *
 * Typography tokens — font families, sizes, weights, line heights.
 * Use these in components via var(--font-size-sm), var(--font-weight-semibold), etc.
 */

@layer tokens {

:root {
    /* --- Font families --- */
    --font-family-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* --- Font sizes (rem-based for accessibility) --- */
    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */

    /* --- Font weights --- */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* --- Line heights (unitless — scales with font size) --- */
    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-loose:  1.75;
}

} /* end @layer tokens */