# Token reference

> **Generated** from source by `scripts/gen-token-reference.js` —
> run `npm run docs:tokens` to refresh. Do not edit by hand.

**741 tokens.** Every `--sf-*` custom property and its default value, grouped by source file.
If a token is defined in multiple files, it is listed once per section — so this
count can be higher than `docs/registry.json` (which deduplicates by name). See
[architecture.md](architecture.md) for the PUBLIC / PUBLIC-ADVANCED / INTERNAL
contract and naming conventions (a DEPRECATED tier will be introduced when
tokens are first retired), and [theming.md](theming.md) for the
rebrand workflow.

## Core tokens (`core/tokens.css`)

610 tokens.

| Token | Default |
|---|---|
| `--sf-animation-blink` | `sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite` |
| `--sf-animation-color-pulse` | `sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite` |
| `--sf-animation-fade-in` | `sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both` |
| `--sf-animation-fade-out` | `sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both` |
| `--sf-animation-float` | `sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite` |
| `--sf-animation-ping` | `sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite` |
| `--sf-animation-scale-down` | `sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both` |
| `--sf-animation-scale-up` | `sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both` |
| `--sf-animation-shimmer` | `sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite` |
| `--sf-animation-slide-in-down` | `sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both` |
| `--sf-animation-slide-in-left` | `sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both` |
| `--sf-animation-slide-in-right` | `sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both` |
| `--sf-animation-slide-in-up` | `sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both` |
| `--sf-animation-slide-out-down` | `sf-slide-out-down var(--sf-duration-normal) var(--sf-ease-in) both` |
| `--sf-animation-slide-out-left` | `sf-slide-out-left var(--sf-duration-normal) var(--sf-ease-in) both` |
| `--sf-animation-slide-out-right` | `sf-slide-out-right var(--sf-duration-normal) var(--sf-ease-in) both` |
| `--sf-animation-slide-out-up` | `sf-slide-out-up var(--sf-duration-normal) var(--sf-ease-in) both` |
| `--sf-animation-spin` | `sf-spin var(--sf-duration-slower) linear infinite` |
| `--sf-blur` | `12px` |
| `--sf-body-color` | `var(--sf-color-text)` |
| `--sf-body-em-style` | `italic` |
| `--sf-body-font-family` | `var(--sf-font-body)` |
| `--sf-body-font-size` | `var(--sf-text-m)` |
| `--sf-body-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-body-line-height` | `var(--sf-leading-normal)` |
| `--sf-body-strong-weight` | `var(--sf-font-weight-strong)` |
| `--sf-body-text-wrap` | `pretty` |
| `--sf-border` | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)` |
| `--sf-border-scale` | `1` |
| `--sf-border-strong` | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)` |
| `--sf-border-style` | `solid` |
| `--sf-border-subtle` | `var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)` |
| `--sf-border-width-1` | `calc(1px * var(--sf-border-scale, 1))` |
| `--sf-border-width-2` | `calc(2px * var(--sf-border-scale, 1))` |
| `--sf-border-width-3` | `calc(3px * var(--sf-border-scale, 1))` |
| `--sf-border-width-4` | `calc(4px * var(--sf-border-scale, 1))` |
| `--sf-border-width-hairline` | `0.5px` |
| `--sf-caret-color` | `var(--sf-color-action)` |
| `--sf-code-font-size` | `0.875em` |
| `--sf-color-action` | `light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-action--active` | `var(--sf-color-action-xdark)` |
| `--sf-color-action--hover` | `var(--sf-color-action-darker)` |
| `--sf-color-action-100` | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` |
| `--sf-color-action-200` | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` |
| `--sf-color-action-300` | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` |
| `--sf-color-action-400` | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` |
| `--sf-color-action-50` | `oklch(from var(--sf-color-action) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` |
| `--sf-color-action-500` | `var(--sf-color-action)` |
| `--sf-color-action-600` | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` |
| `--sf-color-action-700` | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` |
| `--sf-color-action-800` | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` |
| `--sf-color-action-900` | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` |
| `--sf-color-action-950` | `oklch(from var(--sf-color-action) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` |
| `--sf-color-action-a10` | `oklch(from var(--sf-color-action) l c h / 0.10)` |
| `--sf-color-action-a30` | `oklch(from var(--sf-color-action) l c h / 0.30)` |
| `--sf-color-action-a5` | `oklch(from var(--sf-color-action) l c h / 0.05)` |
| `--sf-color-action-a50` | `oklch(from var(--sf-color-action) l c h / 0.50)` |
| `--sf-color-action-a80` | `oklch(from var(--sf-color-action) l c h / 0.80)` |
| `--sf-color-action-darker` | `var(--sf-color-action-600)` |
| `--sf-color-action-lighter` | `var(--sf-color-action-400)` |
| `--sf-color-action-muted` | `var(--sf-color-action-a30)` |
| `--sf-color-action-source-dark` | `oklch(0.70 0.198 235) *(registered)*` |
| `--sf-color-action-source-light` | `oklch(0.50 0.22 235)` |
| `--sf-color-action-subtle` | `var(--sf-color-action-a10)` |
| `--sf-color-action-superdark` | `var(--sf-color-action-950)` |
| `--sf-color-action-superlight` | `var(--sf-color-action-50)` |
| `--sf-color-action-tint` | `var(--sf-color-action-a5)` |
| `--sf-color-action-xdark` | `var(--sf-color-action-800)` |
| `--sf-color-action-xlight` | `var(--sf-color-action-200)` |
| `--sf-color-base` | `light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))` |
| `--sf-color-base--active` | `oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)` |
| `--sf-color-base--hover` | `oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)` |
| `--sf-color-base-100` | `oklch(from var(--sf-color-base) 0.94 c h)` |
| `--sf-color-base-200` | `oklch(from var(--sf-color-base) 0.88 c h)` |
| `--sf-color-base-300` | `oklch(from var(--sf-color-base) 0.78 c h)` |
| `--sf-color-base-400` | `oklch(from var(--sf-color-base) 0.65 c h)` |
| `--sf-color-base-50` | `oklch(from var(--sf-color-base) 0.97 c h)` |
| `--sf-color-base-500` | `oklch(from var(--sf-color-base) 0.50 c h)` |
| `--sf-color-base-600` | `oklch(from var(--sf-color-base) 0.37 c h)` |
| `--sf-color-base-700` | `oklch(from var(--sf-color-base) 0.27 c h)` |
| `--sf-color-base-800` | `oklch(from var(--sf-color-base) 0.17 c h)` |
| `--sf-color-base-900` | `oklch(from var(--sf-color-base) 0.11 c h)` |
| `--sf-color-base-950` | `oklch(from var(--sf-color-base) 0.06 c h)` |
| `--sf-color-base-a10` | `oklch(from var(--sf-color-base) l c h / 0.10)` |
| `--sf-color-base-a30` | `oklch(from var(--sf-color-base) l c h / 0.30)` |
| `--sf-color-base-a5` | `oklch(from var(--sf-color-base) l c h / 0.05)` |
| `--sf-color-base-a50` | `oklch(from var(--sf-color-base) l c h / 0.50)` |
| `--sf-color-base-a80` | `oklch(from var(--sf-color-base) l c h / 0.80)` |
| `--sf-color-base-muted` | `var(--sf-color-base-a30)` |
| `--sf-color-base-source-dark` | `oklch(0.22 0.003 250) *(registered)*` |
| `--sf-color-base-source-light` | `oklch(0.96 0.006 250)` |
| `--sf-color-base-subtle` | `var(--sf-color-base-a10)` |
| `--sf-color-base-tint` | `var(--sf-color-base-a5)` |
| `--sf-color-bg` | `oklch(from var(--sf-color-base) calc(l + 0.02) c h)` |
| `--sf-color-bg--active` | `oklch(from var(--sf-color-neutral) l c h / 0.12)` |
| `--sf-color-bg--disabled` | `var(--sf-color-inset)` |
| `--sf-color-bg--focus` | `oklch(from var(--sf-color-action) l c h / 0.06)` |
| `--sf-color-bg--hover` | `oklch(from var(--sf-color-neutral) l c h / 0.08)` |
| `--sf-color-bg--selected` | `oklch(from var(--sf-color-action) l c h / 0.1)` |
| `--sf-color-black` | `oklch(0% 0 0)` |
| `--sf-color-border` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )` |
| `--sf-color-border--disabled` | `oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)` |
| `--sf-color-border--focus` | `var(--sf-color-action)` |
| `--sf-color-border--strong` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )` |
| `--sf-color-border--subtle` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )` |
| `--sf-color-border--translucent` | `oklch(from var(--sf-color-neutral) l c h / 0.15)` |
| `--sf-color-code-bg` | `var(--sf-color-inset)` |
| `--sf-color-code-text` | `oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-danger` | `light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-danger-muted` | `oklch(from var(--sf-color-danger) l c h / 0.3)` |
| `--sf-color-danger-source-dark` | `oklch(0.71 0.198 12) *(registered)*` |
| `--sf-color-danger-source-light` | `oklch(0.48 0.22 12)` |
| `--sf-color-danger-strong` | `light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )` |
| `--sf-color-danger-subtle` | `oklch(from var(--sf-color-danger) l c h / 0.12)` |
| `--sf-color-danger-tint` | `oklch(from var(--sf-color-danger) l c h / 0.05)` |
| `--sf-color-dim` | `oklch(0 0 0 / 0.5)` |
| `--sf-color-heading` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` |
| `--sf-color-info` | `light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-info-muted` | `oklch(from var(--sf-color-info) l c h / 0.3)` |
| `--sf-color-info-source-dark` | `oklch(0.71 0.162 235) *(registered)*` |
| `--sf-color-info-source-light` | `oklch(0.48 0.18 235)` |
| `--sf-color-info-strong` | `light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )` |
| `--sf-color-info-subtle` | `oklch(from var(--sf-color-info) l c h / 0.12)` |
| `--sf-color-info-tint` | `oklch(from var(--sf-color-info) l c h / 0.05)` |
| `--sf-color-inset` | `oklch(from var(--sf-color-base) calc(l - 0.02) c h)` |
| `--sf-color-inverse` | `oklch(from var(--sf-color-base) calc(1 - l) c h)` |
| `--sf-color-link` | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )` |
| `--sf-color-link--active` | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )` |
| `--sf-color-link--disabled` | `var(--sf-color-text--disabled)` |
| `--sf-color-link--hover` | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )` |
| `--sf-color-link--underline` | `oklch(from var(--sf-color-action) l c h / 0.3)` |
| `--sf-color-link--visited` | `light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )` |
| `--sf-color-mark-bg` | `oklch(from var(--sf-color-warning) l c h / 0.25)` |
| `--sf-color-mark-text` | `inherit` |
| `--sf-color-neutral` | `light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-neutral--active` | `var(--sf-color-neutral-xdark)` |
| `--sf-color-neutral--hover` | `var(--sf-color-neutral-darker)` |
| `--sf-color-neutral-100` | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` |
| `--sf-color-neutral-200` | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` |
| `--sf-color-neutral-300` | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` |
| `--sf-color-neutral-400` | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` |
| `--sf-color-neutral-50` | `oklch(from var(--sf-color-neutral) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` |
| `--sf-color-neutral-500` | `var(--sf-color-neutral)` |
| `--sf-color-neutral-600` | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` |
| `--sf-color-neutral-700` | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` |
| `--sf-color-neutral-800` | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` |
| `--sf-color-neutral-900` | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` |
| `--sf-color-neutral-950` | `oklch(from var(--sf-color-neutral) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` |
| `--sf-color-neutral-a10` | `oklch(from var(--sf-color-neutral) l c h / 0.10)` |
| `--sf-color-neutral-a30` | `oklch(from var(--sf-color-neutral) l c h / 0.30)` |
| `--sf-color-neutral-a5` | `oklch(from var(--sf-color-neutral) l c h / 0.05)` |
| `--sf-color-neutral-a50` | `oklch(from var(--sf-color-neutral) l c h / 0.50)` |
| `--sf-color-neutral-a80` | `oklch(from var(--sf-color-neutral) l c h / 0.80)` |
| `--sf-color-neutral-darker` | `var(--sf-color-neutral-600)` |
| `--sf-color-neutral-lighter` | `var(--sf-color-neutral-400)` |
| `--sf-color-neutral-muted` | `var(--sf-color-neutral-a30)` |
| `--sf-color-neutral-source-dark` | `oklch(0.69 0.0225 260) *(registered)*` |
| `--sf-color-neutral-source-light` | `oklch(0.52 0.025 260)` |
| `--sf-color-neutral-subtle` | `var(--sf-color-neutral-a10)` |
| `--sf-color-neutral-superdark` | `var(--sf-color-neutral-950)` |
| `--sf-color-neutral-superlight` | `var(--sf-color-neutral-50)` |
| `--sf-color-neutral-tint` | `var(--sf-color-neutral-a5)` |
| `--sf-color-neutral-xdark` | `var(--sf-color-neutral-800)` |
| `--sf-color-neutral-xlight` | `var(--sf-color-neutral-200)` |
| `--sf-color-overlay` | `oklch(from var(--sf-color-base) l c h / 0.9)` |
| `--sf-color-primary` | `light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-primary--active` | `var(--sf-color-primary-xdark)` |
| `--sf-color-primary--hover` | `var(--sf-color-primary-darker)` |
| `--sf-color-primary-100` | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` |
| `--sf-color-primary-200` | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` |
| `--sf-color-primary-300` | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` |
| `--sf-color-primary-400` | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` |
| `--sf-color-primary-50` | `oklch(from var(--sf-color-primary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` |
| `--sf-color-primary-500` | `var(--sf-color-primary)` |
| `--sf-color-primary-600` | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` |
| `--sf-color-primary-700` | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` |
| `--sf-color-primary-800` | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` |
| `--sf-color-primary-900` | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` |
| `--sf-color-primary-950` | `oklch(from var(--sf-color-primary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` |
| `--sf-color-primary-a10` | `oklch(from var(--sf-color-primary) l c h / 0.10)` |
| `--sf-color-primary-a30` | `oklch(from var(--sf-color-primary) l c h / 0.30)` |
| `--sf-color-primary-a5` | `oklch(from var(--sf-color-primary) l c h / 0.05)` |
| `--sf-color-primary-a50` | `oklch(from var(--sf-color-primary) l c h / 0.50)` |
| `--sf-color-primary-a80` | `oklch(from var(--sf-color-primary) l c h / 0.80)` |
| `--sf-color-primary-darker` | `var(--sf-color-primary-600)` |
| `--sf-color-primary-lighter` | `var(--sf-color-primary-400)` |
| `--sf-color-primary-muted` | `var(--sf-color-primary-a30)` |
| `--sf-color-primary-source-dark` | `oklch(0.715 0.243 264) *(registered)*` |
| `--sf-color-primary-source-light` | `oklch(0.47 0.27 264)` |
| `--sf-color-primary-subtle` | `var(--sf-color-primary-a10)` |
| `--sf-color-primary-superdark` | `var(--sf-color-primary-950)` |
| `--sf-color-primary-superlight` | `var(--sf-color-primary-50)` |
| `--sf-color-primary-tint` | `var(--sf-color-primary-a5)` |
| `--sf-color-primary-xdark` | `var(--sf-color-primary-800)` |
| `--sf-color-primary-xlight` | `var(--sf-color-primary-200)` |
| `--sf-color-raised` | `oklch(from var(--sf-color-base) calc(l + 0.04) c h)` |
| `--sf-color-scheme` | `light dark` |
| `--sf-color-secondary` | `light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-secondary--active` | `var(--sf-color-secondary-xdark)` |
| `--sf-color-secondary--hover` | `var(--sf-color-secondary-darker)` |
| `--sf-color-secondary-100` | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` |
| `--sf-color-secondary-200` | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` |
| `--sf-color-secondary-300` | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` |
| `--sf-color-secondary-400` | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` |
| `--sf-color-secondary-50` | `oklch(from var(--sf-color-secondary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` |
| `--sf-color-secondary-500` | `var(--sf-color-secondary)` |
| `--sf-color-secondary-600` | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` |
| `--sf-color-secondary-700` | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` |
| `--sf-color-secondary-800` | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` |
| `--sf-color-secondary-900` | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` |
| `--sf-color-secondary-950` | `oklch(from var(--sf-color-secondary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` |
| `--sf-color-secondary-a10` | `oklch(from var(--sf-color-secondary) l c h / 0.10)` |
| `--sf-color-secondary-a30` | `oklch(from var(--sf-color-secondary) l c h / 0.30)` |
| `--sf-color-secondary-a5` | `oklch(from var(--sf-color-secondary) l c h / 0.05)` |
| `--sf-color-secondary-a50` | `oklch(from var(--sf-color-secondary) l c h / 0.50)` |
| `--sf-color-secondary-a80` | `oklch(from var(--sf-color-secondary) l c h / 0.80)` |
| `--sf-color-secondary-darker` | `var(--sf-color-secondary-600)` |
| `--sf-color-secondary-lighter` | `var(--sf-color-secondary-400)` |
| `--sf-color-secondary-muted` | `var(--sf-color-secondary-a30)` |
| `--sf-color-secondary-source-dark` | `oklch(0.84 0.036 264) *(registered)*` |
| `--sf-color-secondary-source-light` | `oklch(0.22 0.04 264)` |
| `--sf-color-secondary-subtle` | `var(--sf-color-secondary-a10)` |
| `--sf-color-secondary-superdark` | `var(--sf-color-secondary-950)` |
| `--sf-color-secondary-superlight` | `var(--sf-color-secondary-50)` |
| `--sf-color-secondary-tint` | `var(--sf-color-secondary-a5)` |
| `--sf-color-secondary-xdark` | `var(--sf-color-secondary-800)` |
| `--sf-color-secondary-xlight` | `var(--sf-color-secondary-200)` |
| `--sf-color-selection-bg` | `light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )` |
| `--sf-color-selection-bg--alt` | `light-dark( oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55), oklch(from var(--sf-color-action-source-light) l c h / 0.28) )` |
| `--sf-color-selection-text` | `inherit` |
| `--sf-color-selection-text--alt` | `inherit` |
| `--sf-color-success` | `light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-success-muted` | `oklch(from var(--sf-color-success) l c h / 0.3)` |
| `--sf-color-success-source-dark` | `oklch(0.70 0.144 145) *(registered)*` |
| `--sf-color-success-source-light` | `oklch(0.50 0.16 145)` |
| `--sf-color-success-strong` | `light-dark( oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )` |
| `--sf-color-success-subtle` | `oklch(from var(--sf-color-success) l c h / 0.12)` |
| `--sf-color-success-tint` | `oklch(from var(--sf-color-success) l c h / 0.05)` |
| `--sf-color-surface` | `var(--sf-color-base)` |
| `--sf-color-tertiary` | `light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-tertiary--active` | `var(--sf-color-tertiary-xdark)` |
| `--sf-color-tertiary--hover` | `var(--sf-color-tertiary-darker)` |
| `--sf-color-tertiary-100` | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.88)) calc(c * 0.3) h)` |
| `--sf-color-tertiary-200` | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.72)) calc(c * 0.5) h)` |
| `--sf-color-tertiary-300` | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.52)) calc(c * 0.72) h)` |
| `--sf-color-tertiary-400` | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.3)) calc(c * 0.88) h)` |
| `--sf-color-tertiary-50` | `oklch(from var(--sf-color-tertiary) max(l, calc(l + (var(--sf-palette-tint-l) - l) * 0.95)) calc(c * 0.2) h)` |
| `--sf-color-tertiary-500` | `var(--sf-color-tertiary)` |
| `--sf-color-tertiary-600` | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.16)) calc(c * 0.96) h)` |
| `--sf-color-tertiary-700` | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.36)) calc(c * 0.88) h)` |
| `--sf-color-tertiary-800` | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.58)) calc(c * 0.72) h)` |
| `--sf-color-tertiary-900` | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.78)) calc(c * 0.52) h)` |
| `--sf-color-tertiary-950` | `oklch(from var(--sf-color-tertiary) min(l, calc(l + (var(--sf-palette-shade-l) - l) * 0.9)) calc(c * 0.38) h)` |
| `--sf-color-tertiary-a10` | `oklch(from var(--sf-color-tertiary) l c h / 0.10)` |
| `--sf-color-tertiary-a30` | `oklch(from var(--sf-color-tertiary) l c h / 0.30)` |
| `--sf-color-tertiary-a5` | `oklch(from var(--sf-color-tertiary) l c h / 0.05)` |
| `--sf-color-tertiary-a50` | `oklch(from var(--sf-color-tertiary) l c h / 0.50)` |
| `--sf-color-tertiary-a80` | `oklch(from var(--sf-color-tertiary) l c h / 0.80)` |
| `--sf-color-tertiary-darker` | `var(--sf-color-tertiary-600)` |
| `--sf-color-tertiary-lighter` | `var(--sf-color-tertiary-400)` |
| `--sf-color-tertiary-muted` | `var(--sf-color-tertiary-a30)` |
| `--sf-color-tertiary-source-dark` | `oklch(0.74 0.198 295) *(registered)*` |
| `--sf-color-tertiary-source-light` | `oklch(0.42 0.22 295)` |
| `--sf-color-tertiary-subtle` | `var(--sf-color-tertiary-a10)` |
| `--sf-color-tertiary-superdark` | `var(--sf-color-tertiary-950)` |
| `--sf-color-tertiary-superlight` | `var(--sf-color-tertiary-50)` |
| `--sf-color-tertiary-tint` | `var(--sf-color-tertiary-a5)` |
| `--sf-color-tertiary-xdark` | `var(--sf-color-tertiary-800)` |
| `--sf-color-tertiary-xlight` | `var(--sf-color-tertiary-200)` |
| `--sf-color-text` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` |
| `--sf-color-text--disabled` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )` |
| `--sf-color-text--inverse` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )` |
| `--sf-color-text--muted` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h), oklch(from var(--sf-color-neutral) clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h) )` |
| `--sf-color-text--on-action` | `oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-base` | `var(--sf-color-text)` |
| `--sf-color-text--on-danger` | `oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-info` | `oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-inverse` | `oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-neutral` | `oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-primary` | `oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-secondary` | `oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-success` | `oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-tertiary` | `oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--on-warning` | `oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)` |
| `--sf-color-text--placeholder` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )` |
| `--sf-color-text--subtle` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )` |
| `--sf-color-warning` | `light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))` |
| `--sf-color-warning-muted` | `oklch(from var(--sf-color-warning) l c h / 0.3)` |
| `--sf-color-warning-source-dark` | `oklch(0.65 0.153 80) *(registered)*` |
| `--sf-color-warning-source-light` | `oklch(0.75 0.17 80)` |
| `--sf-color-warning-strong` | `light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )` |
| `--sf-color-warning-subtle` | `oklch(from var(--sf-color-warning) l c h / 0.12)` |
| `--sf-color-warning-tint` | `oklch(from var(--sf-color-warning) l c h / 0.05)` |
| `--sf-color-white` | `oklch(100% 0 0)` |
| `--sf-component-pad` | `var(--sf-space-m)` |
| `--sf-container-default` | `75rem` |
| `--sf-container-full` | `100%` |
| `--sf-container-narrow` | `38rem` |
| `--sf-container-prose` | `65ch` |
| `--sf-container-wide` | `90rem` |
| `--sf-content-gap` | `var(--sf-space-s)` |
| `--sf-contrast-bias` | `0` |
| `--sf-contrast-threshold` | `0.6` |
| `--sf-density` | `1` |
| `--sf-display-l-line-height` | `1` |
| `--sf-display-m-line-height` | `1.05` |
| `--sf-display-s-line-height` | `var(--sf-leading-tight)` |
| `--sf-divider-color` | `var(--sf-color-border)` |
| `--sf-divider-gap` | `var(--sf-space-m)` |
| `--sf-divider-style` | `solid` |
| `--sf-divider-width` | `var(--sf-border-width-1)` |
| `--sf-drop-shadow-l` | `drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))` |
| `--sf-drop-shadow-m` | `drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))` |
| `--sf-drop-shadow-s` | `drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))` |
| `--sf-drop-shadow-xl` | `drop-shadow(0 16px 32px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)))` |
| `--sf-drop-shadow-xs` | `drop-shadow(0 0.5px 1px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1), 0.7)))` |
| `--sf-duration-fast` | `calc(150ms * var(--sf-motion-scale))` |
| `--sf-duration-instant` | `calc(100ms * var(--sf-motion-scale))` |
| `--sf-duration-none` | `0ms` |
| `--sf-duration-normal` | `calc(250ms * var(--sf-motion-scale))` |
| `--sf-duration-slow` | `calc(400ms * var(--sf-motion-scale))` |
| `--sf-duration-slower` | `calc(600ms * var(--sf-motion-scale))` |
| `--sf-ease-bounce` | `linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)` |
| `--sf-ease-elastic` | `linear(0, 0.3, 1.2, 0.9, 1.05, 1)` |
| `--sf-ease-in` | `cubic-bezier(0.5, 0, 0.75, 0.25)` |
| `--sf-ease-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` |
| `--sf-ease-linear` | `linear` |
| `--sf-ease-out` | `cubic-bezier(0.25, 0, 0.15, 1)` |
| `--sf-ease-overshoot` | `linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)` |
| `--sf-ease-spring` | `linear(0, 0.5, 1.1, 0.95, 1.02, 1)` |
| `--sf-field-block` | `var(--sf-space-xs)` |
| `--sf-field-required-marker` | `" *"` |
| `--sf-fluid-max-vw` | `90` |
| `--sf-fluid-min-vw` | `22.5` |
| `--sf-fluid-width` | `100vw` |
| `--sf-focus-ring-color` | `var(--sf-color-action)` |
| `--sf-focus-ring-offset` | `2px` |
| `--sf-focus-ring-shadow` | `0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)` |
| `--sf-focus-ring-style` | `solid` |
| `--sf-focus-ring-width` | `2px` |
| `--sf-font-body` | `system-ui, -apple-system, sans-serif` |
| `--sf-font-display` | `var(--sf-font-heading)` |
| `--sf-font-features` | `normal` |
| `--sf-font-geometric` | `"Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif` |
| `--sf-font-heading` | `var(--sf-font-body)` |
| `--sf-font-humanist` | `"Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif` |
| `--sf-font-mono` | `ui-monospace, monospace` |
| `--sf-font-numeric` | `tabular-nums` |
| `--sf-font-slab` | `"Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif` |
| `--sf-font-variation` | `normal` |
| `--sf-font-weight-body` | `var(--sf-font-weight-normal)` |
| `--sf-font-weight-bold` | `700` |
| `--sf-font-weight-display` | `var(--sf-font-weight-bold)` |
| `--sf-font-weight-heading` | `var(--sf-font-weight-semibold)` |
| `--sf-font-weight-interactive` | `var(--sf-font-weight-semibold)` |
| `--sf-font-weight-light` | `300` |
| `--sf-font-weight-medium` | `500` |
| `--sf-font-weight-normal` | `400` |
| `--sf-font-weight-semibold` | `600` |
| `--sf-font-weight-strong` | `var(--sf-font-weight-bold)` |
| `--sf-gap` | `var(--sf-space-m)` |
| `--sf-gradient-action` | `linear-gradient(in oklch 135deg, var(--sf-color-action), oklch(from var(--sf-color-action) calc(l - 0.08) c h))` |
| `--sf-gradient-brand` | `linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))` |
| `--sf-gradient-fade--b` | `linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))` |
| `--sf-gradient-fade--l` | `linear-gradient(in oklch to left, transparent, var(--sf-color-bg))` |
| `--sf-gradient-fade--r` | `linear-gradient(in oklch to right, transparent, var(--sf-color-bg))` |
| `--sf-gradient-fade--t` | `linear-gradient(in oklch to top, transparent, var(--sf-color-bg))` |
| `--sf-gradient-primary` | `linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))` |
| `--sf-gradient-secondary` | `linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))` |
| `--sf-gradient-surface` | `linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))` |
| `--sf-gradient-tertiary` | `linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))` |
| `--sf-gutter` | `var(--sf-space-l)` |
| `--sf-h1-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-h1-letter-spacing` | `var(--sf-tracking-tight)` |
| `--sf-h1-line-height` | `var(--sf-leading-tight)` |
| `--sf-h1-max-width` | `none` |
| `--sf-h1-size` | `var(--sf-text-4xl)` |
| `--sf-h2-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-h2-letter-spacing` | `var(--sf-tracking-tight)` |
| `--sf-h2-line-height` | `var(--sf-leading-tight)` |
| `--sf-h2-max-width` | `none` |
| `--sf-h2-size` | `var(--sf-text-3xl)` |
| `--sf-h3-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-h3-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-h3-line-height` | `var(--sf-leading-snug)` |
| `--sf-h3-max-width` | `none` |
| `--sf-h3-size` | `var(--sf-text-2xl)` |
| `--sf-h4-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-h4-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-h4-line-height` | `var(--sf-leading-snug)` |
| `--sf-h4-max-width` | `none` |
| `--sf-h4-size` | `var(--sf-text-xl)` |
| `--sf-h5-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-h5-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-h5-line-height` | `var(--sf-leading-normal)` |
| `--sf-h5-max-width` | `none` |
| `--sf-h5-size` | `var(--sf-text-l)` |
| `--sf-h6-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-h6-letter-spacing` | `var(--sf-tracking-wide)` |
| `--sf-h6-line-height` | `var(--sf-leading-normal)` |
| `--sf-h6-max-width` | `none` |
| `--sf-h6-size` | `var(--sf-text-m)` |
| `--sf-header-height` | `clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))` |
| `--sf-header-height-desktop` | `5rem` |
| `--sf-header-height-mobile` | `3.5rem` |
| `--sf-heading-color` | `var(--sf-color-heading)` |
| `--sf-heading-font-family` | `var(--sf-font-heading)` |
| `--sf-heading-text-wrap` | `balance` |
| `--sf-hover-grow-scale` | `1.05` |
| `--sf-hover-lift` | `0.25em` |
| `--sf-hover-shrink-scale` | `0.95` |
| `--sf-hover-slide` | `0.5em` |
| `--sf-icon-2xl` | `4em` |
| `--sf-icon-l` | `2em` |
| `--sf-icon-m` | `1.5em` |
| `--sf-icon-s` | `1em` |
| `--sf-icon-xl` | `3em` |
| `--sf-icon-xs` | `0.875em` |
| `--sf-is-dark` | `0 *(registered)*` |
| `--sf-leading-normal` | `1.5` |
| `--sf-leading-relaxed` | `1.625` |
| `--sf-leading-snug` | `1.3` |
| `--sf-leading-taper` | `0` |
| `--sf-leading-tight` | `1.1` |
| `--sf-link-external-label` | `"opens in a new window or external site"` |
| `--sf-link-external-marker` | `" \2197"` |
| `--sf-link-underline-offset` | `0.15em` |
| `--sf-link-underline-thickness` | `auto` |
| `--sf-lumlocker` | `0.65` |
| `--sf-lumlocker-dark` | `clamp(0.5, calc(1.18 - var(--sf-lumlocker)), 0.92)` |
| `--sf-mask-scrim-end` | `var(--sf-space-l)` |
| `--sf-mask-scrim-start` | `var(--sf-space-l)` |
| `--sf-media-radius` | `0` |
| `--sf-motion-scale` | `1` |
| `--sf-object-fit` | `cover` |
| `--sf-object-position` | `50% 50%` |
| `--sf-opacity-disabled` | `0.45` |
| `--sf-opacity-muted` | `0.5` |
| `--sf-optical-sizing` | `auto` |
| `--sf-palette-shade-l` | `0.1` |
| `--sf-palette-tint-l` | `0.97` |
| `--sf-print-base-size` | `11pt` |
| `--sf-print-page-margin` | `2cm` |
| `--sf-print-page-size` | `a4` |
| `--sf-radius-2xl` | `calc(24px * var(--sf-radius-scale))` |
| `--sf-radius-2xs` | `calc(1px * var(--sf-radius-scale))` |
| `--sf-radius-3xl` | `calc(32px * var(--sf-radius-scale))` |
| `--sf-radius-4xl` | `calc(48px * var(--sf-radius-scale))` |
| `--sf-radius-full` | `9999px` |
| `--sf-radius-l` | `calc(12px * var(--sf-radius-scale))` |
| `--sf-radius-m` | `calc(8px * var(--sf-radius-scale))` |
| `--sf-radius-none` | `0` |
| `--sf-radius-outer` | `calc(var(--sf-radius-m) + var(--sf-component-pad))` |
| `--sf-radius-pill` | `var(--sf-radius-full)` |
| `--sf-radius-s` | `calc(4px * var(--sf-radius-scale))` |
| `--sf-radius-scale` | `1` |
| `--sf-radius-xl` | `calc(16px * var(--sf-radius-scale))` |
| `--sf-radius-xs` | `calc(2px * var(--sf-radius-scale))` |
| `--sf-ratio-3-2` | `3 / 2` |
| `--sf-ratio-4-3` | `4 / 3` |
| `--sf-ratio-cinema` | `21 / 9` |
| `--sf-ratio-golden` | `1.618 / 1` |
| `--sf-ratio-portrait` | `3 / 4` |
| `--sf-ratio-square` | `1` |
| `--sf-ratio-video` | `16 / 9` |
| `--sf-safe-bottom` | `env(safe-area-inset-bottom, 0px)` |
| `--sf-safe-left` | `env(safe-area-inset-left, 0px)` |
| `--sf-safe-right` | `env(safe-area-inset-right, 0px)` |
| `--sf-safe-top` | `env(safe-area-inset-top, 0px)` |
| `--sf-scroll-timeline-range-end` | `cover 30%` |
| `--sf-scroll-timeline-range-exit-end` | `exit 100%` |
| `--sf-scroll-timeline-range-exit-start` | `cover 70%` |
| `--sf-scroll-timeline-range-start` | `entry 0%` |
| `--sf-scrollbar-thumb` | `var(--sf-color-neutral)` |
| `--sf-scrollbar-track` | `transparent` |
| `--sf-section-pad` | `var(--sf-section-pad--m)` |
| `--sf-section-pad--2xl` | `calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale))` |
| `--sf-section-pad--l` | `calc(var(--sf-space-4xl) * var(--sf-section-scale))` |
| `--sf-section-pad--m` | `calc(var(--sf-space-3xl) * var(--sf-section-scale))` |
| `--sf-section-pad--s` | `calc(var(--sf-space-2xl) * var(--sf-section-scale))` |
| `--sf-section-pad--xl` | `calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale))` |
| `--sf-section-pad--xs` | `calc(var(--sf-space-xl) * var(--sf-section-scale))` |
| `--sf-section-scale` | `1` |
| `--sf-shadow-2xl` | `0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))` |
| `--sf-shadow-color` | `oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h)` |
| `--sf-shadow-glow` | `0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` |
| `--sf-shadow-glow-color` | `var(--sf-color-primary)` |
| `--sf-shadow-inner` | `inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` |
| `--sf-shadow-l` | `0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` |
| `--sf-shadow-lightness` | `0.15` |
| `--sf-shadow-m` | `0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` |
| `--sf-shadow-none` | `none` |
| `--sf-shadow-s` | `0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))` |
| `--sf-shadow-strength` | `calc(0.08 + var(--sf-is-dark) * 0.17)` |
| `--sf-shadow-xl` | `0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))` |
| `--sf-shadow-xs` | `0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))` |
| `--sf-size-l` | `calc(3rem * var(--sf-density))` |
| `--sf-size-m` | `calc(2.5rem * var(--sf-density))` |
| `--sf-size-s` | `calc(2rem * var(--sf-density))` |
| `--sf-size-xl` | `calc(3.5rem * var(--sf-density))` |
| `--sf-size-xs` | `calc(1.5rem * var(--sf-density))` |
| `--sf-space-2xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-2xs` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-3xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-4xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-base-max` | `2` |
| `--sf-space-base-min` | `1` |
| `--sf-space-l` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-m` | `calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-none` | `0` |
| `--sf-space-px` | `1px` |
| `--sf-space-ratio-max` | `1.333` |
| `--sf-space-ratio-min` | `1.25` |
| `--sf-space-s` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-scale` | `1` |
| `--sf-space-xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))` |
| `--sf-space-xs` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))` |
| `--sf-stagger-step` | `75ms` |
| `--sf-sticky-offset` | `clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))` |
| `--sf-sticky-offset-desktop` | `var(--sf-header-height-desktop)` |
| `--sf-sticky-offset-mobile` | `var(--sf-header-height-mobile)` |
| `--sf-text-2xl` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-2xl-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-text-2xl-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-2xl-line-height` | `calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper))` |
| `--sf-text-2xl-max-width` | `none` |
| `--sf-text-2xs` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-2xs-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-text-2xs-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-2xs-line-height` | `var(--sf-leading-relaxed)` |
| `--sf-text-2xs-max-width` | `55ch` |
| `--sf-text-3xl` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-3xl-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-text-3xl-letter-spacing` | `var(--sf-tracking-tight)` |
| `--sf-text-3xl-line-height` | `calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper))` |
| `--sf-text-3xl-max-width` | `none` |
| `--sf-text-4xl` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-4xl-font-weight` | `var(--sf-font-weight-heading)` |
| `--sf-text-4xl-letter-spacing` | `var(--sf-tracking-tight)` |
| `--sf-text-4xl-line-height` | `calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper))` |
| `--sf-text-4xl-max-width` | `none` |
| `--sf-text-base-max` | `1.25` |
| `--sf-text-base-min` | `1` |
| `--sf-text-display-base-max` | `3` |
| `--sf-text-display-base-min` | `2.4` |
| `--sf-text-display-l` | `calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale))` |
| `--sf-text-display-m` | `calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale))` |
| `--sf-text-display-s` | `calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale))` |
| `--sf-text-display-scale` | `1` |
| `--sf-text-l` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-l-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-text-l-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-l-line-height` | `calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper))` |
| `--sf-text-l-max-width` | `none` |
| `--sf-text-m` | `calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-m-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-text-m-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-m-line-height` | `calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper))` |
| `--sf-text-m-max-width` | `65ch` |
| `--sf-text-ratio-max` | `1.333` |
| `--sf-text-ratio-min` | `1.25` |
| `--sf-text-s` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-s-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-text-s-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-s-line-height` | `calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper))` |
| `--sf-text-s-max-width` | `65ch` |
| `--sf-text-scale` | `1` |
| `--sf-text-shadow-l` | `0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))` |
| `--sf-text-shadow-m` | `0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))` |
| `--sf-text-shadow-none` | `none` |
| `--sf-text-shadow-s` | `0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))` |
| `--sf-text-shadow-xl` | `0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7))` |
| `--sf-text-shadow-xs` | `0 0.5px 1px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1), 0.7))` |
| `--sf-text-xl` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-xl-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-text-xl-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-xl-line-height` | `calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper))` |
| `--sf-text-xl-max-width` | `none` |
| `--sf-text-xs` | `calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale))` |
| `--sf-text-xs-font-weight` | `var(--sf-font-weight-body)` |
| `--sf-text-xs-letter-spacing` | `var(--sf-tracking-normal)` |
| `--sf-text-xs-line-height` | `calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper))` |
| `--sf-text-xs-max-width` | `60ch` |
| `--sf-theme-transition-duration` | `calc(300ms * var(--sf-motion-scale))` |
| `--sf-touch-target` | `2.75rem` |
| `--sf-tracking-normal` | `0` |
| `--sf-tracking-tight` | `-0.025em` |
| `--sf-tracking-wide` | `0.025em` |
| `--sf-tracking-wider` | `0.05em` |
| `--sf-tracking-widest` | `0.1em` |
| `--sf-transition-colors` | `color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)` |
| `--sf-transition-enter` | `color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)` |
| `--sf-transition-exit` | `color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)` |
| `--sf-transition-fast` | `color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)` |
| `--sf-transition-form-field` | `color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out)` |
| `--sf-transition-opacity` | `opacity var(--sf-duration-normal) var(--sf-ease-out)` |
| `--sf-transition-overlay` | `overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete` |
| `--sf-transition-shadow` | `box-shadow var(--sf-duration-normal) var(--sf-ease-out)` |
| `--sf-transition-slow` | `color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)` |
| `--sf-transition-transform` | `transform var(--sf-duration-normal) var(--sf-ease-out)` |
| `--sf-z-base` | `0` |
| `--sf-z-below` | `-1` |
| `--sf-z-dropdown` | `1020` |
| `--sf-z-fixed` | `1010` |
| `--sf-z-modal` | `1040` |
| `--sf-z-overlay` | `1030` |
| `--sf-z-raised` | `1` |
| `--sf-z-sticky` | `1000` |
| `--sf-z-toast` | `1050` |
| `--sf-z-tooltip` | `1060` |

## Layout tokens (`core/tokens.layout.css`)

53 tokens.

| Token | Default |
|---|---|
| `--sf-alternate-gap` | `var(--sf-content-gap)` |
| `--sf-alternate-inner-gap` | `var(--sf-gap)` |
| `--sf-bento-cols-default` | `4` |
| `--sf-bento-gap` | `var(--sf-gap)` |
| `--sf-bento-row-compact` | `6rem` |
| `--sf-bento-row-default` | `10rem` |
| `--sf-bento-row-tall` | `16rem` |
| `--sf-bg-layer-fit` | `cover` |
| `--sf-bg-layer-inset` | `0px` |
| `--sf-bg-layer-position` | `50% 50%` |
| `--sf-bg-layer-radius` | `0` |
| `--sf-bg-layer-z` | `-2` |
| `--sf-box-border-color` | `var(--sf-color-border)` |
| `--sf-box-border-width` | `0` |
| `--sf-box-padding` | `var(--sf-space-m)` |
| `--sf-breakout-width` | `var(--sf-container-wide)` |
| `--sf-center-gutter` | `var(--sf-gutter)` |
| `--sf-center-max` | `var(--sf-container-default)` |
| `--sf-cluster-align` | `center` |
| `--sf-cluster-gap` | `var(--sf-gap)` |
| `--sf-cluster-justify` | `flex-start` |
| `--sf-content-width` | `var(--sf-container-default)` |
| `--sf-cover-min-height` | `100dvh` |
| `--sf-cover-padding` | `var(--sf-section-pad)` |
| `--sf-equal-gap` | `var(--sf-gap)` |
| `--sf-equal-min-col` | `16rem` |
| `--sf-equal-rule-color` | `var(--sf-color-border)` |
| `--sf-equal-rule-style` | `solid` |
| `--sf-equal-rule-width` | `0` |
| `--sf-frame-ratio` | `16 / 9` |
| `--sf-grid-gap` | `var(--sf-gap)` |
| `--sf-grid-min` | `16rem` |
| `--sf-grid-min-2xl` | `28rem` |
| `--sf-grid-min-l` | `20rem` |
| `--sf-grid-min-m` | `16rem` |
| `--sf-grid-min-s` | `13rem` |
| `--sf-grid-min-xl` | `24rem` |
| `--sf-grid-min-xs` | `10rem` |
| `--sf-icon-box-bg` | `var(--sf-color-inset)` |
| `--sf-icon-box-border` | `var(--sf-border-width-1) solid var(--sf-color-border)` |
| `--sf-icon-box-pad` | `0.5em` |
| `--sf-icon-box-radius` | `var(--sf-radius-s)` |
| `--sf-imposter-margin` | `var(--sf-space-m)` |
| `--sf-prose-paragraph` | `var(--sf-content-gap)` |
| `--sf-reel-gap` | `var(--sf-gap)` |
| `--sf-reel-height` | `auto` |
| `--sf-reel-item-width` | `max-content` |
| `--sf-sidebar-gap` | `var(--sf-gap)` |
| `--sf-sidebar-min-width` | `50%` |
| `--sf-sidebar-width` | `18rem` |
| `--sf-stack-gap` | `var(--sf-content-gap)` |
| `--sf-switcher-gap` | `var(--sf-gap)` |
| `--sf-switcher-threshold` | `30rem` |

## Macro tokens (`core/tokens.macros.css`)

32 tokens.

| Token | Default |
|---|---|
| `--sf-aspect` | `16 / 9` |
| `--sf-content-intrinsic-size` | `500px` |
| `--sf-flow-space` | `var(--sf-content-gap)` |
| `--sf-line-clamp` | `3` |
| `--sf-overlap-pull` | `var(--sf-space-xl)` |
| `--sf-prose-block-margin` | `var(--sf-space-m)` |
| `--sf-prose-blockquote-border` | `var(--sf-border-width-2) solid var(--sf-color-border--subtle)` |
| `--sf-prose-blockquote-padding` | `var(--sf-space-m)` |
| `--sf-prose-figcaption-size` | `var(--sf-text-s)` |
| `--sf-prose-figure-margin` | `var(--sf-space-l)` |
| `--sf-prose-heading-gap` | `var(--sf-space-s)` |
| `--sf-prose-hr-margin` | `var(--sf-space-l)` |
| `--sf-prose-list-gap` | `var(--sf-space-xs)` |
| `--sf-prose-marker-color` | `var(--sf-color-primary)` |
| `--sf-prose-media-margin` | `var(--sf-space-m)` |
| `--sf-prose-media-radius` | `var(--sf-radius-m)` |
| `--sf-prose-nested-list-gap` | `var(--sf-space-2xs)` |
| `--sf-prose-table-pad` | `var(--sf-space-xs)` |
| `--sf-scrim-color` | `oklch(0 0 0 / 0.55)` |
| `--sf-scrim-direction` | `to top` |
| `--sf-scrim-gradient` | `linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)` |
| `--sf-scrim-text-shadow` | `0 1px 3px oklch(0 0 0 / 0.6)` |
| `--sf-scroll-shadow-size` | `2rem` |
| `--sf-surface-bg-animation` | `none` |
| `--sf-surface-bg-attachment` | `scroll` |
| `--sf-surface-bg-color` | `transparent` |
| `--sf-surface-bg-image` | `none` |
| `--sf-surface-bg-overlay` | `none` |
| `--sf-surface-bg-position` | `center` |
| `--sf-surface-bg-repeat` | `no-repeat` |
| `--sf-surface-bg-size` | `cover` |
| `--sf-surface-color` | `var(--sf-color-base)` |

## Component tokens (`optional/tokens.components.css`)

46 tokens.

| Token | Default |
|---|---|
| `--sf-btn-border-width` | `var(--sf-border-width-1)` |
| `--sf-btn-font-scale` | `1` |
| `--sf-btn-font-size` | `initial` |
| `--sf-btn-font-weight` | `var(--sf-font-weight-interactive)` |
| `--sf-btn-gap` | `var(--sf-space-2xs)` |
| `--sf-btn-l-font-size` | `initial` |
| `--sf-btn-l-min-height` | `initial` |
| `--sf-btn-l-padding-block` | `initial` |
| `--sf-btn-l-padding-inline` | `initial` |
| `--sf-btn-m-font-size` | `initial` |
| `--sf-btn-m-min-height` | `initial` |
| `--sf-btn-m-padding-block` | `initial` |
| `--sf-btn-m-padding-inline` | `initial` |
| `--sf-btn-min-height` | `initial` |
| `--sf-btn-padding-block` | `initial` |
| `--sf-btn-padding-inline` | `initial` |
| `--sf-btn-radius` | `var(--sf-radius-m)` |
| `--sf-btn-s-font-size` | `initial` |
| `--sf-btn-s-min-height` | `initial` |
| `--sf-btn-s-padding-block` | `initial` |
| `--sf-btn-s-padding-inline` | `initial` |
| `--sf-btn-xl-font-size` | `initial` |
| `--sf-btn-xl-min-height` | `initial` |
| `--sf-btn-xl-padding-block` | `initial` |
| `--sf-btn-xl-padding-inline` | `initial` |
| `--sf-btn-xs-font-size` | `initial` |
| `--sf-btn-xs-min-height` | `initial` |
| `--sf-btn-xs-padding-block` | `initial` |
| `--sf-btn-xs-padding-inline` | `initial` |
| `--sf-card-avatar-size` | `2.5rem` |
| `--sf-card-bg` | `var(--sf-color-surface)` |
| `--sf-card-border-color` | `var(--sf-color-border)` |
| `--sf-card-border-width` | `var(--sf-border-width-1)` |
| `--sf-card-gap` | `var(--sf-space-m)` |
| `--sf-card-heading-size` | `var(--sf-text-xl)` |
| `--sf-card-media-radius` | `var(--sf-card-radius, var(--sf-radius-m))` |
| `--sf-card-media-ratio` | `var(--sf-ratio-video)` |
| `--sf-card-padding` | `var(--sf-space-l)` |
| `--sf-card-radius` | `var(--sf-radius-m)` |
| `--sf-card-radius-outer` | `calc(var(--sf-card-radius) + var(--sf-card-padding))` |
| `--sf-card-shadow` | `var(--sf-shadow-s)` |
| `--sf-card-shadow--elevated` | `var(--sf-shadow-l)` |
| `--sf-card-shadow--hover` | `var(--sf-shadow-l)` |
| `--sf-field-padding-block` | `var(--sf-space-xs)` |
| `--sf-field-padding-inline` | `var(--sf-space-s)` |
| `--sf-field-radius` | `var(--sf-radius-m)` |