Base typography styles and scale definitions. Font families, line heights, letter spacings, and font sizes are defined via design tokens in _tokens.scss and applied through role-based mixins (display-sm, heading-lg, body-md, etc.).

h1 — Main heading (2.25rem)

h2 — Secondary (1.5rem)

h3 — Sub-heading (1.25rem)

h4 — Smaller heading (1.125rem)

h5 — Small heading (1rem, semibold)

h6 — Smallest (0.875rem, semibold)

Regular paragraph with bold text, italic text and small text.

Link: Example link with hover effect.

Blockquote — a quote with a left border in primary color.

Inline code: var(--color-primary)

.card header {
    @include px(var(--size-lg));
    @include py(var(--size-md));
    @include font-semibold;
}