/*
 * assets/css/typography.css
 * Font-face declaration for Inter variable font + fluid type scale
 * Source: gomakethings.com/self-hosting-fonts, smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp
 *
 * LOAD ORDER: Must be loaded after variables.css (references --font-body, --text-* tokens).
 *
 * FONT DOWNLOAD: Get inter-var.woff2 from https://rsms.me/inter/
 * Place at: assets/fonts/inter-var.woff2
 * License: SIL Open Font License 1.1 (OFL) — free for commercial use
 *
 * ZOOM ACCESSIBILITY: All clamp() values use the form clamp(min-rem, Xvw + Yrem, max-rem).
 * The rem term ensures the fluid scale respects browser font size preferences (WCAG SC 1.4.4).
 * Never use vw alone for font-size — it does not scale with browser zoom.
 */

/* ==========================================================================
   FONT FACE
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;   /* Full variable font weight axis */
  font-style: normal;
  font-display: swap;     /* Show system fallback immediately, swap to Inter when loaded */
}


/* ==========================================================================
   FLUID TYPE SCALE
   Scale spans 320px (mobile) → 1440px (desktop) viewport.
   Static values (xs, sm, base, lg) stay fixed; larger sizes scale fluidly.
   ========================================================================== */

:root {
  --text-xs:   0.75rem;                                /* 12px — captions, fine print */
  --text-sm:   0.875rem;                               /* 14px — secondary text, labels */
  --text-base: 1rem;                                   /* 16px — body text */
  --text-lg:   1.125rem;                               /* 18px — large body, sub-headings */
  --text-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);    /* 20px → 24px */
  --text-2xl:  clamp(1.5rem,   1.3rem  + 1vw,    2rem);      /* 24px → 32px */
  --text-3xl:  clamp(1.875rem, 1.5rem  + 1.5vw,  2.5rem);    /* 30px → 40px */
  --text-4xl:  clamp(2.25rem,  1.75rem + 2vw,    3.5rem);    /* 36px → 56px */
  --text-5xl:  clamp(2.75rem,  2rem    + 3vw,    4.5rem);    /* 44px → 72px */
}


/* ==========================================================================
   HEADING STYLES
   All font-size values reference --text-* semantic tokens.
   All font-family values reference --font-heading token.
   ========================================================================== */

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

h5 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

h6 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}