/* =============================================================================
   yak-typography.css
   Shared typographic SCALE for Yak product apps — the single source of truth
   for font sizes. Adapted from the YakDocs theme (the reference look & feel).

   Why this exists: each app used to hard-code its own font sizes, so headings
   and body copy drifted between products. This file centralises sizing so the
   look & feel stays consistent across projects; apps keep their own
   font-family / colour / weight and only override a size when a component
   genuinely needs to deviate.

   Accessibility (WCAG 2.1 AA):
   - rem-based; the root is pinned to the browser default (never px) so text
     honours the user's font-size setting and zooms to 200% (SC 1.4.4).
   - headings use clamp() so they scale fluidly with the viewport — larger on
     wide screens, graceful on phones, with no per-breakpoint overrides.

   Served at /css/yak-typography.css from the shared web module. Link it BEFORE
   the app's own stylesheet so per-component class rules still win.
   ============================================================================= */

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

body {
    font-size: 1rem;        /* 16px at the default root */
    line-height: 1.6;       /* >= 1.5 body line-height (SC 1.4.12) */
}

/* Editorial heading scale — fluid via clamp(), responsive without media queries.
   h1: 32 → 45.6px · h2: 26.4 → 35.2px · h3: 21.6 → 27.2px (at a 16px root). */
h1 { font-size: clamp(2rem, 4vw, 2.85rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.32rem; }
h5 { font-size: 1.12rem; }
h6 { font-size: 1rem; }

/* Shared text-size utilities (Yak Generic, .yg- prefix). */
.yg-lead    { font-size: clamp(1.15rem, 1.8vw, 1.32rem); line-height: 1.55; }
.yg-eyebrow { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }