/* ============================================================ GUIDE DESIGN SYSTEM — TYPOGRAPHY TOKENS Family: Poppins (single family, weights 300–700). Desktop scale on :root; mobile scale compresses headings. ============================================================ */ :root { /* ---------- Family ---------- */ --font-family-base: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---------- Weights ---------- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---------- Type scale (desktop) ---------- each step = font-size / line-height */ --font-h1-size: 48px; --font-h1-line: 52px; --font-h2-size: 36px; --font-h2-line: 44px; --font-h3-size: 28px; --font-h3-line: 36px; --font-h4-size: 24px; --font-h4-line: 32px; --font-h5-size: 22px; --font-h5-line: 28px; --font-h6-size: 20px; --font-h6-line: 24px; --font-body-lg-size: 18px; --font-body-lg-line: 24px; --font-body-size: 16px; --font-body-line: 24px; --font-body-sm-size: 14px; --font-body-sm-line: 20px; --font-caption-size: 12px; --font-caption-line: 20px; --font-footnote-size: 12px; --font-footnote-line: 16px; } /* Mobile heading compression — apply */ :root[data-mode="mobile"] { --font-h1-size: 32px; --font-h1-line: 40px; --font-h2-size: 28px; --font-h2-line: 36px; --font-h3-size: 24px; --font-h3-line: 32px; --font-h4-size: 22px; --font-h4-line: 32px; --font-h5-size: 20px; --font-h5-line: 28px; --font-h6-size: 18px; --font-h6-line: 24px; } /* ============================================================ TEXT STYLE CLASSES — ready-to-use specimens ============================================================ */ .gd-h1 { font: var(--font-weight-semibold) var(--font-h1-size)/var(--font-h1-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-h2 { font: var(--font-weight-semibold) var(--font-h2-size)/var(--font-h2-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-h3 { font: var(--font-weight-medium) var(--font-h3-size)/var(--font-h3-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-h4 { font: var(--font-weight-medium) var(--font-h4-size)/var(--font-h4-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-h5 { font: var(--font-weight-medium) var(--font-h5-size)/var(--font-h5-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-h6 { font: var(--font-weight-medium) var(--font-h6-size)/var(--font-h6-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-body-lg { font: var(--font-weight-regular) var(--font-body-lg-size)/var(--font-body-lg-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-body { font: var(--font-weight-regular) var(--font-body-size)/var(--font-body-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; } .gd-body-sm { font: var(--font-weight-regular) var(--font-body-sm-size)/var(--font-body-sm-line) var(--font-family-base); color: var(--text-neutral-secondary); margin: 0; } .gd-caption { font: var(--font-weight-regular) var(--font-caption-size)/var(--font-caption-line) var(--font-family-base); color: var(--text-neutral-tertiary); margin: 0; } .gd-footnote { font: var(--font-weight-regular) var(--font-footnote-size)/var(--font-footnote-line) var(--font-family-base); color: var(--text-neutral-tertiary); margin: 0; } .gd-label { font: var(--font-weight-medium) var(--font-footnote-size)/var(--font-footnote-line) var(--font-family-base); color: var(--text-neutral-primary); margin: 0; }