// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss. :where(:root) { // The `* Fallback` faces are Arial tuned with metric overrides to match the // web fonts, so they must sit right after each web font in the stack: that way // text laid out before the font loads has the same metrics and `font-display: // swap` causes no layout shift when the real font arrives. --font-family-sans: 'DM Sans', 'DM Sans Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-family-brand: 'Syne', 'Syne Fallback', 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; --font-family-serif: 'Georgia', 'Times New Roman', serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-2xs: 0.625rem; // 10px --font-size-xs: 0.75rem; // 12px --font-size-sm: 0.875rem; // 14px --font-size-md: 1rem; // 16px --font-size-lg: 1.125rem; // 18px --font-size-xl: 1.25rem; // 20px --font-size-2xl: 1.5rem; // 24px --font-size-3xl: 1.875rem; // 30px --font-size-4xl: 2.25rem; // 36px --font-size-5xl: 3rem; // 48px --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; // Leading/status icon sized relative to the text beside it; em keeps it in // proportion as the surrounding font-size changes --icon-inline-size: 1.5em; --text-display-size: var(--font-size-5xl); --text-display-weight: var(--font-weight-bold); --text-display-lh: var(--line-height-tight); --text-h1-size: var(--font-size-4xl); --text-h1-weight: var(--font-weight-bold); --text-h1-lh: var(--line-height-tight); --text-h2-size: var(--font-size-3xl); --text-h2-weight: var(--font-weight-semibold); --text-h2-lh: var(--line-height-snug); --text-h3-size: var(--font-size-2xl); --text-h3-weight: var(--font-weight-semibold); --text-h3-lh: var(--line-height-snug); --text-h4-size: var(--font-size-xl); --text-h4-weight: var(--font-weight-semibold); --text-h4-lh: var(--line-height-snug); // Page-level subsection title (an `

` under the page `

`). Sits between // the h3 and h4 tiers and pins the brand family so it reads as wordmark, not // body. Only composite that pins a font-family. --text-section-heading-size: 1.375rem; // 22px --text-section-heading-weight: var(--font-weight-semibold); --text-section-heading-lh: var(--line-height-snug); --text-section-heading-family: var(--font-family-brand); --text-body-lg-size: var(--font-size-lg); --text-body-lg-weight: var(--font-weight-regular); --text-body-lg-lh: var(--line-height-relaxed); --text-body-md-size: var(--font-size-md); --text-body-md-weight: var(--font-weight-regular); --text-body-md-lh: var(--line-height-normal); --text-body-sm-size: var(--font-size-sm); --text-body-sm-weight: var(--font-weight-regular); --text-body-sm-lh: var(--line-height-normal); --text-label-lg-size: var(--font-size-md); --text-label-lg-weight: var(--font-weight-medium); --text-label-lg-lh: var(--line-height-tight); --text-label-md-size: var(--font-size-sm); --text-label-md-weight: var(--font-weight-medium); --text-label-md-lh: var(--line-height-tight); --text-label-sm-size: var(--font-size-xs); --text-label-sm-weight: var(--font-weight-medium); --text-label-sm-lh: var(--line-height-tight); // Helper / caption: subordinate text below a component's primary content. // 13px (between --font-size-xs 12px and -sm 14px) so it stays subordinate // without hitting the barely-readable 12px floor. Used for field hint and // error messages (see standard below) and short metadata such as a // file-uploader's constraints or per-file size labels. // // Standard: every form-like component (anything exposing `errorMsg` and/or // `hint`) must render its messages identically. Mirror ``: // 1. `

` // (or `--hint`) with `role="alert"` on the error variant and an `id` // matching the field's `aria-describedby`. // 2. The first child of the error `

` is always // ``. // Hints render text-only (no icon). // 3. `__message` uses `display: flex; align-items: center; gap: var(--space-1)` // plus the three `--text-helper-*` tokens above. Never hard-code a // font-size on `__message`. // 4. `__message-icon` uses `flex-shrink: 0; width: 0.875em; height: 0.875em` // so the icon scales with the text. // 5. Error color is `var(--color-error-default)`. Hint color is component- // specific (`--color-text-secondary` or `inherit`) but stays consistent // within a component. // 6. `AlertCircleIconComponent` must be in the component's `imports: [...]`. --text-helper-size: 0.8125rem; // 13px --text-helper-weight: var(--font-weight-regular); --text-helper-lh: var(--line-height-normal); // Inline code chip; em-sized so it tracks the surrounding text --text-code-size: 0.875em; --text-code-weight: var(--font-weight-regular); --text-code-family: var(--font-family-mono); --text-code-color: var(--color-text-primary); --text-code-bg: var(--color-bg-muted); --text-code-padding: var(--space-0-5) var(--space-1-5); // 2px 6px --text-code-radius: var(--radius-sm); // Keyboard-key glyph; raised border + bottom shadow suggest a physical key --text-kbd-size: 0.8125em; --text-kbd-weight: var(--font-weight-medium); --text-kbd-family: var(--font-family-mono); --text-kbd-color: var(--color-text-primary); --text-kbd-bg: var(--color-bg-base); --text-kbd-border: var(--border-width-thin) solid var(--color-border-default); --text-kbd-padding: var(--space-0-5) var(--space-1-5); // 2px 6px --text-kbd-radius: var(--radius-sm); --text-kbd-shadow: 0 1px 0 var(--color-border-default); }