/* ========================================================================== typography.css — K Group of Companies type system Font pairing: • Barlow Condensed (600, 700) — headlines & display • Inter (400, 500, 600) — body & UI Google Fonts are imported in the HTML ; families are referenced here. ========================================================================== */ :root { /* --- Font families --- */ --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* --- Font weights --- */ --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* NOTE: No numbered section-label styling (e.g. "01", "02" prefixes) is defined here by design — site sections are identified by NAME only, not as a numbered sequence. Do not add counter/label styling for this. */ /* --- Type scale --- Each variable bundles font-size / line-height and is paired with the appropriate letter-spacing token below. Headline variables use Barlow Condensed; body/small/caption use Inter. */ /* Hero — Barlow Condensed */ --text-hero: 700 clamp(3rem, 6vw, 5rem) / 1.02 var(--font-display); --tracking-hero: -0.01em; /* H1 — Barlow Condensed */ --text-h1: 700 clamp(2.25rem, 4vw, 3.25rem) / 1.08 var(--font-display); --tracking-h1: -0.005em; /* H2 — Barlow Condensed */ --text-h2: 600 clamp(1.75rem, 3vw, 2.5rem) / 1.12 var(--font-display); --tracking-h2: 0; /* H3 — Barlow Condensed */ --text-h3: 600 clamp(1.375rem, 2vw, 1.75rem) / 1.2 var(--font-display); --tracking-h3: 0.005em; /* Body — Inter */ --text-body: 400 1rem / 1.65 var(--font-body); --tracking-body: 0; /* Small — Inter */ --text-small: 400 0.875rem / 1.55 var(--font-body); --tracking-small: 0.005em; /* Caption — Inter */ --text-caption: 500 0.75rem / 1.4 var(--font-body); --tracking-caption: 0.06em; }