/* ==========================================================================
   ProjectUnite · Typography system (single source of truth)
   --------------------------------------------------------------------------
   Display  : Poppins (700) — same family as the body, so headings always match
   Body/UI  : Poppins          — friendly geometric sans; everything else
   Both are loaded by the <link> that tools/build_shell.py stamps in <head>.
   Load this file BEFORE page-level inline styles; page CSS should use the
   tokens below (var(--pu-font-body) / var(--pu-font-display)) instead of
   hard-coding font families.
   ========================================================================== */
:root {
    --pu-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* same family as body: headings differ by weight/size only */
    --pu-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pu-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Fluid scale (mobile → desktop) */
    --pu-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --pu-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
    --pu-text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    --pu-text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --pu-h4: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
    --pu-h3: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
    --pu-h2: clamp(1.625rem, 1.3rem + 1.8vw, 2.75rem);
    --pu-h1: clamp(2rem, 1.4rem + 3vw, 3.75rem);

    --pu-leading-tight: 1.15;
    --pu-leading-snug: 1.3;
    --pu-leading-body: 1.65;
    --pu-tracking-tight: -0.015em;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    font-family: var(--pu-font-body);
    font-size: var(--pu-text-base);
    line-height: var(--pu-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2 {
    font-family: var(--pu-font-display);
    line-height: var(--pu-leading-tight);
    letter-spacing: var(--pu-tracking-tight);
    font-weight: 700;
    text-wrap: balance;
}
h3, h4, h5, h6 {
    font-family: var(--pu-font-body);
    line-height: var(--pu-leading-snug);
    font-weight: 600;
    text-wrap: balance;
}
h1 { font-size: var(--pu-h1); }
h2 { font-size: var(--pu-h2); }
h3 { font-size: var(--pu-h3); }
h4 { font-size: var(--pu-h4); }
p, li, dd, blockquote { text-wrap: pretty; }

button, input, select, textarea, label { font-family: var(--pu-font-body); }
code, kbd, pre, samp { font-family: var(--pu-font-mono); }
/* Icon fonts must keep their own family */
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"] { font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome'; }
.fab, .fa-brands { font-family: 'Font Awesome 6 Brands' !important; }
.fas, .fa-solid, .far, .fa-regular { font-family: 'Font Awesome 6 Free' !important; }

/* --------------------------------------------------------------------------
   Enforced heading families (site-wide consistency).
   h1/h2/h3–h6 are all Poppins (display token = body token). Opt out on a specific element
   with class="pu-keep-font".
   -------------------------------------------------------------------------- */
h1:not(.pu-keep-font), h2:not(.pu-keep-font) { font-family: var(--pu-font-display) !important; }
h3:not(.pu-keep-font), h4:not(.pu-keep-font), h5:not(.pu-keep-font), h6:not(.pu-keep-font) { font-family: var(--pu-font-body) !important; }
/* Footer + header chrome always use the body family */
.hedaheader *, .pu-footer *, .pu-banner * { font-family: var(--pu-font-body); }
.pu-footer .fab, .pu-footer .fas { font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands'; }
.pu-footer .fab { font-family: 'Font Awesome 6 Brands'; }