/* ============================================================ VENDORED — DO NOT EDIT Source: C:/dev/ICGBrand/tokens/typography.css Brand version: ICG Brand v1.2 (per BRAND.md section 12) To update: re-copy from the canonical source. Hand-edits here will be lost on the next vendor refresh. ============================================================ */ /* ============================================================ ICG BRAND — TYPOGRAPHY Display: Fraunces (variable serif with optical sizing, wedge serifs and contextual character — gravitas without stuffiness). Body: Geist (technical geometric sans — engineering precision). Mono: Geist Mono. Both free via Google Fonts; load in . ============================================================ */ :root { --font-display: 'Fraunces', 'Recoleta', Georgia, 'Times New Roman', serif; --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — modular 1.250 with fluid hero sizes */ --text-2xs: 0.6875rem; /* 11 — tiny meta, indices */ --text-xs: 0.75rem; /* 12 — labels, eyebrow */ --text-sm: 0.875rem; /* 14 — meta */ --text-base: 1rem; /* 16 — body */ --text-md: 1.125rem; /* 18 — lede */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 — h4 */ --text-2xl: 1.875rem; /* 30 — h3 */ --text-3xl: 2.5rem; /* 40 — h2 */ --text-4xl: clamp(2.75rem, 5vw, 4rem); /* h1 fluid */ --text-5xl: clamp(3.5rem, 7vw, 5.75rem); /* hero */ --text-mega: clamp(4.5rem, 12vw, 10rem); /* editorial display numerals */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Line heights */ --leading-flat: 1; --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.16em; --tracking-index: 0.22em; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--text-primary); background: var(--surface-canvas); font-feature-settings: 'ss01', 'cv11'; /* Geist alt forms */ } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-strong); } /* Fraunces variable-axis tuning, matched to actual render size. `opsz` (optical size) MUST match the rendered px or Fraunces compensates with weird stem/curve tradeoffs — most visible on lowercase f, g, k. `SOFT` 0 = sharp wedge serifs; 100 = round terminals. `WONK` 1 = eccentric alt forms (long-swoosh f, etc.); reserve for display only. */ h1 { font-size: var(--text-4xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tightest); font-variation-settings: 'opsz' 96, 'SOFT' 30, 'WONK' 0; } h2 { font-size: var(--text-3xl); font-variation-settings: 'opsz' 40, 'SOFT' 20, 'WONK' 0; } h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); font-variation-settings: 'opsz' 30, 'SOFT' 15, 'WONK' 0; } h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variation-settings: 'opsz' 24, 'SOFT' 10, 'WONK' 0; } h5 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); } /* ----- Eyebrows & indices (editorial-industrial signature) ----- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-index); text-transform: uppercase; color: var(--text-accent); } .eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; display: inline-block; } .index { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-index); text-transform: uppercase; color: var(--text-muted); } /* ----- Lede — paragraph after hero or section title ----- */ .lede { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-snug); color: var(--text-secondary); letter-spacing: var(--tracking-tight); max-width: 56ch; /* opsz matches the 18px render size — keeps lowercase f/g/k crisp */ font-variation-settings: 'opsz' 18, 'SOFT' 15, 'WONK' 0; } /* ----- Display utility — for oversized numerals/hero typography ----- */ .display { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-flat); letter-spacing: var(--tracking-tightest); font-variation-settings: 'opsz' 144, 'SOFT' 30; } .display--mega { font-size: var(--text-mega); font-weight: var(--weight-regular); font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; } /* ----- Mono inline ----- */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--surface-muted); padding: 0.1em 0.4em; border-radius: var(--radius-xs); color: var(--text-strong); } /* ----- Selection ----- */ ::selection { background: var(--color-action); color: var(--text-on-action); }