<!-- GENERATED by scripts/build-llms.mjs from scripts/fixtures/token-docs.generated.json — do not edit this file. -->

# Design tokens

Every `lr-*` component resolves its styling through this two-layer token system, inherited from
`LyraElement`:

1. **`--lr-theme-*` — the application input layer.** Set these (on `:root`, or any ancestor of a
   subtree) to retheme. This is the only supported theming mechanism; never hardcode a color,
   spacing, or font value that fights it.
2. **`--lr-*` — the internal layer.** Direct theme-backed tokens read a `--lr-theme-*` input
   with a built-in fallback. Other tokens are aliases, computed or environment-backed values,
   or fixed contract constants. Every component renders correctly with no theme configured.

For a ready-made light/dark base, import `@aceshooting/lyra-ui/theme.css` once and put
`class="lr-light"`/`class="lr-dark"` (or `data-lr-theme="light"`/`"dark"`) on an ancestor.
Per-component `--lr-<component>-*` custom properties (listed in each component's own section)
override a single element without touching the shared layer.

**Consumer-scope exception: the focus ring.** `--lr-focus-ring` and its three parts
(`-width`/`-color`/`-offset`) are the one layer-2 group `theme.css` also declares at document
scope, on `:root` and on both mode selectors. They exist to serve a CONSUMER-authored idiom —
the Web Awesome `outline: var(--wa-focus-ring)` that migrating projects already have — and that
rule is written against the consumer's own element, where a `:host`-only token resolves to
nothing. An empty `var()` makes the whole `outline` declaration invalid at computed-value time,
and because `outline` does not inherit, the ring did not degrade: it DISAPPEARED, silently, with
no console warning. So `outline: var(--lr-focus-ring); outline-offset:
var(--lr-focus-ring-offset);` now works wherever you write it, provided `theme.css` is imported.
Every component still re-derives all four on its own `:host`, so component rendering is
unchanged.

> **Why layer 1 is not merely *preferred* but *required*: an ancestor `--lr-*` override does
> not survive a nested component boundary.** Every component re-derives the whole `--lr-*` layer
> from `--lr-theme-*` on its **own** `:host` (that is what `LyraElement`'s shared token
> stylesheet does). So setting, say, `--lr-color-warning-quiet` on an application element does
> apply to that element and to plain nested markup — it looks right in review and in a shallow
> `getComputedStyle` probe — but it is **reset at the first `lr-*` element inside another
> `lr-*` element's shadow root** (a badge inside a table cell, say), which re-derives it back to
> the library fallback. The override degrades silently, the deeper it is consumed, with no
> warning. Always set the `--lr-theme-*` input instead: that layer is read through `var()` at
> every level, so it inherits across every boundary. Per-component `--lr-<component>-*`
> properties are the other safe lever, because no component re-declares another component's
> namespace — with six named exceptions declared by the shared base layer itself; see below.

**The `--lr-*` names that look per-component but are not.** `--lr-focus-ring-width`,
`--lr-focus-ring-color`, `--lr-focus-ring-offset` (the consumer-scope exception above),
`--lr-icon-button-size`, `--lr-otp-input-segment-size`, and `--lr-popover-viewport-clamp` are
the only tokens the shared base `:host` block in `internal/tokens.styles.ts` declares under a
component-looking name — each reads its own `--lr-theme-*` input there. Because that block is
mixed into every `lr-*` component, all six behave like the internal layer above, not like an
ordinary per-component property: a rule that sets one of them directly on an ancestor is reset
at the first intervening `lr-*` component and never reaches a nested target — even though
setting it directly on the target element itself still works, which is what makes the failure
look arbitrary rather than systematic. Reach through a subtree with `--lr-theme-focus-ring-*`,
`--lr-theme-otp-input-segment-size`, or `--lr-theme-popover-viewport-clamp` instead.
`--lr-icon-button-size` additionally has a dedicated subtree-scoped input,
`--lr-icon-button-size-scope`, which an ancestor rule can set without reaching for the
application-wide `--lr-theme-icon-button-size`. The subtree input wins where both are set,
because the shipped `design-tokens.css` declares the theme tier on `:root` and a var() chain
only falls through for a property that is unset everywhere. Every other `--lr-<component>-*`
token — including
the rest of `lr-icon-button`'s own (`-radius`, `-background`, `-color`, `-border`, and their
`-hover`/`-active` variants) — is not re-declared anywhere in the shared layer and inherits
normally from an ancestor.

## Direct theme-backed tokens (270)

| Internal token | `--lr-theme-*` input | Light/default fallback | Mode overrides |
|---|---|---|---|
| `--lr-border-width-medium` | `--lr-theme-border-width-medium` | `2px` | — |
| `--lr-border-width-thick` | `--lr-theme-border-width-thick` | `3px` | — |
| `--lr-border-width-thin` | `--lr-theme-border-width-thin` | `1px` | — |
| `--lr-color-border` | `--lr-theme-color-surface-border` | `#8a8a90` | dark: `var(--lr-theme-color-surface-border, #6b6b74)`<br>forcedColors: `ButtonText` |
| `--lr-color-border-strong` | `--lr-theme-color-border-strong` | `#4b5563` | dark: `var(--lr-theme-color-border-strong, #c4c9d1)` |
| `--lr-color-brand-border-loud` | `--lr-theme-color-brand-border-loud` | `var(--lr-ramp-brand-40)` | dark: `var(--lr-theme-color-brand-border-loud, var(--lr-ramp-brand-70))` |
| `--lr-color-brand-border-normal` | `--lr-theme-color-brand-border-normal` | `var(--lr-ramp-brand-60)` | dark: `var(--lr-theme-color-brand-border-normal, var(--lr-ramp-brand-60))` |
| `--lr-color-brand-border-quiet` | `--lr-theme-color-brand-border-quiet` | `var(--lr-ramp-brand-80)` | dark: `var(--lr-theme-color-brand-border-quiet, var(--lr-ramp-brand-30))` |
| `--lr-color-brand-fill-loud` | `--lr-theme-color-brand-fill-loud` | `var(--lr-ramp-brand-50)` | dark: `var(--lr-theme-color-brand-fill-loud, var(--lr-ramp-brand-70))` |
| `--lr-color-brand-fill-normal` | `--lr-theme-color-brand-fill-normal` | `var(--lr-ramp-brand-80)` | dark: `var(--lr-theme-color-brand-fill-normal, var(--lr-ramp-brand-50))` |
| `--lr-color-brand-fill-quiet` | `--lr-theme-color-brand-fill-quiet` | `var(--lr-ramp-brand-95)` | dark: `var(--lr-theme-color-brand-fill-quiet, var(--lr-ramp-brand-30))` |
| `--lr-color-brand-on-loud` | `--lr-theme-color-brand-on-loud` | `var(--lr-ramp-neutral-95)` | dark: `var(--lr-theme-color-brand-on-loud, var(--lr-ramp-neutral-05))` |
| `--lr-color-brand-on-normal` | `--lr-theme-color-brand-on-normal` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-brand-on-normal, var(--lr-ramp-neutral-95))` |
| `--lr-color-brand-on-quiet` | `--lr-theme-color-brand-on-quiet` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-brand-on-quiet, var(--lr-ramp-neutral-95))` |
| `--lr-color-chart-1` | `--lr-theme-color-chart-1` | `#0e006e` | dark: `var(--lr-theme-color-chart-1, #bbff94)`<br>forcedColors: `Highlight` |
| `--lr-color-chart-2` | `--lr-theme-color-chart-2` | `#4d011a` | dark: `var(--lr-theme-color-chart-2, #ffbce8)`<br>forcedColors: `LinkText` |
| `--lr-color-chart-3` | `--lr-theme-color-chart-3` | `#862002` | dark: `var(--lr-theme-color-chart-3, #2bd66a)`<br>forcedColors: `CanvasText` |
| `--lr-color-chart-4` | `--lr-theme-color-chart-4` | `#503983` | dark: `var(--lr-theme-color-chart-4, #bb99cb)`<br>forcedColors: `Highlight` |
| `--lr-color-chart-5` | `--lr-theme-color-chart-5` | `#315fdd` | dark: `var(--lr-theme-color-chart-5, #7888fe)`<br>forcedColors: `LinkText` |
| `--lr-color-chart-6` | `--lr-theme-color-chart-6` | `#935e7c` | dark: `var(--lr-theme-color-chart-6, #9b6b90)`<br>forcedColors: `CanvasText` |
| `--lr-color-chart-7` | `--lr-theme-color-chart-7` | `#de6906` | dark: `var(--lr-theme-color-chart-7, #db3a29)`<br>forcedColors: `Highlight` |
| `--lr-color-chart-8` | `--lr-theme-color-chart-8` | `#8f81d3` | dark: `var(--lr-theme-color-chart-8, #555de3)`<br>forcedColors: `LinkText` |
| `--lr-color-danger-border-loud` | `--lr-theme-color-danger-border-loud` | `var(--lr-ramp-danger-40)` | dark: `var(--lr-theme-color-danger-border-loud, var(--lr-ramp-danger-70))` |
| `--lr-color-danger-border-normal` | `--lr-theme-color-danger-border-normal` | `var(--lr-ramp-danger-60)` | dark: `var(--lr-theme-color-danger-border-normal, var(--lr-ramp-danger-60))` |
| `--lr-color-danger-border-quiet` | `--lr-theme-color-danger-border-quiet` | `var(--lr-ramp-danger-80)` | dark: `var(--lr-theme-color-danger-border-quiet, var(--lr-ramp-danger-30))` |
| `--lr-color-danger-fill-loud` | `--lr-theme-color-danger-fill-loud` | `var(--lr-ramp-danger-50)` | dark: `var(--lr-theme-color-danger-fill-loud, var(--lr-ramp-danger-70))` |
| `--lr-color-danger-fill-normal` | `--lr-theme-color-danger-fill-normal` | `var(--lr-ramp-danger-80)` | dark: `var(--lr-theme-color-danger-fill-normal, var(--lr-ramp-danger-50))` |
| `--lr-color-danger-fill-quiet` | `--lr-theme-color-danger-fill-quiet` | `var(--lr-ramp-danger-95)` | dark: `var(--lr-theme-color-danger-fill-quiet, var(--lr-ramp-danger-30))` |
| `--lr-color-danger-on-loud` | `--lr-theme-color-danger-on-loud` | `var(--lr-ramp-neutral-95)` | dark: `var(--lr-theme-color-danger-on-loud, var(--lr-ramp-neutral-05))` |
| `--lr-color-danger-on-normal` | `--lr-theme-color-danger-on-normal` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-danger-on-normal, var(--lr-ramp-neutral-95))` |
| `--lr-color-danger-on-quiet` | `--lr-theme-color-danger-on-quiet` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-danger-on-quiet, var(--lr-ramp-neutral-95))` |
| `--lr-color-mix-active` | `--lr-theme-color-mix-active` | `22%` | — |
| `--lr-color-mix-hover` | `--lr-theme-color-mix-hover` | `12%` | — |
| `--lr-color-mix-partner` | `--lr-theme-color-mix-partner` | `var(--lr-color-text)` | — |
| `--lr-color-neutral-border-loud` | `--lr-theme-color-neutral-border-loud` | `var(--lr-ramp-neutral-40)` | dark: `var(--lr-theme-color-neutral-border-loud, var(--lr-ramp-neutral-70))` |
| `--lr-color-neutral-border-normal` | `--lr-theme-color-neutral-border-normal` | `var(--lr-ramp-neutral-60)` | dark: `var(--lr-theme-color-neutral-border-normal, var(--lr-ramp-neutral-60))` |
| `--lr-color-neutral-border-quiet` | `--lr-theme-color-neutral-border-quiet` | `var(--lr-ramp-neutral-80)` | dark: `var(--lr-theme-color-neutral-border-quiet, var(--lr-ramp-neutral-30))` |
| `--lr-color-neutral-fill-loud` | `--lr-theme-color-neutral-fill-loud` | `var(--lr-ramp-neutral-50)` | dark: `var(--lr-theme-color-neutral-fill-loud, var(--lr-ramp-neutral-70))` |
| `--lr-color-neutral-fill-normal` | `--lr-theme-color-neutral-fill-normal` | `var(--lr-ramp-neutral-80)` | dark: `var(--lr-theme-color-neutral-fill-normal, var(--lr-ramp-neutral-50))` |
| `--lr-color-neutral-fill-quiet` | `--lr-theme-color-neutral-fill-quiet` | `var(--lr-ramp-neutral-95)` | dark: `var(--lr-theme-color-neutral-fill-quiet, var(--lr-ramp-neutral-30))` |
| `--lr-color-neutral-on-loud` | `--lr-theme-color-neutral-on-loud` | `var(--lr-ramp-neutral-95)` | dark: `var(--lr-theme-color-neutral-on-loud, var(--lr-ramp-neutral-05))` |
| `--lr-color-neutral-on-normal` | `--lr-theme-color-neutral-on-normal` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-neutral-on-normal, var(--lr-ramp-neutral-95))` |
| `--lr-color-neutral-on-quiet` | `--lr-theme-color-neutral-on-quiet` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-neutral-on-quiet, var(--lr-ramp-neutral-95))` |
| `--lr-color-no-data` | `--lr-theme-color-no-data` | `rgb(128 128 128 / 25%)` | — |
| `--lr-color-on-strong-overlay` | `--lr-theme-color-on-strong-overlay` | `#fff` | forcedColors: `CanvasText` |
| `--lr-color-overlay` | `--lr-theme-color-overlay` | `rgb(0 0 0 / 0.5)` | dark: `var(--lr-theme-color-overlay, rgb(0 0 0 / 0.72))` |
| `--lr-color-overlay-strong` | `--lr-theme-color-overlay-strong` | `var(--lr-theme-color-overlay, rgb(0 0 0 / 0.92))` | dark: `var(--lr-theme-color-overlay-strong, var(--lr-theme-color-overlay, rgb(0 0 0 / 0.95)))` |
| `--lr-color-shadow` | `--lr-theme-color-shadow` | `#000` | — |
| `--lr-color-success-border-loud` | `--lr-theme-color-success-border-loud` | `var(--lr-ramp-success-40)` | dark: `var(--lr-theme-color-success-border-loud, var(--lr-ramp-success-70))` |
| `--lr-color-success-border-normal` | `--lr-theme-color-success-border-normal` | `var(--lr-ramp-success-60)` | dark: `var(--lr-theme-color-success-border-normal, var(--lr-ramp-success-60))` |
| `--lr-color-success-border-quiet` | `--lr-theme-color-success-border-quiet` | `var(--lr-ramp-success-80)` | dark: `var(--lr-theme-color-success-border-quiet, var(--lr-ramp-success-30))` |
| `--lr-color-success-fill-loud` | `--lr-theme-color-success-fill-loud` | `var(--lr-ramp-success-50)` | dark: `var(--lr-theme-color-success-fill-loud, var(--lr-ramp-success-70))` |
| `--lr-color-success-fill-normal` | `--lr-theme-color-success-fill-normal` | `var(--lr-ramp-success-80)` | dark: `var(--lr-theme-color-success-fill-normal, var(--lr-ramp-success-50))` |
| `--lr-color-success-fill-quiet` | `--lr-theme-color-success-fill-quiet` | `var(--lr-ramp-success-95)` | dark: `var(--lr-theme-color-success-fill-quiet, var(--lr-ramp-success-30))` |
| `--lr-color-success-on-loud` | `--lr-theme-color-success-on-loud` | `var(--lr-ramp-neutral-95)` | dark: `var(--lr-theme-color-success-on-loud, var(--lr-ramp-neutral-05))` |
| `--lr-color-success-on-normal` | `--lr-theme-color-success-on-normal` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-success-on-normal, var(--lr-ramp-neutral-95))` |
| `--lr-color-success-on-quiet` | `--lr-theme-color-success-on-quiet` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-success-on-quiet, var(--lr-ramp-neutral-95))` |
| `--lr-color-surface` | `--lr-theme-color-surface-default` | `#fff` | dark: `var(--lr-theme-color-surface-default, #1a1a1a)`<br>forcedColors: `Canvas` |
| `--lr-color-surface-overlay` | `--lr-theme-color-surface-overlay` | `var(--lr-color-surface)` | dark: `var(--lr-theme-color-surface-overlay, color-mix(in srgb, var(--lr-color-surface) 85%, #8bade2))` |
| `--lr-color-surface-raised` | `--lr-theme-color-surface-raised` | `#f6f8fa` | dark: `var(--lr-theme-color-surface-raised, #22272e)`<br>forcedColors: `Canvas` |
| `--lr-color-text` | `--lr-theme-color-text-normal` | `#1a1a1a` | dark: `var(--lr-theme-color-text-normal, #f2f2f2)`<br>forcedColors: `CanvasText` |
| `--lr-color-text-quiet` | `--lr-theme-color-text-quiet` | `#6b7280` | dark: `var(--lr-theme-color-text-quiet, #9aa1ac)`<br>forcedColors: `CanvasText` |
| `--lr-color-warning-border-loud` | `--lr-theme-color-warning-border-loud` | `var(--lr-ramp-warning-40)` | dark: `var(--lr-theme-color-warning-border-loud, var(--lr-ramp-warning-70))` |
| `--lr-color-warning-border-normal` | `--lr-theme-color-warning-border-normal` | `var(--lr-ramp-warning-60)` | dark: `var(--lr-theme-color-warning-border-normal, var(--lr-ramp-warning-60))` |
| `--lr-color-warning-border-quiet` | `--lr-theme-color-warning-border-quiet` | `var(--lr-ramp-warning-80)` | dark: `var(--lr-theme-color-warning-border-quiet, var(--lr-ramp-warning-30))` |
| `--lr-color-warning-fill-loud` | `--lr-theme-color-warning-fill-loud` | `var(--lr-ramp-warning-50)` | dark: `var(--lr-theme-color-warning-fill-loud, var(--lr-ramp-warning-70))` |
| `--lr-color-warning-fill-normal` | `--lr-theme-color-warning-fill-normal` | `var(--lr-ramp-warning-80)` | dark: `var(--lr-theme-color-warning-fill-normal, var(--lr-ramp-warning-50))` |
| `--lr-color-warning-fill-quiet` | `--lr-theme-color-warning-fill-quiet` | `var(--lr-ramp-warning-95)` | dark: `var(--lr-theme-color-warning-fill-quiet, var(--lr-ramp-warning-30))` |
| `--lr-color-warning-on-loud` | `--lr-theme-color-warning-on-loud` | `var(--lr-ramp-neutral-95)` | dark: `var(--lr-theme-color-warning-on-loud, var(--lr-ramp-neutral-05))` |
| `--lr-color-warning-on-normal` | `--lr-theme-color-warning-on-normal` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-warning-on-normal, var(--lr-ramp-neutral-95))` |
| `--lr-color-warning-on-quiet` | `--lr-theme-color-warning-on-quiet` | `var(--lr-ramp-neutral-05)` | dark: `var(--lr-theme-color-warning-on-quiet, var(--lr-ramp-neutral-95))` |
| `--lr-duration-ambient` | `--lr-theme-duration-slow` | `1.8s` | reducedMotion: `0.001ms` |
| `--lr-duration-base` | `--lr-theme-duration-normal` | `180ms` | reducedMotion: `0.001ms` |
| `--lr-duration-fast` | `--lr-theme-duration-fast` | `120ms` | reducedMotion: `0.001ms` |
| `--lr-duration-icon` | `--lr-theme-duration-icon` | `1s` | reducedMotion: `0.001ms` |
| `--lr-easing-emphasized` | `--lr-theme-easing-emphasized` | `ease-in-out` | reducedMotion: `linear` |
| `--lr-easing-linear` | `--lr-theme-easing-linear` | `linear` | — |
| `--lr-easing-standard` | `--lr-theme-easing-standard` | `ease-out` | reducedMotion: `linear` |
| `--lr-focus-ring-color` | `--lr-theme-color-focus` | `var(--lr-color-brand)` | forcedColors: `Highlight` |
| `--lr-focus-ring-offset` | `--lr-theme-focus-ring-offset` | `2px` | — |
| `--lr-focus-ring-width` | `--lr-theme-focus-ring-width` | `2px` | — |
| `--lr-font` | `--lr-theme-font-family-body` | `system-ui, sans-serif` | — |
| `--lr-font-mono` | `--lr-theme-font-family-mono` | `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` | — |
| `--lr-font-size-2xl` | `--lr-theme-font-size-2xl` | `1.75rem` | — |
| `--lr-font-size-2xs` | `--lr-theme-font-size-2xs` | `0.625rem` | — |
| `--lr-font-size-3xl` | `--lr-theme-font-size-3xl` | `2rem` | — |
| `--lr-font-size-3xs` | `--lr-theme-font-size-3xs` | `0.5rem` | — |
| `--lr-font-size-lg` | `--lr-theme-font-size-lg` | `1.125rem` | — |
| `--lr-font-size-m` | `--lr-theme-font-size-m` | `1rem` | — |
| `--lr-font-size-md-sm` | `--lr-theme-font-size-md-sm` | `0.875rem` | — |
| `--lr-font-size-sm` | `--lr-theme-font-size-sm` | `0.8125rem` | — |
| `--lr-font-size-xl` | `--lr-theme-font-size-xl` | `1.25rem` | — |
| `--lr-font-size-xs` | `--lr-theme-font-size-xs` | `0.75rem` | — |
| `--lr-font-weight-bold` | `--lr-theme-font-weight-bold` | `700` | — |
| `--lr-font-weight-medium` | `--lr-theme-font-weight-medium` | `500` | — |
| `--lr-font-weight-normal` | `--lr-theme-font-weight-normal` | `400` | — |
| `--lr-font-weight-semibold` | `--lr-theme-font-weight-semibold` | `600` | — |
| `--lr-form-control-height-2xs` | `--lr-theme-form-control-height-2xs` | `1.25rem` | — |
| `--lr-form-control-height-l` | `--lr-theme-form-control-height-l` | `3rem` | — |
| `--lr-form-control-height-m` | `--lr-theme-form-control-height-m` | `2.5rem` | — |
| `--lr-form-control-height-s` | `--lr-theme-form-control-height-s` | `1.875rem` | — |
| `--lr-form-control-height-xl` | `--lr-theme-form-control-height-xl` | `3.5rem` | — |
| `--lr-form-control-height-xs` | `--lr-theme-form-control-height-xs` | `1.5rem` | — |
| `--lr-form-control-radius` | `--lr-theme-form-control-radius` | `var(--lr-radius)` | — |
| `--lr-graph-cat-1` | `--lr-theme-graph-cat-1` | `#8250df` | dark: `var(--lr-theme-graph-cat-1, #b58cff)`<br>forcedColors: `Highlight` |
| `--lr-graph-cat-2` | `--lr-theme-graph-cat-2` | `#bf3989` | dark: `var(--lr-theme-graph-cat-2, #ff7ab2)`<br>forcedColors: `LinkText` |
| `--lr-graph-cat-3` | `--lr-theme-graph-cat-3` | `#0a7d91` | dark: `var(--lr-theme-graph-cat-3, #4fd1c5)`<br>forcedColors: `CanvasText` |
| `--lr-graph-cat-4` | `--lr-theme-graph-cat-4` | `#57606a` | dark: `var(--lr-theme-graph-cat-4, #aab4c4)`<br>forcedColors: `Highlight` |
| `--lr-graph-cat-5` | `--lr-theme-graph-cat-5` | `#b083f5` | dark: `var(--lr-theme-graph-cat-5, #d4a7ff)`<br>forcedColors: `LinkText` |
| `--lr-graph-cat-6` | `--lr-theme-graph-cat-6` | `#f470b8` | dark: `var(--lr-theme-graph-cat-6, #ff91c8)`<br>forcedColors: `CanvasText` |
| `--lr-graph-cat-7` | `--lr-theme-graph-cat-7` | `#52d6e8` | dark: `var(--lr-theme-graph-cat-7, #79e2ef)`<br>forcedColors: `Highlight` |
| `--lr-graph-cat-8` | `--lr-theme-graph-cat-8` | `#c9d1d9` | dark: `var(--lr-theme-graph-cat-8, #e4e7eb)`<br>forcedColors: `LinkText` |
| `--lr-hover-brightness` | `--lr-theme-hover-brightness` | `1.08` | — |
| `--lr-icon-button-size` | `--lr-theme-icon-button-size` | `2.5rem` | — |
| `--lr-layer-base` | `--lr-theme-z-index-base` | `0` | — |
| `--lr-layer-content` | `--lr-theme-z-index-content` | `1` | — |
| `--lr-layer-dropdown` | `--lr-theme-z-index-dropdown` | `900` | — |
| `--lr-layer-modal` | `--lr-theme-z-index-modal` | `1000` | — |
| `--lr-layer-popover` | `--lr-theme-z-index-popover` | `1000` | — |
| `--lr-layer-toast` | `--lr-theme-z-index-toast` | `9999` | — |
| `--lr-line-height-1-4` | `--lr-theme-line-height-1-4` | `1.4` | — |
| `--lr-line-height-compact` | `--lr-theme-line-height-compact` | `1.25` | — |
| `--lr-line-height-loose` | `--lr-theme-line-height-loose` | `1.6` | — |
| `--lr-line-height-none` | `--lr-theme-line-height-none` | `1` | — |
| `--lr-line-height-normal` | `--lr-theme-line-height-normal` | `1.5` | — |
| `--lr-line-height-snug` | `--lr-theme-line-height-snug` | `1.3` | — |
| `--lr-opacity-disabled` | `--lr-theme-opacity-disabled` | `0.5` | — |
| `--lr-opacity-muted` | `--lr-theme-opacity-muted` | `0.85` | — |
| `--lr-otp-input-segment-size` | `--lr-theme-otp-input-segment-size` | `2.5em` | — |
| `--lr-popover-viewport-clamp` | `--lr-theme-popover-viewport-clamp` | `92vw` | — |
| `--lr-radius` | `--lr-theme-border-radius-m` | `0.375rem` | — |
| `--lr-radius-pill` | `--lr-theme-border-radius-pill` | `999px` | — |
| `--lr-radius-xs` | `--lr-theme-border-radius-xs` | `2px` | — |
| `--lr-scroll-fade-size` | `--lr-theme-scroll-fade-size` | `2rem` | — |
| `--lr-shadow-color` | `--lr-theme-shadow-color` | `0 0 0` | — |
| `--lr-shadow-l` | `--lr-theme-shadow-l` | `0 6px 16px rgb(var(--lr-shadow-color) / 0.18)` | dark: `var(--lr-theme-shadow-l, 0 8px 20px rgb(var(--lr-shadow-color) / 0.56))` |
| `--lr-shadow-m` | `--lr-theme-shadow-m` | `0 2px 8px rgb(var(--lr-shadow-color) / 0.15)` | dark: `var(--lr-theme-shadow-m, 0 2px 8px rgb(var(--lr-shadow-color) / 0.46))` |
| `--lr-shadow-s` | `--lr-theme-shadow-s` | `0 1px 4px rgb(var(--lr-shadow-color) / 0.14)` | dark: `var(--lr-theme-shadow-s, 0 1px 4px rgb(var(--lr-shadow-color) / 0.4))` |
| `--lr-shadow-xl` | `--lr-theme-shadow-xl` | `0 12px 32px rgb(var(--lr-shadow-color) / 0.22)` | dark: `var(--lr-theme-shadow-xl, 0 16px 40px rgb(var(--lr-shadow-color) / 0.66))` |
| `--lr-shadow-xs` | `--lr-theme-shadow-xs` | `0 1px 2px rgb(var(--lr-shadow-color) / 0.12)` | dark: `var(--lr-theme-shadow-xs, 0 1px 2px rgb(var(--lr-shadow-color) / 0.34))` |
| `--lr-size-0-02em` | `--lr-theme-size-0-02em` | `0.02em` | — |
| `--lr-size-0-03em` | `--lr-theme-size-0-03em` | `0.03em` | — |
| `--lr-size-0-04em` | `--lr-theme-size-0-04em` | `0.04em` | — |
| `--lr-size-0-05rem` | `--lr-theme-size-0-05rem` | `0.05rem` | — |
| `--lr-size-0-0625rem` | `--lr-theme-size-0-0625rem` | `0.0625rem` | — |
| `--lr-size-0-09375rem` | `--lr-theme-size-0-09375rem` | `0.09375rem` | — |
| `--lr-size-0-125rem` | `--lr-theme-size-0-125rem` | `0.125rem` | — |
| `--lr-size-0-15rem` | `--lr-theme-size-0-15rem` | `0.15rem` | — |
| `--lr-size-0-1875rem` | `--lr-theme-size-0-1875rem` | `0.1875rem` | — |
| `--lr-size-0-1rem` | `--lr-theme-size-0-1rem` | `0.1rem` | — |
| `--lr-size-0-25rem` | `--lr-theme-size-0-25rem` | `0.25rem` | — |
| `--lr-size-0-3125rem` | `--lr-theme-size-0-3125rem` | `0.3125rem` | — |
| `--lr-size-0-35em` | `--lr-theme-size-0-35em` | `0.35em` | — |
| `--lr-size-0-375rem` | `--lr-theme-size-0-375rem` | `0.375rem` | — |
| `--lr-size-0-3em` | `--lr-theme-size-0-3em` | `0.3em` | — |
| `--lr-size-0-4375rem` | `--lr-theme-size-0-4375rem` | `0.4375rem` | — |
| `--lr-size-0-4em` | `--lr-theme-size-0-4em` | `0.4em` | — |
| `--lr-size-0-4rem` | `--lr-theme-size-0-4rem` | `0.4rem` | — |
| `--lr-size-0-5em` | `--lr-theme-size-0-5em` | `0.5em` | — |
| `--lr-size-0-5rem` | `--lr-theme-size-0-5rem` | `0.5rem` | — |
| `--lr-size-0-625rem` | `--lr-theme-size-0-625rem` | `0.625rem` | — |
| `--lr-size-0-6875rem` | `--lr-theme-size-0-6875rem` | `0.6875rem` | — |
| `--lr-size-0-6rem` | `--lr-theme-size-0-6rem` | `0.6rem` | — |
| `--lr-size-0-75em` | `--lr-theme-size-0-75em` | `0.75em` | — |
| `--lr-size-0-75rem` | `--lr-theme-size-0-75rem` | `0.75rem` | — |
| `--lr-size-0-7em` | `--lr-theme-size-0-7em` | `0.7em` | — |
| `--lr-size-0-875em` | `--lr-theme-size-0-875em` | `0.875em` | — |
| `--lr-size-0-8rem` | `--lr-theme-size-0-8rem` | `0.8rem` | — |
| `--lr-size-0-9375rem` | `--lr-theme-size-0-9375rem` | `0.9375rem` | — |
| `--lr-size-1-0625rem` | `--lr-theme-size-1-0625rem` | `1.0625rem` | — |
| `--lr-size-1-1rem` | `--lr-theme-size-1-1rem` | `1.1rem` | — |
| `--lr-size-1-25rem` | `--lr-theme-size-1-25rem` | `1.25rem` | — |
| `--lr-size-1-5em` | `--lr-theme-size-1-5em` | `1.5em` | — |
| `--lr-size-1-5rem` | `--lr-theme-size-1-5rem` | `1.5rem` | — |
| `--lr-size-1-75rem` | `--lr-theme-size-1-75rem` | `1.75rem` | — |
| `--lr-size-1-875rem` | `--lr-theme-size-1-875rem` | `1.875rem` | — |
| `--lr-size-10px` | `--lr-theme-size-10px` | `10px` | — |
| `--lr-size-10rem` | `--lr-theme-size-10rem` | `10rem` | — |
| `--lr-size-12em` | `--lr-theme-size-12em` | `12em` | — |
| `--lr-size-12rem` | `--lr-theme-size-12rem` | `12rem` | — |
| `--lr-size-14px` | `--lr-theme-size-14px` | `14px` | — |
| `--lr-size-14rem` | `--lr-theme-size-14rem` | `14rem` | — |
| `--lr-size-15rem` | `--lr-theme-size-15rem` | `15rem` | — |
| `--lr-size-16px` | `--lr-theme-size-16px` | `16px` | — |
| `--lr-size-16rem` | `--lr-theme-size-16rem` | `16rem` | — |
| `--lr-size-18rem` | `--lr-theme-size-18rem` | `18rem` | — |
| `--lr-size-1em` | `--lr-theme-size-1em` | `1em` | — |
| `--lr-size-1px` | `--lr-theme-size-1px` | `1px` | — |
| `--lr-size-1rem` | `--lr-theme-size-1rem` | `1rem` | — |
| `--lr-size-2-25rem` | `--lr-theme-size-2-25rem` | `2.25rem` | — |
| `--lr-size-2-5ch` | `--lr-theme-size-2-5ch` | `2.5ch` | — |
| `--lr-size-2-5rem` | `--lr-theme-size-2-5rem` | `2.5rem` | — |
| `--lr-size-20rem` | `--lr-theme-size-20rem` | `20rem` | — |
| `--lr-size-22rem` | `--lr-theme-size-22rem` | `22rem` | — |
| `--lr-size-24px` | `--lr-theme-size-24px` | `24px` | — |
| `--lr-size-24rem` | `--lr-theme-size-24rem` | `24rem` | — |
| `--lr-size-280px` | `--lr-theme-size-280px` | `280px` | — |
| `--lr-size-28px` | `--lr-theme-size-28px` | `28px` | — |
| `--lr-size-28rem` | `--lr-theme-size-28rem` | `28rem` | — |
| `--lr-size-2px` | `--lr-theme-size-2px` | `2px` | — |
| `--lr-size-2rem` | `--lr-theme-size-2rem` | `2rem` | — |
| `--lr-size-3-5em` | `--lr-theme-size-3-5em` | `3.5em` | — |
| `--lr-size-3-5rem` | `--lr-theme-size-3-5rem` | `3.5rem` | — |
| `--lr-size-30rem` | `--lr-theme-size-30rem` | `30rem` | — |
| `--lr-size-32rem` | `--lr-theme-size-32rem` | `32rem` | — |
| `--lr-size-36rem` | `--lr-theme-size-36rem` | `36rem` | — |
| `--lr-size-38rem` | `--lr-theme-size-38rem` | `38rem` | — |
| `--lr-size-3ch` | `--lr-theme-size-3ch` | `3ch` | — |
| `--lr-size-3px` | `--lr-theme-size-3px` | `3px` | — |
| `--lr-size-3rem` | `--lr-theme-size-3rem` | `3rem` | — |
| `--lr-size-48rem` | `--lr-theme-size-48rem` | `48rem` | — |
| `--lr-size-4ch` | `--lr-theme-size-4ch` | `4ch` | — |
| `--lr-size-4px` | `--lr-theme-size-4px` | `4px` | — |
| `--lr-size-4rem` | `--lr-theme-size-4rem` | `4rem` | — |
| `--lr-size-5em` | `--lr-theme-size-5em` | `5em` | — |
| `--lr-size-5rem` | `--lr-theme-size-5rem` | `5rem` | — |
| `--lr-size-6ch` | `--lr-theme-size-6ch` | `6ch` | — |
| `--lr-size-6em` | `--lr-theme-size-6em` | `6em` | — |
| `--lr-size-6px` | `--lr-theme-size-6px` | `6px` | — |
| `--lr-size-6rem` | `--lr-theme-size-6rem` | `6rem` | — |
| `--lr-size-7rem` | `--lr-theme-size-7rem` | `7rem` | — |
| `--lr-size-8em` | `--lr-theme-size-8em` | `8em` | — |
| `--lr-size-8rem` | `--lr-theme-size-8rem` | `8rem` | — |
| `--lr-size-neg-0-15rem` | `--lr-theme-size-neg-0-15rem` | `-0.15rem` | — |
| `--lr-size-neg-0-25rem` | `--lr-theme-size-neg-0-25rem` | `-0.25rem` | — |
| `--lr-size-neg-1px` | `--lr-theme-size-neg-1px` | `-1px` | — |
| `--lr-size-neg-4px` | `--lr-theme-size-neg-4px` | `-4px` | — |
| `--lr-size-neg-6px` | `--lr-theme-size-neg-6px` | `-6px` | — |
| `--lr-size-neg-8px` | `--lr-theme-size-neg-8px` | `-8px` | — |
| `--lr-space-2xl` | `--lr-theme-space-2xl` | `2rem` | — |
| `--lr-space-2xs` | `--lr-theme-space-2xs` | `0.125rem` | — |
| `--lr-space-l` | `--lr-theme-space-l` | `1rem` | — |
| `--lr-space-m` | `--lr-theme-space-m` | `0.75rem` | — |
| `--lr-space-s` | `--lr-theme-space-s` | `0.5rem` | — |
| `--lr-space-xs` | `--lr-theme-space-xs` | `0.25rem` | — |
| `--lr-terminal-bg-black` | `--lr-theme-terminal-bg-black` | `#868686` | dark: `var(--lr-theme-terminal-bg-black, #292929)` |
| `--lr-terminal-bg-blue` | `--lr-theme-terminal-bg-blue` | `#88a6d4` | dark: `var(--lr-theme-terminal-bg-blue, #324e76)` |
| `--lr-terminal-bg-bright-black` | `--lr-theme-terminal-bg-bright-black` | `#9e9e9e` | dark: `var(--lr-theme-terminal-bg-bright-black, #3d3d3d)` |
| `--lr-terminal-bg-bright-blue` | `--lr-theme-terminal-bg-bright-blue` | `#a2c6fb` | dark: `var(--lr-theme-terminal-bg-bright-blue, #446493)` |
| `--lr-terminal-bg-bright-cyan` | `--lr-theme-terminal-bg-bright-cyan` | `#8dd2da` | dark: `var(--lr-theme-terminal-bg-bright-cyan, #286f76)` |
| `--lr-terminal-bg-bright-green` | `--lr-theme-terminal-bg-bright-green` | `#a4d2a4` | dark: `var(--lr-theme-terminal-bg-bright-green, #456f46)` |
| `--lr-terminal-bg-bright-magenta` | `--lr-theme-terminal-bg-bright-magenta` | `#d6b4f0` | dark: `var(--lr-theme-terminal-bg-bright-magenta, #73548a)` |
| `--lr-terminal-bg-bright-red` | `--lr-theme-terminal-bg-bright-red` | `#f9aea5` | dark: `var(--lr-theme-terminal-bg-bright-red, #904e47)` |
| `--lr-terminal-bg-bright-white` | `--lr-theme-terminal-bg-bright-white` | `#d1d1d1` | dark: `var(--lr-theme-terminal-bg-bright-white, #696969)` |
| `--lr-terminal-bg-bright-yellow` | `--lr-theme-terminal-bg-bright-yellow` | `#d8c288` | dark: `var(--lr-theme-terminal-bg-bright-yellow, #756127)` |
| `--lr-terminal-bg-cyan` | `--lr-theme-terminal-bg-cyan` | `#77b0b6` | dark: `var(--lr-theme-terminal-bg-cyan, #1c565d)` |
| `--lr-terminal-bg-green` | `--lr-theme-terminal-bg-green` | `#89b18a` | dark: `var(--lr-theme-terminal-bg-green, #335735)` |
| `--lr-terminal-bg-magenta` | `--lr-theme-terminal-bg-magenta` | `#b497cb` | dark: `var(--lr-theme-terminal-bg-magenta, #5a406e)` |
| `--lr-terminal-bg-red` | `--lr-theme-terminal-bg-red` | `#d2918a` | dark: `var(--lr-theme-terminal-bg-red, #733a35)` |
| `--lr-terminal-bg-white` | `--lr-theme-terminal-bg-white` | `#b7b7b7` | dark: `var(--lr-theme-terminal-bg-white, #525252)` |
| `--lr-terminal-bg-yellow` | `--lr-theme-terminal-bg-yellow` | `#b6a372` | dark: `var(--lr-theme-terminal-bg-yellow, #5c4b1a)` |
| `--lr-terminal-color-black` | `--lr-theme-terminal-color-black` | `#2b2b2b` | dark: `var(--lr-theme-terminal-color-black, #929292)` |
| `--lr-terminal-color-blue` | `--lr-theme-terminal-color-blue` | `#06489c` | dark: `var(--lr-theme-terminal-color-blue, #69a5fe)` |
| `--lr-terminal-color-bright-black` | `--lr-theme-terminal-color-bright-black` | `#404040` | dark: `var(--lr-theme-terminal-color-bright-black, #ababab)` |
| `--lr-terminal-color-bright-blue` | `--lr-theme-terminal-color-bright-blue` | `#145ec1` | dark: `var(--lr-theme-terminal-color-bright-blue, #a0c6fe)` |
| `--lr-terminal-color-bright-cyan` | `--lr-theme-terminal-color-bright-cyan` | `#04717a` | dark: `var(--lr-theme-terminal-color-bright-cyan, #00ddef)` |
| `--lr-terminal-color-bright-green` | `--lr-theme-terminal-color-bright-green` | `#01791e` | dark: `var(--lr-theme-terminal-color-bright-green, #7cdf81)` |
| `--lr-terminal-color-bright-magenta` | `--lr-theme-terminal-color-bright-magenta` | `#823bae` | dark: `var(--lr-theme-terminal-color-bright-magenta, #dcaefe)` |
| `--lr-terminal-color-bright-red` | `--lr-theme-terminal-color-bright-red` | `#b32322` | dark: `var(--lr-theme-terminal-color-bright-red, #ffaba1)` |
| `--lr-terminal-color-bright-white` | `--lr-theme-terminal-color-bright-white` | `#6c6c6c` | dark: `var(--lr-theme-terminal-color-bright-white, #dedede)` |
| `--lr-terminal-color-bright-yellow` | `--lr-theme-terminal-color-bright-yellow` | `#796005` | dark: `var(--lr-theme-terminal-color-bright-yellow, #ecbe24)` |
| `--lr-terminal-color-cyan` | `--lr-theme-terminal-color-cyan` | `#02585f` | dark: `var(--lr-theme-terminal-color-cyan, #17bac8)` |
| `--lr-terminal-color-green` | `--lr-theme-terminal-color-green` | `#015e15` | dark: `var(--lr-theme-terminal-color-green, #67bb6b)` |
| `--lr-terminal-color-magenta` | `--lr-theme-terminal-color-magenta` | `#67298c` | dark: `var(--lr-theme-terminal-color-magenta, #c385ef)` |
| `--lr-terminal-color-red` | `--lr-theme-terminal-color-red` | `#901114` | dark: `var(--lr-theme-terminal-color-red, #f9786c)` |
| `--lr-terminal-color-white` | `--lr-theme-terminal-color-white` | `#555555` | dark: `var(--lr-theme-terminal-color-white, #c4c4c4)` |
| `--lr-terminal-color-yellow` | `--lr-theme-terminal-color-yellow` | `#5f4a03` | dark: `var(--lr-theme-terminal-color-yellow, #c7a01e)` |
| `--lr-transition-ambient` | `--lr-theme-transition-slow` | `var(--lr-duration-ambient) var(--lr-easing-emphasized)` | reducedMotion: `0.001ms linear` |
| `--lr-transition-base` | `--lr-theme-transition-normal` | `var(--lr-duration-base) var(--lr-easing-standard)` | reducedMotion: `0.001ms linear` |
| `--lr-transition-fast` | `--lr-theme-transition-fast` | `var(--lr-duration-fast) var(--lr-easing-standard)` | reducedMotion: `0.001ms linear` |

## Derived and fixed tokens (77)

These do not directly read a `--lr-theme-*` input. Aliases and computed values still follow
the tokens or environment values they reference; fixed contract constants are intentionally
not theme inputs.

| Token | Light/default value | Mode overrides |
|---|---|---|
| `--lr-color-brand` | `var(--lr-color-brand-fill-loud)` | forcedColors: `LinkText` |
| `--lr-color-brand-quiet` | `var(--lr-color-brand-fill-quiet)` | forcedColors: `Canvas` |
| `--lr-color-danger` | `var(--lr-color-danger-fill-loud)` | forcedColors: `LinkText` |
| `--lr-color-danger-quiet` | `var(--lr-color-danger-fill-quiet)` | forcedColors: `Canvas` |
| `--lr-color-neutral` | `var(--lr-color-neutral-fill-loud)` | forcedColors: `ButtonText` |
| `--lr-color-on-brand` | `var(--lr-color-brand-on-loud)` | forcedColors: `Canvas` |
| `--lr-color-on-danger` | `var(--lr-color-danger-on-loud)` | forcedColors: `Canvas` |
| `--lr-color-on-neutral` | `var(--lr-color-neutral-on-loud)` | forcedColors: `Canvas` |
| `--lr-color-on-success` | `var(--lr-color-success-on-loud)` | forcedColors: `Canvas` |
| `--lr-color-on-warning` | `var(--lr-color-warning-on-loud)` | forcedColors: `Canvas` |
| `--lr-color-success` | `var(--lr-color-success-fill-loud)` | forcedColors: `LinkText` |
| `--lr-color-success-quiet` | `var(--lr-color-success-fill-quiet)` | forcedColors: `Canvas` |
| `--lr-color-warning` | `var(--lr-color-warning-fill-loud)` | forcedColors: `CanvasText` |
| `--lr-color-warning-quiet` | `var(--lr-color-warning-fill-quiet)` | forcedColors: `Canvas` |
| `--lr-focus-ring` | `var(--lr-focus-ring-width) solid var(--lr-focus-ring-color)` | — |
| `--lr-mask-opaque` | `#000` | — |
| `--lr-ramp-brand-05` | `#000002` | — |
| `--lr-ramp-brand-10` | `#00030f` | — |
| `--lr-ramp-brand-20` | `#001436` | — |
| `--lr-ramp-brand-30` | `#002b62` | — |
| `--lr-ramp-brand-40` | `#034492` | — |
| `--lr-ramp-brand-50` | `#035ec6` | — |
| `--lr-ramp-brand-60` | `#2d7de9` | — |
| `--lr-ramp-brand-70` | `#5b9eff` | — |
| `--lr-ramp-brand-80` | `#95c0fe` | — |
| `--lr-ramp-brand-90` | `#cae0ff` | — |
| `--lr-ramp-brand-95` | `#e5efff` | — |
| `--lr-ramp-danger-05` | `#020000` | — |
| `--lr-ramp-danger-10` | `#0d0000` | — |
| `--lr-ramp-danger-20` | `#320003` | — |
| `--lr-ramp-danger-30` | `#5c010a` | — |
| `--lr-ramp-danger-40` | `#890415` | — |
| `--lr-ramp-danger-50` | `#bb0320` | — |
| `--lr-ramp-danger-60` | `#dc3e41` | — |
| `--lr-ramp-danger-70` | `#f86b66` | — |
| `--lr-ramp-danger-80` | `#ffa099` | — |
| `--lr-ramp-danger-90` | `#ffd2cd` | — |
| `--lr-ramp-danger-95` | `#ffe9e6` | — |
| `--lr-ramp-neutral-05` | `#000001` | — |
| `--lr-ramp-neutral-10` | `#030304` | — |
| `--lr-ramp-neutral-20` | `#151619` | — |
| `--lr-ramp-neutral-30` | `#2c2e31` | — |
| `--lr-ramp-neutral-40` | `#46484c` | — |
| `--lr-ramp-neutral-50` | `#616368` | — |
| `--lr-ramp-neutral-60` | `#7e8085` | — |
| `--lr-ramp-neutral-70` | `#9c9ea3` | — |
| `--lr-ramp-neutral-80` | `#bcbec1` | — |
| `--lr-ramp-neutral-90` | `#dcdee1` | — |
| `--lr-ramp-neutral-95` | `#edeef1` | — |
| `--lr-ramp-success-05` | `#000100` | — |
| `--lr-ramp-success-10` | `#000501` | — |
| `--lr-ramp-success-20` | `#001d06` | — |
| `--lr-ramp-success-30` | `#013912` | — |
| `--lr-ramp-success-40` | `#00571f` | — |
| `--lr-ramp-success-50` | `#0c7830` | — |
| `--lr-ramp-success-60` | `#3e9550` | — |
| `--lr-ramp-success-70` | `#67b374` | — |
| `--lr-ramp-success-80` | `#91d09a` | — |
| `--lr-ramp-success-90` | `#bdecc2` | — |
| `--lr-ramp-success-95` | `#d3fbd8` | — |
| `--lr-ramp-warning-05` | `#010000` | — |
| `--lr-ramp-warning-10` | `#060300` | — |
| `--lr-ramp-warning-20` | `#211300` | — |
| `--lr-ramp-warning-30` | `#402801` | — |
| `--lr-ramp-warning-40` | `#624001` | — |
| `--lr-ramp-warning-50` | `#855905` | — |
| `--lr-ramp-warning-60` | `#a77526` | — |
| `--lr-ramp-warning-70` | `#c39554` | — |
| `--lr-ramp-warning-80` | `#ddb781` | — |
| `--lr-ramp-warning-90` | `#f7d9b0` | — |
| `--lr-ramp-warning-95` | `#ffebd2` | — |
| `--lr-safe-area-bottom` | `env(safe-area-inset-bottom, 0px)` | — |
| `--lr-safe-area-inline-end` | `env(safe-area-inset-right, 0px)` | — |
| `--lr-safe-area-inline-start` | `env(safe-area-inset-left, 0px)` | — |
| `--lr-safe-area-top` | `env(safe-area-inset-top, 0px)` | — |
| `--lr-shadow` | `var(--lr-shadow-m)` | — |
| `--lr-transition-interactive` | `background-color var(--lr-transition-fast), color var(--lr-transition-fast), border-color var(--lr-transition-fast)` | — |