/* ============================================= INTELAGENT — Typography Tokens ============================================= */ /* Webfonts (Hanken Grotesk + Inter) are loaded via tags in index.html with preconnect — faster than a CSS @import chain. Fira Code was dropped: --font-mono falls back to system monospace fonts until a licensed file exists. */ :root { /* ── Font Families ── */ --font-display: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Fira Code', monospace; /* ── Font Sizes — fluid scale ── */ --text-2xs: 0.625rem; /* 10px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* ── Font Weights ── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Line Heights ── */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.75; /* ── Letter Spacing ── */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ── Semantic Type Roles ── */ /* Headings — Hanken Grotesk */ --type-display-size: var(--text-6xl); --type-display-weight: var(--weight-bold); --type-display-leading: var(--leading-tight); --type-display-tracking: var(--tracking-tight); --type-display-family: var(--font-display); --type-h1-size: var(--text-5xl); --type-h1-weight: var(--weight-bold); --type-h1-leading: var(--leading-tight); --type-h2-size: var(--text-4xl); --type-h2-weight: var(--weight-bold); --type-h2-leading: var(--leading-snug); --type-h3-size: var(--text-3xl); --type-h3-weight: var(--weight-semibold); --type-h3-leading: var(--leading-snug); --type-h4-size: var(--text-2xl); --type-h4-weight: var(--weight-semibold); --type-h4-leading: var(--leading-normal); --type-h5-size: var(--text-xl); --type-h5-weight: var(--weight-semibold); --type-h5-leading: var(--leading-normal); --type-h6-size: var(--text-lg); --type-h6-weight: var(--weight-semibold); --type-h6-leading: var(--leading-normal); /* Body — Inter */ --type-body-lg-size: var(--text-lg); --type-body-lg-leading: var(--leading-relaxed); --type-body-size: var(--text-base); --type-body-leading: var(--leading-relaxed); --type-body-sm-size: var(--text-sm); --type-body-sm-leading: var(--leading-normal); --type-caption-size: var(--text-xs); --type-caption-leading: var(--leading-normal); --type-label-size: var(--text-sm); --type-label-weight: var(--weight-medium); --type-label-tracking: var(--tracking-wide); --type-overline-size: var(--text-xs); --type-overline-weight: var(--weight-semibold); --type-overline-tracking: var(--tracking-widest); }