{ "_groups": { "Core tokens | Resolved color tokens": "High-level semantic color aliases. Each resolves to the matching palette source token and adapts automatically between light and dark mode. Start here when applying your brand palette.", "Core tokens | action": "Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and tint variants for primary interactive elements.", "Core tokens | base": "Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and tint variants for secondary interactive elements.", "Core tokens | primary": "Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and tint variants for the primary palette role.", "Core tokens | secondary": "Semantic secondary-color scale derived from --sf-color-secondary.", "Core tokens | neutral": "Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.", "Core tokens | tertiary": "Semantic tertiary-color scale derived from --sf-color-tertiary.", "Core tokens | BRAND COLORS (-light source tokens, animatable)": "OKLCH lightness source tokens for each brand role. Animating these drives smooth color-scheme transitions without re-painting every dependent token.", "Core tokens | STATUS COLORS (-light source tokens)": "OKLCH lightness sources for status colors (danger, info, success, warning). Same animation mechanism as brand light tokens.", "Core tokens | DARK SOURCE TOKENS (-dark, animatable)": "OKLCH dark source tokens for brand and status colors. Registered as typed so scoped [data-theme=\"dark\"] sections inherit correct absolute values rather than an unresolved var() text string.", "Core tokens | Status triplets": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.", "Core tokens | Text": "Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.", "Core tokens | Surfaces": "Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.", "Core tokens | Borders": "Semantic border colors for dividers, component edges, and focus indicators.", "Core tokens | Border alpha tokens": "Semi-transparent border variants for overlays and glass-morphism effects.", "Core tokens | Links": "Colors and text-decoration properties for hyperlinks in every interactive state.", "Core tokens | Selection & backdrop": "Absolute reference colors and overlay tints for selections, marks, and backdrops.", "Core tokens | Interactive states": "Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.", "Core tokens | Text-on-color": "Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.", "Core tokens | Focus / form colors": "Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.", "Core tokens | Spacing": "Fluid spacing scale from 0 to 4xl. Prefer these tokens over raw values to keep the rhythm consistent across breakpoints.", "Core tokens | Spacing aliases": "Named semantic aliases over the spacing scale (component padding, section gap, etc.) for common layout patterns.", "Core tokens | Font families": "Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.", "Core tokens | Font weights": "Numeric font-weight scale plus named aliases for common roles.", "Core tokens | Font sizes": "Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.", "Core tokens | Line heights & letter spacing": "Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.", "Core tokens | TYPOGRAPHY ALIASES": "Part of the per-style typography bundle for a named text role (body, code, heading, h1–h6, display). The full bundle spans font-family, size, weight, line-height, and letter-spacing across related tokens.", "Core tokens | Border radius": "Border-radius scale from xs hairline to full circle. Stick to this scale so UI elements share a consistent curvature language.", "Core tokens | Border shorthands": "Ready-to-use border shorthand values (width + style + color) for the three most common border weights.", "Core tokens | Border widths": "Raw border-width values. Use the shorthands above unless you need to override just the width.", "Core tokens | Stroke widths": "SVG stroke-width scale for icons and illustrations.", "Core tokens | Shadow": "Base shadow opacity and glow tint. --sf-shadow-strength auto-increases in dark mode to compensate for dark surfaces; --sf-shadow-glow-color sets the glow tint (defaults to primary).", "Core tokens | Shadow ramp": "Elevation box-shadow ramp (none, xs–2xl, inner) plus text-shadow and drop-shadow presets. All opacity values scale with --sf-shadow-strength so dark-mode boost is automatic.", "Core tokens | Opacity": "Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements.", "Core tokens | Text shadows": "Text-shadow and drop-shadow (filter) presets. Drop-shadows respect alpha edges — prefer them over box-shadow for SVGs and cut-out images.", "Core tokens | Gradients": "Pre-built gradient shorthands for brand fills and directional fade effects.", "Core tokens | Blur & opacity": "Backdrop-filter blur scale and background-opacity tokens.", "Core tokens | Animation presets": "Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.", "Core tokens | Motion & easing": "Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.", "Core tokens | Transition shorthands": "Pre-built transition shorthand values for the most common animated properties.", "Core tokens | Icon sizes": "Standard icon sizes tied to the type scale.", "Core tokens | UI sizes": "Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.", "Core tokens | Containers": "Max-width container tokens for page-level layout.", "Core tokens | Section padding": "Vertical padding for full-width page sections at each responsive tier.", "Core tokens | Aspect ratios": "Named aspect-ratio values for images, video embeds, and card thumbnails.", "Core tokens | Z-index": "Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.", "Core tokens | Layout & a11y": "Focus ring, header height, sticky offset, touch-target, text-contrast knobs, and device safe-area insets. These govern keyboard accessibility, scroll behaviour, and adaptive contrast globally.", "Core tokens | Object fit / position": "Defaults for object-fit and object-position on replaced elements (img, video).", "Core tokens | CSS multi-column": "CSS multi-column layout tokens (column-rule widths).", "Core tokens | Scrollbar": "Custom scrollbar thumb and track colors.", "Core tokens | Divider": "Horizontal/vertical rule (divider) properties.", "Core tokens | Color scheme": "Preferred color-scheme hint sent to the browser (light / dark / normal).", "Core tokens | Selection": "Text-selection background color.", "Core tokens | Code text": "Foreground color for inline code and pre-formatted text.", "Core tokens | Border style": "Global border-style default (solid, dashed, etc.).", "Palette tokens | action": "Full numeric shade scale (50–950) plus alpha variants (a5–a95) for the action palette. Use via --sf-color-action-* for component-level overrides.", "Palette tokens | base": "Full numeric shade scale plus alpha variants for the base palette.", "Palette tokens | primary": "Full numeric shade scale plus alpha variants for the primary palette.", "Palette tokens | secondary": "Full numeric shade scale plus alpha variants for the secondary palette.", "Palette tokens | neutral": "Full numeric shade scale plus alpha variants for the neutral palette.", "Palette tokens | tertiary": "Full numeric shade scale plus alpha variants for the tertiary palette.", "Layout tokens | Spacing aliases": "Contextual aliases mapping layout-specific use-cases to the global spacing scale.", "Layout tokens | Bento grid": "Configuration tokens for the bento-grid layout primitive.", "Layout tokens | Grid (auto-fill, breakpoint-free)": "Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.", "Layout tokens | Sidebar": "Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).", "Layout tokens | Stack": "Gap for the stack layout primitive (vertically stacked blocks).", "Layout tokens | Cluster": "Configuration tokens for the cluster layout (inline wrapped items).", "Layout tokens | Switcher": "Configuration tokens for the switcher layout (horizontal → vertical breakpoint).", "Layout tokens | Reel": "Configuration tokens for the reel layout (horizontal scroll container).", "Layout tokens | Center": "Max-width and gutter for the center layout primitive.", "Layout tokens | Cover": "Min-height and padding for the full-viewport cover layout.", "Layout tokens | Alternate (zigzag)": "Gap tokens for the alternating content/media (zigzag) layout.", "Layout tokens | Frame": "Aspect ratio for the frame layout primitive (media container).", "Layout tokens | Gap": "Shared gap token consumed by multiple layout primitives.", "Layout tokens | Equal columns (fixed, non-responsive)": "Configuration for a fixed N-column equal-width layout.", "Layout tokens | Icon (boxed variant)": "Background, border, and padding for boxed icon containers.", "Layout tokens | Box": "Border, background, and padding tokens for the box layout primitive.", "Layout tokens | Content grid (breakout pattern)": "Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).", "Layout tokens | Imposter (centered absolute/fixed overlay)": "Margin for the imposter layout (centered fixed/absolute overlay).", "Layout tokens | Prose": "Max-width for the prose layout primitive (long-form reading column).", "Macro tokens | Flow": "Vertical rhythm gap between flow children (margin-block-start on all but the first child).", "Macro tokens | Prose": "Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).", "Macro tokens | Aspect ratio": "Aspect-ratio value for the .aspect-ratio macro.", "Macro tokens | Scrim": "Gradient scrim configuration (direction, size, color) for overlaying images with readable text.", "Macro tokens | Scroll shadow / overflow fade": "Size of the scroll-shadow fade effect on overflowing containers.", "Macro tokens | Content visibility": "intrinsic-size hint for content-visibility: auto (lazy off-screen rendering).", "Macro tokens | Line clamp": "Number of lines before text truncates with an ellipsis.", "Component tokens | BUTTON TOKENS": "Sizing and geometry tokens — padding, min-height, label size, radius, gap, and border width — that control button appearance, including per-size (xs…xl) knobs. Override these to give buttons a distinct visual language from form fields.", "Component tokens | FIELD TOKENS": "Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.", "Core tokens | Link alpha token": "Semi-transparent underline color token used to tint the link underline independently from the link text color.", "Core tokens | Selection & mark": "Background and text colors for browser text selections and highlights. Adapts automatically in dark mode.", "Core tokens | FLUID SCALE ENGINE": "Generative inputs that drive all fluid clamp() type and spacing scales at runtime. Override the base, ratio, and viewport range tokens to globally rescale the entire system without touching individual step tokens.", "Core tokens | Heading line-length constraints": "Per-heading max-inline-size caps. Default none (unconstrained). Set to a ch value to cap a heading level's line length for readability on wide screens.", "Core tokens | LumLocker": "OKLCH lightness lock for the data-lumlocker attribute. Pins surface brightness to a fixed L value — useful for always-dark or always-light sections that must stay stable while the rest of the page switches color-scheme.", "Core tokens | Mask scrim": "Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.", "Core tokens | Scale multipliers": "Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.", "Core tokens | Print": "Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.", "Core tokens | Full/pill": "Topological constants for rounding: full (50%) for circles, pill (9999px) for tags. Also provides --sf-radius-outer, a concentric-radius helper for outer containers wrapping inner rounded elements.", "Core tokens | Scroll-driven animation range": "animation-range start and end positions for scroll-driven entrance effects (animation-timeline: view()). Controls how far into the viewport an element must scroll before its entrance animation starts and ends.", "Core tokens | Shadow ramp (box-shadow, text-shadow, drop-shadow)": "Elevation box-shadow ramp from xs to 2xl plus inner, text-shadow, and drop-shadow presets. All opacity values scale with --sf-shadow-strength so dark-mode contrast boost is automatic.", "Core tokens | Shadow glow": "Glow box-shadow shorthand for decorative glow effects. Uses --sf-shadow-glow-color as the tint and adapts opacity with --sf-shadow-strength.", "Core tokens | Shadow glow color": "Tint color used by --sf-shadow-glow. Override to retint glows; opacity and dark-mode adaptation are handled automatically.", "Core tokens | Shadow strength": "Base opacity for the shadow ramp. --sf-shadow-lightness controls tonal density; --sf-shadow-strength is auto-boosted in dark mode so elevation reads on dark surfaces.", "Layout tokens | Equal columns (intrinsically responsive RAM)": "Minimum column-width tokens for the equal-columns layout. The RAM pattern (repeat(auto-fill, minmax(min, 1fr))) auto-fills columns; the actual count emerges from the minimum width and available space.", "Layout tokens | Shared spacing aliases": "Layout-scoped semantic aliases for spacing patterns shared across multiple layout primitives.", "Macro tokens | Surface color": "Input color for the generic .sf-surface macro. Set any color value; the macro derives the background, auto-contrast foreground, and contextual token set from it.", "Macro tokens | Truncate": "Truncation suffix character for the .sf-truncate line-clamp macro. Default is the ellipsis character (…).", "Palette tokens | Palette shade mix percentages": "color-mix() interpolation weights for each numeric shade step (50–950). Override to reshape the tint/shade curve without rewriting individual palette tokens.", "Sizes-extended tokens | Spacing bridges": "Fluid clamp() values that interpolate between any two spacing scale steps (--sf-space-{larger}-to-{smaller}). Use to set a gap that smoothly narrows as the viewport shrinks, without a breakpoint.", "Sizes-extended tokens | Text bridges": "Fluid clamp() values interpolating between any two font-size scale steps (--sf-text-{larger}-to-{smaller}). Use for headings or labels that need to transition smoothly between two named type sizes.", "Sizes-extended tokens | Per-text-size sub-properties": "Fine-grained typography sub-property tokens for each text scale step: font-weight, letter-spacing, line-height, and max-width. Tune a specific size's typographic properties without affecting others." }, "tokens": { "--sf-color-action": "Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.", "--sf-color-base": "Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role.", "--sf-color-neutral": "Neutral interactive color for low-emphasis actions and tertiary buttons.", "--sf-color-primary": "Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles.", "--sf-color-secondary": "Raw secondary palette token for the secondary brand color.", "--sf-color-tertiary": "Raw tertiary palette token for the third brand color.", "--sf-color-danger": "Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.", "--sf-color-warning": "Warning / caution color for non-critical alerts and degraded-state indicators.", "--sf-color-success": "Positive / success color for confirmation messages and completed-state indicators.", "--sf-color-info": "Informational color for neutral tips, hints, and non-urgent notices.", "--sf-color-surface": "Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.", "--sf-color-text": "Primary text color. Contrasts against --sf-color-bg for body copy.", "--sf-color-heading": "Heading text color. Slightly stronger contrast than body text for visual hierarchy.", "--sf-color-text--subtle": "De-emphasised, lower-emphasis text (captions, labels, supporting copy). Second tier below --sf-color-text; sits between it and --sf-color-text--muted.", "--sf-color-text--muted": "Muted text for metadata, timestamps, and low-priority annotations.", "--sf-color-text--disabled": "Text color for disabled UI elements. Intentionally low contrast.", "--sf-color-text--placeholder": "Placeholder text color for inputs and textareas.", "--sf-color-text--inverse": "Text color for use on dark/inverted backgrounds.", "--sf-color-bg": "Base page / component background. The canvas all other surfaces layer on top of.", "--sf-color-inset": "Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.", "--sf-color-inverse": "Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.", "--sf-color-raised": "Elevated card surface that floats above the page background.", "--sf-color-overlay": "Overlay surface for floating panels, sheets, and modals.", "--sf-color-border": "Default border for dividers and component edges.", "--sf-color-border--strong": "Stronger border for visually prominent edges and active outlines.", "--sf-color-border--subtle": "Low-contrast border for subtle separation without strong visual weight.", "--sf-color-border--focus": "Focus indicator border, used alongside --sf-focus-ring-color.", "--sf-color-border--disabled": "Semi-transparent border for disabled element edges.", "--sf-color-border--translucent": "Translucent border for glass-morphism and frosted surfaces.", "--sf-color-link": "Default hyperlink color.", "--sf-color-link--hover": "Link color on hover.", "--sf-color-link--active": "Link color when actively pressed.", "--sf-color-link--visited": "Visited link color.", "--sf-color-link--disabled": "Disabled link color (low contrast, no interaction).", "--sf-link-underline-offset": "Vertical offset of the link underline from the text baseline.", "--sf-link-underline-thickness": "Stroke width of the link underline.", "--sf-color-black": "Absolute black reference value.", "--sf-color-white": "Absolute white reference value.", "--sf-color-selection-text": "Text color inside browser text selections.", "--sf-color-mark-text": "Text color inside highlighted elements.", "--sf-color-bg--hover": "Background tint for hovered interactive elements (rows, list items, etc.).", "--sf-color-bg--focus": "Background tint for focused interactive elements.", "--sf-color-bg--active": "Background tint for pressed/active interactive elements.", "--sf-color-bg--selected": "Background for selected items (checked rows, active nav links).", "--sf-color-bg--disabled": "Background for disabled interactive elements.", "--sf-color-text--on-action": "Accessible foreground color for text on action-colored backgrounds.", "--sf-color-text--on-base": "Accessible foreground for text on base-colored backgrounds.", "--sf-color-text--on-danger": "Accessible foreground for text on danger-colored backgrounds.", "--sf-color-text--on-info": "Accessible foreground for text on info-colored backgrounds.", "--sf-color-text--on-success": "Accessible foreground for text on success-colored backgrounds.", "--sf-color-text--on-warning": "Accessible foreground for text on warning-colored backgrounds.", "--sf-color-action-source-light": "OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.", "--sf-color-base-source-light": "OKLCH source color for the light-mode base surface. Keep near-white so --sf-color-bg, --sf-color-surface, and raised/inset levels have room to separate.", "--sf-color-neutral-source-light": "OKLCH lightness source for the neutral color.", "--sf-color-primary-source-light": "OKLCH lightness source for the primary color.", "--sf-color-secondary-source-light": "OKLCH lightness source for the secondary color.", "--sf-color-tertiary-source-light": "OKLCH lightness source for the tertiary color.", "--sf-color-danger-source-light": "OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).", "--sf-color-info-source-light": "OKLCH lightness source for the info status color.", "--sf-color-success-source-light": "OKLCH lightness source for the success status color.", "--sf-color-warning-source-light": "OKLCH lightness source for the warning status color.", "--sf-color-danger-subtle": "Light danger tint for error row backgrounds and alert container fills.", "--sf-color-danger-muted": "Medium danger fill for icon backgrounds and badge fills.", "--sf-color-danger-strong": "High-contrast danger color for alert body text and icons.", "--sf-color-warning-subtle": "Light warning tint for warning notification backgrounds.", "--sf-color-warning-muted": "Medium warning fill for icons and caution chips.", "--sf-color-warning-strong": "High-contrast warning color for caution text.", "--sf-color-success-subtle": "Light success tint for confirmation backgrounds.", "--sf-color-success-muted": "Medium success fill for success icons and status chips.", "--sf-color-success-strong": "High-contrast success color for confirmation message text.", "--sf-color-info-subtle": "Light info tint for informational note backgrounds.", "--sf-color-info-muted": "Medium info fill for info icons and hint chips.", "--sf-color-info-strong": "High-contrast info color for hint body text.", "--sf-color-action-subtle": "Lightest action tint — selected rows, active nav, chips.", "--sf-color-action-muted": "Medium action fill — outlined button hover backgrounds.", "--sf-color-action--hover": "Action color at hover brightness.", "--sf-color-action--active": "Action color at pressed/active brightness.", "--sf-color-action-darker": "Deep action shade for high-contrast contexts.", "--sf-color-action-lighter": "Light action shade for soft accents.", "--sf-color-action-tint": "Near-transparent action tint (5% alpha) for hover-state washes and the most subtle backgrounds.", "--sf-color-action-xdark": "Extra-dark action shade.", "--sf-color-action-xlight": "Extra-light action shade.", "--sf-color-action-superdark": "Near-black action shade for maximum contrast on light surfaces.", "--sf-color-action-superlight": "Near-white action shade for maximum contrast on dark surfaces.", "--sf-color-base-subtle": "Subtle base-surface tint for low-emphasis backgrounds.", "--sf-color-base-muted": "Medium base-surface fill for muted containers or overlays.", "--sf-color-base--hover": "Hover-state surface derived from --sf-color-base for subtle background interactions.", "--sf-color-base--active": "Pressed/active surface derived from --sf-color-base for subtle background interactions.", "--sf-color-base-tint": "Near-transparent base-surface tint (5% alpha) for hover-state washes and the most subtle backgrounds.", "--sf-color-selection-bg": "Background color applied to browser text selections.", "--sf-color-mark-bg": "Background color for highlighted elements.", "--sf-color-code-text": "Text color for inline code and monospace preformatted text.", "--sf-color-scheme": "Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling.", "--sf-caret-color": "Cursor caret color inside text inputs and contenteditable elements.", "--sf-focus-ring-color": "Color of the keyboard focus ring. Ensure sufficient contrast against all background surfaces.", "--sf-focus-ring-width": "Stroke width of the focus ring outline.", "--sf-focus-ring-offset": "Gap between the element edge and the focus ring.", "--sf-focus-ring-style": "Border style of the focus ring (solid, dashed, dotted).", "--sf-touch-target": "Minimum touch-target size for interactive elements per WCAG 2.5.5. Fixed 44px anchor, independent of the --sf-size-* scale.", "--sf-header-height": "Total height of the sticky page header. Used by --sf-sticky-offset to prevent content from hiding under it.", "--sf-header-height-desktop": "Header height at desktop breakpoints.", "--sf-header-height-mobile": "Header height at mobile breakpoints.", "--sf-sticky-offset": "top offset for position: sticky elements, accounting for the header height.", "--sf-sticky-offset-desktop": "Sticky offset at desktop breakpoints.", "--sf-sticky-offset-mobile": "Sticky offset at mobile breakpoints.", "--sf-space-none": "Zero spacing. Explicit alias for clarity in utility classes.", "--sf-space-px": "1px spacing. Hairline offset for fine adjustments.", "--sf-space-2xs": "4px-equivalent spacing. Tight inline gaps, icon-to-text padding.", "--sf-space-xs": "8px-equivalent spacing. Compact list rows, tab padding.", "--sf-space-s": "12px-equivalent spacing. Form field inner padding, narrow gaps.", "--sf-space-m": "16px-equivalent spacing. Default unit, widely applicable.", "--sf-space-l": "24px-equivalent spacing. Card padding, section dividers.", "--sf-space-xl": "32px-equivalent spacing. Feature row gaps, generous section padding.", "--sf-space-2xl": "48px-equivalent spacing. Large section spacing.", "--sf-space-3xl": "64px-equivalent spacing. Extra-large layout gaps.", "--sf-space-4xl": "96px-equivalent spacing. Hero / page-level section padding.", "--sf-component-pad": "Standard inner padding for interactive components (buttons, form inputs, chips).", "--sf-content-gap": "Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.", "--sf-field-block": "Vertical (block) padding inside form fields.", "--sf-font-body": "Font family stack for body text. Override to set your primary typeface.", "--sf-font-display": "Font family for display/marketing text. Override for large headline typefaces.", "--sf-font-heading": "Font family for headings. Defaults to display if not overridden separately.", "--sf-font-mono": "Monospace font family for code, pre, and kbd elements.", "--sf-font-geometric": "Geometric sans-serif slot — circular letterforms for brand alternates.", "--sf-font-humanist": "Humanist sans-serif slot — warm, readable alternate typeface.", "--sf-font-slab": "Slab-serif slot for editorial or display headings.", "--sf-font-weight-body": "Font weight for body text (typically 400 / normal).", "--sf-font-weight-heading": "Font weight for headings (typically 600–700).", "--sf-font-weight-display": "Font weight for display-size text.", "--sf-font-weight-bold": "Strong emphasis weight (700).", "--sf-font-weight-semibold": "Semibold weight (600). Common for labels and subheadings.", "--sf-font-weight-medium": "Medium weight (500). Subtle emphasis without full bold.", "--sf-font-weight-normal": "Normal / regular weight (400).", "--sf-font-weight-light": "Light weight (300). Use sparingly — check contrast at small sizes.", "--sf-text-2xs": "Extra-extra-small font size (~11px). Fine print, badges.", "--sf-text-xs": "Extra-small font size (~12px). Labels, captions, metadata.", "--sf-text-s": "Small font size (~14px). Secondary content, UI annotations.", "--sf-text-m": "Medium / base font size (~16px). Typical body text.", "--sf-text-l": "Large font size (~18px). Lead paragraphs, prominent labels.", "--sf-text-xl": "Extra-large font size (~20px). Sub-headings, callout text.", "--sf-text-2xl": "2× large font size (~24px). Section headings.", "--sf-text-3xl": "3× large font size (~30px). Major headings.", "--sf-text-4xl": "4× large font size (~36px). Display-level headings.", "--sf-text-display-s": "Small display font size (~42px). Hero sub-headings.", "--sf-text-display-m": "Medium display font size (~54px). Hero headings.", "--sf-text-display-l": "Large display font size (~68px+). Oversized hero text.", "--sf-leading-tight": "Tight line height (~1.2). Use for large display headings.", "--sf-leading-snug": "Snug line height (~1.35). Use for sub-headings.", "--sf-leading-normal": "Normal line height (~1.5). Default for body text.", "--sf-leading-relaxed": "Relaxed line height (~1.65). Long-form reading text.", "--sf-tracking-tight": "Tight letter-spacing (slightly negative). Suitable for large headings.", "--sf-tracking-normal": "Normal letter-spacing (0). Default for body text.", "--sf-tracking-wide": "Wide letter-spacing. Use for small-caps labels.", "--sf-tracking-wider": "Wider letter-spacing for strongly spaced labels.", "--sf-tracking-widest": "Widest letter-spacing for all-caps microcopy.", "--sf-font-numeric": "font-variant-numeric shorthand (e.g. tabular-nums) for aligned numeric data.", "--sf-radius-none": "Zero border radius — square corners.", "--sf-radius-2xs": "Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.", "--sf-radius-xs": "Hairline radius (~2px). Subtle rounding for tight components.", "--sf-radius-s": "Small radius (~4px). Badges, chips, small buttons.", "--sf-radius-m": "Medium radius (~6–8px). Default — inputs, standard buttons, cards.", "--sf-radius-l": "Large radius (~12px). Modals, popovers, panels.", "--sf-radius-xl": "Extra-large radius (~16px). Prominent cards and feature blocks.", "--sf-radius-2xl": "2× large radius (~20px). Rounded card variants.", "--sf-radius-3xl": "3× large radius (~24px). Large rounded surfaces.", "--sf-radius-4xl": "4× large radius (~32px). Near-pill rounding.", "--sf-radius-full": "Full rounding (50%). For circular elements like avatars.", "--sf-radius-pill": "Pill rounding (9999px). Tags, toggle pills, status badges.", "--sf-border": "Default border shorthand (width + solid + color). Apply directly to border property.", "--sf-border-strong": "Strong-emphasis border shorthand.", "--sf-border-subtle": "Low-contrast subtle border shorthand.", "--sf-border-width-hairline": "1px border width (hairline).", "--sf-border-width-1": "Standard 1px border width.", "--sf-border-width-2": "Medium 2px border width. Common for focus outlines.", "--sf-border-width-3": "Thick 3px border width.", "--sf-border-width-4": "Extra-thick 4px border width for decorative borders.", "--sf-duration-none": "0ms duration. Disables transitions (respects prefers-reduced-motion).", "--sf-duration-instant": "Near-instant duration (~100ms). Micro-interactions and cursor-follow effects.", "--sf-duration-fast": "Fast duration (~150ms). Hover transitions, tooltip appear.", "--sf-duration-normal": "Normal duration (~250ms). Default for most transitions.", "--sf-duration-slow": "Slow duration (~400ms). Emphasis transitions, drawers.", "--sf-duration-slower": "Extra-slow duration (~600ms). Page-level enter/exit transitions.", "--sf-ease-linear": "Linear easing. Use for progress indicators and spinner rotations.", "--sf-ease-in": "Accelerating easing. Use for elements leaving the viewport.", "--sf-ease-out": "Decelerating easing. Use for elements entering the viewport.", "--sf-ease-in-out": "Symmetric easing. Use for elements that move within the viewport.", "--sf-ease-bounce": "Bounce easing. Playful overshooting effect.", "--sf-ease-elastic": "Elastic easing. Spring-like overshooting effect.", "--sf-ease-spring": "Spring easing. Natural physics-based motion.", "--sf-ease-overshoot": "Subtle overshoot easing. Softer spring effect.", "--sf-transition-colors": "Transition shorthand for color-related properties (color, background, border-color).", "--sf-transition-opacity": "Transition shorthand for opacity.", "--sf-transition-transform": "Transition shorthand for transform.", "--sf-transition-shadow": "Transition shorthand for box-shadow.", "--sf-transition-fast": "Fast-duration transition shorthand.", "--sf-transition-slow": "Slow-duration transition shorthand.", "--sf-transition-enter": "Enter-phase transition (ease-out). Use on elements appearing in the viewport.", "--sf-transition-exit": "Exit-phase transition (ease-in). Use on elements leaving the viewport.", "--sf-transition-overlay": "Transition shorthand for overlay fades (opacity + visibility).", "--sf-icon-xs": "Extra-small icon size (~12px). Inline indicators.", "--sf-icon-s": "Small icon size (~16px). Dense UI chrome.", "--sf-icon-m": "Medium icon size (~20px). Default for inline and button icons.", "--sf-icon-l": "Large icon size (~24px). Standalone icon buttons.", "--sf-icon-xl": "Extra-large icon size (~32px). Feature icons.", "--sf-icon-2xl": "2× large icon size (~40px+). Hero or onboarding icons.", "--sf-size-s": "Small UI component height (~32px). Compact buttons and input variants.", "--sf-size-m": "~40px UI component height (scale rung `m`). The default `.sf-btn` min-height.", "--sf-size-l": "Large UI component height (~48px). Touch-friendly interactive elements.", "--sf-container-narrow": "Narrow content max-width — ideal for article body and blog posts (~65ch).", "--sf-container-prose": "Prose max-width — optimised for readability (~75ch).", "--sf-container-default": "Default content container max-width (~1200px).", "--sf-container-wide": "Wide container for marketing / dashboard layouts (~1440px).", "--sf-container-full": "Full-width container — removes the max-width constraint.", "--sf-z-below": "Z-index below stacking context base. For decorative pseudo-elements.", "--sf-z-base": "Base stacking level (1). Establishes a stacking context without elevation.", "--sf-z-raised": "Raised elevation (50). Cards, sticky headers.", "--sf-z-dropdown": "Z-index for dropdown menus and select popups.", "--sf-z-sticky": "Z-index for position: sticky elements (navbars, table headers).", "--sf-z-fixed": "Z-index for position: fixed elements.", "--sf-z-overlay": "Z-index for modal / dialog backdrops.", "--sf-z-toast": "Z-index for toast / snackbar notifications.", "--sf-section-pad": "Default vertical padding for full-width page sections.", "--sf-section-pad--s": "Small section vertical padding.", "--sf-section-pad--m": "Medium section vertical padding.", "--sf-section-pad--l": "Large section vertical padding.", "--sf-section-pad--2xl": "2× large section vertical padding for hero areas.", "--sf-ratio-3-2": "3:2 aspect ratio. Common for landscape photography.", "--sf-ratio-4-3": "4:3 aspect ratio. Classic screen ratio.", "--sf-ratio-cinema": "2.39:1 cinematic widescreen aspect ratio.", "--sf-ratio-golden": "1.618:1 golden ratio. Harmonious proportions.", "--sf-ratio-portrait": "2:3 portrait aspect ratio.", "--sf-opacity-disabled": "Opacity for disabled UI elements (typically 0.4–0.5).", "--sf-stack-gap": "Vertical gap between stacked block-level elements in the stack layout.", "--sf-cluster-gap": "Gap between wrapped inline items in the cluster layout.", "--sf-cluster-align": "Vertical alignment of cluster items (align-items value).", "--sf-cluster-justify": "Horizontal justification of the cluster (justify-content value).", "--sf-sidebar-width": "Preferred width of the sidebar column.", "--sf-sidebar-min-width": "Minimum sidebar width before the layout collapses to stacking.", "--sf-sidebar-gap": "Gap between sidebar and main content column.", "--sf-grid-gap": "Gap between auto-fill grid cells.", "--sf-grid-min": "Minimum column width for the auto-fill grid.", "--sf-grid-min-2xl": "Minimum column width at the 2× breakpoint.", "--sf-switcher-threshold": "Inline-size threshold below which the switcher flips from horizontal to vertical.", "--sf-switcher-gap": "Gap between switcher columns / rows.", "--sf-reel-gap": "Gap between items in the horizontal reel.", "--sf-reel-height": "Fixed height of the reel container.", "--sf-reel-item-width": "Width of each item in the reel.", "--sf-center-max": "Maximum width for the center layout.", "--sf-center-gutter": "Minimum side gutter for the center layout.", "--sf-cover-min-height": "Minimum height of the cover layout (typically 100svh).", "--sf-cover-padding": "Inner padding for the cover layout.", "--sf-alternate-gap": "Gap between items in the alternating zigzag layout.", "--sf-alternate-inner-gap": "Gap between content and media within each zigzag item.", "--sf-bento-gap": "Gap between bento grid cells.", "--sf-bento-cols-default": "Default column count for the bento grid.", "--sf-bento-row-compact": "Row height for compact-variant bento items.", "--sf-equal-gap": "Gap between equal columns.", "--sf-frame-ratio": "Aspect ratio for the frame (media container) layout.", "--sf-imposter-margin": "Margin between the imposter overlay and the viewport edges.", "--sf-prose-paragraph": "Max width of prose paragraphs (layout token for the prose layout).", "--sf-breakout-width": "Width of full-bleed breakout elements inside a content grid.", "--sf-content-width": "Max-width of the main content column in a content grid.", "--sf-box-padding": "Inner padding for the box layout primitive.", "--sf-box-border-width": "Border width for the box layout primitive.", "--sf-box-border-color": "Border color for the box layout primitive.", "--sf-icon-box-bg": "Background color for boxed icon containers.", "--sf-icon-box-border": "Border for boxed icon containers.", "--sf-icon-box-pad": "Padding inside boxed icon containers.", "--sf-flow-space": "Margin-block-start applied to all flow children except the first.", "--sf-aspect": "Aspect ratio value for the .aspect-ratio macro.", "--sf-line-clamp": "Number of visible lines before text is clipped with an ellipsis.", "--sf-content-intrinsic-size": "Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal).", "--sf-scroll-shadow-size": "Size of the scroll-shadow fade effect on overflowing containers.", "--sf-prose-block-margin": "Block margin between prose elements (h2, p, ul, etc.).", "--sf-prose-blockquote-border": "Left border style for blockquotes inside prose.", "--sf-prose-blockquote-padding": "Inner padding for blockquotes inside prose.", "--sf-scrim-color": "Base color of the gradient scrim overlay.", "--sf-scrim-direction": "Direction of the scrim gradient (to bottom, to top, etc.).", "--sf-scrim-gradient": "Full gradient shorthand for the scrim. Override to customise the fade.", "--sf-object-fit": "Default object-fit value for replaced elements (img, video).", "--sf-object-position": "Default object-position for replaced elements.", "--sf-divider-color": "Color of horizontal/vertical divider rules.", "--sf-divider-gap": "Spacing (margin) around divider elements.", "--sf-divider-style": "Border style of dividers.", "--sf-scrollbar-thumb": "Color of the custom scrollbar thumb.", "--sf-scrollbar-track": "Color of the custom scrollbar track.", "--sf-border-style": "Global border-style default applied across all border tokens.", "--sf-shadow-glow": "Glow box-shadow shorthand for decorative glow effects.", "--sf-color-dim": "Backdrop overlay color for modals, drawers, and lightboxes.", "--sf-animation-blink": "Blinking visibility loop. Use for cursor indicators or critical attention cues. Respect prefers-reduced-motion.", "--sf-animation-color-pulse": "Pulsing color loop. Use for live-status badges (recording, live). Respect prefers-reduced-motion.", "--sf-stagger-step": "Per-item delay increment for the .sf-stagger utility. One knob retunes the whole staggered sequence; the class multiplies it by each child's index and by --sf-motion-scale.", "--sf-hover-grow-scale": "Scale factor applied by .sf-hover-grow on hover (>1 grows).", "--sf-hover-shrink-scale": "Scale factor applied by .sf-hover-shrink on hover (<1 shrinks).", "--sf-hover-lift": "Translate distance for .sf-hover-float (up) and .sf-hover-sink (down) on hover.", "--sf-hover-slide": "Translate distance for .sf-hover-slide-start / .sf-hover-slide-end on hover.", "--sf-animation-fade-in": "Fade-in entrance animation shorthand. Use directly as animation property value.", "--sf-animation-fade-out": "Fade-out exit animation shorthand.", "--sf-animation-float": "Gentle floating / levitating loop. Use for hero illustrations or floating UI elements. Decorative — disable for prefers-reduced-motion.", "--sf-animation-ping": "Expanding ping / ripple loop. Use for notification badges and live-indicator dots.", "--sf-animation-scale-down": "Scale-down exit animation. Pairs with --sf-animation-scale-up for enter/leave transitions.", "--sf-animation-scale-up": "Scale-up entrance animation. Use for modals, popovers, and tooltips appearing.", "--sf-animation-shimmer": "Shimmer / skeleton-loading sweep. Apply on placeholder elements while content loads.", "--sf-animation-slide-in-down": "Slide-in from above. Use for dropdown menus and top-attached sheets.", "--sf-animation-slide-in-left": "Slide-in from the left. Use for left-side drawers and navigation panels.", "--sf-animation-slide-in-right": "Slide-in from the right. Use for right-side drawers and detail panels.", "--sf-animation-slide-in-up": "Slide-in from below. Use for bottom sheets, toasts, and floating action buttons.", "--sf-animation-spin": "Continuous rotation loop. Use for loading spinners and progress indicators.", "--sf-bento-row-default": "Default row height for standard bento grid cells.", "--sf-bento-row-tall": "Tall row height for visually prominent or hero bento cells.", "--sf-body-color": "Text color for body copy. Alias of --sf-color-text. Override here to deviate body text from the global text color.", "--sf-body-em-style": "font-style for inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.", "--sf-body-font-family": "Font family for body text. Alias of --sf-font-body.", "--sf-body-font-size": "Base font size for body paragraphs. Alias of --sf-text-m.", "--sf-body-font-weight": "Font weight for body text. Alias of --sf-font-weight-body.", "--sf-body-line-height": "Line height for body paragraphs. Alias of --sf-leading-normal.", "--sf-body-strong-weight": "Font weight for inside body text. Override to choose a specific weight instead of inheriting bold.", "--sf-body-text-wrap": "text-wrap mode for body paragraphs. 'pretty' prevents orphaned last words; 'balance' equalises line lengths.", "--sf-code-font-size": "Font size for inline and 
. Usually slightly smaller than body text so monospace doesn't feel oversized.",
    "--sf-h1-font-weight": "Font weight for 
.",
    "--sf-h1-letter-spacing": "Letter-spacing for 
. Typically slightly negative at large sizes.",
    "--sf-h1-line-height": "Line height for 
. Tighter than body to avoid excessive whitespace at large sizes.",
    "--sf-h1-size": "Font size for 
.",
    "--sf-h2-font-weight": "Font weight for 
.",
    "--sf-h2-letter-spacing": "Letter-spacing for 
.",
    "--sf-h2-line-height": "Line height for 
.",
    "--sf-h2-size": "Font size for 
.",
    "--sf-h3-font-weight": "Font weight for 
.",
    "--sf-h3-letter-spacing": "Letter-spacing for 
.",
    "--sf-h3-line-height": "Line height for 
.",
    "--sf-h3-size": "Font size for 
.",
    "--sf-h4-font-weight": "Font weight for 
.",
    "--sf-h4-letter-spacing": "Letter-spacing for 
.",
    "--sf-h4-line-height": "Line height for 
.",
    "--sf-h4-size": "Font size for 
.",
    "--sf-h5-font-weight": "Font weight for 
.",
    "--sf-h5-letter-spacing": "Letter-spacing for 
.",
    "--sf-h5-line-height": "Line height for 
.",
    "--sf-h5-size": "Font size for 
.",
    "--sf-h6-font-weight": "Font weight for 
.",
    "--sf-h6-letter-spacing": "Letter-spacing for 
.",
    "--sf-h6-line-height": "Line height for 
.",
    "--sf-h6-size": "Font size for 
.",
    "--sf-heading-color": "Text color for all headings (h1–h6). Alias of --sf-color-heading.",
    "--sf-heading-font-family": "Font family for all headings. Alias of --sf-font-heading.",
    "--sf-heading-text-wrap": "text-wrap for headings. 'balance' prevents orphaned short last lines in multi-line headings.",
    "--sf-shadow-none": "No box-shadow (resets inherited shadows). Use to explicitly remove elevation.",
    "--sf-shadow-xs": "Extra-small shadow for barely-elevated elements (focused inputs, small chips).",
    "--sf-shadow-s": "Small shadow for chips, tags, and inline elevated surfaces.",
    "--sf-shadow-m": "Medium shadow for cards and content panels.",
    "--sf-shadow-l": "Large shadow for drawers, sidebars, and prominent elevated surfaces.",
    "--sf-shadow-xl": "Extra-large shadow for modals, dialogs, and high-elevation sheets.",
    "--sf-shadow-2xl": "Largest shadow for hero cards, feature highlights, and marketing surfaces.",
    "--sf-shadow-inner": "Inset shadow for pressed states, inset inputs, and recessed surfaces.",
    "--sf-color-action-50": "Lightest action tint. Background fill for subtle action-tinted surfaces.",
    "--sf-color-action-100": "Very light action shade. Hover fills on white surfaces, badge backgrounds.",
    "--sf-color-action-200": "Light action shade. Subtle fills and outlined badge backgrounds.",
    "--sf-color-action-300": "Light-mid action shade. Borders on light backgrounds, low-emphasis fills.",
    "--sf-color-action-400": "Mid-light action shade. Disabled state fills, decorative accents.",
    "--sf-color-action-500": "Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.",
    "--sf-color-action-600": "Mid-dark action shade. Text on light surfaces, icon fills.",
    "--sf-color-action-700": "Dark action shade. Strong text and icon fills on light backgrounds.",
    "--sf-color-action-800": "Very dark action shade. High-contrast text on white.",
    "--sf-color-action-900": "Near-black action shade. Extreme contrast on white surfaces.",
    "--sf-color-action-950": "Darkest action tint. Near-black for dark-theme surface accents.",
    "--sf-color-action-a5": "5% opacity action tint. Barely-there hover highlight.",
    "--sf-color-action-a10": "10% opacity action tint. Subtle hover or selected-row background.",
    "--sf-color-action-a30": "30% opacity action tint.",
    "--sf-color-action-a50": "50% opacity action tint. Mid-transparency badge or overlay.",
    "--sf-color-action-a80": "80% opacity action tint.",
    "--sf-color-base-50": "Lightest base-surface level.",
    "--sf-color-base-100": "Very light base-surface level.",
    "--sf-color-base-200": "Light base-surface level.",
    "--sf-color-base-300": "Light-mid base-surface level.",
    "--sf-color-base-400": "Mid-light base-surface level.",
    "--sf-color-base-500": "Mid base-surface level.",
    "--sf-color-base-600": "Mid-dark base-surface level.",
    "--sf-color-base-700": "Dark base-surface level.",
    "--sf-color-base-800": "Very dark base-surface level.",
    "--sf-color-base-900": "Near-black base-surface level.",
    "--sf-color-base-950": "Darkest base-surface level.",
    "--sf-color-base-a5": "5% opacity base-surface tint.",
    "--sf-color-base-a10": "10% opacity base-surface tint.",
    "--sf-color-base-a30": "30% opacity base-surface tint.",
    "--sf-color-base-a50": "50% opacity base-surface tint.",
    "--sf-color-base-a80": "80% opacity base-surface tint.",
    "--sf-color-neutral-50": "Lightest neutral tint.",
    "--sf-color-neutral-100": "Very light neutral shade.",
    "--sf-color-neutral-200": "Light neutral shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
    "--sf-color-neutral-300": "Light-mid neutral shade.",
    "--sf-color-neutral-400": "Mid-light neutral shade.",
    "--sf-color-neutral-500": "Mid neutral shade — the 'pure' hue.",
    "--sf-color-neutral-600": "Mid-dark neutral shade.",
    "--sf-color-neutral-700": "Dark neutral shade.",
    "--sf-color-neutral-800": "Very dark neutral shade.",
    "--sf-color-neutral-900": "Near-black neutral shade at step 900 on the numeric scale. Extreme contrast on light surfaces.",
    "--sf-color-neutral-950": "Darkest neutral tint.",
    "--sf-color-neutral-a5": "5% opacity neutral tint.",
    "--sf-color-neutral-a10": "10% opacity neutral tint.",
    "--sf-color-neutral-a30": "30% opacity neutral tint.",
    "--sf-color-neutral-a50": "50% opacity neutral tint.",
    "--sf-color-neutral-a80": "80% opacity neutral tint.",
    "--sf-color-neutral-subtle": "Lightest neutral semantic tint.",
    "--sf-color-neutral-muted": "Muted neutral fill for low-emphasis contexts.",
    "--sf-color-neutral--hover": "Neutral color at hover brightness.",
    "--sf-color-neutral--active": "Neutral color at pressed/active brightness.",
    "--sf-color-neutral-darker": "Deep neutral shade for high-contrast contexts.",
    "--sf-color-neutral-lighter": "Light neutral shade for soft accents — alias of --sf-color-neutral-400.",
    "--sf-color-neutral-tint": "Near-transparent neutral tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-neutral-xdark": "Extra-dark neutral shade.",
    "--sf-color-neutral-xlight": "Extra-light neutral shade.",
    "--sf-color-neutral-superdark": "Near-black neutral shade for maximum contrast on light surfaces — alias of --sf-color-neutral-950.",
    "--sf-color-neutral-superlight": "Near-white neutral shade.",
    "--sf-color-primary-50": "Lightest primary tint.",
    "--sf-color-primary-100": "Very light primary shade.",
    "--sf-color-primary-200": "Light primary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
    "--sf-color-primary-300": "Light-mid primary shade.",
    "--sf-color-primary-400": "Mid-light primary shade.",
    "--sf-color-primary-500": "Mid primary shade — the 'pure' hue.",
    "--sf-color-primary-600": "Mid-dark primary shade.",
    "--sf-color-primary-700": "Dark primary shade.",
    "--sf-color-primary-800": "Very dark primary shade.",
    "--sf-color-primary-900": "Near-black primary shade at step 900 on the numeric scale. Extreme contrast on light surfaces.",
    "--sf-color-primary-950": "Darkest primary tint.",
    "--sf-color-primary-a5": "5% opacity primary tint.",
    "--sf-color-primary-a10": "10% opacity primary tint.",
    "--sf-color-primary-a30": "30% opacity primary tint.",
    "--sf-color-primary-a50": "50% opacity primary tint.",
    "--sf-color-primary-a80": "80% opacity primary tint.",
    "--sf-color-primary-subtle": "Lightest primary semantic tint.",
    "--sf-color-primary-muted": "Muted primary fill.",
    "--sf-color-primary--hover": "Primary color at hover brightness.",
    "--sf-color-primary--active": "Primary color at pressed/active brightness.",
    "--sf-color-primary-darker": "Deep primary shade.",
    "--sf-color-primary-lighter": "Light primary shade for soft accents — alias of --sf-color-primary-400.",
    "--sf-color-primary-tint": "Near-transparent primary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-primary-xdark": "Extra-dark primary shade.",
    "--sf-color-primary-xlight": "Extra-light primary shade.",
    "--sf-color-primary-superdark": "Near-black primary shade for maximum contrast on light surfaces — alias of --sf-color-primary-950.",
    "--sf-color-primary-superlight": "Near-white primary shade.",
    "--sf-color-secondary-50": "Lightest secondary tint.",
    "--sf-color-secondary-100": "Very light secondary shade.",
    "--sf-color-secondary-200": "Light secondary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
    "--sf-color-secondary-300": "Light-mid secondary shade.",
    "--sf-color-secondary-400": "Mid-light secondary shade.",
    "--sf-color-secondary-500": "Mid secondary shade — the 'pure' hue.",
    "--sf-color-secondary-600": "Mid-dark secondary shade.",
    "--sf-color-secondary-700": "Dark secondary shade.",
    "--sf-color-secondary-800": "Very dark secondary shade.",
    "--sf-color-secondary-900": "Near-black secondary shade at step 900 on the numeric scale. Extreme contrast on light surfaces.",
    "--sf-color-secondary-950": "Darkest secondary tint.",
    "--sf-color-secondary-a5": "5% opacity secondary tint.",
    "--sf-color-secondary-a10": "10% opacity secondary tint.",
    "--sf-color-secondary-a30": "30% opacity secondary tint.",
    "--sf-color-secondary-a50": "50% opacity secondary tint.",
    "--sf-color-secondary-a80": "80% opacity secondary tint.",
    "--sf-color-secondary-subtle": "Lightest secondary semantic tint.",
    "--sf-color-secondary-muted": "Muted secondary fill.",
    "--sf-color-secondary--hover": "Secondary color at hover brightness.",
    "--sf-color-secondary--active": "Secondary color at pressed/active brightness.",
    "--sf-color-secondary-darker": "Deep secondary shade.",
    "--sf-color-secondary-lighter": "Light secondary shade for soft accents — alias of --sf-color-secondary-400.",
    "--sf-color-secondary-tint": "Near-transparent secondary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-secondary-xdark": "Extra-dark secondary shade.",
    "--sf-color-secondary-xlight": "Extra-light secondary shade.",
    "--sf-color-secondary-superdark": "Near-black secondary shade for maximum contrast on light surfaces — alias of --sf-color-secondary-950.",
    "--sf-color-secondary-superlight": "Near-white secondary shade.",
    "--sf-color-tertiary-50": "Lightest tertiary tint.",
    "--sf-color-tertiary-100": "Very light tertiary shade.",
    "--sf-color-tertiary-200": "Light tertiary shade at step 200 on the numeric scale. Subtle fills and outlined badge backgrounds.",
    "--sf-color-tertiary-300": "Light-mid tertiary shade.",
    "--sf-color-tertiary-400": "Mid-light tertiary shade.",
    "--sf-color-tertiary-500": "Mid tertiary shade — the 'pure' hue.",
    "--sf-color-tertiary-600": "Mid-dark tertiary shade.",
    "--sf-color-tertiary-700": "Dark tertiary shade.",
    "--sf-color-tertiary-800": "Very dark tertiary shade.",
    "--sf-color-tertiary-900": "Near-black tertiary shade at step 900 on the numeric scale. Extreme contrast on light surfaces.",
    "--sf-color-tertiary-950": "Darkest tertiary tint.",
    "--sf-color-tertiary-a5": "5% opacity tertiary tint.",
    "--sf-color-tertiary-a10": "10% opacity tertiary tint.",
    "--sf-color-tertiary-a30": "30% opacity tertiary tint.",
    "--sf-color-tertiary-a50": "50% opacity tertiary tint.",
    "--sf-color-tertiary-a80": "80% opacity tertiary tint.",
    "--sf-color-tertiary-subtle": "Lightest tertiary semantic tint.",
    "--sf-color-tertiary-muted": "Muted tertiary fill.",
    "--sf-color-tertiary--hover": "Tertiary color at hover brightness.",
    "--sf-color-tertiary--active": "Tertiary color at pressed/active brightness.",
    "--sf-color-tertiary-darker": "Deep tertiary shade.",
    "--sf-color-tertiary-lighter": "Light tertiary shade for soft accents — alias of --sf-color-tertiary-400.",
    "--sf-color-tertiary-tint": "Near-transparent tertiary tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-tertiary-xdark": "Extra-dark tertiary shade.",
    "--sf-color-tertiary-xlight": "Extra-light tertiary shade.",
    "--sf-color-tertiary-superdark": "Near-black tertiary shade for maximum contrast on light surfaces — alias of --sf-color-tertiary-950.",
    "--sf-color-tertiary-superlight": "Near-white tertiary shade.",
    "--sf-color-code-bg": "Background for inline  elements. Usually a subtle tint of the inset surface.",
    "--sf-color-link--underline": "Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.",
    "--sf-color-text--on-inverse": "Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds.",
    "--sf-color-text--on-neutral": "Accessible foreground for text placed on neutral-colored backgrounds.",
    "--sf-color-text--on-primary": "Accessible foreground for text placed on primary-colored backgrounds.",
    "--sf-color-text--on-secondary": "Accessible foreground for text placed on secondary-colored backgrounds.",
    "--sf-color-text--on-tertiary": "Accessible foreground for text placed on tertiary-colored backgrounds.",
    "--sf-display-l-line-height": "Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes.",
    "--sf-display-m-line-height": "Line height for medium display text (--sf-text-display-m).",
    "--sf-display-s-line-height": "Line height for small display text (--sf-text-display-s).",
    "--sf-divider-width": "Stroke width of horizontal and vertical divider rules.",
    "--sf-drop-shadow-xs": "Extra-small CSS filter: drop-shadow, for the subtlest depth on small icons and cutout images.",
    "--sf-drop-shadow-s": "Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.",
    "--sf-drop-shadow-m": "Medium CSS filter: drop-shadow for elevated icons and card thumbnails.",
    "--sf-drop-shadow-l": "Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.",
    "--sf-drop-shadow-xl": "Extra-large CSS filter: drop-shadow for hero-scale illustrated or cut-out elements.",
    "--sf-text-shadow-none": "Removes text-shadow (use to explicitly reset inherited shadows).",
    "--sf-text-shadow-xs": "Extra-small text-shadow for the subtlest depth on body text.",
    "--sf-text-shadow-s": "Small text-shadow for subtle depth on display headings.",
    "--sf-text-shadow-m": "Medium text-shadow. Use for text overlaid on images to improve legibility.",
    "--sf-text-shadow-l": "Large text-shadow for high-contrast text over busy or dark image backgrounds.",
    "--sf-text-shadow-xl": "Extra-large text-shadow for maximum legibility over busy or high-contrast image backgrounds.",
    "--sf-field-required-marker": "CSS content value for required-field markers (e.g. \" *\"). Used by pseudo-elements in the .required utility pattern.",
    "--sf-gap": "Default gap between components (the loose rhythm). Layout primitives like cluster/grid/sidebar default to it. Override globally to retune them all at once, or set a primitive token (e.g. --sf-cluster-gap) for one element.",
    "--sf-link-external-marker": "CSS content value appended to external links (e.g. \" ↗\"). Used by the .external-link pseudo-element pattern.",
    "--sf-link-external-label": "Accessible name for the .sf-link-external marker glyph, read by screen readers via the CSS content alt-text syntax. Localise or clear alongside --sf-link-external-marker.",
    "--sf-gradient-brand": "Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents.",
    "--sf-gradient-fade--b": "Fade-to-bottom gradient (transparent → surface). Use to fade content into a background below (infinite scroll fade, content cutoff).",
    "--sf-gradient-fade--l": "Fade-to-left gradient. Use to indicate left-side scrollable overflow.",
    "--sf-gradient-fade--r": "Fade-to-right gradient. Use to indicate right-side scrollable overflow.",
    "--sf-gradient-fade--t": "Fade-to-top gradient (transparent → surface). Use to fade content into a background above.",
    "--sf-gradient-primary": "Gradient using primary palette colors (light to saturated).",
    "--sf-gradient-secondary": "Gradient using secondary palette colors.",
    "--sf-gradient-surface": "Subtle surface-color gradient for depth layering and glass effects.",
    "--sf-gradient-tertiary": "Gradient using tertiary palette colors.",
    "--sf-grid-min-xs": "Extra-small minimum column width for the auto-fill grid. Use for very compact tile layouts (icon grids).",
    "--sf-grid-min-s": "Small minimum column width for the auto-fill grid.",
    "--sf-grid-min-m": "Medium minimum column width for the auto-fill grid.",
    "--sf-grid-min-l": "Large minimum column width for the auto-fill grid.",
    "--sf-grid-min-xl": "Extra-large minimum column width for the auto-fill grid. Use for wide content cards.",
    "--sf-icon-box-radius": "Border radius for boxed icon containers.",
    "--sf-prose-figcaption-size": "Font size for figure captions inside .prose. Typically smaller than body text.",
    "--sf-prose-figure-margin": "Block margin around 
 elements inside .prose.",
    "--sf-prose-heading-gap": "Space between a heading and the content that follows it inside .prose.",
    "--sf-prose-hr-margin": "Block margin around 
 rules inside .prose.",
    "--sf-prose-list-gap": "Gap between list items inside .prose.",
    "--sf-prose-marker-color": "Color of list bullets and ordered-list numbers inside .prose.",
    "--sf-prose-media-margin": "Block margin around images, video, and figures inside .prose.",
    "--sf-prose-media-radius": "Border radius applied to images and media inside .prose.",
    "--sf-prose-nested-list-gap": "Gap between items in nested lists inside .prose.",
    "--sf-prose-table-pad": "Cell padding for tables inside .prose.",
    "--sf-ratio-square": "1:1 square aspect ratio. Use for avatars, icon containers, and square thumbnails.",
    "--sf-ratio-video": "16:9 widescreen video aspect ratio. Use for video embeds and video-thumbnail containers.",
    "--sf-scrim-text-shadow": "Text-shadow layered over the scrim gradient to ensure legibility for text placed directly on image backgrounds.",
    "--sf-section-pad--xs": "Extra-small vertical section padding for compact in-page modules.",
    "--sf-section-pad--xl": "Extra-large vertical section padding for hero and feature sections.",
    "--sf-size-xs": "Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.",
    "--sf-size-xl": "Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls.",
    "--sf-text-2xs-font-weight": "Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.",
    "--sf-text-2xs-letter-spacing": "Letter-spacing for 2×-extra-small text.",
    "--sf-text-2xs-line-height": "Line height for 2×-extra-small text.",
    "--sf-text-2xs-max-width": "Optimal line length (max-width in ch) for 2×-extra-small text.",
    "--sf-text-xs-font-weight": "Font weight for extra-small text.",
    "--sf-text-xs-letter-spacing": "Letter-spacing for extra-small text.",
    "--sf-text-xs-line-height": "Line height for extra-small text.",
    "--sf-text-xs-max-width": "Optimal line length for extra-small text.",
    "--sf-text-s-font-weight": "Font weight for small text.",
    "--sf-text-s-letter-spacing": "Letter-spacing for small text.",
    "--sf-text-s-line-height": "Line height for small text.",
    "--sf-text-s-max-width": "Optimal line length for small text.",
    "--sf-text-m-font-weight": "Font weight for medium (body) text.",
    "--sf-text-m-letter-spacing": "Letter-spacing for medium text.",
    "--sf-text-m-line-height": "Line height for medium text.",
    "--sf-text-m-max-width": "Optimal reading line length for medium text (~65–75ch).",
    "--sf-text-l-font-weight": "Font weight for large text.",
    "--sf-text-l-letter-spacing": "Letter-spacing for large text.",
    "--sf-text-l-line-height": "Line height for large text.",
    "--sf-text-l-max-width": "Optimal line length for large text.",
    "--sf-text-xl-font-weight": "Font weight for extra-large text.",
    "--sf-text-xl-letter-spacing": "Letter-spacing for extra-large text.",
    "--sf-text-xl-line-height": "Line height for extra-large text.",
    "--sf-text-xl-max-width": "Optimal line length for extra-large text.",
    "--sf-text-2xl-font-weight": "Font weight for 2×-large text.",
    "--sf-text-2xl-letter-spacing": "Letter-spacing for 2×-large text.",
    "--sf-text-2xl-line-height": "Line height for 2×-large text.",
    "--sf-text-2xl-max-width": "Optimal line length for 2×-large text.",
    "--sf-text-3xl-font-weight": "Font weight for 3×-large text.",
    "--sf-text-3xl-letter-spacing": "Letter-spacing for 3×-large text. Typically negative to tighten large headings.",
    "--sf-text-3xl-line-height": "Line height for 3×-large text.",
    "--sf-text-3xl-max-width": "Optimal line length for 3×-large text.",
    "--sf-text-4xl-font-weight": "Font weight for 4×-large text.",
    "--sf-text-4xl-letter-spacing": "Letter-spacing for 4×-large text.",
    "--sf-text-4xl-line-height": "Line height for 4×-large text.",
    "--sf-text-4xl-max-width": "Optimal line length for 4×-large text.",
    "--sf-section-scale": "Global multiplier applied to every --sf-section-pad--* size — one dial re-rhythms all section padding (default 1).",
    "--sf-leading-taper": "Progressive leading tightener: each step up the type scale subtracts step-index × taper from its per-size line-height token. Default 0 keeps the curated defaults.",
    "--sf-surface-color": "Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it.",
    "--sf-border-scale": "Global border-width multiplier. Set to 0 for borderless UI; 0.5 for hairline-only; 2 to double all border widths across the system.",
    "--sf-color-action-source-dark": "Registered  dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without  registration the browser cannot interpolate and transitions snap at 50%.",
    "--sf-color-base-source-dark": "Registered  dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets.",
    "--sf-color-danger-source-dark": "Registered  dark counterpart of --sf-color-danger.",
    "--sf-color-info-source-dark": "Registered  dark counterpart of --sf-color-info.",
    "--sf-color-neutral-source-dark": "Registered  dark counterpart of --sf-color-neutral.",
    "--sf-color-primary-source-dark": "Registered  dark counterpart of --sf-color-primary.",
    "--sf-color-secondary-source-dark": "Registered  dark counterpart of --sf-color-secondary.",
    "--sf-color-success-source-dark": "Registered  dark counterpart of --sf-color-success.",
    "--sf-color-tertiary-source-dark": "Registered  dark counterpart of --sf-color-tertiary.",
    "--sf-color-warning-source-dark": "Registered  dark counterpart of --sf-color-warning.",
    "--sf-equal-min-col": "column-width floor for .sf-equal's flowing CSS multi-column layout (not a grid) — the browser won't go narrower than this.",
    "--sf-equal-rule-width": "column-rule width between .sf-equal's flowing columns. 0 (default) means no rule.",
    "--sf-equal-rule-style": "column-rule style between .sf-equal's flowing columns.",
    "--sf-equal-rule-color": "column-rule color between .sf-equal's flowing columns.",
    "--sf-field-padding-block": "Vertical (block) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
    "--sf-field-padding-inline": "Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
    "--sf-field-radius": "Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule.",
    "--sf-btn-radius": "Corner radius for .sf-btn. Defaults to --sf-radius-m; gives buttons a distinct radius from form fields without touching global tokens.",
    "--sf-btn-padding-block": "Flatten-all vertical (block) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-block.",
    "--sf-btn-padding-inline": "Flatten-all horizontal (inline) padding for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-padding-inline.",
    "--sf-btn-gap": "Gap between an icon and the label inside .sf-btn.",
    "--sf-btn-font-size": "Flatten-all label font-size for .sf-btn — once set it overrides every size (--xs/--s/--l/--xl) to the same value. For proportional sizing use --sf-btn-font-scale; to retune a single rung use --sf-btn-{size}-font-size.",
    "--sf-btn-font-scale": "Uniform label-size multiplier for .sf-btn — scales every size's font-size by one factor while keeping the xs…xl ladder intact. The everyday 'bigger/smaller button text' knob.",
    "--sf-btn-xs-font-size": "Label font-size for the extra-small button (.sf-btn--xs). Unset, falls through to --sf-text-xs; set to retune this rung without touching the others.",
    "--sf-btn-s-font-size": "Label font-size for the small button (.sf-btn--s). Unset, falls through to --sf-text-s; set to retune this rung without touching the others.",
    "--sf-btn-m-font-size": "Label font-size for the default (medium) button (.sf-btn). Unset, falls through to --sf-text-m; set to retune this rung without touching the others.",
    "--sf-btn-l-font-size": "Label font-size for the large button (.sf-btn--l). Unset, falls through to --sf-text-l; set to retune this rung without touching the others.",
    "--sf-btn-xl-font-size": "Label font-size for the extra-large button (.sf-btn--xl). Unset, falls through to --sf-text-xl; set to retune this rung without touching the others.",
    "--sf-btn-xs-padding-block": "Vertical (block) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-s-padding-block": "Vertical (block) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-m-padding-block": "Vertical (block) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-l-padding-block": "Vertical (block) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-xl-padding-block": "Vertical (block) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-xs-padding-inline": "Horizontal (inline) padding for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-s-padding-inline": "Horizontal (inline) padding for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-m-padding-inline": "Horizontal (inline) padding for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-l-padding-inline": "Horizontal (inline) padding for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-xl-padding-inline": "Horizontal (inline) padding for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-xs-min-height": "Minimum target height for the extra-small button (.sf-btn--xs). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-s-min-height": "Minimum target height for the small button (.sf-btn--s). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-m-min-height": "Minimum target height for the default (medium) button (.sf-btn). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-l-min-height": "Minimum target height for the large button (.sf-btn--l). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-xl-min-height": "Minimum target height for the extra-large button (.sf-btn--xl). Unset, falls through to that rung's scale default; set to retune this rung alone.",
    "--sf-btn-font-weight": "Label font-weight for .sf-btn. Defaults to the interactive weight.",
    "--sf-btn-min-height": "Flatten-all minimum target height for .sf-btn — once set it overrides every size to the same value. For per-rung control use --sf-btn-{size}-min-height.",
    "--sf-btn-border-width": "Border thickness for .sf-btn (used by all fill, outline, and secondary treatments).",
    "--sf-card-padding": "Inner padding for .sf-card. Also feeds the concentric-radius math (outer = inner radius + padding).",
    "--sf-card-gap": "Divider spacing for .sf-card__header / __footer (padding + margin around the rule).",
    "--sf-card-radius": "Inner radius for .sf-card children such as __media. Combined with padding to derive the outer radius.",
    "--sf-card-radius-outer": "Outer corner radius of .sf-card. Concentric with the inner radius: calc(--sf-card-radius + --sf-card-padding).",
    "--sf-card-bg": "Background surface for .sf-card. Defaults to --sf-color-surface.",
    "--sf-card-border-width": "Border thickness for .sf-card.",
    "--sf-card-border-color": "Border colour for .sf-card. Defaults to --sf-color-border.",
    "--sf-card-shadow": "Base drop shadow for .sf-card. Defaults to --sf-shadow-s.",
    "--sf-card-shadow--elevated": "Drop shadow applied by the .sf-card--elevated modifier (border hidden, larger shadow).",
    "--sf-card-shadow--hover": "Drop shadow applied on hover/focus by the .sf-card--interactive modifier.",
    "--sf-card-media-ratio": "Aspect ratio for .sf-card__media. Defaults to --sf-ratio-video (16/9).",
    "--sf-card-media-radius": "Corner radius for .sf-card__media. Mirrors the card's inner radius by default.",
    "--sf-card-heading-size": "Font-size for .sf-card__title. Defaults to --sf-text-xl.",
    "--sf-h1-max-width": "Max-inline-size cap for 
. Default none (unconstrained). Set to a ch value (e.g. 20ch) to prevent wide headings from spanning the full column on large screens.",
    "--sf-h2-max-width": "Max-inline-size cap for 
. Default none.",
    "--sf-h3-max-width": "Max-inline-size cap for 
. Default none.",
    "--sf-h4-max-width": "Max-inline-size cap for 
. Default none.",
    "--sf-h5-max-width": "Max-inline-size cap for 
. Default none.",
    "--sf-h6-max-width": "Max-inline-size cap for 
. Default none.",
    "--sf-shadow-lightness": "OKLCH lightness component of the shadow color. Lower = denser-looking shadows. Tune this independently of --sf-shadow-strength to control tonal weight without affecting opacity.",
    "--sf-transition-form-field": "Transition shorthand optimised for form fields: color and background at normal pace so label color shifts feel natural; border, shadow, and opacity at fast pace so focus rings appear crisply.",
    "--sf-gutter": "Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.",
    "--sf-blur": "Backdrop-filter blur amount for frosted-glass surfaces (navbars, overlays, dialogs). Default 12px. Pair with a semi-transparent background.",
    "--sf-opacity-muted": "General de-emphasis opacity for secondary content, ghost elements, or non-primary layers. Default 0.5.",
    "--sf-contrast-bias": "Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral).",
    "--sf-contrast-threshold": "OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.",
    "--sf-safe-top": "Device safe-area inset at the top edge (notch, Dynamic Island). Resolves to env(safe-area-inset-top, 0px). Use for fixed headers on notched devices.",
    "--sf-safe-right": "Device safe-area inset at the right edge (rounded corners, home indicator). Resolves to env(safe-area-inset-right, 0px).",
    "--sf-safe-bottom": "Device safe-area inset at the bottom edge (home indicator, gesture bar). Resolves to env(safe-area-inset-bottom, 0px). Use for fixed footers.",
    "--sf-safe-left": "Device safe-area inset at the left edge. Resolves to env(safe-area-inset-left, 0px).",
    "--sf-focus-ring-shadow": "Computed box-shadow value for the focus ring — two-layer technique: offset shadow in bg color, then ring shadow in focus-ring color. Tune via --sf-focus-ring-width and --sf-focus-ring-color instead of overriding this directly.",
    "--sf-font-features": "OpenType feature-settings string for body text (e.g. 'ss01', 'cv11'). Default 'normal'. Override on :root or a subtree to enable ligatures, alternate glyphs, etc.",
    "--sf-font-variation": "Variable-font axis settings for body text (e.g. \"wght\" 450). Default 'normal'. Override on :root or a subtree to activate variable-font axes.",
    "--sf-optical-sizing": "CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.",
    "--sf-font-weight-interactive": "Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold.",
    "--sf-font-weight-strong": "Font weight for strong/emphasis inline role. Defaults to bold.",
    "--sf-is-dark": "Mode flag — 0 in light mode, 1 in dark mode. Set automatically by [data-theme='dark'] and prefers-color-scheme. Drives dark-mode formula branches in calc().",
    "--sf-lumlocker": "OKLCH lightness lock value for light mode. When :root has [data-lumlocker], the 4 brand colors (primary, secondary, tertiary, action) are remapped to this L so their contrast remains constant as hues shift. Dark mode uses --sf-lumlocker-dark.",
    "--sf-lumlocker-dark": "OKLCH lightness lock value for dark mode under [data-lumlocker]. Defaults to clamp(0.5, calc(1.18 - var(--sf-lumlocker)), 0.92) — the mirror of the light L around the light/dark background midpoint — so the lock keeps equivalent contrast against the surface in both themes. Set explicitly to break the mirror.",
    "--sf-mask-scrim-start": "Start stop for edge-fade mask gradients on scroll reels / overflow containers. Use in mask-image: linear-gradient(..., transparent var(--sf-mask-scrim-start)) to fade content near the leading edge.",
    "--sf-mask-scrim-end": "End stop for edge-fade mask gradients. Mirrors --sf-mask-scrim-start for the trailing edge of a scroll container.",
    "--sf-motion-scale": "Global motion multiplier. All transition and animation durations multiply by this factor. Set to 0 to disable all motion; reduce below 1 for snappier feel.",
    "--sf-radius-scale": "Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere.",
    "--sf-space-scale": "Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs.",
    "--sf-density": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).",
    "--sf-text-scale": "Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout.",
    "--sf-text-display-scale": "Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text.",
    "--sf-palette-tint-l": "Absolute OKLCH lightness the tint steps (50-400) pull toward; sets how light the lightest palette step can reach. Default 0.97.",
    "--sf-palette-shade-l": "Absolute OKLCH lightness the shade steps (600-950) pull toward; sets how dark the darkest palette step can reach. Default 0.1.",
    "--sf-print-base-size": "Base font size for @media print stylesheets. Default 11pt. Override on :root to adjust printed body text size.",
    "--sf-print-page-margin": "Page margin for printed output. Default 2cm. Maps to @page margin.",
    "--sf-print-page-size": "Target paper size for printing. Default 'a4'. Maps to @page size. Common values: a4, letter, legal.",
    "--sf-radius-outer": "Concentric corner helper: outer radius for a container that wraps content with inner radius of --sf-radius-m. Computed as --sf-radius-m + --sf-component-pad so corners align visually.",
    "--sf-scroll-timeline-range-start": "animation-range start value for scroll-driven entrance effects. Default 'entry 0%'. Override on an element to control when its entrance animation begins.",
    "--sf-scroll-timeline-range-end": "animation-range end value for scroll-driven entrance effects. Default 'cover 30%'. Override on an element to control when its entrance animation finishes.",
    "--sf-shadow-color": "Near-black shadow tint derived from the neutral palette. Inherits the neutral's chroma and hue so colorless neutrals produce colorless shadows.",
    "--sf-shadow-glow-color": "Ambient glow tint used by --sf-shadow-glow. Override to retint all glow shadows; opacity and dark-mode boost are controlled by --sf-shadow-strength.",
    "--sf-shadow-strength": "Base opacity for the entire shadow ramp. Auto-boosted in dark mode via --sf-is-dark. Override with calc() to preserve the adaptation: e.g. calc(0.12 + var(--sf-is-dark) * 0.17).",
    "--sf-fluid-min-vw": "Minimum viewport width (in rem) at which the fluid scale clamps to its smallest values. Default 22.5rem (~360px). Part of the fluid scale engine.",
    "--sf-fluid-max-vw": "Maximum viewport width (in rem) at which the fluid scale clamps to its largest values. Default 90rem (~1440px). Part of the fluid scale engine.",
    "--sf-space-base-min": "Minimum base spacing unit (rem) at the narrowest viewport. Drives the bottom of the fluid spacing ramp. Part of the fluid scale engine.",
    "--sf-space-base-max": "Maximum base spacing unit (rem) at the widest viewport. Drives the top of the fluid spacing ramp. Part of the fluid scale engine.",
    "--sf-space-ratio-min": "Modular spacing ratio at the narrowest viewport. Controls step-to-step growth in the spacing ramp. Default 1.25 (major third). Part of the fluid scale engine.",
    "--sf-space-ratio-max": "Modular spacing ratio at the widest viewport. Controls step-to-step growth in the spacing ramp. Default 1.333 (perfect fourth). Part of the fluid scale engine.",
    "--sf-text-base-min": "Minimum base font size (rem) at the narrowest viewport. Starting point for the fluid type scale at narrow screens. Part of the fluid scale engine.",
    "--sf-text-base-max": "Maximum base font size (rem) at the widest viewport. End point for the fluid type scale at wide screens. Part of the fluid scale engine.",
    "--sf-text-ratio-min": "Modular type scale ratio at the narrowest viewport. Controls step-to-step size growth in the fluid type ramp. Default 1.25. Part of the fluid scale engine.",
    "--sf-text-ratio-max": "Modular type scale ratio at the widest viewport. Controls step-to-step size growth. Default 1.333. Part of the fluid scale engine.",
    "--sf-text-display-base-min": "Minimum display/hero font size (rem) at the narrowest viewport. Drives the floor of the fluid display type scale. Part of the fluid scale engine.",
    "--sf-text-display-base-max": "Maximum display/hero font size (rem) at the widest viewport. Drives the ceiling of the fluid display type scale. Part of the fluid scale engine.",
    "--sf-theme-transition-duration": "Duration of the .sf-theme-transition animated color-scheme crossfade. Scales with --sf-motion-scale so reduced-motion preferences are respected. Default 300ms.",
    "--sf-z-modal": "Z-index for modal dialogs and their non-top-layer backdrop scrims. Sits above overlays and dropdowns. Default 1040.",
    "--sf-z-tooltip": "Z-index for tooltips and transient floating notifications. Highest named layer in the z-index stack. Default 1060.",
    "--sf-bg-layer-fit": "object-fit applied to .sf-bg-layer when used as a bare media element, and to .sf-bg-layer > img / video / picture children. Defaults to cover.",
    "--sf-bg-layer-inset": "Inset from every edge of the parent. A single length applied uniformly; the layer size is derived from it so a non-zero inset still fills correctly.",
    "--sf-bg-layer-position": "object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).",
    "--sf-bg-layer-radius": "border-radius applied to the .sf-bg-layer layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.",
    "--sf-bg-layer-z": "z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.",
    "--sf-color-success-tint": "Near-transparent success tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-warning-tint": "Near-transparent warning tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-info-tint": "Near-transparent info tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-color-danger-tint": "Near-transparent danger tint (5% alpha) for hover-state washes and the most subtle backgrounds.",
    "--sf-gradient-action": "Gradient using action palette colors (light to saturated). Core-4 parity with the primary/secondary/tertiary gradients; drives the default .sf-btn--gradient fill.",
    "--sf-card-avatar-size": "Diameter of .sf-card__avatar. Defaults to 2.5rem.",
    "--sf-surface-bg-color": "Background colour slot for the .sf-surface-bg macro. Default: transparent.",
    "--sf-surface-bg-image": "Background image slot for the .sf-surface-bg macro (e.g. url(…)). Default: none.",
    "--sf-surface-bg-overlay": "Overlay layer composited above the image in .sf-surface-bg — e.g. a scrim gradient. Default: none.",
    "--sf-surface-bg-size": "background-size for the .sf-surface-bg image. Default: cover.",
    "--sf-surface-bg-position": "background-position for the .sf-surface-bg image. Default: center.",
    "--sf-surface-bg-repeat": "background-repeat for the .sf-surface-bg image. Default: no-repeat.",
    "--sf-surface-bg-attachment": "background-attachment for the .sf-surface-bg image (scroll vs fixed). Default: scroll.",
    "--sf-surface-bg-animation": "animation shorthand applied to the .sf-surface-bg layer, e.g. a slow pan. Default: none.",
    "--sf-animation-slide-out-up": "Ready-made animation shorthand: slides the element out upward (sf-slide-out-up) at the normal duration with ease-in.",
    "--sf-animation-slide-out-down": "Ready-made animation shorthand: slides the element out downward (sf-slide-out-down) at the normal duration with ease-in.",
    "--sf-animation-slide-out-left": "Ready-made animation shorthand: slides the element out to the left (sf-slide-out-left) at the normal duration with ease-in.",
    "--sf-animation-slide-out-right": "Ready-made animation shorthand: slides the element out to the right (sf-slide-out-right) at the normal duration with ease-in.",
    "--sf-scroll-timeline-range-exit-start": "Scroll-timeline range at which a scroll-out exit animation begins. Default: cover 70%.",
    "--sf-scroll-timeline-range-exit-end": "Scroll-timeline range at which a scroll-out exit animation finishes. Default: exit 100%.",
    "--sf-color-selection-bg--alt": "Alt selection background — the inverse-scheme highlight fill for surfaces that deliberately flip colour scheme (e.g. a dark hero in light mode).",
    "--sf-color-selection-text--alt": "Alt selection text colour paired with --sf-color-selection-bg--alt; inherits by default so the underlying text colour shows through."
  },
  "classes": {
    "sf-btn": "Interactive call-to-action button. Apply to