/* ============================================================================ tokens/typography.css — Typography Design Tokens Font families, sizes, weights, and line heights. ============================================================================ */ :root { /* Font Families */ --font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-body: var(--font-sans); --font-heading: var(--font-sans); --font-serif: "Source Serif 4", "Georgia", "Times New Roman", serif; --font-handwriting: "Kalam", cursive; /* Font Sizes — 9-step scale */ --text-2xs: 0.625rem; /* 10px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2rem; /* 32px */ /* Icon Sizes — for Material Symbols and icon fonts */ --icon-2xs: 10px; --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 28px; --icon-2xl: 32px; --icon-section: 36px; --icon-3xl: 48px; --icon-4xl: 64px; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Font Feature Settings — enable Inter's OpenType features */ --font-features: "kern" 1, "liga" 1, "calt" 1, "pnum" 1; --font-features-tabular: "kern" 1, "liga" 1, "tnum" 1; /* ── Composite Text Styles ────────────────────────────────────────────── Each style defines size, weight, line-height, letter-spacing. Apply all four on any element — never cherry-pick just the size. Canonical 5-level hierarchy: display (32px bold) — hero title, one per page title (24px semi) — section labels between card groups (serif) heading (18px semi) — card titles, all card-internal headings body (16px norm) — content text, descriptions caption (14px med) — meta, timestamps, secondary info label (12px semi) — uppercase badges only, not for readable text The "section" token is retained as an alias for heading (18px). ──────────────────────────────────────────────────────────────────── */ /* Display — hero headings, page-level h1 */ --ts-display-size: var(--text-4xl); --ts-display-weight: var(--font-bold); --ts-display-leading: 1.2; --ts-display-tracking: -0.02em; /* Title — page titles, prominent headings */ --ts-title-size: var(--text-2xl); --ts-title-weight: var(--font-semibold); --ts-title-leading: var(--leading-snug); --ts-title-tracking: -0.01em; /* Section — alias for heading (retained for backward compat) */ --ts-section-size: var(--ts-heading-size); --ts-section-weight: var(--ts-heading-weight); --ts-section-leading: var(--ts-heading-leading); --ts-section-tracking: var(--ts-heading-tracking); /* Heading — card titles, inline headings */ --ts-heading-size: var(--text-lg); --ts-heading-weight: var(--font-semibold); --ts-heading-leading: var(--leading-snug); --ts-heading-tracking: -0.01em; /* Subheading — card item titles, secondary headings */ --ts-subheading-size: var(--text-base); --ts-subheading-weight: var(--font-semibold); --ts-subheading-leading: var(--leading-snug); --ts-subheading-tracking: 0; /* Body — card body text, descriptions, markdown content */ --ts-body-size: var(--text-base); --ts-body-weight: var(--font-normal); --ts-body-leading: var(--leading-relaxed); --ts-body-tracking: 0; /* Prose — long-form reading content on paper surfaces. Base size (16px) matches the app's body baseline; more leading and a constrained measure for serif comfort. Used by the assistant chat bubble (and user bubble for size parity); available for other paper reading surfaces (article readers, onboarding copy, artifacts). */ --ts-prose-size: var(--text-base); --ts-prose-weight: var(--font-normal); --ts-prose-leading: 1.7; --ts-prose-tracking: 0; --ts-prose-measure: 72ch; /* Caption — meta text, timestamps, secondary info */ --ts-caption-size: var(--text-sm); --ts-caption-weight: var(--font-medium); --ts-caption-leading: var(--leading-normal); --ts-caption-tracking: 0; /* Label — uppercase category labels, day headers, badges */ --ts-label-size: var(--text-xs); --ts-label-weight: var(--font-semibold); --ts-label-leading: var(--leading-tight); --ts-label-tracking: 0.04em; /* ── Card Header Text Styles ──────────────────────────────────────── Two card header variants used across all canvas cards. Feature: prominent header for widget/form cards (no divider). List: compact header for item-list cards (with divider). ──────────────────────────────────────────────────────────────────── */ /* Card feature header — same as heading (no separate level) */ --ts-card-feature-size: var(--ts-heading-size); --ts-card-feature-weight: var(--ts-heading-weight); --ts-card-feature-leading: var(--ts-heading-leading); --ts-card-feature-tracking: var(--ts-heading-tracking); --ts-card-feature-icon: var(--icon-xl); /* Card list header — icon + title, with divider below */ --ts-card-list-size: var(--ts-heading-size); --ts-card-list-weight: var(--ts-heading-weight); --ts-card-list-leading: var(--ts-heading-leading); --ts-card-list-tracking: var(--ts-heading-tracking); --ts-card-list-icon: var(--icon-xl); /* Card header icon color — shared by both variants */ --card-header-icon-color: var(--color-text-main); /* Hand — handwriting annotations, margin comments */ --ts-hand-size: var(--text-lg); --ts-hand-weight: var(--font-normal); --ts-hand-leading: 1.4; --ts-hand-tracking: 0; /* Hand small — edit explanations, small notes */ --ts-hand-sm-size: var(--text-base); --ts-hand-sm-weight: var(--font-normal); --ts-hand-sm-leading: 1.35; --ts-hand-sm-tracking: 0; /* On-image — text rendered over photos / cover images. Sans-serif + heavier weight + tighter tracking so titles stay legible against busy or low-contrast image backgrounds. Pair with text-shadow + scrim on the parent for full legibility. */ --ts-on-image-family: var(--font-sans); --ts-on-image-size: var(--text-base); --ts-on-image-weight: var(--font-bold); --ts-on-image-leading: var(--leading-snug); --ts-on-image-tracking: -0.01em; /* On-image small — meta/caption text over photos */ --ts-on-image-sm-family: var(--font-sans); --ts-on-image-sm-size: var(--text-sm); --ts-on-image-sm-weight: var(--font-semibold); --ts-on-image-sm-leading: var(--leading-normal); --ts-on-image-sm-tracking: 0; } /* Apply font features globally when Inter is loaded */ body { font-feature-settings: var(--font-features); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }