From 0722f06268126703a1ee3d5b8e9dfaf37f80455e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 3 Jul 2026 07:13:11 +0000 Subject: [PATCH] chore: sync framework light-mode support into the admin-app Re-syncs configurator/src (the SLASHED framework added a light/dark theme toggle to the Studio chrome) and rebuilds the admin SPA bundle. Also pins AppOverlay.svelte's root to the `dark` class: it reuses SidebarNav/DomainPanel/CommandPalette from the vendored core, which now default to light unless an ancestor opts into dark via Tailwind's class-based dark variant. The frontend overlay's own shell markup is plugin-specific and still hardcoded dark, so forcing `dark` on its root keeps the embedded components visually consistent with it instead of mismatching (light nav inside a dark shell). --- .../admin-app/.vendored-manifest.json | 106 +++++------ SLASHED-for-WP/admin-app/src/App.svelte | 14 +- .../admin-app/src/AppOverlay.svelte | 2 +- SLASHED-for-WP/admin-app/src/app.css | 5 + .../src/components/CommandPalette.svelte | 32 ++-- .../src/components/DomainPanel.svelte | 12 +- .../src/components/inputs/ClampField.svelte | 26 +-- .../src/components/inputs/ColorInput.svelte | 10 +- .../components/inputs/OklchColorDesk.svelte | 26 +-- .../src/components/inputs/PowerKnobRow.svelte | 8 +- .../components/inputs/RangeWithNumber.svelte | 6 +- .../src/components/inputs/SliderRow.svelte | 14 +- .../src/components/inputs/TokenRow.svelte | 16 +- .../src/components/panels/AllTokensTab.svelte | 22 +-- .../src/components/panels/BordersPanel.svelte | 50 ++--- .../components/panels/CheatsheetPanel.svelte | 58 +++--- .../src/components/panels/ColorsPanel.svelte | 166 ++++++++--------- .../src/components/panels/EffectsPanel.svelte | 52 +++--- .../src/components/panels/ExportPanel.svelte | 28 +-- .../panels/GenericTokenPanel.svelte | 8 +- .../src/components/panels/HomePanel.svelte | 44 ++--- .../src/components/panels/LayoutPanel.svelte | 110 +++++------ .../src/components/panels/MacrosPanel.svelte | 82 ++++----- .../src/components/panels/MiscPanel.svelte | 146 +++++++-------- .../src/components/panels/MotionPanel.svelte | 72 ++++---- .../src/components/panels/ShadowsPanel.svelte | 36 ++-- .../src/components/panels/SpacingPanel.svelte | 16 +- .../src/components/panels/ThemesPanel.svelte | 36 ++-- .../components/panels/TypographyPanel.svelte | 172 +++++++++--------- .../src/components/panels/WcagPanel.svelte | 60 +++--- .../src/components/shell/PreviewPanel.svelte | 40 ++-- .../src/components/shell/SidebarNav.svelte | 8 +- .../src/components/shell/StatusBar.svelte | 8 +- .../src/components/shell/StudioHeader.svelte | 53 ++++-- .../admin-app/src/lib/theme.svelte.ts | 67 +++++++ SLASHED-for-WP/admin-app/src/main.ts | 4 + SLASHED-for-WP/assets/admin-app/app.css | 2 +- SLASHED-for-WP/assets/admin-app/app.js | 46 ++--- 38 files changed, 879 insertions(+), 784 deletions(-) create mode 100644 SLASHED-for-WP/admin-app/src/lib/theme.svelte.ts diff --git a/SLASHED-for-WP/admin-app/.vendored-manifest.json b/SLASHED-for-WP/admin-app/.vendored-manifest.json index c8fe6ad2..2ba7812c 100644 --- a/SLASHED-for-WP/admin-app/.vendored-manifest.json +++ b/SLASHED-for-WP/admin-app/.vendored-manifest.json @@ -3,205 +3,209 @@ "description": "Files vendored from the SLASHED framework configurator. DO NOT edit directly — make changes in codeslash-dev/SLASHED → configurator/src/ and re-run npm run sync.", "frameworkRepo": "https://github.com/codeslash-dev/SLASHED", "configuratorSrc": "configurator/src/", - "source": "github:codeslash-dev/slashed@main", - "syncedAt": "2026-07-02T22:39:04.951Z" + "source": "local", + "syncedAt": "2026-07-03T07:12:02.904Z" }, "vendoredFiles": [ { "file": "src/app.css", - "source": "github:codeslash-dev/slashed/configurator/src/app.css@main" + "source": "local:configurator/src/app.css" }, { "file": "src/App.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/App.svelte@main" + "source": "local:configurator/src/App.svelte" }, { "file": "src/components/CommandPalette.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/CommandPalette.svelte@main" + "source": "local:configurator/src/components/CommandPalette.svelte" }, { "file": "src/components/DomainPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/DomainPanel.svelte@main" + "source": "local:configurator/src/components/DomainPanel.svelte" }, { "file": "src/components/inputs/ClampField.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ClampField.svelte@main" + "source": "local:configurator/src/components/inputs/ClampField.svelte" }, { "file": "src/components/inputs/ColorInput.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/ColorInput.svelte@main" + "source": "local:configurator/src/components/inputs/ColorInput.svelte" }, { "file": "src/components/inputs/OklchColorDesk.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/OklchColorDesk.svelte@main" + "source": "local:configurator/src/components/inputs/OklchColorDesk.svelte" }, { "file": "src/components/inputs/PowerKnobRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/PowerKnobRow.svelte@main" + "source": "local:configurator/src/components/inputs/PowerKnobRow.svelte" }, { "file": "src/components/inputs/RangeWithNumber.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/RangeWithNumber.svelte@main" + "source": "local:configurator/src/components/inputs/RangeWithNumber.svelte" }, { "file": "src/components/inputs/SliderRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/SliderRow.svelte@main" + "source": "local:configurator/src/components/inputs/SliderRow.svelte" }, { "file": "src/components/inputs/TokenRow.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/inputs/TokenRow.svelte@main" + "source": "local:configurator/src/components/inputs/TokenRow.svelte" }, { "file": "src/components/panels/AllTokensTab.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/AllTokensTab.svelte@main" + "source": "local:configurator/src/components/panels/AllTokensTab.svelte" }, { "file": "src/components/panels/BordersPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/BordersPanel.svelte@main" + "source": "local:configurator/src/components/panels/BordersPanel.svelte" }, { "file": "src/components/panels/CheatsheetPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/CheatsheetPanel.svelte@main" + "source": "local:configurator/src/components/panels/CheatsheetPanel.svelte" }, { "file": "src/components/panels/ColorsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ColorsPanel.svelte@main" + "source": "local:configurator/src/components/panels/ColorsPanel.svelte" }, { "file": "src/components/panels/EffectsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/EffectsPanel.svelte@main" + "source": "local:configurator/src/components/panels/EffectsPanel.svelte" }, { "file": "src/components/panels/ExportPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ExportPanel.svelte@main" + "source": "local:configurator/src/components/panels/ExportPanel.svelte" }, { "file": "src/components/panels/GenericTokenPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/GenericTokenPanel.svelte@main" + "source": "local:configurator/src/components/panels/GenericTokenPanel.svelte" }, { "file": "src/components/panels/HomePanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/HomePanel.svelte@main" + "source": "local:configurator/src/components/panels/HomePanel.svelte" }, { "file": "src/components/panels/LayoutPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/LayoutPanel.svelte@main" + "source": "local:configurator/src/components/panels/LayoutPanel.svelte" }, { "file": "src/components/panels/MacrosPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MacrosPanel.svelte@main" + "source": "local:configurator/src/components/panels/MacrosPanel.svelte" }, { "file": "src/components/panels/MiscPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MiscPanel.svelte@main" + "source": "local:configurator/src/components/panels/MiscPanel.svelte" }, { "file": "src/components/panels/MotionPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/MotionPanel.svelte@main" + "source": "local:configurator/src/components/panels/MotionPanel.svelte" }, { "file": "src/components/panels/ShadowsPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ShadowsPanel.svelte@main" + "source": "local:configurator/src/components/panels/ShadowsPanel.svelte" }, { "file": "src/components/panels/SpacingPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/SpacingPanel.svelte@main" + "source": "local:configurator/src/components/panels/SpacingPanel.svelte" }, { "file": "src/components/panels/ThemesPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/ThemesPanel.svelte@main" + "source": "local:configurator/src/components/panels/ThemesPanel.svelte" }, { "file": "src/components/panels/TypographyPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/TypographyPanel.svelte@main" + "source": "local:configurator/src/components/panels/TypographyPanel.svelte" }, { "file": "src/components/panels/WcagPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/panels/WcagPanel.svelte@main" + "source": "local:configurator/src/components/panels/WcagPanel.svelte" }, { "file": "src/components/shell/PreviewPanel.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/PreviewPanel.svelte@main" + "source": "local:configurator/src/components/shell/PreviewPanel.svelte" }, { "file": "src/components/shell/SidebarNav.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/SidebarNav.svelte@main" + "source": "local:configurator/src/components/shell/SidebarNav.svelte" }, { "file": "src/components/shell/StatusBar.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StatusBar.svelte@main" + "source": "local:configurator/src/components/shell/StatusBar.svelte" }, { "file": "src/components/shell/StudioHeader.svelte", - "source": "github:codeslash-dev/slashed/configurator/src/components/shell/StudioHeader.svelte@main" + "source": "local:configurator/src/components/shell/StudioHeader.svelte" }, { "file": "src/data/api-index.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/api-index.generated.json@main" + "source": "local:configurator/src/data/api-index.generated.json" }, { "file": "src/data/bundles.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/bundles.generated.json@main" + "source": "local:configurator/src/data/bundles.generated.json" }, { "file": "src/data/classes.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/classes.generated.json@main" + "source": "local:configurator/src/data/classes.generated.json" }, { "file": "src/data/domain-patterns.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/domain-patterns.json@main" + "source": "local:configurator/src/data/domain-patterns.json" }, { "file": "src/data/token-registry.generated.json", - "source": "github:codeslash-dev/slashed/configurator/src/data/token-registry.generated.json@main" + "source": "local:configurator/src/data/token-registry.generated.json" }, { "file": "src/lib/basics.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/basics.ts@main" + "source": "local:configurator/src/lib/basics.ts" }, { "file": "src/lib/codec.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/codec.ts@main" + "source": "local:configurator/src/lib/codec.ts" }, { "file": "src/lib/colorUtils.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/colorUtils.ts@main" + "source": "local:configurator/src/lib/colorUtils.ts" }, { "file": "src/lib/domains.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/domains.ts@main" + "source": "local:configurator/src/lib/domains.ts" }, { "file": "src/lib/lumlockerPreview.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/lumlockerPreview.svelte.ts@main" + "source": "local:configurator/src/lib/lumlockerPreview.svelte.ts" }, { "file": "src/lib/persistence.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/persistence.ts@main" + "source": "local:configurator/src/lib/persistence.ts" }, { "file": "src/lib/powerKnobs.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/powerKnobs.ts@main" + "source": "local:configurator/src/lib/powerKnobs.ts" }, { "file": "src/lib/previewResolver.svelte.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/previewResolver.svelte.ts@main" + "source": "local:configurator/src/lib/previewResolver.svelte.ts" }, { "file": "src/lib/savedThemes.ts", - "source": "github:codeslash-dev/slashed/configurator/src/lib/savedThemes.ts@main" + "source": "local:configurator/src/lib/savedThemes.ts" + }, + { + "file": "src/lib/theme.svelte.ts", + "source": "local:configurator/src/lib/theme.svelte.ts" }, { "file": "src/main.ts", - "source": "github:codeslash-dev/slashed/configurator/src/main.ts@main" + "source": "local:configurator/src/main.ts" }, { "file": "src/types.ts", - "source": "github:codeslash-dev/slashed/configurator/src/types.ts@main" + "source": "local:configurator/src/types.ts" }, { "file": "src/vite-env.d.ts", - "source": "github:codeslash-dev/slashed/configurator/src/vite-env.d.ts@main" + "source": "local:configurator/src/vite-env.d.ts" } ] } diff --git a/SLASHED-for-WP/admin-app/src/App.svelte b/SLASHED-for-WP/admin-app/src/App.svelte index 9a256f18..b7495586 100644 --- a/SLASHED-for-WP/admin-app/src/App.svelte +++ b/SLASHED-for-WP/admin-app/src/App.svelte @@ -261,7 +261,7 @@ onclick={() => { mobileView = view; }} aria-pressed={mobileView === view} class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${ - mobileView === view ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300" + mobileView === view ? "text-indigo-700 dark:text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300" }`} > {label} @@ -271,7 +271,7 @@ {/snippet} -
+
-
+
{@render foldToggleButton("controls", SlidersHorizontal, "Controls")} {@render foldToggleButton("preview", Eye, "Preview")}
@@ -309,10 +309,10 @@ -
+
-
- +
+ {DOMAIN_LABELS[domain] ?? domain} {#if domainOverridesCount > 0} @@ -320,7 +320,7 @@ onclick={handleResetDomain} data-testid="reset-category" title={`Reset ${domainOverridesCount} override${domainOverridesCount !== 1 ? "s" : ""} in ${DOMAIN_LABELS[domain] ?? domain}`} - class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0" + class="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-bold text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer shrink-0" > Reset {domainOverridesCount} diff --git a/SLASHED-for-WP/admin-app/src/AppOverlay.svelte b/SLASHED-for-WP/admin-app/src/AppOverlay.svelte index 4e8d3f7c..b6028527 100644 --- a/SLASHED-for-WP/admin-app/src/AppOverlay.svelte +++ b/SLASHED-for-WP/admin-app/src/AppOverlay.svelte @@ -320,7 +320,7 @@ bar's own dropdown submenus (also 99999) stay clickable above the panel. -->
{ if (e.target === e.currentTarget) onClose(); }} > -
+
-
+
@@ -87,42 +87,42 @@ bind:value={query} onkeydown={handleKeydown} placeholder="Search tokens… (e.g. radius, primary, duration)" - class="flex-1 bg-transparent text-[13px] text-slate-100 placeholder-slate-600 outline-none" + class="flex-1 bg-transparent text-[13px] text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 outline-none" /> - Esc + Esc
{#if query.trim() && results.length === 0} -
No tokens matching "{query}"
+
No tokens matching "{query}"
{:else if !query.trim()} -
Type to search tokens by name or description
+
Type to search tokens by name or description
{:else} {#each results as r, i (r.token.name)}
-
+
-
+
+
{/if}
diff --git a/SLASHED-for-WP/admin-app/src/components/inputs/ColorInput.svelte b/SLASHED-for-WP/admin-app/src/components/inputs/ColorInput.svelte index 1a927f52..ffa66e25 100644 --- a/SLASHED-for-WP/admin-app/src/components/inputs/ColorInput.svelte +++ b/SLASHED-for-WP/admin-app/src/components/inputs/ColorInput.svelte @@ -61,7 +61,7 @@
-
+
{#if !isVar} {:else} + {/if}
diff --git a/SLASHED-for-WP/admin-app/src/components/inputs/OklchColorDesk.svelte b/SLASHED-for-WP/admin-app/src/components/inputs/OklchColorDesk.svelte index e63e7fec..efdf3ebe 100644 --- a/SLASHED-for-WP/admin-app/src/components/inputs/OklchColorDesk.svelte +++ b/SLASHED-for-WP/admin-app/src/components/inputs/OklchColorDesk.svelte @@ -50,19 +50,19 @@ } -
+
{#if expanded} -
+
- Lightness (L) - {parsed.l.toFixed(3)} + Lightness (L) + {parsed.l.toFixed(3)}
- Chroma (C) - {parsed.c.toFixed(3)} + Chroma (C) + {parsed.c.toFixed(3)}
- Hue (H) - {parsed.h.toFixed(1)}° + Hue (H) + {parsed.h.toFixed(1)}°
{#if overridden} diff --git a/SLASHED-for-WP/admin-app/src/components/inputs/PowerKnobRow.svelte b/SLASHED-for-WP/admin-app/src/components/inputs/PowerKnobRow.svelte index f6bdaa6b..6d156ca4 100644 --- a/SLASHED-for-WP/admin-app/src/components/inputs/PowerKnobRow.svelte +++ b/SLASHED-for-WP/admin-app/src/components/inputs/PowerKnobRow.svelte @@ -28,15 +28,15 @@
- {knob.label} + {knob.label} {#if knob.driving !== undefined} - → {knob.driving} tokens + → {knob.driving} tokens {/if}
{#if isOverridden} @@ -51,6 +51,6 @@ onChange={handleChange} /> {#if knob.help} -

{knob.help}

+

{knob.help}

{/if}
diff --git a/SLASHED-for-WP/admin-app/src/components/inputs/RangeWithNumber.svelte b/SLASHED-for-WP/admin-app/src/components/inputs/RangeWithNumber.svelte index d21404c4..f0fb6374 100644 --- a/SLASHED-for-WP/admin-app/src/components/inputs/RangeWithNumber.svelte +++ b/SLASHED-for-WP/admin-app/src/components/inputs/RangeWithNumber.svelte @@ -18,7 +18,7 @@
-
+
@@ -47,7 +47,7 @@ {value} {disabled} onchange={(e) => onChange(clamp(parseFloat((e.target as HTMLInputElement).value) || 0))} - class="w-14 bg-white/5 border border-white/10 rounded text-[11px] font-mono text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40" + class="w-14 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded text-[11px] font-mono text-slate-800 dark:text-slate-200 text-right px-1.5 py-0.5 focus:outline-none focus:border-indigo-500 disabled:opacity-40" /> {#if unit} {unit} diff --git a/SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte b/SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte index 837dc944..a6c9c0ab 100644 --- a/SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte +++ b/SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte @@ -45,7 +45,7 @@
{#if label} - {label} + {label} {:else} {/if} @@ -56,15 +56,15 @@ title={showRaw ? "Switch to slider" : "Enter raw CSS value"} class={`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${ showRaw - ? 'text-indigo-400' - : 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-400' + ? 'text-indigo-600 dark:text-indigo-400' + : 'opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400' }`} ></> {/if} {#if overridden} {/if}
@@ -85,16 +85,16 @@ const v = rawDraft.trim(); if (v && onRawSet) onRawSet(v); }} - class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500" + class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500" /> {:else} {#if rawDefault && !overridden} -

default: {rawDefault}

+

default: {rawDefault}

{/if} {/if} {#if help} -

{help}

+

{help}

{/if}
diff --git a/SLASHED-for-WP/admin-app/src/components/inputs/TokenRow.svelte b/SLASHED-for-WP/admin-app/src/components/inputs/TokenRow.svelte index 464c9f5b..9699b8df 100644 --- a/SLASHED-for-WP/admin-app/src/components/inputs/TokenRow.svelte +++ b/SLASHED-for-WP/admin-app/src/components/inputs/TokenRow.svelte @@ -33,12 +33,12 @@ let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : ""); -
+
{#if type === "color"}
{:else} @@ -46,11 +46,11 @@ {/if}
-
+
{shortName}
{#if token.description} -
{token.description}
+
{token.description}
{/if}
@@ -67,16 +67,16 @@ if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur(); if (e.key === "Escape") { expanded = false; } }} - class="w-28 bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-200 focus:outline-none text-right" + class="w-28 bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-1.5 py-0.5 text-[10px] font-mono text-slate-800 dark:text-slate-200 focus:outline-none text-right" /> {:else} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/AllTokensTab.svelte b/SLASHED-for-WP/admin-app/src/components/panels/AllTokensTab.svelte index f78b1c24..45ace287 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/AllTokensTab.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/AllTokensTab.svelte @@ -52,14 +52,14 @@ placeholder="Search tokens…" value={query} oninput={(e) => { query = (e.target as HTMLInputElement).value; }} - class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" + class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" />
- + {filtered().length}/{domainTokens.length}
@@ -87,27 +87,27 @@
- Public ({publicCount}) + Public ({publicCount})
- Advanced ({advancedCount}) + Advanced ({advancedCount})
{#if showInternal}
- Internal ({internalCount}) + Internal ({internalCount})
{/if}
-
+
{#if filtered().length === 0} -
+
{onlyModified ? "No modified tokens in this domain" : "No tokens found"}
{:else} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte index 67be49da..f480d283 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte @@ -103,13 +103,13 @@ onSet={(v) => onSet("--sf-color-border", v)} onReset={() => onReset("--sf-color-border")} /> -

+

Drives --sf-color-border--strong, --subtle, --translucent automatically.

{/if} -
+
@@ -145,10 +145,10 @@ /> -
+
{#each [1, 2, 3, 4] as base (base)}
- {base}px → + {base}px →
-
+
@@ -189,8 +189,8 @@ onclick={() => s === row.default ? onReset(row.token) : onSet(row.token, s)} class={`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${ current === s - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} > @@ -203,19 +203,19 @@
-
+
Border sample
- {(1 * borderScale).toFixed(1)}px · {borderStyle} + {(1 * borderScale).toFixed(1)}px · {borderStyle}
{/if}
-
+
@@ -229,7 +229,7 @@ {#if showDividers}
-
Color
+
Color
-
+
@@ -290,7 +290,7 @@ onReset={() => onReset("--sf-focus-ring-offset")} />
-
Ring color
+
Ring color
-
+
Focus preview @@ -312,7 +312,7 @@ {/if}
-
+
Radius
@@ -322,13 +322,13 @@ {#if showFineTune} -
+
{#each RADIUS_FINE as r (r.name)} {showRadiusPreview ? "▲" : "▼"} {#if showRadiusPreview} -
+
{#each RADIUS_STEPS as step (step)} {@const base = BASE_RADII[step] ?? 6} @@ -370,7 +370,7 @@ class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30" style={`border-radius: ${Math.min(computed, 9999)}px`} >
- {step} + {step}
{/each}
@@ -378,14 +378,14 @@ {/if}
-
+
-
+
@@ -112,27 +112,27 @@
{#if tab === 'classes'} {#if filteredClasses().length === 0} -
No classes match "{query}"
+
No classes match "{query}"
{:else} {#each [...classGroups.entries()] as [cat, groups] (cat)}
-
{cat}
+
{cat}
{#each [...groups.entries()] as [grp, items] (grp)} {#if grp} -
{grp}
+
{grp}
{/if}
{#each items as cls (cls.name)} -
+
- {cls.selector} + {cls.selector} {#if cls.kind} {cls.kind} {/if} {#if cls.optional} - optional + optional {/if}
{#if cls.description} @@ -142,10 +142,10 @@ {#if showBrandSources} -

+

OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base (the "Surface" color) and shades (600–950) mix toward Text (driven by Neutral) — so editing Base or Neutral below will shift every family's tints/shades too. That's expected, not a bug. @@ -526,8 +526,8 @@ onclick={() => toggleDarkMode(light.colorKey, dark, light.name)} class={`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${ isAutoMode - ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-300" - : "border-white/10 text-slate-500 hover:text-slate-300" + ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300" + : "border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300" }`} >{isAutoMode ? "Auto dark" : "Manual dark"} {/if} @@ -552,12 +552,12 @@ {@const dText = getDarkText()}

- L + L
{#each SWATCH_STEPS as step (step)} {@const resolved = paletteSwatch(light.colorKey, lightSrcVal, step, lSurface, lText)}
{@render swatchTip(`${light.colorKey}-${step}`)}
@@ -565,12 +565,12 @@
- D + D
{#each SWATCH_STEPS as step (step)} {@const resolved = paletteSwatch(light.colorKey, darkSrcVal, step, dSurface, dText)}
{@render swatchTip(`${light.colorKey}-${step}`)}
@@ -579,7 +579,7 @@
{#if light.colorKey === "base"} -

+

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. Light and dark use the same L per step, so at the default near-zero chroma the two rows look almost identical — add chroma above to see them diverge by hue. @@ -597,9 +597,9 @@ /> {:else if dark && isAutoMode} {@const derivedDark = deriveDarkFromLight(sourceValue(light), light.colorKey)} -

+
@@ -612,7 +612,7 @@ {/if}
-
+
@@ -625,7 +625,7 @@ {showLumlocker ? "▲" : "▼"} {#if showLumlocker} -

+

Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH lightness — useful for always-stable sections. Enable on canvas to preview.

@@ -638,8 +638,8 @@ /> -
-
+
+
Color Current Locked @@ -649,10 +649,10 @@ {@const cur = paintTheme(`var(--sf-color-${lk.key}-source-${side})`, side as "light" | "dark", "")} {@const locked = lockedColor(lk.key, side as "light" | "dark")}
- {lk.label} {side === "light" ? "L" : "D"} - - → - + {lk.label} {side === "light" ? "L" : "D"} + + → +
{/each} {/each} @@ -663,14 +663,14 @@ onclick={() => { lumlockerPreview.value = !lumlockerPreview.value; }} class={`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${ lumlockerPreview.value - ? "bg-indigo-600/25 border-indigo-500/40 text-indigo-200" - : "border-white/10 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-600/25 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{lumlockerPreview.value ? "✓ LumLocker active on canvas — click to disable" : "Preview LumLocker on live canvas"} {/if}
-
+
@@ -683,7 +683,7 @@ {showStatus ? "▲" : "▼"} {#if showStatus} -

+

Dark mode is auto-derived from each light source by default. Switch to Manual dark to set a bespoke dark value.

@@ -699,8 +699,8 @@ onclick={() => toggleDarkMode(light.colorKey, dark, light.name)} class={`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${ isAutoMode - ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-300" - : "border-white/10 text-slate-500 hover:text-slate-300" + ? "border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300" + : "border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300" }`} >{isAutoMode ? "Auto dark" : "Manual dark"} {/if} @@ -724,9 +724,9 @@ /> {:else if dark && isAutoMode} {@const derivedDark = deriveDarkFromLight(sourceValue(light), light.colorKey)} -
+
@@ -740,18 +740,18 @@
{#each STATUS_VARIANTS as v (v.label)} - {v.label} + {v.label} {/each}
{#each [["L", "light"], ["D", "dark"]] as [tag, side] (tag)}
- {tag} + {tag}
{#each STATUS_VARIANTS as v (v.label)} {@const resolved = paintTheme(v.expr(light.colorKey), side as "light" | "dark", "")}
{@render swatchTip(`${light.colorKey}-${v.label.toLowerCase()}`)}
@@ -760,7 +760,7 @@
{/each}
-

+

Status colors don't ride the brand mix curve — only the resolved color plus subtle/muted alpha washes and a strong shade are derived. There's no -50…-950 ramp for success/warning/info/danger.

@@ -770,7 +770,7 @@ {/if}
-
+
@@ -783,7 +783,7 @@ {showTextContrast ? "▲" : "▼"} {#if showTextContrast} -

+

Controls whether text on brand-coloured surfaces is light or dark.

{#each contrastKnobs as k (k.name)} @@ -795,18 +795,18 @@ {/each} -
+
{#each KEY_CONTRAST_PAIRS as pair (pair.label)} {@const ratio = pairRatio(pair.fg, pair.bg)} {#if ratio !== null}
Aa {pair.label} - {ratio.toFixed(2)}:1 - = 4.5 ? "bg-emerald-500/20 text-emerald-300" : "bg-amber-500/20 text-amber-300"}`}> + {ratio.toFixed(2)}:1 + = 4.5 ? "bg-emerald-500/20 text-emerald-700 dark:text-emerald-300" : "bg-amber-500/20 text-amber-700 dark:text-amber-300"}`}> {ratio >= 4.5 ? "AA" : ratio >= 3 ? "AA-L" : "✗"}
@@ -815,7 +815,7 @@ {#if onSelectDomain} {/if}
@@ -831,7 +831,7 @@ {/if}
-
+
@@ -854,7 +854,7 @@ {@const _curveText = curvePreviewSide === "light" ? getLightText() : getDarkText()} {@const _miniSurface = curvePreviewSide === "light" ? getLightSurface() : getDarkSurface()} {@const _miniText = curvePreviewSide === "light" ? getLightText() : getDarkText()} -

+

Controls how much color is mixed into each palette step. Step 500 is always the source color.

@@ -864,8 +864,8 @@ onclick={() => onBulkChange(p.patch as Record)} class={`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${ activeCurvePreset?.label === p.label - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} > {p.label} @@ -876,7 +876,7 @@
-
Tints (50–400) — mixed toward surface
+
Tints (50–400) — mixed toward surface
{#each MIX_STEPS.filter((s) => s.step === "tint") as s (s.name)}
-
Shades (600–950) — mixed toward text
+
Shades (600–950) — mixed toward text
{#each MIX_STEPS.filter((s) => s.step === "shade") as s (s.name)} -
+
- Palette & curve preview -
+ Palette & curve preview +
{#each ["light", "dark"] as side (side)} {/each} @@ -930,29 +930,29 @@ {@const step = s.label} {@const swatch = computePaletteSwatch(_curvePrimSrc, step, _curveSurface, _curveText)}
- {Math.round(val)} + {Math.round(val)}
{@render swatchTip(`primary-${step}`)}
- {step} + {step}
{/each}
-

Bar height = mix amount · fill = the resolved primary palette swatch at each step

+

Bar height = mix amount · fill = the resolved primary palette swatch at each step

-
+
- Mini palettes — all brand colors -
+ Mini palettes — all brand colors +
{#each ["light", "dark"] as side (side)} {/each} @@ -966,12 +966,12 @@ : (BRAND_SOURCES.find(s => s.name === miniDOvKey)?.default ?? deriveDarkFromLight(miniLSrc, colorKey)))} {@const miniSrc = curvePreviewSide === "light" ? miniLSrc : miniDSrc}
- {colorKey} + {colorKey}
{#each SWATCH_STEPS as step (step)} {@const swatch = computePaletteSwatch(miniSrc, step, _miniSurface, _miniText)}
{@render swatchTip(`${colorKey}-${step}`)}
@@ -983,7 +983,7 @@ {/if}
-
+
@@ -996,7 +996,7 @@ {showGradients ? "▲" : "▼"} {#if showGradients} -

+

Auto-derived from your brand colors. Use the angle/direction and stop controls, or edit the raw value for full control.

@@ -1006,13 +1006,13 @@ {#each GRADIENT_TOKENS.filter((g) => g.group === grp) as g (g.name)} {@const expr = `var(${g.name})`} {@const e = gradEdit(g)} -
+
- {g.label} + {g.label} {#if g.name in overrides} - + {/if}
@@ -1024,7 +1024,7 @@ {/each} @@ -1037,7 +1037,7 @@ oninput={(ev) => setGradientPart(g, "angle", parseInt((ev.target as HTMLInputElement).value))} class="flex-1 accent-indigo-500" /> - {e.angle}° + {e.angle}°
{/if} @@ -1046,17 +1046,17 @@ setGradientPart(g, "stop1", (ev.target as HTMLInputElement).value.trim())} - class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500" + class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500" /> setGradientPart(g, "stop2", (ev.target as HTMLInputElement).value.trim())} - class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500" + class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 text-[8px] font-mono text-slate-700 dark:text-slate-300 focus:outline-none focus:border-indigo-500" />
-
+
default: {g.formula}
@@ -1070,7 +1070,7 @@ delete gradientEdits[g.name]; v ? onSet(g.name, v) : onReset(g.name); }} - class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-0.5 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" + class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-0.5 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" />
@@ -1080,7 +1080,7 @@ {/if}
-
+
@@ -1093,8 +1093,8 @@ {showColorScheme ? "▲" : "▼"} {#if showColorScheme} -

- --sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background. +

+ --sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

{#each [["light dark", "light dark (default)"], ["light", "Light only"], ["dark", "Dark only"]] as [val, label] (val)} @@ -1103,8 +1103,8 @@ onclick={() => val === "light dark" ? onReset("--sf-color-scheme") : onSet("--sf-color-scheme", val)} class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${ current === val - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{label} {/each} @@ -1112,7 +1112,7 @@ {/if}
-
+
@@ -1125,14 +1125,14 @@ {showSemanticOverrides ? "▲" : "▼"} {#if showSemanticOverrides} -

+

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

{#each SEMANTIC_OVERRIDES as s (s.name)} {@const resolved = paint(`var(${s.name})`, "")}
-
{s.label}
+
{s.label}
-
+

- All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly. + All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

diff --git a/SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte index 9f565690..338fa6c2 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte @@ -66,23 +66,23 @@ onReset={() => onReset("--sf-blur")} /> -
+
{#each Array.from({ length: 12 }) as _, i (i)}
{/each}
- {blur}px + {blur}px
{/if}
-
+
@@ -117,14 +117,14 @@ onReset={() => onReset("--sf-state-pending-opacity")} /> -
+
{#each [ { label: "muted", val: opacityMuted }, { label: "disabled", val: opacityDisabled }, { label: "pending", val: pendingOpacity }, ] as row (row.label)}
- {row.label} + {row.label}
{row.val}
@@ -133,7 +133,7 @@ {/if}
-
+
@@ -146,13 +146,13 @@ {showScrim ? "▲" : "▼"} {#if showScrim} -

- Gradient overlay for hero images and media content. Used by the .sf-scrim macro. +

+ Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

-
Color
+
Color
-
Direction
+
Direction
{#each SCRIM_DIRECTIONS as d (d.value)}
-
+
-
+
@@ -215,7 +215,7 @@ { label: "Track color", token: "--sf-scrollbar-track", val: scrollbarTrack }, ] as row (row.token)}
-
{row.label}
+
{row.label}
{/each} -
+
- Scrollbar preview + Scrollbar preview
{/if}
-
+
@@ -259,7 +259,7 @@ {/if}
-
+
@@ -272,14 +272,14 @@ {showTextShadow ? "▲" : "▼"} {#if showTextShadow} -

- Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). - Edit each token directly — use none to disable. +

+ Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). + Edit each token directly — use none to disable.

{#each TEXT_SHADOW_TOKENS as t (t.token)}
-
{t.label}
+
{t.label}
{#if t.token in overrides} - + {/if}
{/each} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte index c25ef76a..07cbdefc 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte @@ -72,7 +72,7 @@
Export
-

+

{count > 0 ? `${count} override${count !== 1 ? "s" : ""} ready to export.` : "No overrides yet. Customise tokens, then export."} @@ -83,11 +83,11 @@ @@ -115,22 +115,22 @@

- 
{css || "/* No overrides */"}
+ 
{css || "/* No overrides */"}
-
Usage
-
+
Usage
+
Paste this CSS into your project after the SLASHED import. 
{`@import 'slashed/slashed.full.css';
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/GenericTokenPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/GenericTokenPanel.svelte
index 40d72fbc..6310a705 100644
--- a/SLASHED-for-WP/admin-app/src/components/panels/GenericTokenPanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/panels/GenericTokenPanel.svelte
@@ -33,7 +33,7 @@
   

     
{domain} tokens

     {#if modifiedCount > 0}
-      {modifiedCount} modified
+      {modifiedCount} modified
     {/if}
   

 
@@ -42,11 +42,11 @@
     placeholder={`Search ${domain} tokens…`}
     value={query}
     oninput={(e) => { query = (e.target as HTMLInputElement).value; }}
-    class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+    class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
   />
 
   {#if filtered().length === 0}
-    
No tokens found

+    
No tokens found

   {:else}
     

       {#each filtered().slice(0, 60) as t (t.name)}
@@ -58,7 +58,7 @@
         />
       {/each}
       {#if filtered().length > 60}
-        

+        

           {filtered().length - 60} more — refine your search
         

       {/if}
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
index 3a695283..48218a06 100644
--- a/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
+++ b/SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
@@ -68,13 +68,13 @@
   
   

     

-      
-      SLASHED Studio
+      
+      SLASHED Studio
     

-    

+    

       Configure every SLASHED design token visually. Changes appear live in the preview.
       {#if overridesCount > 0}
-        You have {overridesCount} active override{overridesCount !== 1 ? "s" : ""}.
+        You have {overridesCount} active override{overridesCount !== 1 ? "s" : ""}.
       {:else}
         Pick any domain below to get started.
       {/if}
@@ -82,7 +82,7 @@
     {#if overridesCount > 0}
       
@@ -98,19 +98,19 @@
         {@const DomainIcon = d.icon}
         
       {/each}
     

@@ -124,16 +124,16 @@
         {@const ToolIcon = t.icon}
         
       {/each}
     

@@ -145,7 +145,7 @@
       
Saved themes
@@ -155,28 +155,28 @@ bind:value={newName} placeholder="Save current as…" onkeydown={(e) => { if (e.key === "Enter") handleQuickSave(); }} - class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" + class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" />
{#if savedThemes.length === 0} -

No saved themes yet. Configure tokens, then save.

+

No saved themes yet. Configure tokens, then save.

{:else}
{#each savedThemes.slice(0, 6) as theme (theme.id)} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelte index 89b8f2c7..8eddc9f3 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelte @@ -90,7 +90,7 @@
-
Narrow
+
Narrow
-
Prose
+
Prose
-
Default
+
Default
-
Wide
+
Wide
-
+
{#each [ { label: "narrow", value: containerNarrow, max: containerWide, unit: "rem" }, { label: "prose", value: containerProse, max: containerWide * 1.5, unit: "ch" }, @@ -136,8 +136,8 @@ { label: "wide", value: containerWide, max: containerWide, unit: "rem" }, ] as row (row.label)}
- {row.label} -
+ {row.label} +
-
+
@@ -186,7 +186,7 @@ {/if}
-
+
@@ -208,7 +208,7 @@ />
-
Named sizes (grid-min-xs → 2xl)
+
Named sizes (grid-min-xs → 2xl)
{#each [ { label: "xs", token: "--sf-grid-min-xs", def: 10 }, @@ -227,21 +227,21 @@ {/each}
-
-
Preview at 360px panel width
+
+
Preview at 360px panel width
{#each Array.from({ length: 8 }) as _, i (i)} -
col
+
col
{/each}
{/if}
-
+
@@ -256,7 +256,7 @@ {#if showHeaderHeight}
-
Mobile
+
Mobile
-
Desktop
+
Desktop
-
+
{#each [1, 2, 3] as i (i)} -
+
{/each}
-
{headerMobile}rem mobile · {headerDesktop}rem desktop
+
{headerMobile}rem mobile · {headerDesktop}rem desktop
{/if}
-
+
@@ -304,10 +304,10 @@ {showStickyOffset ? "▲" : "▼"} {#if showStickyOffset} -

Offsets position:sticky elements below a fixed header. Defaults to header heights.

+

Offsets position:sticky elements below a fixed header. Defaults to header heights.

-
Mobile
+
Mobile
-
Desktop
+
Desktop
-
+
@@ -354,26 +354,26 @@ onChange={(v) => onSet("--sf-sidebar-width", `${v}rem`)} onReset={() => onReset("--sf-sidebar-width")} /> -
+
- {sidebarWidth}rem + {sidebarWidth}rem
-
+
{/if}
-
+
-
+
@@ -401,7 +401,7 @@ onclick={() => { showMore = !showMore; }} aria-expanded={showMore} aria-controls="more-layout-primitives" - class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1" + class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors cursor-pointer py-1" > More layout primitives {showMore ? "▲" : "▼"} @@ -441,21 +441,21 @@ { label: "Justify", token: "--sf-cluster-justify", def: "flex-start", opts: ["flex-start","center","flex-end","space-between","space-around"] }, ] as row (row.token)}
- {row.label} + {row.label} {#if row.token in overrides} - + {/if}
{/each} @@ -472,7 +472,7 @@ onReset={() => onReset("--sf-equal-min-col")} />
-
Named column counts (equal-min-col-2/3/4/6)
+
Named column counts (equal-min-col-2/3/4/6)
{#each [ { label: "2-col", token: "--sf-equal-min-col-2", def: 28 }, @@ -506,15 +506,15 @@
Frame ratio
-

--sf-frame-ratio — aspect ratio for .sf-frame

+

--sf-frame-ratio — aspect ratio for .sf-frame

{#each FRAME_PRESETS as r (r)} {/each} @@ -524,21 +524,21 @@
Reel
-

--sf-reel-item-width — width of each item in a horizontal .sf-reel

+

--sf-reel-item-width — width of each item in a horizontal .sf-reel

{#each REEL_PRESETS as p (p.value)} {/each}
- Height + Height {#if "--sf-reel-height" in overrides} - + {/if}
@@ -613,7 +613,7 @@ {/if}
-
+
@@ -627,7 +627,7 @@ {#if showNamedRatios}
-

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

+

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

{#each [ { label: "Square", token: "--sf-ratio-square", def: "1" }, { label: "Portrait", token: "--sf-ratio-portrait", def: "3 / 4" }, @@ -638,7 +638,7 @@ { label: "Golden", token: "--sf-ratio-golden", def: "1.618 / 1" }, ] as r (r.token)}
- {r.label} + {r.label} {#if r.token in overrides} - + {/if}
{/each} @@ -658,7 +658,7 @@ {/if}
-
+
@@ -672,27 +672,27 @@ {#if showBgLayer}
-

Default values for the .sf-bg full-bleed background utility.

+

Default values for the .sf-bg full-bleed background utility.

{#each [ { label: "Fit", token: "--sf-bg-fit", placeholder: "cover", opts: ["cover","contain","fill","none","scale-down"] }, { label: "Position", token: "--sf-bg-position", placeholder: "50% 50%", opts: ["50% 50%","top","bottom","left","right","center"] }, ] as row (row.token)}
- {row.label} + {row.label} {#if row.token in overrides} - + {/if}
{/each} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/MacrosPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/MacrosPanel.svelte index 62203918..577a59a0 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/MacrosPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/MacrosPanel.svelte @@ -70,11 +70,11 @@
-

- Tokens for the framework's utility macros — .sf-prose, - .sf-flow, .sf-line-clamp, - .sf-aspect, .sf-scroll-shadow - and .sf-scrim. +

+ Tokens for the framework's utility macros — .sf-prose, + .sf-flow, .sf-line-clamp, + .sf-aspect, .sf-scroll-shadow + and .sf-scrim.

@@ -98,7 +98,7 @@ currentRaw={overrides["--sf-flow-space"]} onRawSet={(v) => onSet("--sf-flow-space", v)} /> -
+
{#each [0, 1, 2] as i (i)}
{/each} @@ -106,7 +106,7 @@ {/if}
-
+
@@ -126,9 +126,9 @@ onChange={(v) => onSet("--sf-line-clamp", String(v))} onReset={() => onReset("--sf-line-clamp")} /> -
+

SLASHED is a token-first CSS framework. This sample paragraph repeats so you @@ -140,7 +140,7 @@ {/if}

-
+
@@ -153,29 +153,29 @@ {showAspect ? "▲" : "▼"} {#if showAspect} -

--sf-aspect — default ratio for .sf-aspect / .sf-frame

+

--sf-aspect — default ratio for .sf-aspect / .sf-frame

{#each ASPECT_PRESETS as p (p.value)} {/each}
-
+
{aspectVal}
{/if}
-
+
@@ -198,7 +198,7 @@ currentRaw={overrides["--sf-scroll-shadow-size"]} onRawSet={(v) => onSet("--sf-scroll-shadow-size", v)} /> -
+
-
+
@@ -220,9 +220,9 @@ {showScrim ? "▲" : "▼"} {#if showScrim} -

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

+

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

-
Color
+
Color
{#if "--sf-scrim-color" in overrides} - + {/if}
-
Direction
+
Direction
{#each SCRIM_DIRECTIONS as d (d.value)} {/each}
-
Caption over scrim
-
Text shadow
+
Text shadow
{#if "--sf-scrim-text-shadow" in overrides} - + {/if}
{/if}
-
+
@@ -289,7 +289,7 @@ {showProse ? "▲" : "▼"} {#if showProse} -

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

+

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

{#each PROSE_SPACE as t (t.token)} onSet("--sf-prose-media-radius", v)} />
-
Marker color
+
Marker color
{#if "--sf-prose-marker-color" in overrides} - + {/if}
@@ -344,11 +344,11 @@ {showContentIntrinsic ? "▲" : "▼"} {#if showContentIntrinsic} -

- --sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages. +

+ --sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.

-
Intrinsic size
+
Intrinsic size
{#if "--sf-content-intrinsic-size" in overrides} - + {/if}
{/if}
-
+

- All tokens tab — edit every prose, scrim and surface token directly. + All tokens tab — edit every prose, scrim and surface token directly.

diff --git a/SLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelte index e8fc861a..faa73823 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelte @@ -88,19 +88,19 @@ onReset={() => onReset("--sf-touch-target")} /> -
+
{touchTarget}px
-

Minimum interactive area — ensures accessibility on touch devices.

+

Minimum interactive area — ensures accessibility on touch devices.

{/if}
-
+
@@ -119,8 +119,8 @@ onclick={() => b.value === "smooth" ? onReset("--sf-scroll-behavior") : onSet("--sf-scroll-behavior", b.value)} class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${ scrollBehavior === b.value - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} > {b.label} @@ -130,7 +130,7 @@ {/if}
-
+
@@ -150,22 +150,22 @@ onChange={(v) => onSet("--sf-z-base", String(v))} onReset={() => onReset("--sf-z-base")} /> -
+
{#each Z_INDEX_STEPS as z (z.token)} {@const isOverridden = z.token in overrides}
-
- {z.label} - {z.note} +
+ {z.label} + {z.note} {z.token.replace("--sf-z-", "")}
{/each}
-

Override individual z-index tokens in the "All tokens" tab.

+

Override individual z-index tokens in the "All tokens" tab.

{/if}
-
+
@@ -180,7 +180,7 @@ {#if showTextSelection}
-
Selection background
+
Selection background
-
Selection text color
+
Selection text color
-
+

Select this text to preview the selection color. @@ -214,7 +214,7 @@ {/if}

-
+
@@ -234,8 +234,8 @@ onclick={() => style === "solid" ? onReset("--sf-focus-ring-style") : onSet("--sf-focus-ring-style", style)} class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${ current === style - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} > {style} @@ -243,9 +243,9 @@ {/each}
-
+
Focus ring · {focusRingStyle} @@ -254,7 +254,7 @@ {/if}
-
+
@@ -267,7 +267,7 @@ {showComponentSizes ? "▲" : "▼"} {#if showComponentSizes} -

+

Controls the height / tap-target of all sized components (buttons, inputs, badges).

@@ -283,7 +283,7 @@ {/each}
-
+
{#each SIZE_TOKENS as s (s.token)} {@const val = getSizeValue(s)}
@@ -291,14 +291,14 @@ class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center" style={`height: ${Math.min(val * 14, 64)}px`} >
- {s.label} + {s.label}
{/each}
{/if}
-
+
@@ -312,7 +312,7 @@ {#if showCaretLinks}
-
Caret color
+
Caret color
- Underline thickness + Underline thickness {#if "--sf-link-underline-thickness" in overrides} - + {/if}
@@ -342,26 +342,26 @@ onclick={() => val === "auto" ? onReset("--sf-link-underline-thickness") : onSet("--sf-link-underline-thickness", val)} class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${ underlineThickness === val - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{label} {/each}
-
+
-

+

A e.preventDefault()} - class="text-indigo-300" + class="text-indigo-700 dark:text-indigo-300" style={`text-decoration:underline;text-underline-offset:${underlineOffset}em;text-decoration-thickness:${underlineThickness}`} >sample link with the current underline settings.

@@ -369,7 +369,7 @@ {/if}
-
+
@@ -382,8 +382,8 @@ {showIconSizes ? "▲" : "▼"} {#if showIconSizes} -

- Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text. +

+ Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.

{#each [ @@ -412,7 +412,7 @@ {/if}
-
+
@@ -425,24 +425,24 @@ {showObjectFit ? "▲" : "▼"} {#if showObjectFit} -

Default values for .sf-media images and replaced elements.

+

Default values for .sf-media images and replaced elements.

- Fit + Fit
{#each ["cover","contain","fill","none"] as v (v)} {@const cur = overrides["--sf-object-fit"] ?? "cover"} {/each}
{#if "--sf-object-fit" in overrides} - + {/if}
- Position + Position {#if "--sf-object-position" in overrides} - + {/if}
{/if}
-
+
@@ -473,8 +473,8 @@ {showSafeArea ? "▲" : "▼"} {#if showSafeArea} -

- Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator. +

+ Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.

{#each [ @@ -484,7 +484,7 @@ { label: "Left", token: "--sf-safe-left", placeholder: "env(safe-area-inset-left, 0px)" }, ] as row (row.token)}
- {row.label} + {row.label} {#if row.token in overrides} - + {/if}
{/each} @@ -504,7 +504,7 @@ {/if}
-
+
@@ -517,15 +517,15 @@ {showPrint ? "▲" : "▼"} {#if showPrint} -

Applied inside @media print via optional/print.css.

+

Applied inside @media print via optional/print.css.

- Page size + Page size
{#each ["a4","letter","legal","a3"] as v (v)} {@const cur = overrides["--sf-print-page-size"] ?? "a4"} {/each}
@@ -535,7 +535,7 @@ { label: "Page margin", token: "--sf-print-page-margin", placeholder: "2cm" }, ] as row (row.token)}
- {row.label} + {row.label} {#if row.token in overrides} - + {/if}
{/each} {/if}
-
+
@@ -567,7 +567,7 @@ {showStateFlags ? "▲" : "▼"} {#if showStateFlags} -

+

Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles. Overriding globally forces all matching elements into that state — useful for testing and demos.

@@ -585,20 +585,20 @@ aria-label={f.label} aria-pressed={cur === "1"} onclick={() => cur === "1" ? onReset(f.token) : onSet(f.token, "1")} - class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-white/10"}`} + class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"}`} >
- {f.label} - {f.note} + {f.label} + {f.note} {#if f.token in overrides} - + {/if}
{/each}
- Required marker + Required marker {#if "--sf-field-required-marker" in overrides} - + {/if}
{/if}
-
+
-
+

Selection colors, caret, links, focus ring, borders and sizes all render in the - live preview (try the Components template). - Scroll behavior applies to the page + live preview (try the Components template). + Scroll behavior applies to the page itself and can't be shown in the static canvas.

diff --git a/SLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelte index b25dff18..172b6820 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelte @@ -94,9 +94,9 @@
-
+
-
Disable motion
+
Disable motion
Respects prefers-reduced-motion
-
+
@@ -175,9 +175,9 @@ {showDurations ? "▲" : "▼"} {#if showDurations} -

+

Named duration tokens. Drag to set an absolute ms value, overriding the global scale. - {#if motionDisabled} (No effect while motion is disabled.){/if} + {#if motionDisabled} (No effect while motion is disabled.){/if}

{#each DURATIONS as d (d.token)} {@const computed = getDuration(d.token, d.base)} @@ -194,12 +194,12 @@ /> {/each} -
+
{#each DURATIONS as d (d.label)} {@const actual = getDuration(d.token, d.base)}
{d.label} -
+
{actual}ms @@ -209,7 +209,7 @@ {/if}
-
+
@@ -222,16 +222,16 @@ {showEasing ? "▲" : "▼"} {#if showEasing} -

+

Edit the named easing tokens. Accepts any CSS timing function — - cubic-bezier(…) or - linear(…). Use “Live preview” above to feel a curve. + cubic-bezier(…) or + linear(…). Use “Live preview” above to feel a curve.

{#each EASINGS as e (e.token)} {@const isOverridden = e.token in overrides}
@@ -239,14 +239,14 @@
- {e.label} + {e.label}
{#if isOverridden} - + {/if}
@@ -258,7 +258,7 @@ const v = (ev.target as HTMLInputElement).value.trim(); v ? onSet(e.token, v) : onReset(e.token); }} - class="w-full bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" + class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500" />
@@ -268,7 +268,7 @@ {/if}
-
+
@@ -281,14 +281,14 @@ {showStagger ? "▲" : "▼"} {#if showStagger} -

+

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

- Stagger base + Stagger base {#if STAGGER_TOKENS.some(t => t in overrides)} - + {/if}
-
+
{#each [1,2,3,4,5] as n (n)} {@const delayMs = Math.round(staggerBase * n)}
- –{n} -
+ –{n} +
{delayMs}ms @@ -314,14 +314,14 @@ {/if}
-
+
+ {/if}
{/each} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/ShadowsPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/ShadowsPanel.svelte index 145d62bf..f6110ad1 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/ShadowsPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/ShadowsPanel.svelte @@ -27,19 +27,19 @@
-
+
{#each SHADOW_STEPS as step, i (step)}
- {step} + {step}
{/each}
-
+
onReset("--sf-shadow-lightness")} /> -
+
@@ -64,7 +64,7 @@ {#if showShadowColor}
-
Shadow color
+
Shadow color
onSet("--sf-shadow-color", v)} onReset={() => onReset("--sf-shadow-color")} /> -

Warm, cool or brand-tinted shadows. Default uses neutral hue.

+

Warm, cool or brand-tinted shadows. Default uses neutral hue.

{/if}
-
+
@@ -92,9 +92,9 @@ {#if showGlow} -
+
-
Shadow glow
+
Shadow glow
Ambient glow on elevated surfaces
-
+
{#if showLayoutGap} -

+

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

-
+
@@ -130,7 +130,7 @@ {showModularScale ? "▲" : "▼"} {#if showModularScale} -

+

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. The viewport range is shared with the type scale.

@@ -165,14 +165,14 @@ {/if}
-
+
-

+

{#if overridesCount === 0} No active overrides yet — adjust some tokens first. {:else} @@ -73,9 +73,9 @@

{#if themes.length === 0} -
+

No saved themes yet.

-

Configure your tokens, then save them above.

+

Configure your tokens, then save them above.

{:else} {#each themes as theme (theme.id)} @@ -83,15 +83,15 @@
{theme.icon}
-
+
{theme.name} {#if activeId === theme.id} - + {/if}
{tokenCount} override{tokenCount === 1 ? "" : "s"}
@@ -99,12 +99,12 @@
@@ -112,15 +112,15 @@ {#if tokenCount > 0}
{#each Object.entries(theme.overrides).slice(0, 5) as [k, v] (k)} -
+
{#if k.includes("color") || k.includes("source")} -
+
{/if} - {k.replace("--sf-", "")} + {k.replace("--sf-", "")}
{/each} {#if tokenCount > 5} - +{tokenCount - 5} more + +{tokenCount - 5} more {/if}
{/if} @@ -133,7 +133,7 @@ {#if overridesCount > 0} {/if}
diff --git a/SLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelte index 4ac839e6..bd4f5097 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelte @@ -265,14 +265,14 @@ { label: "Mono", token: "--sf-font-mono", current: currentMonoFont, opts: MONO_STACKS }, ] as f (f.token)}
- {f.label} + {f.label} {#if f.token in overrides} - + {/if}
{/each} -
-
Google Font
+
+
Google Font
setLevel(activeLevel.size, (e.target as HTMLSelectElement).value, activeLevel.dSize)} - class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer" + class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer" > {#each SIZE_OPTIONS as o (o.value)} @@ -388,11 +388,11 @@
- Line height + Line height setLevel(activeLevel.ls, (e.target as HTMLSelectElement).value, activeLevel.dLs)} - class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer" + class="flex-1 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer" > {#each TRACKING_OPTIONS as o (o.value)} @@ -443,7 +443,7 @@ {#if activeLevel.id !== "body"} {@const maxWidthToken = `--sf-${activeLevel.id}-max-width`}
- Max width + Max width {#if maxWidthToken in overrides} - + {/if}
{/if} @@ -468,14 +468,14 @@ if (activeLevel.ls) patch[activeLevel.ls] = null; onBulkChange(patch); }} - class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer" + class="text-[9px] text-slate-500 hover:text-rose-600 dark:hover:text-rose-400 cursor-pointer" >reset {activeLevel.label} {/if}
{/if} -
+
@@ -499,9 +499,9 @@ {@const isOverridden = row.tokenName in overrides}
- {row.label} weight + {row.label} weight {#if isOverridden} - + {/if}
@@ -511,8 +511,8 @@ style={`font-weight: ${parseInt(w)}`} class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${ current === w - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{w} {/each} @@ -522,7 +522,7 @@
-
Emphasis style
+
Emphasis style
{#each [["Italic", "italic"], ["Normal", "normal"]] as [label, val] (val)} {@const current = overrides["--sf-body-em-style"] ?? "italic"} @@ -530,8 +530,8 @@ onclick={() => val === "italic" ? onReset("--sf-body-em-style") : onSet("--sf-body-em-style", val)} class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${ current === val - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{label} {/each} @@ -554,15 +554,15 @@ ] as row (row.token)} {@const current = overrides[row.token] ?? row.defaultVal}
-
{row.label}
+
{row.label}
{#each WRAP_OPTIONS as o (o.value)} {/each} @@ -572,7 +572,7 @@
- External marker + External marker {#if "--sf-link-external-marker" in overrides} - + {/if}
{/if}
-
+
@@ -603,7 +603,7 @@ {showFontWeights ? "▲" : "▼"} {#if showFontWeights} -

Named weight tokens. Override if your font uses non-standard axis values.

+

Named weight tokens. Override if your font uses non-standard axis values.

{#each [ { label: "Light", token: "--sf-font-weight-light", def: 300 }, { label: "Normal", token: "--sf-font-weight-normal", def: 400 }, @@ -613,9 +613,9 @@ ] as row (row.token)}
- {row.label} + {row.label} {#if row.token in overrides} - + {/if}
@@ -626,8 +626,8 @@ style={`font-weight:${parseInt(w)}`} class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${ cur === w - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{w} {/each} @@ -637,7 +637,7 @@ {/if}
-
+
@@ -669,7 +669,7 @@ { label: "Display M line-height", token: "--sf-display-m-line-height", def: 1.05 }, ] as row (row.token)}
-
{row.label}
+
{row.label}
- {row.label} weight + {row.label} weight {#if isOverridden} - + {/if}
@@ -702,8 +702,8 @@ style={`font-weight: ${parseInt(w)}`} class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${ current === w - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{w} {/each} @@ -713,7 +713,7 @@ {/if}
-
+
@@ -726,7 +726,7 @@ {showModularScale ? "▲" : "▼"} {#if showModularScale} -

+

Utopia-style fluid scale. Each endpoint has three values — viewport width, base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

@@ -762,7 +762,7 @@
-
Line height scale
+
Line height scale
{#each LEADING_TOKENS as t (t.token)}
-
Letter-spacing scale
-

+

Letter-spacing scale
+

Overriding these propagates to heading sizes that reference them.

{#each TRACKING_TOKENS as t (t.token)}
- {t.label} + {t.label} {#if t.token in overrides} - + {/if}
{ showScaleAdvanced = !showScaleAdvanced; }} aria-expanded={showScaleAdvanced} - class="w-full flex items-center justify-between text-slate-600 hover:text-slate-400 transition-colors cursor-pointer" + class="w-full flex items-center justify-between text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400 transition-colors cursor-pointer" >
Advanced
{showScaleAdvanced ? "▲" : "▼"} @@ -834,7 +834,7 @@ {/if}
-
+
@@ -847,26 +847,26 @@ {showScalePreview ? "▲" : "▼"} {#if showScalePreview} -
+
{#each [...TEXT_STEPS].reverse() as { label, factor } (label)} {@const midBase = (baseMin + baseMax) / 2} {@const size = midBase * factor * textScale}
- {label} + {label} Aa - {size.toFixed(2)}rem + {size.toFixed(2)}rem
{/each}
{/if}
-
+
@@ -879,8 +879,8 @@ {showLineLengths ? "▲" : "▼"} {#if showLineLengths} -

- Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures. +

+ Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

{#each [ @@ -895,7 +895,7 @@ { label: "4xl", token: "--sf-text-4xl-max-width", def: "none" }, ] as row (row.token)}
- {row.label} + {row.label} {#if row.token in overrides} - + {/if}
{/each} @@ -915,7 +915,7 @@ {/if}
-
+
@@ -928,11 +928,11 @@ {showAdvancedType ? "▲" : "▼"} {#if showAdvancedType} -

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

+

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

-
Numeric figures
+
Numeric figures
{#each [["tabular-nums", "tabular-nums (default)"], ["proportional-nums", "proportional-nums"], ["normal", "normal"]] as [val, label] (val)} {@const cur = overrides["--sf-font-numeric"] ?? "tabular-nums"} @@ -940,8 +940,8 @@ onclick={() => val === "tabular-nums" ? onReset("--sf-font-numeric") : onSet("--sf-font-numeric", val)} class={`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${ cur === val - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{label} {/each} @@ -950,7 +950,7 @@
-
Optical sizing
+
Optical sizing
{#each [["auto", "auto (default)"], ["none", "none"]] as [val, label] (val)} {@const cur = overrides["--sf-optical-sizing"] ?? "auto"} @@ -958,8 +958,8 @@ onclick={() => val === "auto" ? onReset("--sf-optical-sizing") : onSet("--sf-optical-sizing", val)} class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${ cur === val - ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200" - : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200" + ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200" + : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200" }`} >{label} {/each} @@ -968,7 +968,7 @@
- Font features + Font features {#if "--sf-font-features" in overrides} - + {/if}
- Variation + Variation {#if "--sf-font-variation" in overrides} - + {/if}
{/if} diff --git a/SLASHED-for-WP/admin-app/src/components/panels/WcagPanel.svelte b/SLASHED-for-WP/admin-app/src/components/panels/WcagPanel.svelte index 4ec93076..c9108ee5 100644 --- a/SLASHED-for-WP/admin-app/src/components/panels/WcagPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/panels/WcagPanel.svelte @@ -84,10 +84,10 @@ } function levelOf(ratio: number): { tag: string; cls: string } { - if (ratio >= 7) return { tag: "AAA", cls: "bg-emerald-500/25 text-emerald-200" }; - if (ratio >= 4.5) return { tag: "AA", cls: "bg-emerald-500/15 text-emerald-300" }; - if (ratio >= 3) return { tag: "AA-L", cls: "bg-amber-500/20 text-amber-300" }; - return { tag: "Fail", cls: "bg-rose-500/20 text-rose-300" }; + if (ratio >= 7) return { tag: "AAA", cls: "bg-emerald-500/25 text-emerald-800 dark:text-emerald-200" }; + if (ratio >= 4.5) return { tag: "AA", cls: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300" }; + if (ratio >= 3) return { tag: "AA-L", cls: "bg-amber-500/20 text-amber-700 dark:text-amber-300" }; + return { tag: "Fail", cls: "bg-rose-500/20 text-rose-700 dark:text-rose-300" }; } let pairRatio = $derived(ratioOf(fg.expr, bg.expr)); @@ -160,7 +160,7 @@
Contrast checker
-

+

Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.

@@ -179,73 +179,73 @@
Foreground
- {#each ALL_OPTS as o (o.label)}{/each}
- +
Background
- {#each ALL_OPTS as o (o.label)}{/each}
-
+
Aa Bb Cc
{#if pairRatio !== null} {@const lvl = levelOf(pairRatio)} -
- {pairRatio.toFixed(2)}:1 +
+ {pairRatio.toFixed(2)}:1 {lvl.tag}
- = 4.5 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AA normal - = 3 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 3 ? "✓" : "✗"} AA large - = 7 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 7 ? "✓" : "✗"} AAA normal - = 4.5 ? "text-emerald-300" : "text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AAA large + = 4.5 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AA normal + = 3 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 3 ? "✓" : "✗"} AA large + = 7 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 7 ? "✓" : "✗"} AAA normal + = 4.5 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}>{pairRatio >= 4.5 ? "✓" : "✗"} AAA large
{:else} -
Waiting for live preview…
+
Waiting for live preview…
{/if}
-
+
- Auto-fix to pass (for {getActiveTheme()} mode) -
+ Auto-fix to pass (for {getActiveTheme()} mode) +
{#each ["AA", "AAA"] as t (t)} - + {/each}
{#if !fg.editKey} -

Pick an editable brand/status (base) color as the foreground to enable auto-fix.

+

Pick an editable brand/status (base) color as the foreground to enable auto-fix.

{:else if pairRatio !== null && pairRatio >= (targetLevel === "AAA" ? 7 : 4.5)} -

Already passes {targetLevel}. 🎉

+

Already passes {targetLevel}. 🎉

{:else if suggestion}
- +
-
{suggestion.value}
-
→ {suggestion.ratio.toFixed(2)}:1 ({targetLevel} ✓)
+
{suggestion.value}
+
→ {suggestion.ratio.toFixed(2)}:1 ({targetLevel} ✓)
- +
{:else} -

No lightness of this hue reaches {targetLevel} on this background — try a different background or hue.

+

No lightness of this hue reaches {targetLevel} on this background — try a different background or hue.

{/if}
{/if}
-
+
@@ -258,7 +258,7 @@ {showMatrix ? "▲" : "▼"} {#if showMatrix} -

Foreground (rows) × background (cols). Click a cell to load it above.

+

Foreground (rows) × background (cols). Click a cell to load it above.

@@ -285,7 +285,7 @@ >{r.toFixed(1)} {:else} - + {/if} {/each} diff --git a/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte b/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte index 52645254..fea3142a 100644 --- a/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte +++ b/SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte @@ -595,17 +595,17 @@ ${BODIES[template]} } -
+
-
+
-
+
{#each TEMPLATES as t (t.id)}
-
+
-
+
{#each (["fluid", "desktop", "tablet", "mobile"] as const) as w (w)}
-
+
@@ -665,7 +665,7 @@ ${BODIES[template]}
`);function vl(e,t){Ue(t,!0);function n(e){let t=Pc(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches});return Object.keys(t).length>0?{...t,...e}:e}let r=[{id:`marketing`,label:`Marketing`},{id:`components`,label:`Components`},{id:`stylescape`,label:`Stylescape`}],i=new Set([`system-ui`,`-apple-system`,`BlinkMacSystemFont`,`ui-monospace`,`ui-serif`,`ui-sans-serif`,`sans-serif`,`serif`,`monospace`,`cursive`,`fantasy`,`Georgia`,`Times New Roman`,`Times`,`Impact`,`Arial Narrow`,`Arial`,`Helvetica`,`Helvetica Neue`,`Courier New`,`Courier`,`Fira Code`,`Verdana`]);function a(e){if(!e?.trim())return null;let t=e.trim().match(/^['"]([^'"]+)['"]/),n=(t?t[1]:e.split(`,`)[0]).trim();return n&&!i.has(n)?n:null}function o(e){let t=new Set,n=[];for(let r of[`--sf-font-body`,`--sf-font-heading`,`--sf-font-mono`]){let i=a(e[r]??``);!i||t.has(i)||(t.add(i),n.push({name:i,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(i)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return n}function s(e,t){for(let{name:n,url:r}of o(t)){let t=`gf-${n.replace(/\s+/g,`-`).toLowerCase()}`;if(!e.getElementById(t)){let n=e.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=r,e.head.appendChild(n)}}}let c=[50,100,200,300,400,500,600,700,800,900,950],l=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],u=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],d=[`3xs`,`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],f=[`display-l`,`display-m`,`display-s`,`2xl`,`xl`,`l`,`m`,`s`,`xs`];function p(){let e=(e,t,n)=>c.map(r=>`.pv-sw--${e}-${r}{background:var(--sf-color-${t}-${r}${n?`,var(--sf-color-${n}-${r})`:``});}`).join(``);return` +`,xl=G(``),Sl=G(``),Cl=G(``),wl=G(``),Tl=G(`
Light
Dark
`),El=G(``),Dl=G(`
`),Ol=G(`
`);function kl(e,t){Ue(t,!0);function n(e){let t=Gc(e,{reduceMotion:typeof window<`u`&&window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches});return Object.keys(t).length>0?{...t,...e}:e}let r=[{id:`marketing`,label:`Marketing`},{id:`components`,label:`Components`},{id:`stylescape`,label:`Stylescape`}],i=new Set([`system-ui`,`-apple-system`,`BlinkMacSystemFont`,`ui-monospace`,`ui-serif`,`ui-sans-serif`,`sans-serif`,`serif`,`monospace`,`cursive`,`fantasy`,`Georgia`,`Times New Roman`,`Times`,`Impact`,`Arial Narrow`,`Arial`,`Helvetica`,`Helvetica Neue`,`Courier New`,`Courier`,`Fira Code`,`Verdana`]);function a(e){if(!e?.trim())return null;let t=e.trim().match(/^['"]([^'"]+)['"]/),n=(t?t[1]:e.split(`,`)[0]).trim();return n&&!i.has(n)?n:null}function o(e){let t=new Set,n=[];for(let r of[`--sf-font-body`,`--sf-font-heading`,`--sf-font-mono`]){let i=a(e[r]??``);!i||t.has(i)||(t.add(i),n.push({name:i,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(i)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return n}function s(e,t){for(let{name:n,url:r}of o(t)){let t=`gf-${n.replace(/\s+/g,`-`).toLowerCase()}`;if(!e.getElementById(t)){let n=e.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=r,e.head.appendChild(n)}}}let c=[50,100,200,300,400,500,600,700,800,900,950],l=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],u=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],d=[`3xs`,`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],f=[`display-l`,`display-m`,`display-s`,`2xl`,`xl`,`l`,`m`,`s`,`xs`];function p(){let e=(e,t,n)=>c.map(r=>`.pv-sw--${e}-${r}{background:var(--sf-color-${t}-${r}${n?`,var(--sf-color-${n}-${r})`:``});}`).join(``);return` /* Text roles (core ships no utility classes — these mirror semantic tokens) */ .pv-eyebrow{font-size:var(--sf-text-xs);font-weight:var(--sf-font-weight-heading);text-transform:uppercase;letter-spacing:0.08em;color:var(--sf-color-text--muted);} .pv-lead{font-size:var(--sf-text-l);color:var(--sf-color-text--secondary);} @@ -5403,7 +5403,7 @@ var e=Array.isArray,t=Array.prototype.indexOf,n=Array.prototype.includes,r=Array
-
`};function g(e,t,r,i,a){let s=cc(n(e),{mode:`root`,banner:!1}),c=r===`slow`?`*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }`:r===`none`?`*, *::before, *::after { transition: none !important; animation: none !important; }`:``,l=o(e).map(({url:e})=>` `).join(` +
`};function g(e,t,r,i,a){let s=yc(n(e),{mode:`root`,banner:!1}),c=r===`slow`?`*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }`:r===`none`?`*, *::before, *::after { transition: none !important; animation: none !important; }`:``,l=o(e).map(({url:e})=>` `).join(` `);return` @@ -5425,26 +5425,26 @@ ${l?l+` ${h[i]} -`}let _=L(!1),v=L(null),y=L(null),b=L(null),x=L(0),S=L(0),C=L(0),w=L(0),T=I(()=>g({},t.previewTheme,t.previewMotion,t.previewTemplate,ll)),E=I(()=>g({},`light`,t.previewMotion,t.previewTemplate,ll)),D=I(()=>g({},`dark`,t.previewMotion,t.previewTemplate,ll));On(()=>{let e=t.overrides,r=t.previewTheme,i=U(x),a=cl.value,o=requestAnimationFrame(()=>{let t=U(v);if(i===0||!t)return;let o=t.contentDocument;if(!o)return;let c=o.getElementById(`slashed-overrides`);c&&(c.textContent=cc(n(e),{mode:`root`,banner:!1})),s(o,e),o.documentElement.setAttribute(`data-theme`,r),a?o.documentElement.setAttribute(`data-lumlocker`,``):o.documentElement.removeAttribute(`data-lumlocker`),Qc(o)});return()=>cancelAnimationFrame(o)}),On(()=>{let e=U(_),r=t.overrides,i=U(S),a=U(C),o=cl.value;if(!e)return;let c=requestAnimationFrame(()=>{let e=cc(n(r),{mode:`root`,banner:!1}),t=e=>{o?e.documentElement.setAttribute(`data-lumlocker`,``):e.documentElement.removeAttribute(`data-lumlocker`)},c=!1,l=!1;if(U(y)&&i>0){let n=U(y).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),Qc(n),c=!0}}if(U(b)&&a>0){let n=U(b).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),l=!0}}l&&!c&&el()});return()=>cancelAnimationFrame(c)});let O=I(()=>t.previewWidth!==`fluid`);function k(){return t.previewWidth===`fluid`?`width:100%;height:100%`:t.previewWidth===`mobile`?`width:390px;height:750px;border:1px solid rgba(255,255,255,0.12);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:t.previewWidth===`tablet`?`width:768px;height:900px;border:1px solid rgba(255,255,255,0.12);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:`width:1024px;height:720px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`}var ee=_l(),te=z(ee),ne=z(te);Y(ne,21,()=>r,e=>e.id,(e,n)=>{var r=ul(),i=z(r,!0);F(r),H(()=>{X(r,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t.previewTemplate===U(n).id?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(i,U(n).label)}),W(`click`,r,()=>t.onTemplateChange(U(n).id)),K(e,r)}),F(ne);var A=V(ne,4);Y(A,20,()=>[`fluid`,`desktop`,`tablet`,`mobile`],e=>e,(e,n)=>{var r=dl(),i=z(r),a=e=>{fo(e,{class:`w-3 h-3`})},o=e=>{So(e,{class:`w-3 h-3`})},s=e=>{za(e,{class:`w-3 h-3`})};J(i,e=>{n===`mobile`?e(a):n===`tablet`?e(o,1):e(s,-1)}),F(r),H(()=>{Q(r,`title`,n===`fluid`?`Full width`:n===`desktop`?`Desktop (1024px)`:n===`tablet`?`Tablet (768px)`:`Mobile (390px)`),X(r,1,`p-1 rounded-md transition-all cursor-pointer ${t.previewWidth===n?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`)}),W(`click`,r,()=>t.onWidthChange(n)),K(e,r)}),F(A);var j=V(A,2),M=z(j);vo(z(M),{class:`w-3 h-3`}),F(M);var re=V(M,2);Va(z(re),{class:`w-3 h-3`}),F(re);var ie=V(re,2);xa(z(ie),{class:`w-3 h-3`}),F(ie),F(j);var ae=V(j,4),oe=z(ae);oe.value=oe.__value=`normal`;var se=V(oe);se.value=se.__value=`slow`;var N=V(se);N.value=N.__value=`none`,F(ae);var ce;Di(ae);var le=V(ae,2);Za(z(le),{class:`w-3 h-3`}),F(le);var ue=V(le,2);Da(z(ue),{class:`w-3 h-3`}),F(ue),F(te);var de=V(te,2),fe=z(de),pe=e=>{var t=ml(),n=z(t),r=z(n),i=z(r);vo(z(i),{class:`w-2.5 h-2.5`}),Me(),F(i),F(r),ri(V(r,2),()=>U(w),e=>{var t=fl();Zi(t,e=>R(y,e),()=>U(y)),H(()=>Q(t,`srcdoc`,U(E))),zr(`load`,t,()=>{R(S,U(S)+1)}),Lr(t),K(e,t)}),F(n);var a=V(n,2),o=z(a),s=z(o);Va(z(s),{class:`w-2.5 h-2.5`}),Me(),F(s),F(o),ri(V(o,2),()=>U(w),e=>{var t=pl();Zi(t,e=>R(b,e),()=>U(b)),H(()=>Q(t,`srcdoc`,U(D))),zr(`load`,t,()=>{R(C,U(C)+1)}),Lr(t),K(e,t)}),F(a),F(t),K(e,t)},me=e=>{var t=gl();ri(z(t),()=>U(w),e=>{var t=hl();Zi(t,e=>R(v,e),()=>U(v)),H(()=>Q(t,`srcdoc`,U(T))),zr(`load`,t,()=>{R(x,U(x)+1)}),Lr(t),K(e,t)}),F(t),H(e=>{Z(t,e),X(t,1,yi(U(O)?``:`w-full h-full`))},[()=>k()]),K(e,t)};J(fe,e=>{U(_)?e(pe):e(me,-1)}),F(de),F(ee),H(()=>{X(M,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`light`?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),X(re,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`dark`?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),X(ie,1,`p-1 rounded-md transition-all cursor-pointer ${U(_)?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),ce!==(ce=t.previewMotion)&&(ae.value=(ae.__value=t.previewMotion)??``,Ei(ae,t.previewMotion)),X(de,1,`flex-1 min-h-0 flex overflow-auto ${U(O)&&!U(_)?`items-center justify-center bg-[#06060a]`:``}`)}),W(`click`,M,()=>{R(_,!1),t.onThemeChange(`light`)}),W(`click`,re,()=>{R(_,!1),t.onThemeChange(`dark`)}),W(`click`,ie,()=>{R(_,!U(_))}),W(`change`,ae,e=>t.onMotionChange(e.target.value)),W(`click`,le,()=>{R(x,0),R(S,0),R(C,0),R(w,U(w)+1)}),W(`click`,ue,()=>{let e=new Blob([g(t.overrides,t.previewTheme,t.previewMotion,t.previewTemplate,ll)],{type:`text/html`}),n=URL.createObjectURL(e);window.open(n,`_blank`)}),K(e,ee),We()}Br([`click`,`change`]);var yl={macros:[`prose`,`flow-space`,`line-clamp`,`aspect`,`scroll-shadow`,`scrim`,`surface-color`,`content-intrinsic`],colors:[`color`,`contrast`,`palette-mix`,`lumlocker`,`gradient`],typography:[`font`,`--sf-text`,`leading`,`tracking`,`weight`,`body-font`,`heading-font`,`body-em`,`body-text`,`heading-text`,`display-l-`,`display-m-`,`-h1-`,`-h2-`,`-h3-`,`-h4-`,`-h5-`,`-h6-`,`link-`,`optical-sizing`,`fluid-min-vw`,`fluid-max-vw`],spacing:[`space`,`section`,`gutter`,`content-gap`,`component-pad`],layout:[`container`,`layout`,`grid`,`breakpoint`,`measure`,`column`,`header-height`,`touch-target`,`bento`,`cluster`,`cover-min`,`equal-min`,`frame`,`ratio-`,`reel`,`safe-`,`sidebar`,`switcher`,`-bg-`],borders:[`radius`,`border-width`,`border-scale`,`border-style`,`divider`],shadows:[`shadow`],motion:[`motion`,`duration`,`easing`,`ease`,`scroll-timeline`],effects:[`filter`,`blur`,`backdrop`,`opacity`,`effect`],misc:[`z-`,`cursor`,`ring`,`focus`,`outline`,`selection`,`icon`,`is-active`,`is-current`,`is-open`,`is-pressed`,`field-required`,`object-fit`,`object-position`,`print-`,`scrollbar`,`size-`]};function bl(e){for(let[t,n]of Object.entries(yl))if(t!==`misc`&&n.some(t=>e.includes(t)))return t;return`misc`}var xl=G(`You have .`,1),Sl=G(``),Cl=G(` `),wl=G(``),Tl=G(``),El=G(`

No saved themes yet. Configure tokens, then save.

`),Dl=G(``),Ol=G(`
`),kl=G(`
SLASHED Studio

Configure every SLASHED design token visually. Changes appear live in the preview.

Token domains
Tools
Saved themes
`);function Al(e,t){Ue(t,!0);let n=[{id:`colors`,icon:Ga,label:`Colors`,desc:`Brand, semantic & neutral palettes`},{id:`typography`,icon:Eo,label:`Typography`,desc:`Font families & fluid type scale`},{id:`spacing`,icon:to,label:`Spacing`,desc:`Space scale & section rhythm`},{id:`layout`,icon:Io,label:`Layout`,desc:`Containers, grids & primitives`},{id:`borders`,icon:go,label:`Borders`,desc:`Corner radius & border widths`},{id:`shadows`,icon:Na,label:`Shadows`,desc:`Elevation & depth control`},{id:`motion`,icon:Ao,label:`Motion`,desc:`Duration & easing curves`},{id:`effects`,icon:mo,label:`Effects`,desc:`Blur, opacity & scrollbars`},{id:`macros`,icon:pa,label:`Macros`,desc:`Flow, prose, aspect & scrim`},{id:`misc`,icon:qa,label:`Misc`,desc:`Z-index & remaining tokens`}],r=[{id:`themes`,icon:bo,label:`Themes`,desc:`Save & re-apply configurations`},{id:`wcag`,icon:so,label:`WCAG`,desc:`Contrast checker & fixes`},{id:`setup`,icon:Ua,label:`Install`,desc:`Export overrides & setup`},{id:`cheatsheet`,icon:ha,label:`Classes`,desc:`Utility class reference`}],i={colors:[`color`,`contrast`,`focus-ring`],typography:[`text`,`font`,`leading`,`tracking`,`h1`,`h2`,`h3`,`h4`,`h5`,`h6`,`body`],spacing:[`space`,`gap`,`gutter`,`section`],layout:[`container`,`grid`,`sidebar`,`bento`,`reel`,`cluster`,`stack`,`frame`],borders:[`radius`,`border`,`divider`,`btn-`,`field-`],shadows:[`shadow`],motion:[`motion`,`duration`,`ease`,`animation`,`transition`],effects:[`blur`,`opacity`,`scrollbar`,`scrim`,`backdrop`],macros:[`flow`,`prose`,`aspect`,`scroll-shadow`,`line-clamp`],misc:[`z-`]};function a(e){let n=i[e];return n?Object.keys(t.overrides).filter(e=>n.some(t=>e.includes(t))).length:0}let o=I(()=>Object.keys(t.overrides).length),s=L(nn(yc())),c=L(``);function l(){U(o)!==0&&(R(s,bc(U(c),t.overrides),!0),R(c,``))}var u=kl(),d=z(u),f=z(d);mo(z(f),{class:`w-4 h-4 text-indigo-400`}),Me(2),F(f);var p=V(f,2),m=V(z(p)),h=e=>{var t=xl(),n=V(B(t)),r=z(n);F(n),Me(),H(()=>q(r,`${U(o)??``} active override${U(o)===1?``:`s`}`)),K(e,t)},g=e=>{K(e,Yr(`Pick any domain below to get started.`))};J(m,e=>{U(o)>0?e(h):e(g,-1)}),F(p);var _=V(p,2),v=e=>{var n=Sl();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(_,e=>{U(o)>0&&e(v)}),F(d);var y=V(d,2),b=V(z(y),2);Y(b,21,()=>n,e=>e.id,(e,n)=>{let r=I(()=>a(U(n).id)),i=I(()=>U(n).icon);var o=wl(),s=z(o);mi(z(s),()=>U(i),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(s);var c=V(s,2),l=z(c),u=z(l,!0);F(l);var d=V(l,2),f=z(d,!0);F(d),F(c);var p=V(c,2),m=e=>{var t=Cl(),n=z(t,!0);F(t),H(()=>q(n,U(r))),K(e,t)};J(p,e=>{U(r)>0&&e(m)}),Me(2),F(o),H(()=>{q(u,U(n).label),q(f,U(n).desc)}),W(`click`,o,()=>t.onSelect(U(n).id)),K(e,o)}),F(b),F(y);var x=V(y,2),S=V(z(x),2);Y(S,21,()=>r,e=>e.id,(e,n)=>{let r=I(()=>U(n).icon);var i=Tl(),a=z(i);mi(z(a),()=>U(r),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(a);var o=V(a,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),Me(2),F(i),H(()=>{q(c,U(n).label),q(u,U(n).desc)}),W(`click`,i,()=>t.onSelect(U(n).id)),K(e,i)}),F(S),F(x);var C=V(x,2),w=z(C),T=V(z(w),2);F(w);var E=V(w,2),D=z(E);zi(D);var O=V(D,2);ro(z(O),{class:`w-3 h-3`}),F(O),F(E);var k=V(E,2),ee=e=>{K(e,El())},te=e=>{var n=Ol();Y(n,21,()=>U(s).slice(0,6),e=>e.id,(e,n)=>{var r=Dl(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),F(r),H(()=>{q(a,U(n).icon),q(c,U(n).name),q(u,U(n).blurb)}),W(`click`,r,()=>t.onApplyTheme(U(n).overrides)),K(e,r)}),F(n),K(e,n)};J(k,e=>{U(s).length===0?e(ee):e(te,-1)}),F(C),F(u),H(()=>O.disabled=U(o)===0),W(`click`,T,()=>t.onSelect(`themes`)),W(`keydown`,D,e=>{e.key===`Enter`&&l()}),qi(D,()=>U(c),e=>R(c,e)),W(`click`,O,l),K(e,u),We()}Br([`click`,`keydown`]);var jl={colors:[{name:`--sf-contrast-bias`,label:`Contrast bias`,help:`Shifts the lightness threshold used by text-on-color pairing toward darker (negative) or lighter (positive) text.`,default:0,min:-1,max:1,step:.05,driving:3},{name:`--sf-contrast-threshold`,label:`Contrast threshold`,help:`OKLCH lightness above which a swatch is considered 'light' (gets dark text). Below = light text.`,default:.6,min:0,max:1,step:.01,driving:11},{name:`--sf-focus-ring-width`,label:`Focus ring width`,help:`Thickness of the focus ring on every interactive element.`,default:2,min:0,max:6,step:.5,unit:`px`,driving:1}],typography:[{name:`--sf-text-scale`,label:`Text scale`,help:`Multiplier applied to the entire fluid text ramp (2xs … 2xl).`,default:1,min:.5,max:2,step:.05,driving:9},{name:`--sf-text-display-scale`,label:`Display scale`,help:`Multiplier applied to the display ramp (display-s, display-m, display-l).`,default:1,min:.5,max:2,step:.05,driving:3}],spacing:[{name:`--sf-space-scale`,label:`Space scale`,help:`Multiplier applied to every fluid spacing step. One drag moves 45 tokens.`,default:1,min:.5,max:2,step:.05,driving:45},{name:`--sf-section-scale`,label:`Section scale`,help:`Multiplier applied to section paddings only.`,default:1,min:.5,max:2,step:.05,driving:6}],borders:[{name:`--sf-radius-scale`,label:`Radius scale`,help:`Multiplier applied to every radius step (set to 0 for sharp brutalist corners).`,default:1,min:0,max:2,step:.05,driving:8}],shadows:[{name:`--sf-shadow-strength`,label:`Shadow strength`,help:`Base shadow opacity. Auto-boosted +0.17 in dark mode. Slider sets the light-mode base.`,default:.08,min:0,max:.5,step:.01,driving:14,encode:e=>`calc(${e} + var(--sf-is-dark) * 0.17)`,decode:e=>{let t=/^calc\(\s*([\d.e+-]+)/.exec(String(e));return t?parseFloat(t[1]):NaN}}],motion:[{name:`--sf-motion-scale`,label:`Motion scale`,help:`Speed multiplier on every duration. Set to 0 to effectively disable motion.`,default:1,min:0,max:2,step:.05,driving:13}]};function Ml(e,t,n){let r=n*Math.PI/180,i=e,a=t*Math.cos(r),o=t*Math.sin(r),s=i+.3963377774*a+.2158037573*o,c=i-.1055613458*a-.0638541728*o,l=i-.0894841775*a-1.291485548*o,u=s*s*s,d=c*c*c,f=l*l*l,p=4.0767416621*u-3.3077115913*d+.2309699292*f,m=-1.2684380046*u+2.6097574011*d-.3413193965*f,h=-.0041960863*u-.7034186147*d+1.707614701*f,g=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055;return[Math.max(0,Math.min(255,Math.round(g(p)*255))),Math.max(0,Math.min(255,Math.round(g(m)*255))),Math.max(0,Math.min(255,Math.round(g(h)*255)))]}function Nl(e,t,n){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Pl(e,t){let n=Math.max(e,t),r=Math.min(e,t);return(n+.05)/(r+.05)}function Fl(e){let t=e.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(t){let e=t[1];return{l:e.endsWith(`%`)?parseFloat(e)/100:parseFloat(e),c:parseFloat(t[2]),h:parseFloat(t[3]),valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Il(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${Math.round(n)})`}var Ll=G(` `),Rl=G(`
`);function zl(e,t){Ue(t,!0);let n=na(t,`disabled`,3,!1);function r(e){return Math.min(t.max,Math.max(t.min,e))}let i=I(()=>(t.value-t.min)/(t.max-t.min)*100);var a=Rl(),o=z(a),s=V(z(o),2),c=V(s,2);zi(c);var l=V(c,2);F(o);var u=V(o,2),d=z(u);zi(d);var f=V(d,2),p=e=>{var n=Ll(),r=z(n,!0);F(n),H(()=>q(r,t.unit)),K(e,n)};J(f,e=>{t.unit&&e(p)}),F(u),F(a),H(()=>{Z(s,`width: ${U(i)}%`),Q(c,`min`,t.min),Q(c,`max`,t.max),Q(c,`step`,t.step),Bi(c,t.value),c.disabled=n(),Z(l,`left: calc(${U(i)}% - 6px)`),Q(d,`min`,t.min),Q(d,`max`,t.max),Q(d,`step`,t.step),Bi(d,t.value),d.disabled=n()}),W(`input`,c,e=>t.onChange(r(parseFloat(e.target.value)))),W(`change`,d,e=>t.onChange(r(parseFloat(e.target.value)||0))),K(e,a),We()}Br([`input`,`change`]);var Bl=G(`
`),Vl=G(``),Hl=G(`
Lightness (L)
Chroma (C)
Hue (H)
Raw value
`),Ul=G(`
`);function Wl(e,t){Ue(t,!0);function n(e){let t=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(e);return t?{l:parseFloat(t[1]),c:parseFloat(t[2]),h:parseFloat(t[3])}:null}function r(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${n.toFixed(1)})`}function i(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o*o*o,u=s*s*s,d=c*c*c,f=4.0767416621*l-3.3077115913*u+.2309699292*d,p=-1.2684380046*l+2.6097574011*u-.3413193965*d,m=-.0041960863*l-.7034186147*u+1.707614701*d,h=e=>e<=0?0:e>=1?255:Math.round(e**(1/2.2)*255);return`rgb(${h(f)},${h(p)},${h(m)})`}let a=I(()=>n(t.value)??{l:.6,c:.15,h:264}),o=L(!1),s=L(``),c=I(()=>i(U(a).l,U(a).c,U(a).h)),l=I(()=>t.tokenName.replace(`--sf-`,``));function u(e,n,i){t.onChange(r(e,n,i))}var d=Ul(),f=z(d),p=z(f);let m;var h=V(p,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=z(v,!0);F(v);var b=V(v,2),x=z(b,!0);F(b),F(h);var S=V(h,2),C=e=>{K(e,Bl())};J(S,e=>{t.overridden&&e(C)});var w=V(S,2);F(f);var T=V(f,2),E=e=>{var n=Hl(),r=z(n),i=z(r),o=V(z(i),2),c=z(o,!0);F(o),F(i);var l=V(i,2);zl(V(l,2),{get value(){return U(a).l},min:0,max:1,step:.005,onChange:e=>u(e,U(a).c,U(a).h)}),F(r);var d=V(r,2),f=z(d),p=V(z(f),2),m=z(p,!0);F(p),F(f),zl(V(f,2),{get value(){return U(a).c},min:0,max:.4,step:.005,onChange:e=>u(U(a).l,e,U(a).h)}),F(d);var h=V(d,2),g=z(h),_=V(z(g),2),v=z(_);F(_),F(g);var y=V(g,2);zl(V(y,2),{get value(){return U(a).h},min:0,max:360,step:1,unit:`°`,onChange:e=>u(U(a).l,U(a).c,e)}),F(h);var b=V(h,2),x=V(z(b),2),S=z(x);zi(S);var C=V(S,2),w=e=>{var n=Vl();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{t.overridden&&e(w)}),F(x),F(b),F(n),H((e,n,r,i,a)=>{q(c,e),Z(l,n),q(m,r),q(v,`${i??``}°`),Z(y,a),Bi(S,U(s)||t.value)},[()=>U(a).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}), oklch(1 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}))`,()=>U(a).c.toFixed(3),()=>U(a).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 0), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 60), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 120), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 180), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 240), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 300), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 360))`]),W(`input`,S,e=>{R(s,e.target.value,!0)}),zr(`blur`,S,()=>{U(s).trim()&&(t.onChange(U(s).trim()),R(s,``))}),W(`keydown`,S,e=>{e.key===`Enter`&&(U(s).trim()&&(t.onChange(U(s).trim()),R(s,``)),e.currentTarget.blur())}),K(e,n)};J(T,e=>{U(o)&&e(E)}),F(d),H(()=>{X(d,1,`rounded-xl border transition-all ${t.overridden?`bg-indigo-500/8 border-indigo-500/20`:`bg-white/4 border-white/8 hover:border-white/12`}`),m=Z(p,``,m,{background:U(c)}),q(_,t.label),q(y,U(l)),q(x,t.value),X(w,1,`text-slate-500 text-[10px] transition-transform ${U(o)?`rotate-180`:``}`)}),W(`click`,f,()=>{R(o,!U(o))}),K(e,d),We()}Br([`click`,`input`,`keydown`]);var Gl=G(` `),Kl=G(``),ql=G(`

`),Jl=G(`
`);function Yl(e,t){Ue(t,!0);let n=I(()=>t.overrides[t.knob.name]),r=I(()=>U(n)===void 0?t.knob.default:t.knob.decode?t.knob.decode(U(n)):parseFloat(U(n))),i=I(()=>isNaN(U(r))?t.knob.default:U(r)),a=I(()=>t.knob.name in t.overrides);function o(e){let n=t.knob.encode?t.knob.encode(e):String(e);t.onChange(t.knob.name,n)}function s(){t.onChange(t.knob.name,null)}var c=Jl(),l=z(c),u=z(l),d=z(u),f=z(d,!0);F(d);var p=V(d,2),m=e=>{var n=Gl(),r=z(n);F(n),H(()=>q(r,`→ ${t.knob.driving??``} tokens`)),K(e,n)};J(p,e=>{t.knob.driving!==void 0&&e(m)}),F(u);var h=V(u,2),g=e=>{var t=Kl();W(`click`,t,s),K(e,t)};J(h,e=>{U(a)&&e(g)}),F(l);var _=V(l,2);zl(_,{get value(){return U(i)},get min(){return t.knob.min},get max(){return t.knob.max},get step(){return t.knob.step},get unit(){return t.knob.unit},onChange:o});var v=V(_,2),y=e=>{var n=ql(),r=z(n,!0);F(n),H(()=>q(r,t.knob.help)),K(e,n)};J(v,e=>{t.knob.help&&e(y)}),F(c),H(()=>q(f,t.knob.label)),K(e,c),We()}Br([`click`]);var Xl=G(` `),Zl=G(``),Ql=G(``),$l=G(``),eu=G(``),tu=G(`

`),nu=G(` `,1),ru=G(`

`),iu=G(`
`);function $(e,t){Ue(t,!0);let n=L(!1),r=L(``),i=L(!1),a=I(()=>!!t.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(t.currentRaw.trim())),o=I(()=>!!(t.rawDefault&&t.onRawSet&&(U(n)||U(a)||U(i))));On(()=>{U(i)||R(r,t.currentRaw??``,!0)});var s=iu(),c=z(s),l=z(c),u=e=>{var n=Xl(),r=z(n,!0);F(n),H(()=>q(r,t.label)),K(e,n)},d=e=>{K(e,Zl())};J(l,e=>{t.label?e(u):e(d,-1)});var f=V(l,2),p=z(f),m=e=>{var t=Ql();H(()=>{Q(t,`title`,U(o)?`Switch to slider`:`Enter raw CSS value`),X(t,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${U(o)?`text-indigo-400`:`opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-400`}`)}),W(`click`,t,()=>{R(n,!U(n))}),K(e,t)};J(p,e=>{t.rawDefault&&t.onRawSet&&e(m)});var h=V(p,2),g=e=>{var n=$l();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(h,e=>{t.overridden&&e(g)}),F(f),F(c);var _=V(c,2),v=e=>{var n=eu();zi(n),H(()=>{Bi(n,U(r)),Q(n,`placeholder`,t.rawDefault)}),zr(`focus`,n,()=>{R(i,!0)}),zr(`blur`,n,()=>{R(i,!1),U(r).trim()||t.onReset()}),W(`input`,n,e=>{R(r,e.target.value,!0);let n=U(r).trim();n&&t.onRawSet&&t.onRawSet(n)}),K(e,n)},y=e=>{var n=nu(),r=B(n);zl(r,{get value(){return t.value},get min(){return t.min},get max(){return t.max},get step(){return t.step},get unit(){return t.unit},get onChange(){return t.onChange}});var i=V(r,2),a=e=>{var n=tu(),r=z(n);F(n),H(()=>q(r,`default: ${t.rawDefault??``}`)),K(e,n)};J(i,e=>{t.rawDefault&&!t.overridden&&e(a)}),K(e,n)};J(_,e=>{U(o)&&t.rawDefault?e(v):e(y,-1)});var b=V(_,2),x=e=>{var n=ru(),r=z(n,!0);F(n),H(()=>q(r,t.help)),K(e,n)};J(b,e=>{t.help&&e(x)}),F(s),K(e,s),We()}Br([`click`,`input`]);var au=G(``),ou=G(``),su=G(` `),cu=G(``),lu=G(``),uu=G(`
`);function du(e,t){Ue(t,!0);let n=L(!1),r=L(!1),i=L(null);On(()=>{U(n)&&br().then(()=>U(i)?.focus())});function a(e){let t=e.trim();return t.startsWith(`--`)&&!t.startsWith(`var(`)?`var(${t})`:t}function o(e){Xc.value;let t=a(e);return nl(t)||t||`transparent`}let s=I(()=>o(t.value||`var(${t.token})`)),c=I(()=>t.value.trim().startsWith(`var(`)||t.value.trim().startsWith(`--`));function l(e){if(e.match(/^#([0-9a-fA-F]{6})$/))return e.toLowerCase();let t=e.match(/^#([0-9a-fA-F]{3})$/);if(t)return`#`+t[1].split(``).map(e=>e+e).join(``);let n=e.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return n?`#`+[n[1],n[2],n[3]].map(e=>parseInt(e).toString(16).padStart(2,`0`)).join(``):`#6366f1`}var u=uu(),d=z(u),f=z(d);let p;var m=V(f,2),h=e=>{var n=au();zi(n),H(e=>Bi(n,e),[()=>l(U(s))]),W(`input`,n,e=>t.onSet(e.target.value)),K(e,n)};J(m,e=>{U(c)||e(h)}),F(d);var g=V(d,2),_=e=>{var o=ou();zi(o),Zi(o,e=>R(i,e),()=>U(i)),H(()=>{Bi(o,t.value),Q(o,`placeholder`,t.placeholder??`default`)}),zr(`blur`,o,e=>{if(U(r)){R(r,!1),R(n,!1);return}let i=a(e.target.value);i?t.onSet(i):t.onReset(),R(n,!1)}),W(`keydown`,o,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(R(r,!0),R(n,!1))}),K(e,o)},v=e=>{var r=cu(),i=z(r),a=e=>{var n=su(),r=z(n,!0);F(n),H(()=>q(r,t.value)),K(e,n)},o=e=>{var n=Yr();H(()=>q(n,t.placeholder??`default`)),K(e,n)};J(i,e=>{t.isOverridden?e(a):e(o,-1)}),F(r),W(`click`,r,()=>{R(n,!0)}),K(e,r)};J(g,e=>{U(n)?e(_):e(v,-1)});var y=V(g,2),b=e=>{var n=lu();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(y,e=>{t.isOverridden&&e(b)}),F(u),H(()=>p=Z(f,``,p,{background:U(s)})),K(e,u),We()}Br([`input`,`keydown`,`click`]);var fu=(e,t=f)=>{var n=pu(),r=z(n,!0);F(n),H(()=>q(r,t())),K(e,n)},pu=G(``),mu=G(`
Aa
`),hu=G(`
`),gu=G(`
`),_u=G(``),vu=G(`
`),yu=G(`
`),bu=G(`

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. +`}let _=L(!1),v=L(null),y=L(null),b=L(null),x=L(0),S=L(0),C=L(0),w=L(0),T=I(()=>g({},t.previewTheme,t.previewMotion,t.previewTemplate,bl)),E=I(()=>g({},`light`,t.previewMotion,t.previewTemplate,bl)),D=I(()=>g({},`dark`,t.previewMotion,t.previewTemplate,bl));On(()=>{let e=t.overrides,r=t.previewTheme,i=U(x),a=yl.value,o=requestAnimationFrame(()=>{let t=U(v);if(i===0||!t)return;let o=t.contentDocument;if(!o)return;let c=o.getElementById(`slashed-overrides`);c&&(c.textContent=yc(n(e),{mode:`root`,banner:!1})),s(o,e),o.documentElement.setAttribute(`data-theme`,r),a?o.documentElement.setAttribute(`data-lumlocker`,``):o.documentElement.removeAttribute(`data-lumlocker`),ll(o)});return()=>cancelAnimationFrame(o)}),On(()=>{let e=U(_),r=t.overrides,i=U(S),a=U(C),o=yl.value;if(!e)return;let c=requestAnimationFrame(()=>{let e=yc(n(r),{mode:`root`,banner:!1}),t=e=>{o?e.documentElement.setAttribute(`data-lumlocker`,``):e.documentElement.removeAttribute(`data-lumlocker`)},c=!1,l=!1;if(U(y)&&i>0){let n=U(y).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),ll(n),c=!0}}if(U(b)&&a>0){let n=U(b).contentDocument;if(n){let i=n.getElementById(`slashed-overrides`);i&&(i.textContent=e),s(n,r),t(n),l=!0}}l&&!c&&dl()});return()=>cancelAnimationFrame(c)});let O=I(()=>t.previewWidth!==`fluid`);function k(){return t.previewWidth===`fluid`?`width:100%;height:100%`:t.previewWidth===`mobile`?`width:390px;height:750px;border:1px solid rgba(255,255,255,0.12);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:t.previewWidth===`tablet`?`width:768px;height:900px;border:1px solid rgba(255,255,255,0.12);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`:`width:1024px;height:720px;border:1px solid rgba(255,255,255,0.12);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 32px 80px rgba(0,0,0,0.5)`}var ee=Ol(),te=z(ee),ne=z(te);Y(ne,21,()=>r,e=>e.id,(e,n)=>{var r=xl(),i=z(r,!0);F(r),H(()=>{X(r,1,`shrink-0 px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t.previewTemplate===U(n).id?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(i,U(n).label)}),W(`click`,r,()=>t.onTemplateChange(U(n).id)),K(e,r)}),F(ne);var A=V(ne,4);Y(A,20,()=>[`fluid`,`desktop`,`tablet`,`mobile`],e=>e,(e,n)=>{var r=Sl(),i=z(r),a=e=>{fo(e,{class:`w-3 h-3`})},o=e=>{So(e,{class:`w-3 h-3`})},s=e=>{za(e,{class:`w-3 h-3`})};J(i,e=>{n===`mobile`?e(a):n===`tablet`?e(o,1):e(s,-1)}),F(r),H(()=>{Q(r,`title`,n===`fluid`?`Full width`:n===`desktop`?`Desktop (1024px)`:n===`tablet`?`Tablet (768px)`:`Mobile (390px)`),X(r,1,`p-1 rounded-md transition-all cursor-pointer ${t.previewWidth===n?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`)}),W(`click`,r,()=>t.onWidthChange(n)),K(e,r)}),F(A);var j=V(A,2),M=z(j);vo(z(M),{class:`w-3 h-3`}),F(M);var re=V(M,2);Va(z(re),{class:`w-3 h-3`}),F(re);var ie=V(re,2);xa(z(ie),{class:`w-3 h-3`}),F(ie),F(j);var ae=V(j,4),oe=z(ae);oe.value=oe.__value=`normal`;var se=V(oe);se.value=se.__value=`slow`;var N=V(se);N.value=N.__value=`none`,F(ae);var ce;Di(ae);var le=V(ae,2);Za(z(le),{class:`w-3 h-3`}),F(le);var ue=V(le,2);Da(z(ue),{class:`w-3 h-3`}),F(ue),F(te);var de=V(te,2),fe=z(de),pe=e=>{var t=Tl(),n=z(t),r=z(n),i=z(r);vo(z(i),{class:`w-2.5 h-2.5`}),Me(),F(i),F(r),ri(V(r,2),()=>U(w),e=>{var t=Cl();Zi(t,e=>R(y,e),()=>U(y)),H(()=>Q(t,`srcdoc`,U(E))),zr(`load`,t,()=>{R(S,U(S)+1)}),Lr(t),K(e,t)}),F(n);var a=V(n,2),o=z(a),s=z(o);Va(z(s),{class:`w-2.5 h-2.5`}),Me(),F(s),F(o),ri(V(o,2),()=>U(w),e=>{var t=wl();Zi(t,e=>R(b,e),()=>U(b)),H(()=>Q(t,`srcdoc`,U(D))),zr(`load`,t,()=>{R(C,U(C)+1)}),Lr(t),K(e,t)}),F(a),F(t),K(e,t)},me=e=>{var t=Dl();ri(z(t),()=>U(w),e=>{var t=El();Zi(t,e=>R(v,e),()=>U(v)),H(()=>Q(t,`srcdoc`,U(T))),zr(`load`,t,()=>{R(x,U(x)+1)}),Lr(t),K(e,t)}),F(t),H(e=>{Z(t,e),X(t,1,yi(U(O)?``:`w-full h-full`))},[()=>k()]),K(e,t)};J(fe,e=>{U(_)?e(pe):e(me,-1)}),F(de),F(ee),H(()=>{X(M,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`light`?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(re,1,`p-1 rounded-md transition-all cursor-pointer ${!U(_)&&t.previewTheme===`dark`?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(ie,1,`p-1 rounded-md transition-all cursor-pointer ${U(_)?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),ce!==(ce=t.previewMotion)&&(ae.value=(ae.__value=t.previewMotion)??``,Ei(ae,t.previewMotion)),X(de,1,`flex-1 min-h-0 flex overflow-auto ${U(O)&&!U(_)?`items-center justify-center bg-slate-100 dark:bg-[#06060a]`:``}`)}),W(`click`,M,()=>{R(_,!1),t.onThemeChange(`light`)}),W(`click`,re,()=>{R(_,!1),t.onThemeChange(`dark`)}),W(`click`,ie,()=>{R(_,!U(_))}),W(`change`,ae,e=>t.onMotionChange(e.target.value)),W(`click`,le,()=>{R(x,0),R(S,0),R(C,0),R(w,U(w)+1)}),W(`click`,ue,()=>{let e=new Blob([g(t.overrides,t.previewTheme,t.previewMotion,t.previewTemplate,bl)],{type:`text/html`}),n=URL.createObjectURL(e);window.open(n,`_blank`)}),K(e,ee),We()}Br([`click`,`change`]);var Al={macros:[`prose`,`flow-space`,`line-clamp`,`aspect`,`scroll-shadow`,`scrim`,`surface-color`,`content-intrinsic`],colors:[`color`,`contrast`,`palette-mix`,`lumlocker`,`gradient`],typography:[`font`,`--sf-text`,`leading`,`tracking`,`weight`,`body-font`,`heading-font`,`body-em`,`body-text`,`heading-text`,`display-l-`,`display-m-`,`-h1-`,`-h2-`,`-h3-`,`-h4-`,`-h5-`,`-h6-`,`link-`,`optical-sizing`,`fluid-min-vw`,`fluid-max-vw`],spacing:[`space`,`section`,`gutter`,`content-gap`,`component-pad`],layout:[`container`,`layout`,`grid`,`breakpoint`,`measure`,`column`,`header-height`,`touch-target`,`bento`,`cluster`,`cover-min`,`equal-min`,`frame`,`ratio-`,`reel`,`safe-`,`sidebar`,`switcher`,`-bg-`],borders:[`radius`,`border-width`,`border-scale`,`border-style`,`divider`],shadows:[`shadow`],motion:[`motion`,`duration`,`easing`,`ease`,`scroll-timeline`],effects:[`filter`,`blur`,`backdrop`,`opacity`,`effect`],misc:[`z-`,`cursor`,`ring`,`focus`,`outline`,`selection`,`icon`,`is-active`,`is-current`,`is-open`,`is-pressed`,`field-required`,`object-fit`,`object-position`,`print-`,`scrollbar`,`size-`]};function jl(e){for(let[t,n]of Object.entries(Al))if(t!==`misc`&&n.some(t=>e.includes(t)))return t;return`misc`}var Ml=G(`You have .`,1),Nl=G(``),Pl=G(` `),Fl=G(``),Il=G(``),Ll=G(`

No saved themes yet. Configure tokens, then save.

`),Rl=G(``),zl=G(`
`),Bl=G(`
SLASHED Studio

Configure every SLASHED design token visually. Changes appear live in the preview.

Token domains
Tools
Saved themes
`);function Vl(e,t){Ue(t,!0);let n=[{id:`colors`,icon:Ga,label:`Colors`,desc:`Brand, semantic & neutral palettes`},{id:`typography`,icon:Eo,label:`Typography`,desc:`Font families & fluid type scale`},{id:`spacing`,icon:to,label:`Spacing`,desc:`Space scale & section rhythm`},{id:`layout`,icon:Io,label:`Layout`,desc:`Containers, grids & primitives`},{id:`borders`,icon:go,label:`Borders`,desc:`Corner radius & border widths`},{id:`shadows`,icon:Na,label:`Shadows`,desc:`Elevation & depth control`},{id:`motion`,icon:Ao,label:`Motion`,desc:`Duration & easing curves`},{id:`effects`,icon:mo,label:`Effects`,desc:`Blur, opacity & scrollbars`},{id:`macros`,icon:pa,label:`Macros`,desc:`Flow, prose, aspect & scrim`},{id:`misc`,icon:qa,label:`Misc`,desc:`Z-index & remaining tokens`}],r=[{id:`themes`,icon:bo,label:`Themes`,desc:`Save & re-apply configurations`},{id:`wcag`,icon:so,label:`WCAG`,desc:`Contrast checker & fixes`},{id:`setup`,icon:Ua,label:`Install`,desc:`Export overrides & setup`},{id:`cheatsheet`,icon:ha,label:`Classes`,desc:`Utility class reference`}],i={colors:[`color`,`contrast`,`focus-ring`],typography:[`text`,`font`,`leading`,`tracking`,`h1`,`h2`,`h3`,`h4`,`h5`,`h6`,`body`],spacing:[`space`,`gap`,`gutter`,`section`],layout:[`container`,`grid`,`sidebar`,`bento`,`reel`,`cluster`,`stack`,`frame`],borders:[`radius`,`border`,`divider`,`btn-`,`field-`],shadows:[`shadow`],motion:[`motion`,`duration`,`ease`,`animation`,`transition`],effects:[`blur`,`opacity`,`scrollbar`,`scrim`,`backdrop`],macros:[`flow`,`prose`,`aspect`,`scroll-shadow`,`line-clamp`],misc:[`z-`]};function a(e){let n=i[e];return n?Object.keys(t.overrides).filter(e=>n.some(t=>e.includes(t))).length:0}let o=I(()=>Object.keys(t.overrides).length),s=L(nn(Ac())),c=L(``);function l(){U(o)!==0&&(R(s,jc(U(c),t.overrides),!0),R(c,``))}var u=Bl(),d=z(u),f=z(d);mo(z(f),{class:`w-4 h-4 text-indigo-600 dark:text-indigo-400`}),Me(2),F(f);var p=V(f,2),m=V(z(p)),h=e=>{var t=Ml(),n=V(B(t)),r=z(n);F(n),Me(),H(()=>q(r,`${U(o)??``} active override${U(o)===1?``:`s`}`)),K(e,t)},g=e=>{K(e,Yr(`Pick any domain below to get started.`))};J(m,e=>{U(o)>0?e(h):e(g,-1)}),F(p);var _=V(p,2),v=e=>{var n=Nl();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(_,e=>{U(o)>0&&e(v)}),F(d);var y=V(d,2),b=V(z(y),2);Y(b,21,()=>n,e=>e.id,(e,n)=>{let r=I(()=>a(U(n).id)),i=I(()=>U(n).icon);var o=Fl(),s=z(o);mi(z(s),()=>U(i),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(s);var c=V(s,2),l=z(c),u=z(l,!0);F(l);var d=V(l,2),f=z(d,!0);F(d),F(c);var p=V(c,2),m=e=>{var t=Pl(),n=z(t,!0);F(t),H(()=>q(n,U(r))),K(e,t)};J(p,e=>{U(r)>0&&e(m)}),Me(2),F(o),H(()=>{q(u,U(n).label),q(f,U(n).desc)}),W(`click`,o,()=>t.onSelect(U(n).id)),K(e,o)}),F(b),F(y);var x=V(y,2),S=V(z(x),2);Y(S,21,()=>r,e=>e.id,(e,n)=>{let r=I(()=>U(n).icon);var i=Il(),a=z(i);mi(z(a),()=>U(r),(e,t)=>{t(e,{class:`w-4 h-4`})}),F(a);var o=V(a,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),Me(2),F(i),H(()=>{q(c,U(n).label),q(u,U(n).desc)}),W(`click`,i,()=>t.onSelect(U(n).id)),K(e,i)}),F(S),F(x);var C=V(x,2),w=z(C),T=V(z(w),2);F(w);var E=V(w,2),D=z(E);zi(D);var O=V(D,2);ro(z(O),{class:`w-3 h-3`}),F(O),F(E);var k=V(E,2),ee=e=>{K(e,Ll())},te=e=>{var n=zl();Y(n,21,()=>U(s).slice(0,6),e=>e.id,(e,n)=>{var r=Rl(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l),F(o),F(r),H(()=>{q(a,U(n).icon),q(c,U(n).name),q(u,U(n).blurb)}),W(`click`,r,()=>t.onApplyTheme(U(n).overrides)),K(e,r)}),F(n),K(e,n)};J(k,e=>{U(s).length===0?e(ee):e(te,-1)}),F(C),F(u),H(()=>O.disabled=U(o)===0),W(`click`,T,()=>t.onSelect(`themes`)),W(`keydown`,D,e=>{e.key===`Enter`&&l()}),qi(D,()=>U(c),e=>R(c,e)),W(`click`,O,l),K(e,u),We()}Br([`click`,`keydown`]);var Hl={colors:[{name:`--sf-contrast-bias`,label:`Contrast bias`,help:`Shifts the lightness threshold used by text-on-color pairing toward darker (negative) or lighter (positive) text.`,default:0,min:-1,max:1,step:.05,driving:3},{name:`--sf-contrast-threshold`,label:`Contrast threshold`,help:`OKLCH lightness above which a swatch is considered 'light' (gets dark text). Below = light text.`,default:.6,min:0,max:1,step:.01,driving:11},{name:`--sf-focus-ring-width`,label:`Focus ring width`,help:`Thickness of the focus ring on every interactive element.`,default:2,min:0,max:6,step:.5,unit:`px`,driving:1}],typography:[{name:`--sf-text-scale`,label:`Text scale`,help:`Multiplier applied to the entire fluid text ramp (2xs … 2xl).`,default:1,min:.5,max:2,step:.05,driving:9},{name:`--sf-text-display-scale`,label:`Display scale`,help:`Multiplier applied to the display ramp (display-s, display-m, display-l).`,default:1,min:.5,max:2,step:.05,driving:3}],spacing:[{name:`--sf-space-scale`,label:`Space scale`,help:`Multiplier applied to every fluid spacing step. One drag moves 45 tokens.`,default:1,min:.5,max:2,step:.05,driving:45},{name:`--sf-section-scale`,label:`Section scale`,help:`Multiplier applied to section paddings only.`,default:1,min:.5,max:2,step:.05,driving:6}],borders:[{name:`--sf-radius-scale`,label:`Radius scale`,help:`Multiplier applied to every radius step (set to 0 for sharp brutalist corners).`,default:1,min:0,max:2,step:.05,driving:8}],shadows:[{name:`--sf-shadow-strength`,label:`Shadow strength`,help:`Base shadow opacity. Auto-boosted +0.17 in dark mode. Slider sets the light-mode base.`,default:.08,min:0,max:.5,step:.01,driving:14,encode:e=>`calc(${e} + var(--sf-is-dark) * 0.17)`,decode:e=>{let t=/^calc\(\s*([\d.e+-]+)/.exec(String(e));return t?parseFloat(t[1]):NaN}}],motion:[{name:`--sf-motion-scale`,label:`Motion scale`,help:`Speed multiplier on every duration. Set to 0 to effectively disable motion.`,default:1,min:0,max:2,step:.05,driving:13}]};function Ul(e,t,n){let r=n*Math.PI/180,i=e,a=t*Math.cos(r),o=t*Math.sin(r),s=i+.3963377774*a+.2158037573*o,c=i-.1055613458*a-.0638541728*o,l=i-.0894841775*a-1.291485548*o,u=s*s*s,d=c*c*c,f=l*l*l,p=4.0767416621*u-3.3077115913*d+.2309699292*f,m=-1.2684380046*u+2.6097574011*d-.3413193965*f,h=-.0041960863*u-.7034186147*d+1.707614701*f,g=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055;return[Math.max(0,Math.min(255,Math.round(g(p)*255))),Math.max(0,Math.min(255,Math.round(g(m)*255))),Math.max(0,Math.min(255,Math.round(g(h)*255)))]}function Wl(e,t,n){let r=e=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function Gl(e,t){let n=Math.max(e,t),r=Math.min(e,t);return(n+.05)/(r+.05)}function Kl(e){let t=e.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(t){let e=t[1];return{l:e.endsWith(`%`)?parseFloat(e)/100:parseFloat(e),c:parseFloat(t[2]),h:parseFloat(t[3]),valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function ql(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${Math.round(n)})`}var Jl=G(` `),Yl=G(`
`);function Xl(e,t){Ue(t,!0);let n=na(t,`disabled`,3,!1);function r(e){return Math.min(t.max,Math.max(t.min,e))}let i=I(()=>(t.value-t.min)/(t.max-t.min)*100);var a=Yl(),o=z(a),s=V(z(o),2),c=V(s,2);zi(c);var l=V(c,2);F(o);var u=V(o,2),d=z(u);zi(d);var f=V(d,2),p=e=>{var n=Jl(),r=z(n,!0);F(n),H(()=>q(r,t.unit)),K(e,n)};J(f,e=>{t.unit&&e(p)}),F(u),F(a),H(()=>{Z(s,`width: ${U(i)}%`),Q(c,`min`,t.min),Q(c,`max`,t.max),Q(c,`step`,t.step),Bi(c,t.value),c.disabled=n(),Z(l,`left: calc(${U(i)}% - 6px)`),Q(d,`min`,t.min),Q(d,`max`,t.max),Q(d,`step`,t.step),Bi(d,t.value),d.disabled=n()}),W(`input`,c,e=>t.onChange(r(parseFloat(e.target.value)))),W(`change`,d,e=>t.onChange(r(parseFloat(e.target.value)||0))),K(e,a),We()}Br([`input`,`change`]);var Zl=G(`
`),Ql=G(``),$l=G(`
Lightness (L)
Chroma (C)
Hue (H)
Raw value
`),eu=G(`
`);function tu(e,t){Ue(t,!0);function n(e){let t=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(e);return t?{l:parseFloat(t[1]),c:parseFloat(t[2]),h:parseFloat(t[3])}:null}function r(e,t,n){return`oklch(${e.toFixed(3)} ${t.toFixed(3)} ${n.toFixed(1)})`}function i(e,t,n){let r=n*Math.PI/180,i=t*Math.cos(r),a=t*Math.sin(r),o=e+.3963377774*i+.2158037573*a,s=e-.1055613458*i-.0638541728*a,c=e-.0894841775*i-1.291485548*a,l=o*o*o,u=s*s*s,d=c*c*c,f=4.0767416621*l-3.3077115913*u+.2309699292*d,p=-1.2684380046*l+2.6097574011*u-.3413193965*d,m=-.0041960863*l-.7034186147*u+1.707614701*d,h=e=>e<=0?0:e>=1?255:Math.round(e**(1/2.2)*255);return`rgb(${h(f)},${h(p)},${h(m)})`}let a=I(()=>n(t.value)??{l:.6,c:.15,h:264}),o=L(!1),s=L(``),c=I(()=>i(U(a).l,U(a).c,U(a).h)),l=I(()=>t.tokenName.replace(`--sf-`,``));function u(e,n,i){t.onChange(r(e,n,i))}var d=eu(),f=z(d),p=z(f);let m;var h=V(p,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=z(v,!0);F(v);var b=V(v,2),x=z(b,!0);F(b),F(h);var S=V(h,2),C=e=>{K(e,Zl())};J(S,e=>{t.overridden&&e(C)});var w=V(S,2);F(f);var T=V(f,2),E=e=>{var n=$l(),r=z(n),i=z(r),o=V(z(i),2),c=z(o,!0);F(o),F(i);var l=V(i,2);Xl(V(l,2),{get value(){return U(a).l},min:0,max:1,step:.005,onChange:e=>u(e,U(a).c,U(a).h)}),F(r);var d=V(r,2),f=z(d),p=V(z(f),2),m=z(p,!0);F(p),F(f),Xl(V(f,2),{get value(){return U(a).c},min:0,max:.4,step:.005,onChange:e=>u(U(a).l,e,U(a).h)}),F(d);var h=V(d,2),g=z(h),_=V(z(g),2),v=z(_);F(_),F(g);var y=V(g,2);Xl(V(y,2),{get value(){return U(a).h},min:0,max:360,step:1,unit:`°`,onChange:e=>u(U(a).l,U(a).c,e)}),F(h);var b=V(h,2),x=V(z(b),2),S=z(x);zi(S);var C=V(S,2),w=e=>{var n=Ql();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{t.overridden&&e(w)}),F(x),F(b),F(n),H((e,n,r,i,a)=>{q(c,e),Z(l,n),q(m,r),q(v,`${i??``}°`),Z(y,a),Bi(S,U(s)||t.value)},[()=>U(a).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}), oklch(1 ${U(a).c.toFixed(3)} ${U(a).h.toFixed(1)}))`,()=>U(a).c.toFixed(3),()=>U(a).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 0), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 60), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 120), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 180), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 240), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 300), oklch(${U(a).l.toFixed(3)} ${U(a).c.toFixed(3)} 360))`]),W(`input`,S,e=>{R(s,e.target.value,!0)}),zr(`blur`,S,()=>{U(s).trim()&&(t.onChange(U(s).trim()),R(s,``))}),W(`keydown`,S,e=>{e.key===`Enter`&&(U(s).trim()&&(t.onChange(U(s).trim()),R(s,``)),e.currentTarget.blur())}),K(e,n)};J(T,e=>{U(o)&&e(E)}),F(d),H(()=>{X(d,1,`rounded-xl border transition-all ${t.overridden?`bg-indigo-500/8 border-indigo-500/20`:`bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8 hover:border-black/12 dark:hover:border-white/12`}`),m=Z(p,``,m,{background:U(c)}),q(_,t.label),q(y,U(l)),q(x,t.value),X(w,1,`text-slate-500 text-[10px] transition-transform ${U(o)?`rotate-180`:``}`)}),W(`click`,f,()=>{R(o,!U(o))}),K(e,d),We()}Br([`click`,`input`,`keydown`]);var nu=G(` `),ru=G(``),iu=G(`

`),au=G(`
`);function ou(e,t){Ue(t,!0);let n=I(()=>t.overrides[t.knob.name]),r=I(()=>U(n)===void 0?t.knob.default:t.knob.decode?t.knob.decode(U(n)):parseFloat(U(n))),i=I(()=>isNaN(U(r))?t.knob.default:U(r)),a=I(()=>t.knob.name in t.overrides);function o(e){let n=t.knob.encode?t.knob.encode(e):String(e);t.onChange(t.knob.name,n)}function s(){t.onChange(t.knob.name,null)}var c=au(),l=z(c),u=z(l),d=z(u),f=z(d,!0);F(d);var p=V(d,2),m=e=>{var n=nu(),r=z(n);F(n),H(()=>q(r,`→ ${t.knob.driving??``} tokens`)),K(e,n)};J(p,e=>{t.knob.driving!==void 0&&e(m)}),F(u);var h=V(u,2),g=e=>{var t=ru();W(`click`,t,s),K(e,t)};J(h,e=>{U(a)&&e(g)}),F(l);var _=V(l,2);Xl(_,{get value(){return U(i)},get min(){return t.knob.min},get max(){return t.knob.max},get step(){return t.knob.step},get unit(){return t.knob.unit},onChange:o});var v=V(_,2),y=e=>{var n=iu(),r=z(n,!0);F(n),H(()=>q(r,t.knob.help)),K(e,n)};J(v,e=>{t.knob.help&&e(y)}),F(c),H(()=>q(f,t.knob.label)),K(e,c),We()}Br([`click`]);var su=G(` `),cu=G(``),lu=G(``),uu=G(``),du=G(``),fu=G(`

`),pu=G(` `,1),mu=G(`

`),hu=G(`
`);function $(e,t){Ue(t,!0);let n=L(!1),r=L(``),i=L(!1),a=I(()=>!!t.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(t.currentRaw.trim())),o=I(()=>!!(t.rawDefault&&t.onRawSet&&(U(n)||U(a)||U(i))));On(()=>{U(i)||R(r,t.currentRaw??``,!0)});var s=hu(),c=z(s),l=z(c),u=e=>{var n=su(),r=z(n,!0);F(n),H(()=>q(r,t.label)),K(e,n)},d=e=>{K(e,cu())};J(l,e=>{t.label?e(u):e(d,-1)});var f=V(l,2),p=z(f),m=e=>{var t=lu();H(()=>{Q(t,`title`,U(o)?`Switch to slider`:`Enter raw CSS value`),X(t,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${U(o)?`text-indigo-600 dark:text-indigo-400`:`opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100 text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400`}`)}),W(`click`,t,()=>{R(n,!U(n))}),K(e,t)};J(p,e=>{t.rawDefault&&t.onRawSet&&e(m)});var h=V(p,2),g=e=>{var n=uu();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(h,e=>{t.overridden&&e(g)}),F(f),F(c);var _=V(c,2),v=e=>{var n=du();zi(n),H(()=>{Bi(n,U(r)),Q(n,`placeholder`,t.rawDefault)}),zr(`focus`,n,()=>{R(i,!0)}),zr(`blur`,n,()=>{R(i,!1),U(r).trim()||t.onReset()}),W(`input`,n,e=>{R(r,e.target.value,!0);let n=U(r).trim();n&&t.onRawSet&&t.onRawSet(n)}),K(e,n)},y=e=>{var n=pu(),r=B(n);Xl(r,{get value(){return t.value},get min(){return t.min},get max(){return t.max},get step(){return t.step},get unit(){return t.unit},get onChange(){return t.onChange}});var i=V(r,2),a=e=>{var n=fu(),r=z(n);F(n),H(()=>q(r,`default: ${t.rawDefault??``}`)),K(e,n)};J(i,e=>{t.rawDefault&&!t.overridden&&e(a)}),K(e,n)};J(_,e=>{U(o)&&t.rawDefault?e(v):e(y,-1)});var b=V(_,2),x=e=>{var n=mu(),r=z(n,!0);F(n),H(()=>q(r,t.help)),K(e,n)};J(b,e=>{t.help&&e(x)}),F(s),K(e,s),We()}Br([`click`,`input`]);var gu=G(``),_u=G(``),vu=G(` `),yu=G(``),bu=G(``),xu=G(`
`);function Su(e,t){Ue(t,!0);let n=L(!1),r=L(!1),i=L(null);On(()=>{U(n)&&br().then(()=>U(i)?.focus())});function a(e){let t=e.trim();return t.startsWith(`--`)&&!t.startsWith(`var(`)?`var(${t})`:t}function o(e){sl.value;let t=a(e);return pl(t)||t||`transparent`}let s=I(()=>o(t.value||`var(${t.token})`)),c=I(()=>t.value.trim().startsWith(`var(`)||t.value.trim().startsWith(`--`));function l(e){if(e.match(/^#([0-9a-fA-F]{6})$/))return e.toLowerCase();let t=e.match(/^#([0-9a-fA-F]{3})$/);if(t)return`#`+t[1].split(``).map(e=>e+e).join(``);let n=e.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return n?`#`+[n[1],n[2],n[3]].map(e=>parseInt(e).toString(16).padStart(2,`0`)).join(``):`#6366f1`}var u=xu(),d=z(u),f=z(d);let p;var m=V(f,2),h=e=>{var n=gu();zi(n),H(e=>Bi(n,e),[()=>l(U(s))]),W(`input`,n,e=>t.onSet(e.target.value)),K(e,n)};J(m,e=>{U(c)||e(h)}),F(d);var g=V(d,2),_=e=>{var o=_u();zi(o),Zi(o,e=>R(i,e),()=>U(i)),H(()=>{Bi(o,t.value),Q(o,`placeholder`,t.placeholder??`default`)}),zr(`blur`,o,e=>{if(U(r)){R(r,!1),R(n,!1);return}let i=a(e.target.value);i?t.onSet(i):t.onReset(),R(n,!1)}),W(`keydown`,o,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&(R(r,!0),R(n,!1))}),K(e,o)},v=e=>{var r=yu(),i=z(r),a=e=>{var n=vu(),r=z(n,!0);F(n),H(()=>q(r,t.value)),K(e,n)},o=e=>{var n=Yr();H(()=>q(n,t.placeholder??`default`)),K(e,n)};J(i,e=>{t.isOverridden?e(a):e(o,-1)}),F(r),W(`click`,r,()=>{R(n,!0)}),K(e,r)};J(g,e=>{U(n)?e(_):e(v,-1)});var y=V(g,2),b=e=>{var n=bu();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(y,e=>{t.isOverridden&&e(b)}),F(u),H(()=>p=Z(f,``,p,{background:U(s)})),K(e,u),We()}Br([`input`,`keydown`,`click`]);var Cu=(e,t=f)=>{var n=wu(),r=z(n,!0);F(n),H(()=>q(r,t())),K(e,n)},wu=G(``),Tu=G(`
Aa
`),Eu=G(`
`),Du=G(`
`),Ou=G(``),ku=G(`
`),Au=G(`
`),ju=G(`

Absolute lightness ramp — each step pins L and inherits chroma + hue from the source. Not the brand mix curve. Light and dark use the same L per step, so at the default near-zero chroma the two rows look almost - identical — add chroma above to see them diverge by hue.

`),xu=G(`
L
D
`,1),Su=G(`
`),Cu=G(`
`),wu=G(`

OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base + identical — add chroma above to see them diverge by hue.

`),Mu=G(`
L
D
`,1),Nu=G(`
`),Pu=G(`
`),Fu=G(`

OKLCH source values — all 200+ derived color steps are computed automatically. Tints (50–400) mix toward Base (the "Surface" color) and shades (600–950) mix toward Text (driven by Neutral) — so editing Base or Neutral below - will shift every family's tints/shades too. That's expected, not a bug.

`,1),Tu=G(`
→
`),Eu=G(`

Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH - lightness — useful for always-stable sections. Enable on canvas to preview.

Color Current Locked
`,1),Du=G(` `),Ou=G(`
`),ku=G(`
`),Au=G(`

Status colors don't ride the brand mix curve — only the resolved color plus subtle/muted alpha washes and - a strong shade are derived. There's no -50…-950 ramp for success/warning/info/danger.

`),ju=G(`

Dark mode is auto-derived from each light source by default. Switch to - Manual dark to set a bespoke dark value.

`,1),Mu=G(`
Aa
`),Nu=G(``),Pu=G(`

Controls whether text on brand-coloured surfaces is light or dark.

`,1),Fu=G(``),Iu=G(`
`),Lu=G(`
`),Ru=G(`
`),zu=G(`

Controls how much color is mixed into each palette step. Step 500 is always the source color.

Tints (50–400) — mixed toward surface
Shades (600–950) — mixed toward text
Palette & curve preview

Bar height = mix amount · fill = the resolved primary palette swatch at each step

Mini palettes — all brand colors
`,1),Bu=G(``),Vu=G(`
Dir
`),Hu=G(`
Angle
`),Uu=G(`
Stops
default:
`),Wu=G(`
`,1),Gu=G(`

Auto-derived from your brand colors. Use the angle/direction and stop - controls, or edit the raw value for full control.

`,1),Ku=G(`

--sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

`,1),qu=G(`
`),Ju=G(`

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

`,1),Yu=G(`
Semantic colors

Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.

All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

`);function Xu(e,t){Ue(t,!0);function n(e,t){return Xc.value,nl(e)||t}function r(e,t){Xc.value;let n=sl(e);return n&&n!==`none`?n:t}function i(e,t,n){return Xc.value,il(e,t)||n}let a=[{name:`--sf-gradient-primary`,label:`Primary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))`},{name:`--sf-gradient-secondary`,label:`Secondary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-secondary)`,stop2:`oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))`},{name:`--sf-gradient-tertiary`,label:`Tertiary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-tertiary)`,stop2:`oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))`},{name:`--sf-gradient-brand`,label:`Brand`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) l c calc(h + 30))`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))`},{name:`--sf-gradient-surface`,label:`Surface`,group:`brand`,kind:`angle`,space:`oklab`,angle:180,dir:`bottom`,stop1:`var(--sf-color-surface)`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))`},{name:`--sf-gradient-fade--r`,label:`Fade →`,group:`fade`,kind:`dir`,space:`oklch`,angle:90,dir:`right`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to right, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--l`,label:`Fade ←`,group:`fade`,kind:`dir`,space:`oklch`,angle:270,dir:`left`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to left, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--t`,label:`Fade ↑`,group:`fade`,kind:`dir`,space:`oklch`,angle:0,dir:`top`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to top, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--b`,label:`Fade ↓`,group:`fade`,kind:`dir`,space:`oklch`,angle:180,dir:`bottom`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))`}],o=[{key:`primary`,label:`Primary`},{key:`secondary`,label:`Secondary`},{key:`tertiary`,label:`Tertiary`},{key:`action`,label:`Action`}],s=[{name:`--sf-color-primary-source-light`,label:`Primary`,side:`light`,default:`oklch(0.47 0.27 264)`,colorKey:`primary`},{name:`--sf-color-primary-source-dark`,label:`Primary`,side:`dark`,default:`oklch(0.715 0.243 264)`,colorKey:`primary`},{name:`--sf-color-secondary-source-light`,label:`Secondary`,side:`light`,default:`oklch(0.22 0.04 264)`,colorKey:`secondary`},{name:`--sf-color-secondary-source-dark`,label:`Secondary`,side:`dark`,default:`oklch(0.84 0.036 264)`,colorKey:`secondary`},{name:`--sf-color-tertiary-source-light`,label:`Tertiary`,side:`light`,default:`oklch(0.42 0.22 295)`,colorKey:`tertiary`},{name:`--sf-color-tertiary-source-dark`,label:`Tertiary`,side:`dark`,default:`oklch(0.74 0.198 295)`,colorKey:`tertiary`},{name:`--sf-color-action-source-light`,label:`Action`,side:`light`,default:`oklch(0.50 0.22 235)`,colorKey:`action`},{name:`--sf-color-action-source-dark`,label:`Action`,side:`dark`,default:`oklch(0.70 0.198 235)`,colorKey:`action`},{name:`--sf-color-neutral-source-light`,label:`Neutral`,side:`light`,default:`oklch(0.52 0.025 260)`,colorKey:`neutral`},{name:`--sf-color-neutral-source-dark`,label:`Neutral`,side:`dark`,default:`oklch(0.69 0.0225 260)`,colorKey:`neutral`},{name:`--sf-color-base-source-light`,label:`Base`,side:`light`,default:`oklch(0.96 0.006 250)`,colorKey:`base`},{name:`--sf-color-base-source-dark`,label:`Base`,side:`dark`,default:`oklch(0.22 0.003 250)`,colorKey:`base`}],c=[{name:`--sf-color-success-source-light`,label:`Success`,side:`light`,default:`oklch(0.50 0.16 145)`,colorKey:`success`},{name:`--sf-color-success-source-dark`,label:`Success`,side:`dark`,default:`oklch(0.70 0.144 145)`,colorKey:`success`},{name:`--sf-color-warning-source-light`,label:`Warning`,side:`light`,default:`oklch(0.75 0.17 80)`,colorKey:`warning`},{name:`--sf-color-warning-source-dark`,label:`Warning`,side:`dark`,default:`oklch(0.65 0.153 80)`,colorKey:`warning`},{name:`--sf-color-info-source-light`,label:`Info`,side:`light`,default:`oklch(0.48 0.18 235)`,colorKey:`info`},{name:`--sf-color-info-source-dark`,label:`Info`,side:`dark`,default:`oklch(0.71 0.162 235)`,colorKey:`info`},{name:`--sf-color-danger-source-light`,label:`Danger`,side:`light`,default:`oklch(0.48 0.22 12)`,colorKey:`danger`},{name:`--sf-color-danger-source-dark`,label:`Danger`,side:`dark`,default:`oklch(0.73 0.198 12)`,colorKey:`danger`}],l=[{name:`--sf-palette-mix-50`,label:`50`,step:`tint`,default:4},{name:`--sf-palette-mix-100`,label:`100`,step:`tint`,default:8},{name:`--sf-palette-mix-200`,label:`200`,step:`tint`,default:20},{name:`--sf-palette-mix-300`,label:`300`,step:`tint`,default:40},{name:`--sf-palette-mix-400`,label:`400`,step:`tint`,default:65},{name:`--sf-palette-mix-600`,label:`600`,step:`shade`,default:82},{name:`--sf-palette-mix-700`,label:`700`,step:`shade`,default:62},{name:`--sf-palette-mix-800`,label:`800`,step:`shade`,default:38},{name:`--sf-palette-mix-900`,label:`900`,step:`shade`,default:18},{name:`--sf-palette-mix-950`,label:`950`,step:`shade`,default:8}],u=[{label:`Softer`,desc:`Low contrast palette`,patch:{"--sf-palette-mix-50":`3%`,"--sf-palette-mix-100":`6%`,"--sf-palette-mix-200":`14%`,"--sf-palette-mix-300":`30%`,"--sf-palette-mix-400":`55%`,"--sf-palette-mix-600":`72%`,"--sf-palette-mix-700":`52%`,"--sf-palette-mix-800":`28%`,"--sf-palette-mix-900":`12%`,"--sf-palette-mix-950":`5%`}},{label:`Default`,desc:`Balanced contrast`,patch:Object.fromEntries(l.map(e=>[e.name,null]))},{label:`Punchy`,desc:`High contrast palette`,patch:{"--sf-palette-mix-50":`6%`,"--sf-palette-mix-100":`12%`,"--sf-palette-mix-200":`28%`,"--sf-palette-mix-300":`52%`,"--sf-palette-mix-400":`78%`,"--sf-palette-mix-600":`90%`,"--sf-palette-mix-700":`72%`,"--sf-palette-mix-800":`50%`,"--sf-palette-mix-900":`26%`,"--sf-palette-mix-950":`12%`}}],d=[{name:`--sf-color-link`,label:`Link`},{name:`--sf-color-link--visited`,label:`Link visited`},{name:`--sf-color-mark-bg`,label:`Mark background`},{name:`--sf-color-mark-text`,label:`Mark text`},{name:`--sf-color-code-bg`,label:`Code background`},{name:`--sf-color-code-text`,label:`Code text`},{name:`--sf-color-overlay`,label:`Overlay`},{name:`--sf-color-black`,label:`Black`},{name:`--sf-color-white`,label:`White`},{name:`--sf-color-dim`,label:`Dim (translucent black)`}],f=[`50`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`950`],p=[`primary`,`secondary`,`tertiary`,`action`,`neutral`],m={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},g=[...p,`base`],_=[{label:`Base`,expr:e=>`var(--sf-color-${e})`},{label:`Subtle`,expr:e=>`var(--sf-color-${e}-subtle)`},{label:`Muted`,expr:e=>`var(--sf-color-${e}-muted)`},{label:`Strong`,expr:e=>`var(--sf-color-${e}-strong)`}],v=[...s,...c],y=[{heading:`Brand`,items:[{name:`--sf-color-primary`,label:`Primary`,fg:`--sf-color-text--on-primary`},{name:`--sf-color-secondary`,label:`Secondary`,fg:`--sf-color-text--on-secondary`},{name:`--sf-color-tertiary`,label:`Tertiary`,fg:`--sf-color-text--on-tertiary`},{name:`--sf-color-action`,label:`Action`,fg:`--sf-color-text--on-action`},{name:`--sf-color-neutral`,label:`Neutral`,fg:`--sf-color-text--on-neutral`}]},{heading:`Status`,items:[{name:`--sf-color-success`,label:`Success`,fg:`--sf-color-text--on-success`},{name:`--sf-color-warning`,label:`Warning`,fg:`--sf-color-text--on-warning`},{name:`--sf-color-info`,label:`Info`,fg:`--sf-color-text--on-info`},{name:`--sf-color-danger`,label:`Danger`,fg:`--sf-color-text--on-danger`}]},{heading:`Surfaces & text`,items:[{name:`--sf-color-bg`,label:`Bg`,fg:`--sf-color-text`},{name:`--sf-color-surface`,label:`Surface`,fg:`--sf-color-text`},{name:`--sf-color-raised`,label:`Raised`,fg:`--sf-color-text`},{name:`--sf-color-inset`,label:`Inset`,fg:`--sf-color-text`},{name:`--sf-color-inverse`,label:`Inverse`,fg:`--sf-color-text--on-inverse`}]}],b=(jl.colors??[]).filter(e=>e.name===`--sf-contrast-bias`||e.name===`--sf-contrast-threshold`),x=(jl.colors??[]).filter(e=>e.name===`--sf-focus-ring-width`),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1),O=L(!1),k=L(!1),ee=L(`light`),te=nn({}),ne=I(()=>parseFloat(t.overrides[`--sf-lumlocker`]??`0.65`));function A(e){let t=e.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!t)return null;let n=t[1],r=t[2].trim(),i=r.startsWith(`to `),a=i?r.slice(3).trim():`right`,o=i?0:parseInt(r),s=0,c=0,l=[],u=t[3];for(let e=0;ee.name===r)?.default??``;return i?`oklch(from ${i} ${U(ne)} c h)`:``}let oe=L(nn(new Set(v.filter(e=>e.side===`light`&&!((v.find(t=>t.colorKey===e.colorKey&&t.side===`dark`)?.name??``)in t.overrides)).map(e=>e.colorKey)))),se=I(()=>{let e={};for(let n of t.tokens)v.some(e=>e.name===n.name)&&(e[n.name]=n);return e});function N(e){return e?t.overrides[e.name]??U(se)[e.name]?.value??e.default:``}function ce(e){return v.find(t=>t.name===e)}let le=I(()=>u.find(e=>Object.entries(e.patch).every(([e,n])=>n===null?!(e in t.overrides):t.overrides[e]===n)));function ue(e){let n=t.overrides[e.name];return n?parseFloat(n):e.default}let de=[];for(let e=0;ee.label===t);if(!a)return e;let o=`color-mix(in oklab, ${e} ${ue(a)}%, ${i?n:r})`;return nl(o)||o}function ye(e,t){Xc.value;let n=m[t];if(n===void 0)return e;let r=`oklch(from ${e} ${n} c h)`;return nl(r)||r}function be(e,t,n,r,i){return e===`base`?ye(t,n):ve(t,n,r,i)}function xe(e,n,r){t.onSet(e.name,r)}function Se(e,n,r){let i=!!(n&&n.name in t.overrides);if(U(oe).has(e)&&!i){let i=N(v.find(e=>e.name===r));n&&t.onSet(n.name,pe(i,e)),R(oe,new Set([...U(oe)].filter(t=>t!==e)),!0)}else n&&t.onBulkChange({[n.name]:null}),R(oe,new Set([...U(oe),e]),!0)}let Ce=[{label:`Body text on surface`,fg:`var(--sf-color-text)`,bg:`var(--sf-color-surface)`},{label:`White on primary`,fg:`#ffffff`,bg:`var(--sf-color-primary)`},{label:`Primary on surface`,fg:`var(--sf-color-primary)`,bg:`var(--sf-color-surface)`}];function we(e,t){Xc.value;let n=ol(e),r=ol(t);return!n||!r?null:Pl(Nl(...n),Nl(...r))}var Te=Yu(),Ee=z(Te),De=V(z(Ee),4);Y(De,21,()=>y,e=>e.heading,(e,t)=>{var n=gu(),r=z(n),a=z(r,!0);F(r),Y(V(r,2),16,()=>[`light`,`dark`],e=>e,(e,n)=>{var r=hu(),a=z(r),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>U(t).items,e=>e.name,(e,t)=>{let r=I(()=>i(`var(${U(t).name})`,n,`transparent`)),a=I(()=>i(`var(${U(t).fg})`,n,`currentColor`));var o=mu(),s=V(z(o),2),c=z(s,!0);F(s),F(o),H(()=>{Z(o,`background:${U(r)}; color:${U(a)}`),Q(o,`title`,`${U(t).name} (${n}) — ${U(r)}`),q(c,U(t).label)}),K(e,o)}),F(s),F(r),H(()=>q(o,n===`light`?`L`:`D`)),K(e,r)}),F(n),H(()=>q(a,U(t).heading)),K(e,n)}),F(De),F(Ee);var P=V(Ee,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var r=wu(),i=V(B(r),2);Y(i,21,()=>de,([e,t])=>e.name,(e,r)=>{var i=I(()=>h(U(r),2));let a=()=>U(i)[0],o=()=>U(i)[1],s=I(()=>!!(o()&&o().name in t.overrides)),c=I(()=>U(oe).has(a().colorKey)&&!U(s));var l=Cu(),u=z(l),d=z(u),p=z(d,!0);F(d);var m=V(d,2),_=e=>{var t=_u(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(c)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-300`:`border-white/10 text-slate-500 hover:text-slate-300`}`),q(n,U(c)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(a().colorKey,o(),a().name)),K(e,t)};J(m,e=>{o()&&e(_)}),F(u);var v=V(u,2);{let e=I(()=>`${a().label} (light)`),n=I(()=>N(a())),r=I(()=>a().name in t.overrides);Wl(v,{get label(){return U(e)},get tokenName(){return a().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>xe(a(),o(),e),onReset:()=>t.onReset(a().name)})}var y=V(v,2),b=e=>{let t=I(()=>N(a())),n=I(()=>U(c)?pe(U(t),a().colorKey):o()?N(o()):U(t)),r=I(me),i=I(he),s=I(ge),l=I(_e);var u=xu(),d=B(u),p=z(d),m=V(z(p),2);Y(m,20,()=>f,e=>e,(e,n)=>{let i=I(()=>be(a().colorKey,U(t),n,U(r),U(s)));var o=vu();let c;fu(z(o),()=>`${a().colorKey}-${n}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${n} (light) — ${U(i)}`),c=Z(o,``,c,{background:U(i)})}),K(e,o)}),F(m),F(p);var h=V(p,2),g=V(z(h),2);Y(g,20,()=>f,e=>e,(e,t)=>{let r=I(()=>be(a().colorKey,U(n),t,U(i),U(l)));var o=yu();let s;fu(z(o),()=>`${a().colorKey}-${t}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${t} (dark) — ${U(r)}`),s=Z(o,``,s,{background:U(r)})}),K(e,o)}),F(g),F(h),F(d);var _=V(d,2),v=e=>{K(e,bu())};J(_,e=>{a().colorKey===`base`&&e(v)}),K(e,u)},x=I(()=>g.includes(a().colorKey));J(y,e=>{U(x)&&e(b)});var S=V(y,2),C=e=>{{let n=I(()=>`${o().label} (dark mode)`),r=I(()=>N(o())),i=I(()=>o().name in t.overrides);Wl(e,{get label(){return U(n)},get tokenName(){return o().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}},w=e=>{let t=I(()=>pe(N(a()),a().colorKey));var r=Su(),i=z(r);let o;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),o=Z(i,``,o,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(S,e=>{o()&&!U(c)?e(C):o()&&U(c)&&e(w,1)}),F(l),H(()=>q(p,a().label)),K(e,l)}),F(i),K(e,r)};J(je,e=>{U(S)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var r=Eu(),a=V(B(r),2);{let e=I(()=>`--sf-lumlocker`in t.overrides);$(a,{label:`LumLocker lightness (L)`,get value(){return U(ne)},min:0,max:1,step:.01,help:`--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-lumlocker`,String(e)),onReset:()=>t.onReset(`--sf-lumlocker`)})}var s=V(a,2);Y(V(z(s),2),17,()=>o,e=>e.key,(e,t)=>{var r=Xr();Y(B(r),16,()=>[`light`,`dark`],e=>e,(e,r)=>{let a=I(()=>i(`var(--sf-color-${U(t).key}-source-${r})`,r,``)),o=I(()=>ae(U(t).key,r));var s=Tu(),c=z(s),l=z(c),u=V(l),d=z(u,!0);F(u),F(c);var f=V(c,2),p=V(f,4);F(s),H(e=>{q(l,`${U(t).label??``} `),q(d,r===`light`?`L`:`D`),Z(f,`background:${U(a)||`var(--sf-color-${U(t).key})`}`),Z(p,e),Q(p,`title`,U(o))},[()=>`background:${n(U(o),U(o))}`]),K(e,s)}),K(e,r)}),F(s);var c=V(s,2),l=z(c,!0);F(c),H(()=>{X(c,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${cl.value?`bg-indigo-600/25 border-indigo-500/40 text-indigo-200`:`border-white/10 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(l,cl.value?`✓ LumLocker active on canvas — click to disable`:`Preview LumLocker on live canvas`)}),W(`click`,c,()=>{cl.value=!cl.value}),K(e,r)};J(Re,e=>{U(k)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var r=ju(),a=V(B(r),2);Y(a,21,()=>fe,([e,t])=>e.name,(e,r)=>{var a=I(()=>h(U(r),2));let o=()=>U(a)[0],s=()=>U(a)[1],c=I(()=>!!(s()&&s().name in t.overrides)),l=I(()=>U(oe).has(o().colorKey)&&!U(c));var u=Au(),d=z(u),f=z(d),p=z(f,!0);F(f);var m=V(f,2),g=e=>{var t=_u(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(l)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-300`:`border-white/10 text-slate-500 hover:text-slate-300`}`),q(n,U(l)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(o().colorKey,s(),o().name)),K(e,t)};J(m,e=>{s()&&e(g)}),F(d);var v=V(d,2);{let e=I(()=>`${o().label} light`),n=I(()=>N(o())),r=I(()=>o().name in t.overrides);Wl(v,{get label(){return U(e)},get tokenName(){return o().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}var y=V(v,2),b=e=>{{let n=I(()=>`${s().label} dark`),r=I(()=>N(s())),i=I(()=>s().name in t.overrides);Wl(e,{get label(){return U(n)},get tokenName(){return s().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(s().name,e),onReset:()=>t.onReset(s().name)})}},x=e=>{let t=I(()=>pe(N(o()),o().colorKey));var r=Su(),i=z(r);let a;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),a=Z(i,``,a,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(y,e=>{s()&&!U(l)?e(b):s()&&U(l)&&e(x,1)});var S=V(y,2),C=z(S),w=V(z(C),2);Y(w,21,()=>_,e=>e.label,(e,t)=>{var n=Du(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(w),F(C),Y(V(C,2),16,()=>[[`L`,`light`],[`D`,`dark`]],([e,t])=>e,(e,t)=>{var n=I(()=>h(t,2));let r=()=>U(n)[0],a=()=>U(n)[1];var s=ku(),c=z(s),l=z(c,!0);F(c);var u=V(c,2);Y(u,21,()=>_,e=>e.label,(e,t)=>{let n=I(()=>i(U(t).expr(o().colorKey),a(),``));var r=Ou();let s;var c=z(r);{let e=I(()=>`${o().colorKey}-${U(t).label.toLowerCase()}`);fu(c,()=>U(e))}F(r),H(e=>{Q(r,`title`,e),s=Z(r,``,s,{background:U(n)})},[()=>`${o().colorKey}-${U(t).label.toLowerCase()} (${a()}) — ${U(n)}`]),K(e,r)}),F(u),F(s),H(()=>q(l,r())),K(e,s)}),F(S),Me(2),F(u),H(()=>q(p,o().label)),K(e,u)}),F(a),K(e,r)};J(Ke,e=>{U(T)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var r=Pu(),i=V(B(r),2);Y(i,17,()=>b,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})});var a=V(i,2),o=z(a);Y(o,17,()=>Ce,e=>e.label,(e,t)=>{let r=I(()=>we(U(t).fg,U(t).bg));var i=Xr(),a=B(i),o=e=>{var i=Mu(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H((e,n)=>{Z(a,e),q(s,U(t).label),q(l,`${n??``}:1`),X(u,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${U(r)>=4.5?`bg-emerald-500/20 text-emerald-300`:`bg-amber-500/20 text-amber-300`}`),q(d,U(r)>=4.5?`AA`:U(r)>=3?`AA-L`:`✗`)},[()=>`background:${n(U(t).bg,U(t).bg)}; color:${n(U(t).fg,U(t).fg)}`,()=>U(r).toFixed(2)]),K(e,i)};J(a,e=>{U(r)!==null&&e(o)}),K(e,i)});var s=V(o,2),c=e=>{var n=Nu();W(`click`,n,()=>t.onSelectDomain?.(`wcag`)),K(e,n)};J(s,e=>{t.onSelectDomain&&e(c)}),F(a),Y(V(a,2),17,()=>x,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),K(e,r)};J(Qe,e=>{U(C)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{let n=I(()=>t.overrides[`--sf-color-primary-source-light`]??s.find(e=>e.name===`--sf-color-primary-source-light`)?.default??`oklch(0.47 0.27 264)`),r=I(()=>t.overrides[`--sf-color-primary-source-dark`]),i=I(()=>U(r)??(!U(oe).has(`primary`)||U(r)?s.find(e=>e.name===`--sf-color-primary-source-dark`)?.default??pe(U(n),`primary`):pe(U(n),`primary`))),a=I(()=>U(ee)===`light`?U(n):U(i)),o=I(()=>U(ee)===`light`?me():he()),c=I(()=>U(ee)===`light`?ge():_e()),d=I(()=>U(ee)===`light`?me():he()),m=I(()=>U(ee)===`light`?ge():_e());var h=zu(),g=V(B(h),2);Y(g,21,()=>u,e=>e.label,(e,n)=>{var r=Fu(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o,!0);F(o),F(r),H(()=>{X(r,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${U(le)?.label===U(n).label?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(a,U(n).label),q(s,U(n).desc)}),W(`click`,r,()=>t.onBulkChange(U(n).patch)),K(e,r)}),F(g);var _=V(g,2),v=V(z(_),2);Y(v,21,()=>l.filter(e=>e.step===`tint`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(v),F(_);var y=V(_,2),b=V(z(y),2);Y(b,21,()=>l.filter(e=>e.step===`shade`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(b),F(y);var x=V(y,2),S=z(x),C=V(z(S),2);Y(C,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=_u(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(ee)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(ee,t,!0)}),K(e,n)}),F(C),F(S);var w=V(S,2);Y(w,21,()=>l,e=>e.name,(e,t)=>{let n=I(()=>ue(U(t))),r=I(()=>U(t).label),i=I(()=>ve(U(a),U(r),U(o),U(c)));var s=Iu(),l=z(s),u=z(l,!0);F(l);var d=V(l,2);fu(z(d),()=>`primary-${U(r)}`),F(d);var f=V(d,2),p=z(f,!0);F(f),F(s),H((e,t,n)=>{q(u,e),Z(d,t),Q(d,`title`,n),q(p,U(r))},[()=>Math.round(U(n)),()=>`background:${U(i)}; height: ${Math.max(U(n)/100*56,6)}px`,()=>`primary-${U(r)} (${U(ee)}) · mix ${Math.round(U(n))}%`]),K(e,s)}),F(w),Me(2),F(x);var T=V(x,2),E=z(T),D=V(z(E),2);Y(D,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=_u(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(ee)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(ee,t,!0)}),K(e,n)}),F(D),F(E),Y(V(E,2),16,()=>p,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-color-${n}-source-light`]??s.find(e=>e.name===`--sf-color-${n}-source-light`)?.default??`oklch(0.5 0.15 264)`),i=I(()=>`--sf-color-${n}-source-dark`),a=I(()=>t.overrides[U(i)]??(U(oe).has(n)&&!t.overrides[U(i)]?pe(U(r),n):s.find(e=>e.name===U(i))?.default??pe(U(r),n))),o=I(()=>U(ee)===`light`?U(r):U(a));var c=Ru(),l=z(c),u=z(l,!0);F(l);var p=V(l,2);Y(p,20,()=>f,e=>e,(e,t)=>{let r=I(()=>ve(U(o),t,U(d),U(m)));var i=Lu();fu(z(i),()=>`${n}-${t}`),F(i),H(()=>{Z(i,`background:${U(r)}`),Q(i,`title`,`${n}-${t} (${U(ee)})`)}),K(e,i)}),F(p),F(c),H(()=>q(u,n)),K(e,c)}),F(T),K(e,h)};J(it,e=>{U(w)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=Gu();Y(V(B(n),2),16,()=>[`brand`,`fade`],e=>e,(e,n)=>{var i=Wu(),o=B(i),s=z(o,!0);F(o);var c=V(o,2);Y(c,21,()=>a.filter(e=>e.group===n),e=>e.name,(e,n)=>{let i=I(()=>`var(${U(n).name})`),a=I(()=>M(U(n)));var o=Uu(),s=z(o),c=V(s,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{var r=Bu();W(`click`,r,()=>{delete te[U(n).name],t.onReset(U(n).name)}),K(e,r)};J(f,e=>{U(n).name in t.overrides&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Vu();Y(V(z(t),2),16,()=>[`top`,`right`,`bottom`,`left`],e=>e,(e,t)=>{var r=_u(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${U(a).dir===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(i,t)}),W(`click`,r,()=>ie(U(n),`dir`,t)),K(e,r)}),F(t),K(e,t)},g=e=>{var t=Hu(),r=V(z(t),2);zi(r);var i=V(r,2),o=z(i);F(i),F(t),H(()=>{Bi(r,U(a).angle),q(o,`${U(a).angle??``}°`)}),W(`input`,r,e=>ie(U(n),`angle`,parseInt(e.target.value))),K(e,t)};J(m,e=>{U(n).kind===`dir`&&U(n).group!==`fade`?e(h):U(n).kind!==`dir`&&e(g,1)});var _=V(m,2),v=V(z(_),2);zi(v);var y=V(v,2);zi(y),F(_);var b=V(_,2),x=V(z(b));F(b);var S=V(b,2);zi(S),F(c),F(o),H(e=>{Z(s,e),q(d,U(n).label),Bi(v,U(a).stop1),Bi(y,U(a).stop2),q(x,` ${U(n).formula??``}`),Bi(S,t.overrides[U(n).name]??``)},[()=>`background:${r(U(i),U(i))}`]),W(`change`,v,e=>ie(U(n),`stop1`,e.target.value.trim())),W(`change`,y,e=>ie(U(n),`stop2`,e.target.value.trim())),W(`change`,S,e=>{let r=e.target.value.trim();delete te[U(n).name],r?t.onSet(U(n).name,r):t.onReset(U(n).name)}),K(e,o)}),F(c),H(()=>q(s,n===`brand`?`Brand & surface`:`Edge fades`)),K(e,i)}),K(e,n)};J(ut,e=>{U(O)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=Ku(),r=V(B(n),2);Y(r,20,()=>[[`light dark`,`light dark (default)`],[`light`,`Light only`],[`dark`,`Dark only`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-color-scheme`]??`light dark`);var s=_u(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`light dark`?t.onReset(`--sf-color-scheme`):t.onSet(`--sf-color-scheme`,i())),K(e,s)}),F(r),K(e,n)};J(gt,e=>{U(D)&&e(_t)}),F(ft);var vt=V(ft,4),yt=z(vt),bt=V(z(yt),2),xt=z(bt,!0);F(bt),F(yt);var St=V(yt,2),Ct=e=>{var r=Ju(),i=V(B(r),2);Y(i,21,()=>d,e=>e.name,(e,r)=>{let i=I(()=>n(`var(${U(r).name})`,``));var a=qu(),o=z(a),s=z(o,!0);F(o);var c=V(o,2);{let e=I(()=>t.overrides[U(r).name]??``),n=I(()=>U(i)?`auto-derived · ${U(i)}`:`auto-derived`),a=I(()=>U(r).name in t.overrides);du(c,{get token(){return U(r).name},get value(){return U(e)},get placeholder(){return U(n)},get isOverridden(){return U(a)},onSet:e=>t.onSet(U(r).name,e),onReset:()=>t.onReset(U(r).name)})}F(a),H(()=>q(s,U(r).label)),K(e,a)}),F(i),K(e,r)};J(St,e=>{U(E)&&e(Ct)}),F(vt),Me(2),F(Te),H(()=>{Q(Oe,`aria-expanded`,U(S)),q(Ae,U(S)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(k)),q(Le,U(k)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(T)),q(Ge,U(T)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(C)),q(Ze,U(C)?`▲`:`▼`),Q(tt,`aria-expanded`,U(w)),q(rt,U(w)?`▲`:`▼`),Q(st,`aria-expanded`,U(O)),q(lt,U(O)?`▲`:`▼`),Q(pt,`aria-expanded`,U(D)),q(ht,U(D)?`▲`:`▼`),Q(yt,`aria-expanded`,U(E)),q(xt,U(E)?`▲`:`▼`)}),W(`click`,Oe,()=>{R(S,!U(S))}),W(`click`,Fe,()=>{R(k,!U(k))}),W(`click`,Ve,()=>{R(T,!U(T))}),W(`click`,Ye,()=>{R(C,!U(C))}),W(`click`,tt,()=>{R(w,!U(w))}),W(`click`,st,()=>{R(O,!U(O))}),W(`click`,pt,()=>{R(D,!U(D))}),W(`click`,yt,()=>{R(E,!U(E))}),K(e,Te),We()}Br([`click`,`input`,`change`]);var Zu=G(`
Aa Aa
`),Qu=G(`
min
max
`),$u=G(``),ed=G(``),td=G(`
`),nd=G(`
Modular scale ratio
`),rd=G(`
`),id=G(`
clamp( … )
`);function ad(e,t){Ue(t,!0);let n=na(t,`unit`,3,`rem`),r=na(t,`minLabel`,3,`Min`),i=na(t,`maxLabel`,3,`Max`),a=na(t,`overridden`,3,!1),o=na(t,`ratioMin_bound`,3,1.05),s=na(t,`ratioMax_bound`,3,1.8),c=na(t,`previewKind`,3,`none`);function l(e){return Math.min(t.max,Math.max(t.min,e))}let u=I(()=>(t.minValue-t.min)/(t.max-t.min)*100),d=I(()=>(t.maxValue-t.min)/(t.max-t.min)*100);function f(e){return Math.min(s(),Math.max(o(),e))}let p=I(()=>t.ratioPresets?.find(e=>t.ratioMin!==void 0&&Math.abs(e.value-t.ratioMin)<.0015)?.value),m=I(()=>t.ratioPresets?.find(e=>t.ratioMax!==void 0&&Math.abs(e.value-t.ratioMax)<.0015)?.value);var h=id(),g=z(h),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=V(z(y)),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),Me(),F(y),F(g);var w=V(g,2),T=V(z(w),2),E=V(T,2);zi(E);var D=V(E,2);zi(D);var O=V(D,2),k=V(O,2);F(w);var ee=V(w,2),te=z(ee),ne=z(te),A=z(ne,!0);F(ne);var j=V(ne,2);zi(j),F(te);var M=V(te,2),re=z(M),ie=z(re,!0);F(re);var ae=V(re,2);zi(ae),F(M),F(ee);var oe=V(ee,2),se=e=>{var n=Zu(),a=z(n),o=V(z(a)),s=z(o,!0);F(o),F(a);var c=V(a,2),l=V(z(c)),u=z(l,!0);F(l),F(c),F(n),H((e,t,n,r)=>{Z(a,e),q(s,t),Z(c,n),q(u,r)},[()=>`font-size:${Math.min(t.minValue,2)}rem`,()=>r().toLowerCase(),()=>`font-size:${Math.min(t.maxValue,2.6)}rem`,()=>i().toLowerCase()]),K(e,n)},N=e=>{var n=Qu(),r=z(n),i=V(r,4);Me(2),F(n),H((e,t)=>{Z(r,e),Z(i,t)},[()=>`width:${Math.min(t.minValue*28,120)}px`,()=>`width:${Math.min(t.maxValue*28,200)}px`]),K(e,n)};J(oe,e=>{c()===`type`?e(se):c()===`space`&&e(N,1)});var ce=V(oe,2),le=e=>{var n=nd(),a=V(z(n),2);Y(a,21,()=>[{side:r(),value:t.ratioMin,active:U(p),onChange:t.onRatioMinChange},{side:i(),value:t.ratioMax,active:U(m),onChange:t.onRatioMaxChange}],e=>e.side,(e,n)=>{var r=td(),i=z(r),a=z(i,!0);F(i);var c=V(i,2),l=z(c),u=e=>{var t=$u();t.value=t.__value=``,K(e,t)};J(l,e=>{U(n).active===void 0&&e(u)}),Y(V(l),17,()=>t.ratioPresets,e=>e.value,(e,t)=>{var n=ed(),r=z(n,!0);F(n);var i={};H(e=>{q(r,U(t).label),i!==(i=e)&&(n.value=(n.__value=e)??``)},[()=>String(U(t).value)]),K(e,n)}),F(c);var d;Di(c);var p=V(c,2);zi(p),Q(p,`step`,.001),F(r),H(e=>{q(a,U(n).side),Q(c,`aria-label`,`${U(n).side} modular scale ratio preset`),d!==(d=e)&&(c.value=(c.__value=e)??``,Ei(c,e)),Q(p,`aria-label`,`${U(n).side} modular scale custom ratio`),Q(p,`min`,o()),Q(p,`max`,s()),Bi(p,U(n).value)},[()=>U(n).active===void 0?``:String(U(n).active)]),W(`change`,c,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),W(`change`,p,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),K(e,r)}),F(a),F(n),K(e,n)};J(ce,e=>{t.ratioPresets&&e(le)});var ue=V(ce,2),de=e=>{var n=rd(),r=z(n);F(n),W(`click`,r,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(ue,e=>{a()&&t.onReset&&e(de)}),F(h),H(e=>{X(h,1,`rounded-xl border p-3 ${a()?`bg-indigo-500/8 border-indigo-500/25`:`bg-white/4 border-white/8`}`,`svelte-iy59wr`),q(v,t.title),q(x,`${t.minValue??``}${n()??``}`),q(C,`${t.maxValue??``}${n()??``}`),Z(T,e),Q(E,`min`,t.min),Q(E,`max`,t.max),Q(E,`step`,t.step),Bi(E,t.minValue),Q(E,`aria-label`,`${t.title} min`),Q(D,`min`,t.min),Q(D,`max`,t.max),Q(D,`step`,t.step),Bi(D,t.maxValue),Q(D,`aria-label`,`${t.title} max`),Z(O,`left: calc(${U(u)}% - 6px)`),Z(k,`left: calc(${U(d)}% - 6px)`),q(A,r()),Q(j,`min`,t.min),Q(j,`max`,t.max),Q(j,`step`,t.step),Bi(j,t.minValue),q(ie,i()),Q(ae,`min`,t.min),Q(ae,`max`,t.max),Q(ae,`step`,t.step),Bi(ae,t.maxValue)},[()=>`left:${Math.min(U(u),U(d))}%; right:${100-Math.max(U(u),U(d))}%`]),W(`input`,E,e=>t.onMinChange(Math.min(l(parseFloat(e.target.value)),t.maxValue))),W(`input`,D,e=>t.onMaxChange(Math.max(l(parseFloat(e.target.value)),t.minValue))),W(`change`,j,e=>t.onMinChange(l(parseFloat(e.target.value)||t.min))),W(`change`,ae,e=>t.onMaxChange(l(parseFloat(e.target.value)||t.max))),K(e,h),We()}Br([`input`,`change`,`click`]);var od=G(``),sd=G(``),cd=G(``),ld=G(`
`),ud=G(`
Google Font
`,1),dd=G(``),fd=G(``),pd=G(``),md=G(``),hd=G(`
Tracking
`),gd=G(`
Max width
`),_d=G(``),vd=G(`
The quick brown fox
Size
Line height
Weight
`,1),yd=G(``),bd=G(`
`),xd=G(``),Sd=G(`
`),Cd=G(`
Emphasis style
External marker
`,1),wd=G(``),Td=G(`
`),Ed=G(`

Named weight tokens. Override if your font uses non-standard axis values.

`,1),Dd=G(`
`),Od=G(`
`,1),kd=G(`
`),Ad=G(`
`),jd=G(`

Utopia-style fluid scale. Each endpoint has three values — viewport width, - base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

Line height scale
Letter-spacing scale

Overriding these propagates to heading sizes that reference them.

`,1),Md=G(`
Aa
`),Nd=G(`
`),Pd=G(``),Fd=G(`
`),Id=G(`

Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

`,1),Ld=G(`

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

Numeric figures
Optical sizing
Font features
Variation
`,1),Rd=G(`
`);function zd(e,t){Ue(t,!0);let n=[{label:`Minor Second — 1.067`,value:1.067},{label:`Major Second — 1.125`,value:1.125},{label:`Minor Third — 1.200`,value:1.2},{label:`Major Third — 1.250`,value:1.25},{label:`Perfect Fourth — 1.333`,value:1.333},{label:`Aug. Fourth — 1.414`,value:1.414},{label:`Golden — 1.618`,value:1.618}],r=[{label:`System sans-serif`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Merriweather (serif)`,value:`'Merriweather', Georgia, serif`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`}],i=[{label:`Same as body`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Impact / condensed`,value:`Impact, 'Arial Narrow', sans-serif`}],a=[{label:`System mono`,value:`ui-monospace, monospace`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`},{label:`Source Code Pro`,value:`'Source Code Pro', 'Courier New', monospace`}],o=`Inter.Roboto.Open Sans.Lato.Montserrat.Poppins.Source Sans 3.Raleway.Nunito.Work Sans.Manrope.DM Sans.Outfit.Plus Jakarta Sans.Geist.Space Grotesk.Figtree.Merriweather.Playfair Display.Lora.Source Serif 4.Roboto Slab.IBM Plex Sans.IBM Plex Mono.JetBrains Mono.Fira Code.Space Mono`.split(`.`),s=[{label:`balance`,value:`balance`},{label:`pretty`,value:`pretty`},{label:`normal`,value:`normal`}],c=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],l={"--sf-font-weight-body":`400`,"--sf-font-weight-heading":`600`,"--sf-font-weight-display":`700`,"--sf-font-weight-interactive":`600`},u=[{label:`2xs`,factor:.64},{label:`xs`,factor:.75},{label:`s`,factor:.875},{label:`m`,factor:1},{label:`l`,factor:1.125},{label:`xl`,factor:1.25},{label:`2xl`,factor:1.5},{label:`3xl`,factor:1.875},{label:`4xl`,factor:2.25}],d=[{label:`Tight`,token:`--sf-tracking-tight`,default:-.025},{label:`Normal`,token:`--sf-tracking-normal`,default:0},{label:`Wide`,token:`--sf-tracking-wide`,default:.025},{label:`Wider`,token:`--sf-tracking-wider`,default:.05},{label:`Widest`,token:`--sf-tracking-widest`,default:.1}],f=[{label:`Tight`,token:`--sf-leading-tight`,default:1.1},{label:`Snug`,token:`--sf-leading-snug`,default:1.3},{label:`Normal`,token:`--sf-leading-normal`,default:1.5},{label:`Relaxed`,token:`--sf-leading-relaxed`,default:1.625}],p=[{label:`2xs`,value:`var(--sf-text-2xs)`,approx:.64},{label:`xs`,value:`var(--sf-text-xs)`,approx:.75},{label:`s`,value:`var(--sf-text-s)`,approx:.875},{label:`m`,value:`var(--sf-text-m)`,approx:1},{label:`l`,value:`var(--sf-text-l)`,approx:1.125},{label:`xl`,value:`var(--sf-text-xl)`,approx:1.25},{label:`2xl`,value:`var(--sf-text-2xl)`,approx:1.5},{label:`3xl`,value:`var(--sf-text-3xl)`,approx:1.875},{label:`4xl`,value:`var(--sf-text-4xl)`,approx:2.25},{label:`display-s`,value:`var(--sf-text-display-s)`,approx:2.6},{label:`display-m`,value:`var(--sf-text-display-m)`,approx:3.2},{label:`display-l`,value:`var(--sf-text-display-l)`,approx:3.8}],m=f.map(e=>({label:e.label,value:`var(${e.token})`,num:e.default})),g=d.map(e=>({label:e.label,value:`var(${e.token})`,em:e.default})),_=[{id:`body`,label:`Body`,size:`--sf-body-font-size`,lh:`--sf-body-line-height`,wt:`--sf-body-font-weight`,ls:null,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`400`,dLs:``},{id:`h1`,label:`H1`,size:`--sf-h1-size`,lh:`--sf-h1-line-height`,wt:`--sf-h1-font-weight`,ls:`--sf-h1-letter-spacing`,dSize:`var(--sf-text-4xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h2`,label:`H2`,size:`--sf-h2-size`,lh:`--sf-h2-line-height`,wt:`--sf-h2-font-weight`,ls:`--sf-h2-letter-spacing`,dSize:`var(--sf-text-3xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h3`,label:`H3`,size:`--sf-h3-size`,lh:`--sf-h3-line-height`,wt:`--sf-h3-font-weight`,ls:`--sf-h3-letter-spacing`,dSize:`var(--sf-text-2xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h4`,label:`H4`,size:`--sf-h4-size`,lh:`--sf-h4-line-height`,wt:`--sf-h4-font-weight`,ls:`--sf-h4-letter-spacing`,dSize:`var(--sf-text-xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h5`,label:`H5`,size:`--sf-h5-size`,lh:`--sf-h5-line-height`,wt:`--sf-h5-font-weight`,ls:`--sf-h5-letter-spacing`,dSize:`var(--sf-text-l)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h6`,label:`H6`,size:`--sf-h6-size`,lh:`--sf-h6-line-height`,wt:`--sf-h6-font-weight`,ls:`--sf-h6-letter-spacing`,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-wide)`}],v=L(`h1`),y=I(()=>_.find(e=>e.id===U(v))),b=jl.typography??[];function x(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let S=I(()=>x(`--sf-text-ratio-min`,1.25)),C=I(()=>x(`--sf-text-ratio-max`,1.333)),w=I(()=>x(`--sf-text-base-min`,1)),T=I(()=>x(`--sf-text-base-max`,1.25)),E=I(()=>x(`--sf-text-display-base-min`,2.4)),D=I(()=>x(`--sf-text-display-base-max`,3)),O=I(()=>x(`--sf-leading-taper`,0)),k=I(()=>x(`--sf-text-scale`,1)),ee=I(()=>x(`--sf-fluid-min-vw`,22.5)),te=I(()=>x(`--sf-fluid-max-vw`,90)),ne=L(!1),A=L(!1),j=L(!1),M=L(!1),re=L(!1),ie=L(!1),ae=L(!1),oe=L(!1),se=L(!1),N=L(!1),ce=I(()=>t.overrides[`--sf-font-body`]??``),le=I(()=>t.overrides[`--sf-font-heading`]??``),ue=I(()=>t.overrides[`--sf-font-mono`]??`ui-monospace, monospace`),de=L(``),fe=L(`body`);function pe(e){let n=t.overrides[e.token];return n?parseFloat(n.replace(`em`,``)):e.default}function me(e){return x(e.token,e.default)}function he(e){if(!e.trim())return;let t=`gf-${e.replace(/\s+/g,`-`)}`;if(!document.getElementById(t)){let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(n)}}function ge(e,n){if(!e.trim())return;he(e);let r=n===`body`?`--sf-font-body`:`--sf-font-heading`;t.onSet(r,`'${e}', sans-serif`)}function _e(e,n){return e?t.overrides[e]??n:n}function ve(e,n,r){e&&(n===r?t.onReset(e):t.onSet(e,n))}let ye=I(()=>{let e=_e(U(y).size,U(y).dSize),t=p.find(t=>t.value===e),n=(U(w)+U(T))/2;return Math.min((t?.approx??1)*n*U(k),2.4)}),be=I(()=>{let e=_e(U(y).wt,U(y).dWt),t=parseInt(e);return isNaN(t)?600:t}),xe=I(()=>{if(!U(y).ls)return 0;let e=_e(U(y).ls,U(y).dLs),t=g.find(t=>t.value===e);if(t)return t.em;let n=parseFloat(e.replace(`em`,``));return isNaN(n)?0:n}),Se=I(()=>{let e=_e(U(y).lh,U(y).dLh),t=m.find(t=>t.value===e);if(t)return t.num;let n=parseFloat(e);return isNaN(n)?1.3:n});var Ce=Rd(),we=z(Ce),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=ud(),s=B(n);Y(s,17,()=>[{label:`Body`,token:`--sf-font-body`,current:U(ce),opts:r},{label:`Heading`,token:`--sf-font-heading`,current:U(le),opts:i},{label:`Mono`,token:`--sf-font-mono`,current:U(ue),opts:a}],e=>e.token,(e,n)=>{var r=ld(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);Y(s,17,()=>U(n).opts,e=>e.label,(e,t)=>{var n=od(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var c=V(s),l=e=>{var t=sd(),r=z(t);F(t);var i={};H(e=>{q(r,`Custom: ${e??``}`),i!==(i=U(n).current)&&(t.value=(t.__value=U(n).current)??``)},[()=>U(n).current.split(`,`)[0].replace(/['"]/g,``)]),K(e,t)},u=I(()=>U(n).current&&!U(n).opts.some(e=>e.value===U(n).current));J(c,e=>{U(u)&&e(l)}),F(o);var d;Di(o);var f=V(o,2),p=e=>{var r=cd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(f,e=>{U(n).token in t.overrides&&e(p)}),F(r),H(()=>{q(a,U(n).label),Z(o,`font-family: ${U(n).current||`inherit`}`),d!==(d=U(n).current)&&(o.value=(o.__value=U(n).current)??``,Ei(o,U(n).current))}),W(`change`,o,e=>{let r=e.target.value;r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)});var c=V(s,2),l=V(z(c),2),u=z(l),d=z(u);d.value=d.__value=``,Y(V(d),16,()=>o,e=>e,(e,t)=>{var n=sd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(u);var f;Di(u);var p=V(u,2),m=z(p),h=V(m,2);F(p),F(l);var g=V(l,2);zi(g);var _=V(g,2),v=z(_);F(_),F(c),H(()=>{f!==(f=U(de))&&(u.value=(u.__value=U(de))??``,Ei(u,U(de))),X(m,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`body`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400`}`),X(h,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`heading`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400`}`),Bi(g,U(de)),q(v,`Load & apply to ${U(fe)??``}`)}),W(`change`,u,e=>{R(de,e.target.value,!0)}),W(`click`,m,()=>{R(fe,`body`)}),W(`click`,h,()=>{R(fe,`heading`)}),W(`input`,g,e=>{R(de,e.target.value,!0)}),W(`click`,_,()=>ge(U(de),U(fe))),K(e,n)};J(P,e=>{U(ne)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Me=z(je,!0);F(je),F(Ae);var Ne=V(Ae,2),Pe=e=>{var n=vd(),r=B(n);Y(r,21,()=>_,e=>e.id,(e,n)=>{let r=I(()=>U(n).size in t.overrides||U(n).lh in t.overrides||U(n).wt in t.overrides||!!U(n).ls&&U(n).ls in t.overrides);var i=fd(),a=z(i),o=V(a),s=e=>{K(e,dd())};J(o,e=>{U(r)&&e(s)}),F(i),H(()=>{X(i,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${U(v)===U(n).id?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(a,`${U(n).label??``} `)}),W(`click`,i,()=>{R(v,U(n).id,!0)}),K(e,i)}),F(r);var i=V(r,2),a=z(i);F(i);var o=V(i,2),s=V(z(o),2),l=z(s);Y(l,17,()=>p,e=>e.value,(e,t)=>{var n=sd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var u=V(l),d=e=>{var t=pd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).size,U(y).dSize)]),K(e,t)},f=I(()=>!p.some(e=>e.value===_e(U(y).size,U(y).dSize)));J(u,e=>{U(f)&&e(d)}),F(s);var h;Di(s),F(o);var b=V(o,2),x=V(z(b),2),S=z(x);Y(S,17,()=>m,e=>e.value,(e,t)=>{var n=sd(),r=z(n);F(n);var i={};H(()=>{q(r,`${U(t).label??``} · ${U(t).num??``}`),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var C=V(S),w=e=>{var t=pd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).lh,U(y).dLh)]),K(e,t)},T=I(()=>!m.some(e=>e.value===_e(U(y).lh,U(y).dLh)));J(C,e=>{U(T)&&e(w)}),F(x);var E;Di(x),F(b);var D=V(b,2),O=V(z(D),2);Y(O,20,()=>c,e=>e,(e,t)=>{let n=I(()=>_e(U(y).wt,U(y).dWt));var r=md(),i=z(r,!0);F(r),H(e=>{Z(r,e),X(r,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(i,t)},[()=>`font-weight:${parseInt(t)}`]),W(`click`,r,()=>ve(U(y).wt,t,U(y).dWt)),K(e,r)}),F(O),F(D);var k=V(D,2),ee=e=>{var t=hd(),n=V(z(t),2),r=z(n);Y(r,17,()=>g,e=>e.value,(e,t)=>{var n=sd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var i=V(r),a=e=>{var t=pd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).ls,U(y).dLs)]),K(e,t)},o=I(()=>!g.some(e=>e.value===_e(U(y).ls,U(y).dLs)));J(i,e=>{U(o)&&e(a)}),F(n);var s;Di(n),F(t),H(e=>{s!==(s=e)&&(n.value=(n.__value=e)??``,Ei(n,e))},[()=>_e(U(y).ls,U(y).dLs)]),W(`change`,n,e=>ve(U(y).ls,e.target.value,U(y).dLs)),K(e,t)};J(k,e=>{U(y).ls&&e(ee)});var te=V(k,2),ne=e=>{let n=I(()=>`--sf-${U(y).id}-max-width`);var r=gd(),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var r=cd();W(`click`,r,()=>t.onReset(U(n))),K(e,r)};J(a,e=>{U(n)in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[U(n)]??``)),W(`input`,i,e=>{let r=e.target.value.trim();r?t.onSet(U(n),r):t.onReset(U(n))}),K(e,r)};J(te,e=>{U(y).id!==`body`&&e(ne)});var A=V(te,2),j=z(A),M=e=>{var n=_d(),r=z(n);F(n),H(()=>q(r,`reset ${U(y).label??``}`)),W(`click`,n,()=>{let e={[U(y).size]:null,[U(y).lh]:null,[U(y).wt]:null};U(y).ls&&(e[U(y).ls]=null),t.onBulkChange(e)}),K(e,n)};J(j,e=>{(U(y).size in t.overrides||U(y).lh in t.overrides||U(y).wt in t.overrides||U(y).ls&&U(y).ls in t.overrides)&&e(M)}),F(A),H((e,t)=>{Z(a,`font-size:${U(ye)}rem; font-weight:${U(be)}; letter-spacing:${U(xe)}em; line-height:${U(Se)}; font-family:${U(y).id===`body`?U(ce)||`inherit`:U(le)||U(ce)||`inherit`}`),h!==(h=e)&&(s.value=(s.__value=e)??``,Ei(s,e)),E!==(E=t)&&(x.value=(x.__value=t)??``,Ei(x,t))},[()=>_e(U(y).size,U(y).dSize),()=>_e(U(y).lh,U(y).dLh)]),W(`change`,s,e=>ve(U(y).size,e.target.value,U(y).dSize)),W(`change`,x,e=>ve(U(y).lh,e.target.value,U(y).dLh)),K(e,n)};J(Ne,e=>{U(A)&&e(Pe)}),F(ke);var Fe=V(ke,4),Ie=z(Fe),Le=V(z(Ie),2),Re=z(Le,!0);F(Le),F(Ie);var ze=V(Ie,2),Be=e=>{var n=Cd(),r=B(n);Y(r,16,()=>[{label:`Body strong`,tokenName:`--sf-font-weight-strong`},{label:`Interactive`,tokenName:`--sf-font-weight-interactive`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`600`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=bd(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=yd();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)});var i=V(r,2),a=V(z(i),2);Y(a,20,()=>[[`Italic`,`italic`],[`Normal`,`normal`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-body-em-style`]??`italic`);var s=xd(),c=z(s),l=z(c,!0);F(c),F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),Z(c,`font-style: ${a()}`),q(l,i())}),W(`click`,s,()=>a()===`italic`?t.onReset(`--sf-body-em-style`):t.onSet(`--sf-body-em-style`,a())),K(e,s)}),F(a),F(i);var o=V(i,2);{let e=I(()=>x(`--sf-code-font-size`,.875)),n=I(()=>`--sf-code-font-size`in t.overrides);$(o,{label:`Code font size`,get value(){return U(e)},min:.7,max:1.1,step:.005,unit:`em`,help:`--sf-code-font-size — size of inline code relative to surrounding text`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-code-font-size`,`${e}em`),onReset:()=>t.onReset(`--sf-code-font-size`)})}var u=V(o,2);Y(u,16,()=>[{label:`Heading wrap`,token:`--sf-heading-text-wrap`,defaultVal:`balance`},{label:`Body wrap`,token:`--sf-body-text-wrap`,defaultVal:`pretty`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??n.defaultVal);var i=Sd(),a=z(i),o=z(a,!0);F(a);var c=V(a,2);Y(c,21,()=>s,e=>e.value,(e,i)=>{var a=md(),o=z(a,!0);F(a),H(()=>{X(a,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===U(i).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(o,U(i).label)}),W(`click`,a,()=>U(i).value===n.defaultVal&&!(n.token in t.overrides)?void 0:U(i).value===n.defaultVal?t.onReset(n.token):t.onSet(n.token,U(i).value)),K(e,a)}),F(c),F(i),H(()=>q(o,n.label)),K(e,i)});var d=V(u,2),f=V(z(d),2);zi(f),Q(f,`placeholder`,`" ↗"`);var p=V(f,2),m=e=>{var n=cd();W(`click`,n,()=>t.onReset(`--sf-link-external-marker`)),K(e,n)};J(p,e=>{`--sf-link-external-marker`in t.overrides&&e(m)}),F(d),H(()=>Bi(f,t.overrides[`--sf-link-external-marker`]??``)),W(`input`,f,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-marker`,n):t.onReset(`--sf-link-external-marker`)}),K(e,n)};J(ze,e=>{U(j)&&e(Be)}),F(Fe);var Ve=V(Fe,4),He=z(Ve),Ge=V(z(He),2),Ke=z(Ge,!0);F(Ge),F(He);var qe=V(He,2),Je=e=>{var n=Ed();Y(V(B(n),2),16,()=>[{label:`Light`,token:`--sf-font-weight-light`,def:300},{label:`Normal`,token:`--sf-font-weight-normal`,def:400},{label:`Medium`,token:`--sf-font-weight-medium`,def:500},{label:`Semibold`,token:`--sf-font-weight-semibold`,def:600},{label:`Bold`,token:`--sf-font-weight-bold`,def:700}],e=>e.token,(e,n)=>{var r=Td(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),l=e=>{var r=wd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(l)}),F(i);var u=V(i,2);Y(u,20,()=>c,e=>e,(e,r)=>{let i=I(()=>t.overrides[n.token]??String(n.def));var a=md(),o=z(a,!0);F(a),H(e=>{Z(a,e),X(a,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===r?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(o,r)},[()=>`font-weight:${parseInt(r)}`]),W(`click`,a,()=>r===String(n.def)&&!(n.token in t.overrides)?void 0:r===String(n.def)?t.onReset(n.token):t.onSet(n.token,r)),K(e,a)}),F(u),F(r),H(()=>q(o,n.label)),K(e,r)}),K(e,n)};J(qe,e=>{U(N)&&e(Je)}),F(Ve);var Ye=V(Ve,4),Xe=z(Ye),Ze=V(z(Xe),2),Qe=z(Ze,!0);F(Ze),F(Xe);var $e=V(Xe,2),et=e=>{var n=Od(),r=B(n);{let e=I(()=>`--sf-text-display-base-min`in t.overrides||`--sf-text-display-base-max`in t.overrides);ad(r,{title:`Display base size`,get minValue(){return U(E)},get maxValue(){return U(D)},min:1.5,max:6,step:.05,unit:`rem`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-display-base-min`),t.onReset(`--sf-text-display-base-max`)},onMinChange:e=>t.onSet(`--sf-text-display-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-display-base-max`,String(e))})}var i=V(r,2);Y(i,20,()=>[{label:`Display L line-height`,token:`--sf-display-l-line-height`,def:1},{label:`Display M line-height`,token:`--sf-display-m-line-height`,def:1.05}],e=>e.token,(e,n)=>{var r=Dd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>x(n.token,n.def)),r=I(()=>n.token in t.overrides);$(o,{label:``,get value(){return U(e)},min:.8,max:1.5,step:.025,get overridden(){return U(r)},onChange:e=>t.onSet(n.token,String(e)),onReset:()=>t.onReset(n.token)})}F(r),H(()=>q(a,n.label)),K(e,r)}),F(i),Y(V(i,2),16,()=>[{label:`Display`,tokenName:`--sf-font-weight-display`},{label:`Heading`,tokenName:`--sf-font-weight-heading`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`700`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=bd(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=yd();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=md(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)}),K(e,n)};J($e,e=>{U(M)&&e(et)}),F(Ye);var tt=V(Ye,4),nt=z(tt),rt=V(z(nt),2),it=z(rt,!0);F(rt),F(nt);var at=V(nt,2),ot=e=>{var r=jd(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);ad(i,{title:`Viewport range`,get minValue(){return U(ee)},get maxValue(){return U(te)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-text-base-min`in t.overrides||`--sf-text-base-max`in t.overrides);ad(a,{title:`Base size & ratio`,get minValue(){return U(w)},get maxValue(){return U(T)},min:.7,max:2,step:.01,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-base-min`),t.onReset(`--sf-text-base-max`)},onMinChange:e=>t.onSet(`--sf-text-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(S)},get ratioMax(){return U(C)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-text-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-text-ratio-max`,String(e))})}var o=V(a,2),s=V(z(o),2);Y(s,21,()=>f,e=>e.token,(e,n)=>{{let r=I(()=>me(U(n))),i=I(()=>`${U(n).token} — ${U(n).label.toLowerCase()} line height`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:2.2,step:.05,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(s),F(o);var c=V(o,2);{let e=I(()=>`--sf-leading-taper`in t.overrides);$(c,{label:`Leading taper`,get value(){return U(O)},min:0,max:.5,step:.01,help:`How aggressively large display sizes shrink their line-height.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-leading-taper`,String(e)),onReset:()=>t.onReset(`--sf-leading-taper`)})}var l=V(c,2),u=V(z(l),4);Y(u,21,()=>d,e=>e.token,(e,n)=>{var r=kd(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=wd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(i);var l=V(i,2);{let e=I(()=>pe(U(n)));zl(l,{get value(){return U(e)},min:-.1,max:.2,step:.005,unit:`em`,onChange:e=>t.onSet(U(n).token,`${e}em`)})}F(r),H(()=>q(o,U(n).label)),K(e,r)}),F(u),F(l);var p=V(l,2),m=z(p),h=V(z(m),2),g=z(h,!0);F(h),F(m);var _=V(m,2),v=e=>{var n=Ad();Y(n,21,()=>b,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(_,e=>{U(ie)&&e(v)}),F(p),H(()=>{Q(m,`aria-expanded`,U(ie)),q(g,U(ie)?`▲`:`▼`)}),W(`click`,m,()=>{R(ie,!U(ie))}),K(e,r)};J(at,e=>{U(re)&&e(ot)}),F(tt);var st=V(tt,4),ct=z(st),lt=V(z(ct),2),ut=z(lt,!0);F(lt),F(ct);var dt=V(ct,2),ft=e=>{var t=Nd();Y(t,21,()=>[...u].reverse(),({label:e,factor:t})=>e,(e,t)=>{let n=()=>U(t).label,r=()=>U(t).factor,i=I(()=>(U(w)+U(T))/2),a=I(()=>U(i)*r()*U(k));var o=Md(),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=V(l,2),d=z(u);F(u),F(o),H((e,t)=>{q(c,n()),Z(l,e),q(d,`${t??``}rem`)},[()=>`font-size: ${Math.min(U(a),2.5)}rem; font-family: ${U(ce)||`inherit`}`,()=>U(a).toFixed(2)]),K(e,o)}),F(t),K(e,t)};J(dt,e=>{U(ae)&&e(ft)}),F(st);var pt=V(st,4),mt=z(pt),ht=V(z(mt),2),gt=z(ht,!0);F(ht),F(mt);var _t=V(mt,2),vt=e=>{var n=Id(),r=V(B(n),2);Y(r,20,()=>[{label:`2xs`,token:`--sf-text-2xs-max-width`,def:`55ch`},{label:`xs`,token:`--sf-text-xs-max-width`,def:`60ch`},{label:`s`,token:`--sf-text-s-max-width`,def:`65ch`},{label:`m`,token:`--sf-text-m-max-width`,def:`65ch`},{label:`l`,token:`--sf-text-l-max-width`,def:`none`},{label:`xl`,token:`--sf-text-xl-max-width`,def:`none`},{label:`2xl`,token:`--sf-text-2xl-max-width`,def:`none`},{label:`3xl`,token:`--sf-text-3xl-max-width`,def:`none`},{label:`4xl`,token:`--sf-text-4xl-max-width`,def:`none`}],e=>e.token,(e,n)=>{var r=Fd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Pd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(_t,e=>{U(se)&&e(vt)}),F(pt);var yt=V(pt,4),bt=z(yt),xt=V(z(bt),2),St=z(xt,!0);F(xt),F(bt);var Ct=V(bt,2),wt=e=>{var n=Ld(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[[`tabular-nums`,`tabular-nums (default)`],[`proportional-nums`,`proportional-nums`],[`normal`,`normal`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-font-numeric`]??`tabular-nums`);var s=md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`tabular-nums`?t.onReset(`--sf-font-numeric`):t.onSet(`--sf-font-numeric`,i())),K(e,s)}),F(i),F(r);var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[[`auto`,`auto (default)`],[`none`,`none`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-optical-sizing`]??`auto`);var s=md(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`auto`?t.onReset(`--sf-optical-sizing`):t.onSet(`--sf-optical-sizing`,i())),K(e,s)}),F(o),F(a);var s=V(a,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Pd();W(`click`,n,()=>t.onReset(`--sf-font-features`)),K(e,n)};J(l,e=>{`--sf-font-features`in t.overrides&&e(u)}),F(s);var d=V(s,2),f=V(z(d),2);zi(f);var p=V(f,2),m=e=>{var n=Pd();W(`click`,n,()=>t.onReset(`--sf-font-variation`)),K(e,n)};J(p,e=>{`--sf-font-variation`in t.overrides&&e(m)}),F(d),H(()=>{Bi(c,t.overrides[`--sf-font-features`]??``),Bi(f,t.overrides[`--sf-font-variation`]??``)}),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-features`,n):t.onReset(`--sf-font-features`)}),W(`input`,f,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-variation`,n):t.onReset(`--sf-font-variation`)}),K(e,n)};J(Ct,e=>{U(oe)&&e(wt)}),F(yt),F(Ce),H(()=>{Q(Te,`aria-expanded`,U(ne)),q(De,U(ne)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(A)),q(Me,U(A)?`▲`:`▼`),Q(Ie,`aria-expanded`,U(j)),q(Re,U(j)?`▲`:`▼`),Q(He,`aria-expanded`,U(N)),q(Ke,U(N)?`▲`:`▼`),Q(Xe,`aria-expanded`,U(M)),q(Qe,U(M)?`▲`:`▼`),Q(nt,`aria-expanded`,U(re)),q(it,U(re)?`▲`:`▼`),Q(ct,`aria-expanded`,U(ae)),q(ut,U(ae)?`▲`:`▼`),Q(mt,`aria-expanded`,U(se)),q(gt,U(se)?`▲`:`▼`),Q(bt,`aria-expanded`,U(oe)),q(St,U(oe)?`▲`:`▼`)}),W(`click`,Te,()=>{R(ne,!U(ne))}),W(`click`,Ae,()=>{R(A,!U(A))}),W(`click`,Ie,()=>{R(j,!U(j))}),W(`click`,He,()=>{R(N,!U(N))}),W(`click`,Xe,()=>{R(M,!U(M))}),W(`click`,nt,()=>{R(re,!U(re))}),W(`click`,ct,()=>{R(ae,!U(ae))}),W(`click`,mt,()=>{R(se,!U(se))}),W(`click`,bt,()=>{R(oe,!U(oe))}),K(e,Ce),We()}Br([`click`,`change`,`input`]);var Bd=G(`
`),Vd=G(`

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

`,1),Hd=G(`

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. - The viewport range is shared with the type scale.

`,1),Ud=G(`
`),Wd=G(`
Space scale preview
`);function Gd(e,t){Ue(t,!0);let n=[{label:`Minor Third — 1.200`,value:1.2},{label:`Major Third — 1.250`,value:1.25},{label:`Perfect Fourth — 1.333`,value:1.333},{label:`Aug. Fourth — 1.414`,value:1.414},{label:`Golden — 1.618`,value:1.618}],r=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],i=jl.spacing??[];function a(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let o=I(()=>a(`--sf-space-ratio-min`,1.25)),s=I(()=>a(`--sf-space-ratio-max`,1.333)),c=I(()=>a(`--sf-space-base-min`,1)),l=I(()=>a(`--sf-space-base-max`,2)),u=I(()=>a(`--sf-space-scale`,1)),d=I(()=>a(`--sf-gap`,1)),f=I(()=>a(`--sf-gutter`,1.5)),p=I(()=>a(`--sf-content-gap`,.5)),m=I(()=>a(`--sf-fluid-min-vw`,22.5)),h=I(()=>a(`--sf-fluid-max-vw`,90)),g=L(!1),_=L(!1),v=L(!1);var y=Wd(),b=z(y),x=V(z(b),2);Y(x,22,()=>r,e=>e,(e,t,n)=>{let r=I(()=>(U(c)+U(l))/2),i=I(()=>(U(o)+U(s))/2),a=I(()=>U(n)-3),d=I(()=>U(a)>=0?U(r)*U(i)**+U(a):U(r)/U(i)**+-U(a)),f=I(()=>U(d)*U(u)),p=I(()=>Math.min(U(f)*28,240));var m=Bd(),h=z(m),g=z(h,!0);F(h);var _=V(h,2),v=V(_,2),y=z(v);F(v),F(m),H(e=>{q(g,t),Z(_,`width: ${U(p)}px; min-width: 3px`),q(y,`${e??``}rem`)},[()=>U(f).toFixed(2)]),K(e,m)}),F(x),F(b);var S=V(b,4),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=Vd(),r=V(B(n),2);{let e=I(()=>`--sf-gap`in t.overrides);$(r,{label:`Gap`,get value(){return U(d)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-gap`]},onRawSet:e=>t.onSet(`--sf-gap`,e)})}var i=V(r,2);{let e=I(()=>`--sf-content-gap`in t.overrides);$(i,{label:`Content gap`,get value(){return U(p)},min:0,max:2,step:.0625,unit:`rem`,help:`--sf-content-gap — tighter gap within components (defaults to space-s)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-gap`),rawDefault:`var(--sf-space-s)`,get currentRaw(){return t.overrides[`--sf-content-gap`]},onRawSet:e=>t.onSet(`--sf-content-gap`,e)})}var a=V(i,2);{let e=I(()=>`--sf-gutter`in t.overrides);$(a,{label:`Gutter`,get value(){return U(f)},min:0,max:6,step:.0625,unit:`rem`,help:`--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-gutter`),rawDefault:`var(--sf-space-l)`,get currentRaw(){return t.overrides[`--sf-gutter`]},onRawSet:e=>t.onSet(`--sf-gutter`,e)})}K(e,n)};J(E,e=>{U(g)&&e(D)}),F(S);var O=V(S,4),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var r=Hd(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);ad(i,{title:`Viewport range`,get minValue(){return U(m)},get maxValue(){return U(h)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-space-base-min`in t.overrides||`--sf-space-base-max`in t.overrides);ad(a,{title:`Base unit & ratio`,get minValue(){return U(c)},get maxValue(){return U(l)},min:.5,max:4,step:.05,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`space`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-space-base-min`),t.onReset(`--sf-space-base-max`)},onMinChange:e=>t.onSet(`--sf-space-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-space-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(o)},get ratioMax(){return U(s)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-space-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-space-ratio-max`,String(e))})}K(e,r)};J(ne,e=>{U(_)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Ud();Y(n,21,()=>i,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ae,e=>{U(v)&&e(oe)}),F(j),F(y),H(()=>{Q(C,`aria-expanded`,U(g)),q(T,U(g)?`▲`:`▼`),Q(k,`aria-expanded`,U(_)),q(te,U(_)?`▲`:`▼`),Q(M,`aria-expanded`,U(v)),q(ie,U(v)?`▲`:`▼`)}),W(`click`,C,()=>{R(g,!U(g))}),W(`click`,k,()=>{R(_,!U(_))}),W(`click`,M,()=>{R(v,!U(v))}),K(e,y),We()}Br([`click`]);var Kd=G(`
`),qd=G(`
Narrow
Prose
Default
Wide
`,1),Jd=G(` `,1),Yd=G(`
col
`),Xd=G(`
Named sizes (grid-min-xs → 2xl)
Preview at 360px panel width
`,1),Zd=G(`
`),Qd=G(`
Mobile
Desktop
`,1),$d=G(`

Offsets position:sticky elements below a fixed header. Defaults to header heights.

Mobile
Desktop
`,1),ef=G(`
`,1),tf=G(`
`),nf=G(``),rf=G(``),af=G(`
`),of=G(``),sf=G(`
Switcher
Sidebar content
Cluster
Equal grid
Named column counts (equal-min-col-2/3/4/6)
Cover
Frame ratio

--sf-frame-ratio — aspect ratio for .sf-frame

Reel

--sf-reel-item-width — width of each item in a horizontal .sf-reel

Height
Imposter
Content grid (breakout)
Alternate (zigzag)
`),cf=G(`
`),lf=G(`

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

`),uf=G(`

Default values for the .sf-bg full-bleed background utility.

`),df=G(`
`);function ff(e,t){Ue(t,!0);function n(e,t){if(!e)return t;let n=parseFloat(e);return isNaN(n)?t:n}let r=I(()=>n(t.overrides[`--sf-container-narrow`],38)),i=I(()=>n(t.overrides[`--sf-container-prose`],65)),a=I(()=>n(t.overrides[`--sf-container-default`],75)),o=I(()=>n(t.overrides[`--sf-container-wide`],90)),s=I(()=>n(t.overrides[`--sf-center-max`],75)),c=I(()=>n(t.overrides[`--sf-center-gutter`],1)),l=I(()=>n(t.overrides[`--sf-grid-min`],16)),u=I(()=>n(t.overrides[`--sf-header-height-mobile`],3.5)),d=I(()=>n(t.overrides[`--sf-header-height-desktop`],5)),f=I(()=>n(t.overrides[`--sf-sidebar-width`],18)),p=I(()=>n(t.overrides[`--sf-sticky-offset-mobile`],3.5)),m=I(()=>n(t.overrides[`--sf-sticky-offset-desktop`],5)),h=[{label:`Columns`,token:`--sf-bento-cols-default`,min:1,max:12,step:1,unit:``,default:4},{label:`Row default`,token:`--sf-bento-row-default`,min:4,max:24,step:.5,unit:`rem`,default:10},{label:`Row compact`,token:`--sf-bento-row-compact`,min:2,max:16,step:.5,unit:`rem`,default:6},{label:`Row tall`,token:`--sf-bento-row-tall`,min:8,max:32,step:.5,unit:`rem`,default:16}],g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){let n=t.overrides[e.token];return n?parseFloat(n):e.default}let D=I(()=>n(t.overrides[`--sf-switcher-threshold`],30)),O=I(()=>n(t.overrides[`--sf-sidebar-min-width`],50)),k=I(()=>n(t.overrides[`--sf-equal-min-col`],16)),ee=I(()=>n(t.overrides[`--sf-cover-min-height`],100)),te=I(()=>n(t.overrides[`--sf-imposter-margin`],1)),ne=I(()=>n(t.overrides[`--sf-breakout-width`],90)),A=I(()=>n(t.overrides[`--sf-content-width`],75)),j=I(()=>n(t.overrides[`--sf-alternate-inner-gap`],1)),M=I(()=>t.overrides[`--sf-frame-ratio`]??`16 / 9`),re=I(()=>t.overrides[`--sf-reel-item-width`]??`max-content`),ie=[`16 / 9`,`4 / 3`,`3 / 2`,`1 / 1`,`21 / 9`],ae=[{label:`auto`,value:`max-content`},{label:`12rem`,value:`12rem`},{label:`16rem`,value:`16rem`},{label:`20rem`,value:`20rem`}];var oe=df(),se=z(oe),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=qd(),s=B(n),c=z(s),l=V(z(c),2);{let e=I(()=>`--sf-container-narrow`in t.overrides);$(l,{label:``,get value(){return U(r)},min:20,max:60,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-narrow`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-narrow`)})}F(c);var u=V(c,2),d=V(z(u),2);{let e=I(()=>`--sf-container-prose`in t.overrides);$(d,{label:``,get value(){return U(i)},min:40,max:90,step:1,unit:`ch`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-prose`,`${e}ch`),onReset:()=>t.onReset(`--sf-container-prose`)})}F(u);var f=V(u,2),p=V(z(f),2);{let e=I(()=>`--sf-container-default`in t.overrides);$(p,{label:``,get value(){return U(a)},min:50,max:120,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-default`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-default`)})}F(f);var m=V(f,2),h=V(z(m),2);{let e=I(()=>`--sf-container-wide`in t.overrides);$(h,{label:``,get value(){return U(o)},min:60,max:160,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-wide`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-wide`)})}F(m),F(s);var g=V(s,2);Y(g,21,()=>[{label:`narrow`,value:U(r),max:U(o),unit:`rem`},{label:`prose`,value:U(i),max:U(o)*1.5,unit:`ch`},{label:`default`,value:U(a),max:U(o),unit:`rem`},{label:`wide`,value:U(o),max:U(o),unit:`rem`}],e=>e.label,(e,t)=>{var n=Kd(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=z(a);F(a);var s=V(a,2),c=z(s);F(s),F(n),H(e=>{q(i,U(t).label),Z(o,e),q(c,`${U(t).value??``}${U(t).unit??``}`)},[()=>`width: ${Math.min(U(t).value/U(t).max*100,100)}%`]),K(e,n)}),F(g),K(e,n)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Jd(),r=B(n);{let e=I(()=>`--sf-center-max`in t.overrides);$(r,{label:`Max width`,get value(){return U(s)},min:30,max:160,step:1,unit:`rem`,help:`--sf-center-max — max-width of the .sf-center centering wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-max`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-max`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-center-max`]},onRawSet:e=>t.onSet(`--sf-center-max`,e)})}var i=V(r,2);{let e=I(()=>`--sf-center-gutter`in t.overrides);$(i,{label:`Gutter`,get value(){return U(c)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-center-gutter — minimum side padding inside the center wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-gutter`),rawDefault:`var(--sf-gutter)`,get currentRaw(){return t.overrides[`--sf-center-gutter`]},onRawSet:e=>t.onSet(`--sf-center-gutter`,e)})}K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var r=Xd(),i=B(r);{let e=I(()=>`--sf-grid-min`in t.overrides);$(i,{label:`Grid min cell width`,get value(){return U(l)},min:8,max:40,step:.5,unit:`rem`,help:`sf-grid minimum column width — browser auto-fills columns`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-grid-min`,`${e}rem`),onReset:()=>t.onReset(`--sf-grid-min`)})}var a=V(i,2),o=V(z(a),2);Y(o,20,()=>[{label:`xs`,token:`--sf-grid-min-xs`,def:10},{label:`s`,token:`--sf-grid-min-s`,def:13},{label:`m`,token:`--sf-grid-min-m`,def:16},{label:`l`,token:`--sf-grid-min-l`,def:20},{label:`xl`,token:`--sf-grid-min-xl`,def:24},{label:`2xl`,token:`--sf-grid-min-2xl`,def:28}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:6,max:40,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Y(c,20,()=>Array.from({length:8}),ii,(e,t)=>{K(e,Yd())}),F(c),F(s),H(e=>Z(c,e),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(U(l)*16*(360/1200),120)}px, 1fr))`]),K(e,r)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Qd(),r=B(n),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-header-height-mobile`in t.overrides);$(a,{label:``,get value(){return U(u)},min:2,max:8,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-mobile`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-header-height-desktop`in t.overrides);$(s,{label:``,get value(){return U(d)},min:3,max:10,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-desktop`)})}F(o),F(r);var c=V(r,2),l=z(c),f=V(z(l),2);Y(f,20,()=>[1,2,3],e=>e,(e,t)=>{K(e,Zd())}),F(f),F(l);var p=V(l,2),m=z(p);F(p),F(c),H(e=>{Z(l,e),q(m,`${U(u)??``}rem mobile · ${U(d)??``}rem desktop`)},[()=>`height: ${Math.min(U(u)*12,64)}px`]),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=$d(),r=V(B(n),2),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-sticky-offset-mobile`in t.overrides);$(a,{label:``,get value(){return U(p)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-mobile`),rawDefault:`var(--sf-header-height-mobile)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-mobile`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-mobile`,e)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sticky-offset-desktop`in t.overrides);$(s,{label:``,get value(){return U(m)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-desktop`),rawDefault:`var(--sf-header-height-desktop)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-desktop`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-desktop`,e)})}F(o),F(r),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=ef(),r=B(n);{let e=I(()=>`--sf-sidebar-width`in t.overrides);$(r,{label:`Sidebar width`,get value(){return U(f)},min:10,max:32,step:.5,unit:`rem`,help:`--sf-sidebar-width — default sidebar / drawer width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-sidebar-width`)})}var i=V(r,2),a=z(i),o=z(a),s=z(o);F(o),F(a),Me(2),F(i),H(e=>{Z(a,e),q(s,`${U(f)??``}rem`)},[()=>`width: ${Math.min(U(f)*3.5,100)}px`]),K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=tf();Y(n,21,()=>h,e=>e.token,(e,n)=>{{let r=I(()=>E(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,U(n).unit?`${e}${U(n).unit}`:String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(n),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var r=sf(),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-switcher-threshold`in t.overrides);$(a,{label:`Threshold`,get value(){return U(D)},min:10,max:60,step:1,unit:`rem`,help:`--sf-switcher-threshold — width below which .sf-switcher stacks vertically`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-switcher-threshold`,`${e}rem`),onReset:()=>t.onReset(`--sf-switcher-threshold`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sidebar-min-width`in t.overrides);$(s,{label:`Content min width`,get value(){return U(O)},min:20,max:80,step:1,unit:`%`,help:`--sf-sidebar-min-width — minimum width of the .sf-sidebar content column before it wraps`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-min-width`,`${e}%`),onReset:()=>t.onReset(`--sf-sidebar-min-width`)})}F(o);var c=V(o,2);Y(V(z(c),2),16,()=>[{label:`Align`,token:`--sf-cluster-align`,def:`center`,opts:[`flex-start`,`center`,`flex-end`,`stretch`,`baseline`]},{label:`Justify`,token:`--sf-cluster-justify`,def:`flex-start`,opts:[`flex-start`,`center`,`flex-end`,`space-between`,`space-around`]}],e=>e.token,(e,n)=>{var r=af(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=nf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Di(o);var c=V(o,2),l=e=>{var r=rf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.def)&&(o.value=(o.__value=t.overrides[n.token]??n.def)??``,Ei(o,t.overrides[n.token]??n.def))}),W(`change`,o,e=>{let r=e.target.value;r===n.def?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)}),F(c);var l=V(c,2),u=V(z(l),2);{let e=I(()=>`--sf-equal-min-col`in t.overrides);$(u,{label:`Min column`,get value(){return U(k)},min:6,max:36,step:.5,unit:`rem`,help:`--sf-equal-min-col — minimum column width for .sf-equal`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-min-col`,`${e}rem`),onReset:()=>t.onReset(`--sf-equal-min-col`)})}var d=V(u,2),f=V(z(d),2);Y(f,20,()=>[{label:`2-col`,token:`--sf-equal-min-col-2`,def:28},{label:`3-col`,token:`--sf-equal-min-col-3`,def:15},{label:`4-col`,token:`--sf-equal-min-col-4`,def:16},{label:`6-col`,token:`--sf-equal-min-col-6`,def:10}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:4,max:36,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(f),F(d),F(l);var p=V(l,2),m=V(z(p),2);{let e=I(()=>`--sf-cover-min-height`in t.overrides);$(m,{label:`Min height`,get value(){return U(ee)},min:20,max:100,step:1,unit:`dvh`,help:`--sf-cover-min-height — minimum height of the .sf-cover layout`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-cover-min-height`,`${e}dvh`),onReset:()=>t.onReset(`--sf-cover-min-height`)})}F(p);var h=V(p,2),g=V(z(h),4);Y(g,20,()=>ie,e=>e,(e,n)=>{var r=of(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,n)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${U(M).replace(/\s/g,``)===n.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`]),W(`click`,r,()=>n===`16 / 9`?t.onReset(`--sf-frame-ratio`):t.onSet(`--sf-frame-ratio`,n)),K(e,r)}),F(g),F(h);var _=V(h,2),v=V(z(_),4);Y(v,21,()=>ae,e=>e.value,(e,n)=>{var r=of(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${U(re)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`max-content`?t.onReset(`--sf-reel-item-width`):t.onSet(`--sf-reel-item-width`,U(n).value)),K(e,r)}),F(v);var y=V(v,2),b=V(z(y),2);zi(b);var x=V(b,2),S=e=>{var n=rf();W(`click`,n,()=>t.onReset(`--sf-reel-height`)),K(e,n)};J(x,e=>{`--sf-reel-height`in t.overrides&&e(S)}),F(y),F(_);var C=V(_,2),w=V(z(C),2);{let e=I(()=>`--sf-imposter-margin`in t.overrides);$(w,{label:`Margin`,get value(){return U(te)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-imposter-margin`,`${e}rem`),onReset:()=>t.onReset(`--sf-imposter-margin`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-imposter-margin`]},onRawSet:e=>t.onSet(`--sf-imposter-margin`,e)})}F(C);var T=V(C,2),E=V(z(T),2);{let e=I(()=>`--sf-content-width`in t.overrides);$(E,{label:`Content width`,get value(){return U(A)},min:40,max:120,step:1,unit:`rem`,help:`--sf-content-width — default reading column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-width`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-content-width`]},onRawSet:e=>t.onSet(`--sf-content-width`,e)})}var oe=V(E,2);{let e=I(()=>`--sf-breakout-width`in t.overrides);$(oe,{label:`Breakout width`,get value(){return U(ne)},min:50,max:160,step:1,unit:`rem`,help:`--sf-breakout-width — wide breakout column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-breakout-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-breakout-width`),rawDefault:`var(--sf-container-wide)`,get currentRaw(){return t.overrides[`--sf-breakout-width`]},onRawSet:e=>t.onSet(`--sf-breakout-width`,e)})}F(T);var se=V(T,2),N=V(z(se),2);{let e=I(()=>`--sf-alternate-inner-gap`in t.overrides);$(N,{label:`Inner gap`,get value(){return U(j)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-alternate-inner-gap — gap between media and text within an .sf-alternate row`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-alternate-inner-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-alternate-inner-gap`),rawDefault:`var(--sf-gap)`,get currentRaw(){return t.overrides[`--sf-alternate-inner-gap`]},onRawSet:e=>t.onSet(`--sf-alternate-inner-gap`,e)})}F(se),F(r),H(()=>Bi(b,t.overrides[`--sf-reel-height`]??``)),W(`input`,b,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-reel-height`,n):t.onReset(`--sf-reel-height`)}),K(e,r)};J(et,e=>{U(C)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=lf();Y(V(z(n),2),16,()=>[{label:`Square`,token:`--sf-ratio-square`,def:`1`},{label:`Portrait`,token:`--sf-ratio-portrait`,def:`3 / 4`},{label:`3:2`,token:`--sf-ratio-3-2`,def:`3 / 2`},{label:`4:3`,token:`--sf-ratio-4-3`,def:`4 / 3`},{label:`Video`,token:`--sf-ratio-video`,def:`16 / 9`},{label:`Cinema`,token:`--sf-ratio-cinema`,def:`21 / 9`},{label:`Golden`,token:`--sf-ratio-golden`,def:`1.618 / 1`}],e=>e.token,(e,n)=>{var r=cf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=rf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(n),K(e,n)};J(ot,e=>{U(T)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var r=uf(),i=V(z(r),2);Y(i,16,()=>[{label:`Fit`,token:`--sf-bg-fit`,placeholder:`cover`,opts:[`cover`,`contain`,`fill`,`none`,`scale-down`]},{label:`Position`,token:`--sf-bg-position`,placeholder:`50% 50%`,opts:[`50% 50%`,`top`,`bottom`,`left`,`right`,`center`]}],e=>e.token,(e,n)=>{var r=af(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=nf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Di(o);var c=V(o,2),l=e=>{var r=rf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.placeholder)&&(o.value=(o.__value=t.overrides[n.token]??n.placeholder)??``,Ei(o,t.overrides[n.token]??n.placeholder))}),W(`change`,o,e=>{let r=e.target.value;r===n.placeholder?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)});var a=V(i,2);{let e=I(()=>n(t.overrides[`--sf-bg-inset`],0)),r=I(()=>`--sf-bg-inset`in t.overrides);$(a,{label:`Inset`,get value(){return U(e)},min:0,max:4,step:.25,unit:`rem`,help:`--sf-bg-inset — inset the background from the container edges`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-inset`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-inset`)})}var o=V(a,2);{let e=I(()=>n(t.overrides[`--sf-bg-radius`],0)),r=I(()=>`--sf-bg-radius`in t.overrides);$(o,{label:`Radius`,get value(){return U(e)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-bg-radius — corner radius of the background element`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-radius`)})}var s=V(o,2);{let e=I(()=>n(t.overrides[`--sf-bg-z`],-2)),r=I(()=>`--sf-bg-z`in t.overrides);$(s,{label:`Z-index`,get value(){return U(e)},min:-10,max:0,step:1,help:`--sf-bg-z — stack order of the background pseudo-element (typically negative)`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-z`,String(e)),onReset:()=>t.onReset(`--sf-bg-z`)})}F(r),K(e,r)};J(ft,e=>{U(w)&&e(pt)}),F(ct),F(oe),H(()=>{Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(C)),q($e,U(C)?`▲`:`▼`),Q(rt,`aria-expanded`,U(T)),q(at,U(T)?`▲`:`▼`),Q(lt,`aria-expanded`,U(w)),q(dt,U(w)?`▲`:`▼`)}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(C,!U(C))}),W(`click`,rt,()=>{R(T,!U(T))}),W(`click`,lt,()=>{R(w,!U(w))}),K(e,oe),We()}Br([`click`,`change`,`input`]);var pf=G(`

Drives --sf-color-border--strong, --subtle, --translucent automatically.

`,1),mf=G(`
`),hf=G(`
`,1),gf=G(``),_f=G(`
`),vf=G(`
Border sample
`,1),yf=G(`
Color
`,1),bf=G(`
Ring color
Focus preview
`,1),xf=G(`
`),Sf=G(`
`),Cf=G(`
`),wf=G(`
`),Tf=G(`
`),Ef=G(`
Radius
`);function Df(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],i={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},a=[{step:`xs`,name:`--sf-radius-xs`,default:2,max:16,step_size:.5,rawDefault:`calc(2px * var(--sf-radius-scale))`},{step:`s`,name:`--sf-radius-s`,default:4,max:24,step_size:.5,rawDefault:`calc(4px * var(--sf-radius-scale))`},{step:`m`,name:`--sf-radius-m`,default:8,max:32,step_size:1,rawDefault:`calc(8px * var(--sf-radius-scale))`},{step:`l`,name:`--sf-radius-l`,default:12,max:48,step_size:1,rawDefault:`calc(12px * var(--sf-radius-scale))`},{step:`xl`,name:`--sf-radius-xl`,default:16,max:64,step_size:1,rawDefault:`calc(16px * var(--sf-radius-scale))`},{step:`2xl`,name:`--sf-radius-2xl`,default:24,max:80,step_size:2,rawDefault:`calc(24px * var(--sf-radius-scale))`}],o=[{label:`Button radius`,token:`--sf-btn-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,help:`--sf-btn-radius`},{label:`Button padding block`,token:`--sf-btn-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,help:`--sf-btn-padding-block`},{label:`Button padding inline`,token:`--sf-btn-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:1,rawDefault:`var(--sf-space-m)`,help:`--sf-btn-padding-inline`},{label:`Field radius`,token:`--sf-field-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,help:`--sf-field-radius`},{label:`Field padding block`,token:`--sf-field-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,help:`--sf-field-padding-block`},{label:`Field padding inline`,token:`--sf-field-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:.75,rawDefault:`var(--sf-space-s)`,help:`--sf-field-padding-inline`}],s=jl.borders??[],c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1);function _(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let v=I(()=>_(t.overrides[`--sf-radius-scale`],1)),y=I(()=>_(t.overrides[`--sf-border-scale`],1)),b=I(()=>_(t.overrides[`--sf-focus-ring-width`],2,`px`)),x=I(()=>_(t.overrides[`--sf-focus-ring-offset`],2,`px`)),S=I(()=>_(t.overrides[`--sf-divider-width`]?.replace(`px`,``),1)),C=I(()=>_(t.overrides[`--sf-divider-gap`]?.replace(`rem`,``),1)),w=I(()=>t.overrides[`--sf-color-border`]??``),T=I(()=>t.overrides[`--sf-border-style`]??`solid`),E=I(()=>t.overrides[`--sf-focus-ring-color`]??``),D=I(()=>t.overrides[`--sf-divider-color`]??``);function O(e,n){return t.overrides[e]??n}function k(e){let n=t.overrides[e.name];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function ee(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}var te=Ef(),ne=z(te),A=z(ne),j=V(z(A),2),M=z(j,!0);F(j),F(A);var re=V(A,2),ie=e=>{var n=pf(),r=B(n);{let e=I(()=>`--sf-color-border`in t.overrides);du(r,{token:`--sf-color-border`,get value(){return U(w)},placeholder:`auto-derived`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-color-border`,e),onReset:()=>t.onReset(`--sf-color-border`)})}Me(2),K(e,n)};J(re,e=>{U(c)&&e(ie)}),F(ne);var ae=V(ne,4),oe=z(ae),se=V(z(oe),2),N=z(se,!0);F(se),F(oe);var ce=V(oe,2),le=e=>{var n=hf(),r=B(n);{let e=I(()=>`--sf-border-scale`in t.overrides);$(r,{label:`Border scale`,get value(){return U(y)},min:0,max:4,step:.25,help:`Multiplier applied to all border widths. 0 hides all borders.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-border-scale`,String(e)),onReset:()=>t.onReset(`--sf-border-scale`)})}var i=V(r,2);{let e=I(()=>_(t.overrides[`--sf-border-width-hairline`]?.replace(`px`,``),.5)),n=I(()=>`--sf-border-width-hairline`in t.overrides);$(i,{label:`Hairline`,get value(){return U(e)},min:0,max:1,step:.25,unit:`px`,help:`--sf-border-width-hairline — ultra-thin border for retina displays`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-border-width-hairline`,`${e}px`),onReset:()=>t.onReset(`--sf-border-width-hairline`)})}var a=V(i,2);{let e=I(()=>_(t.overrides[`--sf-box-border-width`]?.replace(`px`,``),0)),n=I(()=>`--sf-box-border-width`in t.overrides);$(a,{label:`Box border`,get value(){return U(e)},min:0,max:4,step:.5,unit:`px`,help:`--sf-box-border-width — box-shadow border drawn without affecting layout`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-box-border-width`,`${e}px`),onReset:()=>t.onReset(`--sf-box-border-width`)})}var o=V(a,2);Y(o,20,()=>[1,2,3,4],e=>e,(e,t)=>{var n=mf(),r=z(n),i=z(r);F(r);var a=V(r,2),o=V(a,2),s=z(o);F(o),F(n),H((e,n)=>{q(i,`${t??``}px →`),Z(a,e),q(s,`${n??``}px`)},[()=>`height: ${Math.max(t*U(y),.5)}px`,()=>(t*U(y)).toFixed(1)]),K(e,n)}),F(o),K(e,n)};J(ce,e=>{U(l)&&e(le)}),F(ae);var ue=V(ae,4),de=z(ue),fe=V(z(de),2),pe=z(fe,!0);F(fe),F(de);var me=V(de,2),he=e=>{var r=vf(),i=B(r);Y(i,20,()=>[{label:`Border`,token:`--sf-border-style`,default:`solid`},{label:`Divider`,token:`--sf-divider-style`,default:`solid`}],e=>e.token,(e,r)=>{var i=_f(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n,e=>e,(e,n)=>{let i=I(()=>O(r.token,r.default));var a=gf(),o=z(a),s=V(o);F(a),H(()=>{X(a,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${U(i)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),Z(o,`width: 20px; height: 0; border-bottom: 2px ${n} currentColor; opacity: 0.7`),q(s,` ${n??``}`)}),W(`click`,a,()=>n===r.default?t.onReset(r.token):t.onSet(r.token,n)),K(e,a)}),F(s),F(i),H(()=>q(o,r.label)),K(e,i)}),F(i);var a=V(i,2),o=z(a),s=V(o,2),c=z(s);F(s),F(a),H((e,t)=>{Z(o,e),q(c,`${t??``}px · ${U(T)??``}`)},[()=>`border: ${Math.max(U(y),.5)}px ${U(T)} ${U(w)||`var(--sf-color-border, #64748b)`}`,()=>(1*U(y)).toFixed(1)]),K(e,r)};J(me,e=>{U(u)&&e(he)}),F(ue);var ge=V(ue,4),_e=z(ge),ve=V(z(_e),2),ye=z(ve,!0);F(ve),F(_e);var be=V(_e,2),xe=e=>{var n=yf(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-divider-color`in t.overrides);du(i,{token:`--sf-divider-color`,get value(){return U(D)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-divider-color`,e),onReset:()=>t.onReset(`--sf-divider-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-divider-width`in t.overrides);$(a,{label:`Width`,get value(){return U(S)},min:.5,max:4,step:.5,unit:`px`,help:`--sf-divider-width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-width`,`${e}px`),onReset:()=>t.onReset(`--sf-divider-width`),rawDefault:`var(--sf-border-width-1)`,get currentRaw(){return t.overrides[`--sf-divider-width`]},onRawSet:e=>t.onSet(`--sf-divider-width`,e)})}var o=V(a,2);{let e=I(()=>`--sf-divider-gap`in t.overrides);$(o,{label:`Gap`,get value(){return U(C)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-divider-gap — spacing around divider lines`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-divider-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-divider-gap`]},onRawSet:e=>t.onSet(`--sf-divider-gap`,e)})}K(e,n)};J(be,e=>{U(d)&&e(xe)}),F(ge);var Se=V(ge,4),Ce=z(Se),we=V(z(Ce),2),Te=z(we,!0);F(we),F(Ce);var Ee=V(Ce,2),De=e=>{var n=bf(),r=B(n);{let e=I(()=>`--sf-focus-ring-width`in t.overrides);$(r,{label:`Ring width`,get value(){return U(b)},min:0,max:6,step:.5,unit:`px`,help:`Thickness of the keyboard focus indicator`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-width`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-width`)})}var i=V(r,2);{let e=I(()=>`--sf-focus-ring-offset`in t.overrides);$(i,{label:`Ring offset`,get value(){return U(x)},min:0,max:8,step:.5,unit:`px`,help:`Gap between element edge and focus ring`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-offset`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-offset`)})}var a=V(i,2),o=V(z(a),2);{let e=I(()=>`--sf-focus-ring-color`in t.overrides);du(o,{token:`--sf-focus-ring-color`,get value(){return U(E)},placeholder:`default (action)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-focus-ring-color`,e),onReset:()=>t.onReset(`--sf-focus-ring-color`)})}F(a);var s=V(a,2),c=z(s);F(s),H(()=>Z(c,`outline: ${U(b)}px solid ${U(E)||`oklch(0.7 0.2 235)`}; outline-offset: ${U(x)}px`)),K(e,n)};J(Ee,e=>{U(f)&&e(De)}),F(Se);var P=V(Se,6),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var n=xf();Y(n,21,()=>a,e=>e.name,(e,n)=>{{let r=I(()=>k(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).step},get value(){return U(r)},min:0,get max(){return U(n).max},get step(){return U(n).step_size},unit:`px`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}px`),onReset:()=>t.onReset(U(n).name),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).name]},onRawSet:e=>t.onSet(U(n).name,e)})}}),F(n),K(e,n)};J(je,e=>{U(h)&&e(Ne)}),F(P);var Pe=V(P,2),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var t=Cf(),n=z(t);Y(n,20,()=>r,e=>e,(e,t)=>{let n=I(()=>i[t]??6),r=I(()=>t===`full`?9999:U(n)*U(v));var a=Sf(),o=z(a),s=V(o,2),c=z(s,!0);F(s),F(a),H(e=>{Z(o,e),q(c,t)},[()=>`border-radius: ${Math.min(U(r),9999)}px`]),K(e,a)}),F(n),F(t),K(e,t)};J(Re,e=>{U(m)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var n=wf();Y(n,21,()=>o,e=>e.token,(e,n)=>{{let r=I(()=>ee(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).help},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}}),F(n),K(e,n)};J(Ke,e=>{U(g)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var n=Tf();Y(n,21,()=>s,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(Qe,e=>{U(p)&&e($e)}),F(Je),F(te),H(()=>{Q(A,`aria-expanded`,U(c)),q(M,U(c)?`▲`:`▼`),Q(oe,`aria-expanded`,U(l)),q(N,U(l)?`▲`:`▼`),Q(de,`aria-expanded`,U(u)),q(pe,U(u)?`▲`:`▼`),Q(_e,`aria-expanded`,U(d)),q(ye,U(d)?`▲`:`▼`),Q(Ce,`aria-expanded`,U(f)),q(Te,U(f)?`▲`:`▼`),Q(Oe,`aria-expanded`,U(h)),q(Ae,U(h)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(m)),q(Le,U(m)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(g)),q(Ge,U(g)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(p)),q(Ze,U(p)?`▲`:`▼`)}),W(`click`,A,()=>{R(c,!U(c))}),W(`click`,oe,()=>{R(l,!U(l))}),W(`click`,de,()=>{R(u,!U(u))}),W(`click`,_e,()=>{R(d,!U(d))}),W(`click`,Ce,()=>{R(f,!U(f))}),W(`click`,Oe,()=>{R(h,!U(h))}),W(`click`,Fe,()=>{R(m,!U(m))}),W(`click`,Ve,()=>{R(g,!U(g))}),W(`click`,Ye,()=>{R(p,!U(p))}),K(e,te),We()}Br([`click`]);var Of=G(`
`),kf=G(`
Shadow color

Warm, cool or brand-tinted shadows. Default uses neutral hue.

`),Af=G(`
Glow color

Which brand color radiates the glow. Defaults to primary.

`),jf=G(`

Glow disabled.

`),Mf=G(`
Shadow glow
Ambient glow on elevated surfaces
`,1),Nf=G(`
`),Pf=G(`
`);function Ff(e,t){Ue(t,!0);let n=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=jl.shadows??[],i=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-shadow-lightness`]??`0.15`);return isFinite(e)?e:.15})()),a=I(()=>t.overrides[`--sf-shadow-color`]??``),o=I(()=>t.overrides[`--sf-shadow-glow-color`]??``),s=I(()=>t.overrides[`--sf-shadow-glow`]===`none`),c=L(!1),l=L(!1),u=L(!1);var d=Pf(),f=z(d);Y(f,22,()=>n,e=>e,(e,t,n)=>{var r=Of(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(()=>{Z(i,`width: ${40+U(n)*4}px; height: ${40+U(n)*4}px; box-shadow: var(--sf-shadow-${t})`),q(o,t)}),K(e,r)}),F(f);var p=V(f,4);{let e=I(()=>`--sf-shadow-lightness`in t.overrides);$(p,{label:`Shadow lightness`,get value(){return U(i)},min:0,max:.5,step:.01,help:`--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-shadow-lightness`,String(e)),onReset:()=>t.onReset(`--sf-shadow-lightness`)})}var m=V(p,4),h=z(m),g=V(z(h),2),_=z(g,!0);F(g),F(h);var v=V(h,2),y=e=>{var n=kf(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-color`in t.overrides);du(r,{token:`--sf-shadow-color`,get value(){return U(a)},placeholder:`auto (neutral hue)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-color`,e),onReset:()=>t.onReset(`--sf-shadow-color`)})}Me(2),F(n),K(e,n)};J(v,e=>{U(c)&&e(y)}),F(m);var b=V(m,4),x=z(b),S=V(z(x),2),C=z(S,!0);F(S),F(x);var w=V(x,2),T=e=>{var n=Mf(),r=B(n),i=V(z(r),2),a=z(i);F(i),F(r);var c=V(r,2),l=e=>{var n=Af(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-glow-color`in t.overrides);du(r,{token:`--sf-shadow-glow-color`,get value(){return U(o)},placeholder:`default (primary color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-glow-color`,e),onReset:()=>t.onReset(`--sf-shadow-glow-color`)})}Me(2),F(n),K(e,n)};J(c,e=>{U(s)||e(l)});var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=e=>{K(e,jf())};J(f,e=>{U(s)&&e(p)}),H(()=>{Q(i,`aria-label`,U(s)?`Enable shadow glow`:`Disable shadow glow`),X(i,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-white/10`:`bg-indigo-600`}`),X(a,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-0.5`:`translate-x-4`}`),Z(d,`box-shadow: ${U(s)?`none`:`var(--sf-shadow-glow)`}`)}),W(`click`,i,()=>{U(s)?t.onReset(`--sf-shadow-glow`):t.onSet(`--sf-shadow-glow`,`none`)}),K(e,n)};J(w,e=>{U(l)&&e(T)}),F(b);var E=V(b,4),D=z(E),O=V(z(D),2),k=z(O,!0);F(O),F(D);var ee=V(D,2),te=e=>{var n=Nf();Y(n,21,()=>r,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ee,e=>{U(u)&&e(te)}),F(E),F(d),H(()=>{Q(h,`aria-expanded`,U(c)),q(_,U(c)?`▲`:`▼`),Q(x,`aria-expanded`,U(l)),q(C,U(l)?`▲`:`▼`),Q(D,`aria-expanded`,U(u)),q(k,U(u)?`▲`:`▼`)}),W(`click`,h,()=>{R(c,!U(c))}),W(`click`,x,()=>{R(l,!U(l))}),W(`click`,D,()=>{R(u,!U(u))}),K(e,d),We()}Br([`click`]);var If=G(`

Motion is disabled — duration & easing have no effect while scale is 0.

`),Lf=G(``),Rf=G(`(No effect while motion is disabled.)`),zf=G(`
`),Bf=G(`

Named duration tokens. Drag to set an absolute ms value, overriding the global scale.

`,1),Vf=G(``),Hf=G(`
`),Uf=G(`

Edit the named easing tokens. Accepts any CSS timing function — cubic-bezier(…) or linear(…). Use “Live preview” above to feel a curve.

`,1),Wf=G(``),Gf=G(`
`),Kf=G(`

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

Stagger base
`,1),qf=G(``),Jf=G(`
`),Yf=G(`

Default animation-range for scroll-driven animations using the .sf-scroll-timeline utility.

`,1),Xf=G(`
Disable motion
Respects prefers-reduced-motion
Live preview
`);function Zf(e,t){Ue(t,!0);let n=[{label:`Instant`,token:`--sf-duration-instant`,base:100,max:300},{label:`Fast`,token:`--sf-duration-fast`,base:150,max:500},{label:`Normal`,token:`--sf-duration-normal`,base:250,max:800},{label:`Slow`,token:`--sf-duration-slow`,base:400,max:1200},{label:`Slower`,token:`--sf-duration-slower`,base:600,max:2e3}],r=[{label:`Linear`,token:`--sf-ease-linear`,value:`linear`,preview:`M0,40 L40,0`},{label:`Ease out`,token:`--sf-ease-out`,value:`cubic-bezier(0.25, 0, 0.15, 1)`,preview:`M0,40 C8,40 28,0 40,0`},{label:`Ease in`,token:`--sf-ease-in`,value:`cubic-bezier(0.5, 0, 0.75, 0.25)`,preview:`M0,40 C12,40 32,32 40,0`},{label:`Ease in-out`,token:`--sf-ease-in-out`,value:`cubic-bezier(0.4, 0, 0.2, 1)`,preview:`M0,40 C8,40 32,0 40,0`},{label:`Spring`,token:`--sf-ease-spring`,value:`linear(0, 0.5, 1.1, 0.95, 1.02, 1)`,preview:`M0,40 C10,20 20,-4 28,-2 S38,2 40,0`},{label:`Bounce`,token:`--sf-ease-bounce`,value:`linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)`,preview:`M0,40 L12,16 L20,0 L26,6 L32,-1 L36,1 L40,0`},{label:`Elastic`,token:`--sf-ease-elastic`,value:`linear(0, 0.3, 1.2, 0.9, 1.05, 1)`,preview:`M0,40 C8,40 16,-10 24,-2 S36,2 40,0`},{label:`Overshoot`,token:`--sf-ease-overshoot`,value:`linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)`,preview:`M0,40 C8,40 20,-10 40,0`}],i=[`--sf-animation-delay-1`,`--sf-animation-delay-2`,`--sf-animation-delay-3`,`--sf-animation-delay-4`,`--sf-animation-delay-5`],a=jl.motion??[],o=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-motion-scale`]??`1`);return isFinite(e)?e:1})()),s=I(()=>t.overrides[`--sf-motion-scale`]===`0`),c=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-theme-transition-duration`]?.replace(`ms`,``)??String(300*U(o)));return isFinite(e)?e:Math.round(300*U(o))})()),l=I(()=>{let e=t.overrides[i[0]];return e?parseFloat(e.replace(`ms`,``)):75*U(o)}),u=L(!1),d=L(0),f=L(`--sf-ease-out`),p=L(`--sf-duration-normal`),m=L(!1),h=L(!1),g=L(!1),_=L(!1);function v(e,n){let r=t.overrides[e];if(r){let e=parseFloat(r);if(isFinite(e))return e}return Math.round(n*U(o))}function y(e){return t.overrides[e]??r.find(t=>t.token===e)?.value??`ease`}function b(){if(U(u))return;let e=n.find(e=>e.token===U(p))?.base??250,t=v(U(p),e);R(u,!0),R(d,180),setTimeout(()=>{R(d,0),setTimeout(()=>{R(u,!1)},t)},t)}function x(e){let n={};for(let t=1;t<=5;t++)n[`--sf-animation-delay-${t}`]=`${Math.round(e*t)}ms`;t.onBulkChange(n)}function S(){let e={};for(let t=1;t<=5;t++)e[`--sf-animation-delay-${t}`]=null;t.onBulkChange(e)}var C=Xf(),w=z(C),T=V(z(w),2),E=z(T);F(T),F(w);var D=V(w,2),O=e=>{K(e,If())};J(D,e=>{U(s)&&e(O)});var k=V(D,2),ee=V(z(k),2),te=z(ee),ne=z(te);F(te);var A=V(te,2),j=z(A);Y(j,21,()=>r,e=>e.token,(e,t)=>{var n=Lf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(j);var M;Di(j);var re=V(j,2);Y(re,21,()=>n,e=>e.token,(e,t)=>{var n=Lf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(re);var ie;Di(re);var ae=V(re,2),oe=z(ae,!0);F(ae),F(A),F(ee),F(k);var se=V(k,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Bf(),i=B(r),a=V(z(i)),o=e=>{K(e,Rf())};J(a,e=>{U(s)&&e(o)}),F(i);var c=V(i,2);Y(c,17,()=>n,e=>e.token,(e,n)=>{let r=I(()=>v(U(n).token,U(n).base));{let i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:10,unit:`ms`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}ms`),onReset:()=>t.onReset(U(n).token)})}});var l=V(c,2);Y(l,21,()=>n,e=>e.label,(e,t)=>{let n=I(()=>v(U(t).token,U(t).base));var r=zf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,U(t).label),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/1200*100,100)}%`]),K(e,r)}),F(l),K(e,r)};J(ue,e=>{U(m)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Uf(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=Hf(),a=z(i),o=z(a),s=z(o);F(o);var c=V(o,2),l=z(c),u=z(l),d=z(u,!0);F(u);var p=V(u,2),m=z(p),h=V(m,2),g=e=>{var r=Vf();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(h,e=>{U(r)&&e(g)}),F(p),F(l);var _=V(l,2);zi(_),F(c),F(a),F(i),H(()=>{X(i,1,`p-2.5 rounded-xl border transition-all ${U(r)?`bg-indigo-500/10 border-indigo-500/30`:`border-white/8 bg-white/3`}`),Q(s,`d`,U(n).preview),q(d,U(n).label),Bi(_,t.overrides[U(n).token]??``),Q(_,`placeholder`,U(n).value)}),W(`click`,m,()=>{R(f,U(n).token,!0),b()}),W(`input`,_,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,i)}),F(i),K(e,n)};J(ge,e=>{U(h)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Kf(),r=V(B(n),2),a=z(r),o=V(z(a),2),s=e=>{var t=Wf();W(`click`,t,S),K(e,t)},c=I(()=>i.some(e=>e in t.overrides));J(o,e=>{U(c)&&e(s)}),F(a);var u=V(a,2);{let e=I(()=>Math.round(U(l))),n=I(()=>i.some(e=>e in t.overrides));$(u,{label:``,get value(){return U(e)},min:0,max:200,step:5,unit:`ms`,help:`Base unit for --sf-animation-delay-1 through -5`,get overridden(){return U(n)},onChange:e=>x(e),onReset:S})}F(r);var d=V(r,2);Y(d,20,()=>[1,2,3,4,5],e=>e,(e,t)=>{let n=I(()=>Math.round(U(l)*t));var r=Gf(),i=z(r),a=z(i);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),u=z(c);F(c),F(r),H(e=>{q(a,`–${t??``}`),Z(s,e),q(u,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/600*100,100)}%`]),K(e,r)}),F(d),K(e,n)};J(Se,e=>{U(g)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Yf(),r=B(n);Y(r,21,()=>a,e=>e.name,(e,n)=>{Yl(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(r);var i=V(r,2);{let e=I(()=>`--sf-theme-transition-duration`in t.overrides);$(i,{label:`Theme switch speed`,get value(){return U(c)},min:0,max:600,step:10,unit:`ms`,help:`--sf-theme-transition-duration — dark/light color-scheme switch animation speed`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-theme-transition-duration`,`${e}ms`),onReset:()=>t.onReset(`--sf-theme-transition-duration`)})}var o=V(i,2);Y(V(z(o),2),16,()=>[{label:`Range start`,token:`--sf-scroll-timeline-range-start`,placeholder:`entry 0%`},{label:`Range end`,token:`--sf-scroll-timeline-range-end`,placeholder:`cover 30%`}],e=>e.token,(e,n)=>{var r=Jf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=qf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(o),K(e,n)};J(P,e=>{U(_)&&e(Oe)}),F(we),F(C),H(e=>{Q(T,`title`,U(s)?`Enable motion`:`Disable motion`),X(T,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-indigo-600`:`bg-white/10`}`),X(E,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-4`:`translate-x-0.5`}`),Z(ne,e),M!==(M=U(f))&&(j.value=(j.__value=U(f))??``,Ei(j,U(f))),ie!==(ie=U(p))&&(re.value=(re.__value=U(p))??``,Ei(re,U(p))),ae.disabled=U(u),q(oe,U(u)?`…`:`▶ Play`),Q(N,`aria-expanded`,U(m)),q(le,U(m)?`▲`:`▼`),Q(pe,`aria-expanded`,U(h)),q(he,U(h)?`▲`:`▼`),Q(ye,`aria-expanded`,U(g)),q(xe,U(g)?`▲`:`▼`),Q(Te,`aria-expanded`,U(_)),q(De,U(_)?`▲`:`▼`)},[()=>`transform: translateX(${U(d)}px); transition: transform ${v(U(p),n.find(e=>e.token===U(p))?.base??250)}ms ${y(U(f))}`]),W(`click`,T,()=>{U(s)?t.onReset(`--sf-motion-scale`):t.onSet(`--sf-motion-scale`,`0`)}),W(`change`,j,e=>{R(f,e.target.value,!0)}),W(`change`,re,e=>{R(p,e.target.value,!0)}),W(`click`,ae,b),W(`click`,N,()=>{R(m,!U(m))}),W(`click`,pe,()=>{R(h,!U(h))}),W(`click`,ye,()=>{R(g,!U(g))}),W(`click`,Te,()=>{R(_,!U(_))}),K(e,C),We()}Br([`click`,`change`,`input`]);var Qf=G(`
`),$f=G(`
`,1),ep=G(`
`),tp=G(`
`,1),np=G(``),rp=G(`

Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

Color
Direction
Scrim preview
`,1),ip=G(`
`),ap=G(`
Scrollbar preview
`,1),op=G(``),sp=G(`
`),cp=G(`

Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). - Edit each token directly — use none to disable.

`,1),lp=G(`
`);function up(e,t){Ue(t,!0);let n=[{label:`To top`,value:`to top`},{label:`To bottom`,value:`to bottom`},{label:`To left`,value:`to left`},{label:`To right`,value:`to right`}],r=[{label:`Small`,token:`--sf-text-shadow-s`,default:`0 1px 2px oklch(…)`},{label:`Medium`,token:`--sf-text-shadow-m`,default:`0 2px 4px oklch(…)`},{label:`Large`,token:`--sf-text-shadow-l`,default:`0 4px 8px oklch(…)`}];function i(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let a=I(()=>i(t.overrides[`--sf-blur`],12,`px`)),o=I(()=>i(t.overrides[`--sf-opacity-muted`],.5)),s=I(()=>i(t.overrides[`--sf-opacity-disabled`],.45)),c=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),l=I(()=>t.overrides[`--sf-scrim-color`]??``),u=I(()=>i(t.overrides[`--sf-scroll-shadow-size`]?.replace(`rem`,``),2)),d=I(()=>i(t.overrides[`--sf-state-pending-opacity`],.7)),f=I(()=>t.overrides[`--sf-scrollbar-thumb`]??``),p=I(()=>t.overrides[`--sf-scrollbar-track`]??``),m=L(!1),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1);var b=lp(),x=z(b),S=z(x),C=V(z(S),2),w=z(C,!0);F(C),F(S);var T=V(S,2),E=e=>{var n=$f(),r=B(n);{let e=I(()=>`--sf-blur`in t.overrides);$(r,{label:`Blur radius`,get value(){return U(a)},min:0,max:48,step:1,unit:`px`,help:`--sf-blur — used for frosted glass, modals, tooltips`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-blur`,`${e}px`),onReset:()=>t.onReset(`--sf-blur`)})}var i=V(r,2),o=z(i);Y(o,20,()=>Array.from({length:12}),ii,(e,t,n)=>{var r=Qf();X(r,1,yi(n%3==0?`bg-indigo-500/50`:n%3==1?`bg-purple-500/40`:`bg-blue-500/30`)),K(e,r)}),F(o);var s=V(o,2),c=z(s),l=z(c);F(c),F(s),F(i),H(()=>{Z(s,`backdrop-filter: blur(${U(a)}px)`),q(l,`${U(a)??``}px`)}),K(e,n)};J(T,e=>{U(m)&&e(E)}),F(x);var D=V(x,4),O=z(D),k=V(z(O),2),ee=z(k,!0);F(k),F(O);var te=V(O,2),ne=e=>{var n=tp(),r=B(n);{let e=I(()=>`--sf-opacity-muted`in t.overrides);$(r,{label:`Muted opacity`,get value(){return U(o)},min:0,max:1,step:.05,help:`--sf-opacity-muted — secondary text, icons, and placeholder content`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-muted`,String(e)),onReset:()=>t.onReset(`--sf-opacity-muted`)})}var i=V(r,2);{let e=I(()=>`--sf-opacity-disabled`in t.overrides);$(i,{label:`Disabled opacity`,get value(){return U(s)},min:0,max:1,step:.05,help:`--sf-opacity-disabled — disabled form controls and interactive elements`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-disabled`,String(e)),onReset:()=>t.onReset(`--sf-opacity-disabled`)})}var a=V(i,2);{let e=I(()=>`--sf-state-pending-opacity`in t.overrides);$(a,{label:`Pending opacity`,get value(){return U(d)},min:.1,max:1,step:.05,help:`--sf-state-pending-opacity — opacity of elements in loading/pending state`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-state-pending-opacity`,String(e)),onReset:()=>t.onReset(`--sf-state-pending-opacity`)})}var c=V(a,2);Y(c,21,()=>[{label:`muted`,val:U(o)},{label:`disabled`,val:U(s)},{label:`pending`,val:U(d)}],e=>e.label,(e,t)=>{var n=ep(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=V(a,2),s=z(o,!0);F(o),F(n),H(()=>{q(i,U(t).label),Z(a,`opacity: ${U(t).val}`),q(s,U(t).val)}),K(e,n)}),F(c),K(e,n)};J(te,e=>{U(h)&&e(ne)}),F(D);var A=V(D,4),j=z(A),M=V(z(j),2),re=z(M,!0);F(M),F(j);var ie=V(j,2),ae=e=>{var r=rp(),i=V(B(r),2),a=V(z(i),2);{let e=I(()=>`--sf-scrim-color`in t.overrides);du(a,{token:`--sf-scrim-color`,get value(){return U(l)},placeholder:`default (base color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-scrim-color`,e),onReset:()=>t.onReset(`--sf-scrim-color`)})}F(i);var o=V(i,2),s=V(z(o),2);Y(s,21,()=>n,e=>e.value,(e,n)=>{var r=np(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${U(c)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(s),F(o);var u=V(o,2),d=z(u),f=z(d);Me(2),F(d),F(u),H(()=>Z(f,`background: linear-gradient(${U(c)}, ${U(l)||`oklch(0 0 0 / 0.6)`}, transparent)`)),K(e,r)};J(ie,e=>{U(g)&&e(ae)}),F(A);var oe=V(A,4),se=z(oe),N=V(z(se),2),ce=z(N,!0);F(N),F(se);var le=V(se,2),ue=e=>{var n=ap(),r=B(n);Y(r,17,()=>[{label:`Thumb color`,token:`--sf-scrollbar-thumb`,val:U(f)},{label:`Track color`,token:`--sf-scrollbar-track`,val:U(p)}],e=>e.token,(e,n)=>{var r=ip(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>U(n).token in t.overrides);du(o,{get token(){return U(n).token},get value(){return U(n).val},placeholder:`default`,get isOverridden(){return U(e)},onSet:e=>t.onSet(U(n).token,e),onReset:()=>t.onReset(U(n).token)})}F(r),H(()=>q(a,U(n).label)),K(e,r)});var i=V(r,2),a=z(i);let o;var s=z(a);let c;F(a),Me(2),F(i),H(()=>{o=Z(a,``,o,{background:U(p)||`rgba(255,255,255,0.08)`}),c=Z(s,``,c,{background:U(f)||`oklch(0.52 0.025 260)`})}),K(e,n)};J(le,e=>{U(_)&&e(ue)}),F(oe);var de=V(oe,4),fe=z(de),pe=V(z(fe),2),me=z(pe,!0);F(pe),F(fe);var he=V(fe,2),ge=e=>{{let n=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(e,{label:`Shadow size`,get value(){return U(u)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}};J(he,e=>{U(v)&&e(ge)}),F(de);var _e=V(de,4),ve=z(_e),ye=V(z(ve),2),be=z(ye,!0);F(ye),F(ve);var xe=V(ve,2),Se=e=>{var n=cp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{var r=sp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=op();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).default)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)}),F(i),K(e,n)};J(xe,e=>{U(y)&&e(Se)}),F(_e),F(b),H(()=>{Q(S,`aria-expanded`,U(m)),q(w,U(m)?`▲`:`▼`),Q(O,`aria-expanded`,U(h)),q(ee,U(h)?`▲`:`▼`),Q(j,`aria-expanded`,U(g)),q(re,U(g)?`▲`:`▼`),Q(se,`aria-expanded`,U(_)),q(ce,U(_)?`▲`:`▼`),Q(fe,`aria-expanded`,U(v)),q(me,U(v)?`▲`:`▼`),Q(ve,`aria-expanded`,U(y)),q(be,U(y)?`▲`:`▼`)}),W(`click`,S,()=>{R(m,!U(m))}),W(`click`,O,()=>{R(h,!U(h))}),W(`click`,j,()=>{R(g,!U(g))}),W(`click`,se,()=>{R(_,!U(_))}),W(`click`,fe,()=>{R(v,!U(v))}),W(`click`,ve,()=>{R(y,!U(y))}),K(e,b),We()}Br([`click`,`input`]);var dp=G(`
`),fp=G(`
`,1),pp=G(`

SLASHED is a token-first CSS framework. This sample paragraph repeats so you + will shift every family's tints/shades too. That's expected, not a bug.

`,1),Iu=G(`
→
`),Lu=G(`

Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH + lightness — useful for always-stable sections. Enable on canvas to preview.

Color Current Locked
`,1),Ru=G(` `),zu=G(`
`),Bu=G(`
`),Vu=G(`

Status colors don't ride the brand mix curve — only the resolved color plus subtle/muted alpha washes and + a strong shade are derived. There's no -50…-950 ramp for success/warning/info/danger.

`),Hu=G(`

Dark mode is auto-derived from each light source by default. Switch to + Manual dark to set a bespoke dark value.

`,1),Uu=G(`
Aa
`),Wu=G(``),Gu=G(`

Controls whether text on brand-coloured surfaces is light or dark.

`,1),Ku=G(``),qu=G(`
`),Ju=G(`
`),Yu=G(`
`),Xu=G(`

Controls how much color is mixed into each palette step. Step 500 is always the source color.

Tints (50–400) — mixed toward surface
Shades (600–950) — mixed toward text
Palette & curve preview

Bar height = mix amount · fill = the resolved primary palette swatch at each step

Mini palettes — all brand colors
`,1),Zu=G(``),Qu=G(`
Dir
`),$u=G(`
Angle
`),ed=G(`
Stops
default:
`),td=G(`
`,1),nd=G(`

Auto-derived from your brand colors. Use the angle/direction and stop + controls, or edit the raw value for full control.

`,1),rd=G(`

--sf-color-scheme — sets the CSS color-scheme property on the root, controlling browser UI (scrollbars, inputs) and default background.

`,1),id=G(`
`),ad=G(`

Direct color overrides for tokens the framework auto-derives. Use for edge cases.

`,1),od=G(`
Semantic colors

Live preview — every semantic role on its on-color text, shown in light and dark. Resolved from the canvas, updates as you edit.

All tokens tab — override individual color steps (50–950), semantic aliases, or surface tokens directly.

`);function sd(e,t){Ue(t,!0);function n(e,t){return sl.value,pl(e)||t}function r(e,t){sl.value;let n=vl(e);return n&&n!==`none`?n:t}function i(e,t,n){return sl.value,hl(e,t)||n}let a=[{name:`--sf-gradient-primary`,label:`Primary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))`},{name:`--sf-gradient-secondary`,label:`Secondary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-secondary)`,stop2:`oklch(from var(--sf-color-secondary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))`},{name:`--sf-gradient-tertiary`,label:`Tertiary`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-tertiary)`,stop2:`oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h)`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))`},{name:`--sf-gradient-brand`,label:`Brand`,group:`brand`,kind:`angle`,space:`oklch`,angle:135,dir:`right`,stop1:`var(--sf-color-primary)`,stop2:`oklch(from var(--sf-color-primary) l c calc(h + 30))`,formula:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))`},{name:`--sf-gradient-surface`,label:`Surface`,group:`brand`,kind:`angle`,space:`oklab`,angle:180,dir:`bottom`,stop1:`var(--sf-color-surface)`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))`},{name:`--sf-gradient-fade--r`,label:`Fade →`,group:`fade`,kind:`dir`,space:`oklch`,angle:90,dir:`right`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to right, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--l`,label:`Fade ←`,group:`fade`,kind:`dir`,space:`oklch`,angle:270,dir:`left`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to left, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--t`,label:`Fade ↑`,group:`fade`,kind:`dir`,space:`oklch`,angle:0,dir:`top`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to top, transparent, var(--sf-color-bg))`},{name:`--sf-gradient-fade--b`,label:`Fade ↓`,group:`fade`,kind:`dir`,space:`oklch`,angle:180,dir:`bottom`,stop1:`transparent`,stop2:`var(--sf-color-bg)`,formula:`linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))`}],o=[{key:`primary`,label:`Primary`},{key:`secondary`,label:`Secondary`},{key:`tertiary`,label:`Tertiary`},{key:`action`,label:`Action`}],s=[{name:`--sf-color-primary-source-light`,label:`Primary`,side:`light`,default:`oklch(0.47 0.27 264)`,colorKey:`primary`},{name:`--sf-color-primary-source-dark`,label:`Primary`,side:`dark`,default:`oklch(0.715 0.243 264)`,colorKey:`primary`},{name:`--sf-color-secondary-source-light`,label:`Secondary`,side:`light`,default:`oklch(0.22 0.04 264)`,colorKey:`secondary`},{name:`--sf-color-secondary-source-dark`,label:`Secondary`,side:`dark`,default:`oklch(0.84 0.036 264)`,colorKey:`secondary`},{name:`--sf-color-tertiary-source-light`,label:`Tertiary`,side:`light`,default:`oklch(0.42 0.22 295)`,colorKey:`tertiary`},{name:`--sf-color-tertiary-source-dark`,label:`Tertiary`,side:`dark`,default:`oklch(0.74 0.198 295)`,colorKey:`tertiary`},{name:`--sf-color-action-source-light`,label:`Action`,side:`light`,default:`oklch(0.50 0.22 235)`,colorKey:`action`},{name:`--sf-color-action-source-dark`,label:`Action`,side:`dark`,default:`oklch(0.70 0.198 235)`,colorKey:`action`},{name:`--sf-color-neutral-source-light`,label:`Neutral`,side:`light`,default:`oklch(0.52 0.025 260)`,colorKey:`neutral`},{name:`--sf-color-neutral-source-dark`,label:`Neutral`,side:`dark`,default:`oklch(0.69 0.0225 260)`,colorKey:`neutral`},{name:`--sf-color-base-source-light`,label:`Base`,side:`light`,default:`oklch(0.96 0.006 250)`,colorKey:`base`},{name:`--sf-color-base-source-dark`,label:`Base`,side:`dark`,default:`oklch(0.22 0.003 250)`,colorKey:`base`}],c=[{name:`--sf-color-success-source-light`,label:`Success`,side:`light`,default:`oklch(0.50 0.16 145)`,colorKey:`success`},{name:`--sf-color-success-source-dark`,label:`Success`,side:`dark`,default:`oklch(0.70 0.144 145)`,colorKey:`success`},{name:`--sf-color-warning-source-light`,label:`Warning`,side:`light`,default:`oklch(0.75 0.17 80)`,colorKey:`warning`},{name:`--sf-color-warning-source-dark`,label:`Warning`,side:`dark`,default:`oklch(0.65 0.153 80)`,colorKey:`warning`},{name:`--sf-color-info-source-light`,label:`Info`,side:`light`,default:`oklch(0.48 0.18 235)`,colorKey:`info`},{name:`--sf-color-info-source-dark`,label:`Info`,side:`dark`,default:`oklch(0.71 0.162 235)`,colorKey:`info`},{name:`--sf-color-danger-source-light`,label:`Danger`,side:`light`,default:`oklch(0.48 0.22 12)`,colorKey:`danger`},{name:`--sf-color-danger-source-dark`,label:`Danger`,side:`dark`,default:`oklch(0.73 0.198 12)`,colorKey:`danger`}],l=[{name:`--sf-palette-mix-50`,label:`50`,step:`tint`,default:4},{name:`--sf-palette-mix-100`,label:`100`,step:`tint`,default:8},{name:`--sf-palette-mix-200`,label:`200`,step:`tint`,default:20},{name:`--sf-palette-mix-300`,label:`300`,step:`tint`,default:40},{name:`--sf-palette-mix-400`,label:`400`,step:`tint`,default:65},{name:`--sf-palette-mix-600`,label:`600`,step:`shade`,default:82},{name:`--sf-palette-mix-700`,label:`700`,step:`shade`,default:62},{name:`--sf-palette-mix-800`,label:`800`,step:`shade`,default:38},{name:`--sf-palette-mix-900`,label:`900`,step:`shade`,default:18},{name:`--sf-palette-mix-950`,label:`950`,step:`shade`,default:8}],u=[{label:`Softer`,desc:`Low contrast palette`,patch:{"--sf-palette-mix-50":`3%`,"--sf-palette-mix-100":`6%`,"--sf-palette-mix-200":`14%`,"--sf-palette-mix-300":`30%`,"--sf-palette-mix-400":`55%`,"--sf-palette-mix-600":`72%`,"--sf-palette-mix-700":`52%`,"--sf-palette-mix-800":`28%`,"--sf-palette-mix-900":`12%`,"--sf-palette-mix-950":`5%`}},{label:`Default`,desc:`Balanced contrast`,patch:Object.fromEntries(l.map(e=>[e.name,null]))},{label:`Punchy`,desc:`High contrast palette`,patch:{"--sf-palette-mix-50":`6%`,"--sf-palette-mix-100":`12%`,"--sf-palette-mix-200":`28%`,"--sf-palette-mix-300":`52%`,"--sf-palette-mix-400":`78%`,"--sf-palette-mix-600":`90%`,"--sf-palette-mix-700":`72%`,"--sf-palette-mix-800":`50%`,"--sf-palette-mix-900":`26%`,"--sf-palette-mix-950":`12%`}}],d=[{name:`--sf-color-link`,label:`Link`},{name:`--sf-color-link--visited`,label:`Link visited`},{name:`--sf-color-mark-bg`,label:`Mark background`},{name:`--sf-color-mark-text`,label:`Mark text`},{name:`--sf-color-code-bg`,label:`Code background`},{name:`--sf-color-code-text`,label:`Code text`},{name:`--sf-color-overlay`,label:`Overlay`},{name:`--sf-color-black`,label:`Black`},{name:`--sf-color-white`,label:`White`},{name:`--sf-color-dim`,label:`Dim (translucent black)`}],f=[`50`,`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`,`950`],p=[`primary`,`secondary`,`tertiary`,`action`,`neutral`],m={50:.97,100:.94,200:.88,300:.78,400:.65,500:.5,600:.37,700:.27,800:.17,900:.11,950:.06},g=[...p,`base`],_=[{label:`Base`,expr:e=>`var(--sf-color-${e})`},{label:`Subtle`,expr:e=>`var(--sf-color-${e}-subtle)`},{label:`Muted`,expr:e=>`var(--sf-color-${e}-muted)`},{label:`Strong`,expr:e=>`var(--sf-color-${e}-strong)`}],v=[...s,...c],y=[{heading:`Brand`,items:[{name:`--sf-color-primary`,label:`Primary`,fg:`--sf-color-text--on-primary`},{name:`--sf-color-secondary`,label:`Secondary`,fg:`--sf-color-text--on-secondary`},{name:`--sf-color-tertiary`,label:`Tertiary`,fg:`--sf-color-text--on-tertiary`},{name:`--sf-color-action`,label:`Action`,fg:`--sf-color-text--on-action`},{name:`--sf-color-neutral`,label:`Neutral`,fg:`--sf-color-text--on-neutral`}]},{heading:`Status`,items:[{name:`--sf-color-success`,label:`Success`,fg:`--sf-color-text--on-success`},{name:`--sf-color-warning`,label:`Warning`,fg:`--sf-color-text--on-warning`},{name:`--sf-color-info`,label:`Info`,fg:`--sf-color-text--on-info`},{name:`--sf-color-danger`,label:`Danger`,fg:`--sf-color-text--on-danger`}]},{heading:`Surfaces & text`,items:[{name:`--sf-color-bg`,label:`Bg`,fg:`--sf-color-text`},{name:`--sf-color-surface`,label:`Surface`,fg:`--sf-color-text`},{name:`--sf-color-raised`,label:`Raised`,fg:`--sf-color-text`},{name:`--sf-color-inset`,label:`Inset`,fg:`--sf-color-text`},{name:`--sf-color-inverse`,label:`Inverse`,fg:`--sf-color-text--on-inverse`}]}],b=(Hl.colors??[]).filter(e=>e.name===`--sf-contrast-bias`||e.name===`--sf-contrast-threshold`),x=(Hl.colors??[]).filter(e=>e.name===`--sf-focus-ring-width`),S=L(!1),C=L(!1),w=L(!1),T=L(!1),E=L(!1),D=L(!1),O=L(!1),k=L(!1),ee=L(`light`),te=nn({}),ne=I(()=>parseFloat(t.overrides[`--sf-lumlocker`]??`0.65`));function A(e){let t=e.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!t)return null;let n=t[1],r=t[2].trim(),i=r.startsWith(`to `),a=i?r.slice(3).trim():`right`,o=i?0:parseInt(r),s=0,c=0,l=[],u=t[3];for(let e=0;ee.name===r)?.default??``;return i?`oklch(from ${i} ${U(ne)} c h)`:``}let oe=L(nn(new Set(v.filter(e=>e.side===`light`&&!((v.find(t=>t.colorKey===e.colorKey&&t.side===`dark`)?.name??``)in t.overrides)).map(e=>e.colorKey)))),se=I(()=>{let e={};for(let n of t.tokens)v.some(e=>e.name===n.name)&&(e[n.name]=n);return e});function N(e){return e?t.overrides[e.name]??U(se)[e.name]?.value??e.default:``}function ce(e){return v.find(t=>t.name===e)}let le=I(()=>u.find(e=>Object.entries(e.patch).every(([e,n])=>n===null?!(e in t.overrides):t.overrides[e]===n)));function ue(e){let n=t.overrides[e.name];return n?parseFloat(n):e.default}let de=[];for(let e=0;ee.label===t);if(!a)return e;let o=`color-mix(in oklab, ${e} ${ue(a)}%, ${i?n:r})`;return pl(o)||o}function ye(e,t){sl.value;let n=m[t];if(n===void 0)return e;let r=`oklch(from ${e} ${n} c h)`;return pl(r)||r}function be(e,t,n,r,i){return e===`base`?ye(t,n):ve(t,n,r,i)}function xe(e,n,r){t.onSet(e.name,r)}function Se(e,n,r){let i=!!(n&&n.name in t.overrides);if(U(oe).has(e)&&!i){let i=N(v.find(e=>e.name===r));n&&t.onSet(n.name,pe(i,e)),R(oe,new Set([...U(oe)].filter(t=>t!==e)),!0)}else n&&t.onBulkChange({[n.name]:null}),R(oe,new Set([...U(oe),e]),!0)}let Ce=[{label:`Body text on surface`,fg:`var(--sf-color-text)`,bg:`var(--sf-color-surface)`},{label:`White on primary`,fg:`#ffffff`,bg:`var(--sf-color-primary)`},{label:`Primary on surface`,fg:`var(--sf-color-primary)`,bg:`var(--sf-color-surface)`}];function we(e,t){sl.value;let n=_l(e),r=_l(t);return!n||!r?null:Gl(Wl(...n),Wl(...r))}var Te=od(),Ee=z(Te),De=V(z(Ee),4);Y(De,21,()=>y,e=>e.heading,(e,t)=>{var n=Du(),r=z(n),a=z(r,!0);F(r),Y(V(r,2),16,()=>[`light`,`dark`],e=>e,(e,n)=>{var r=Eu(),a=z(r),o=z(a,!0);F(a);var s=V(a,2);Y(s,21,()=>U(t).items,e=>e.name,(e,t)=>{let r=I(()=>i(`var(${U(t).name})`,n,`transparent`)),a=I(()=>i(`var(${U(t).fg})`,n,`currentColor`));var o=Tu(),s=V(z(o),2),c=z(s,!0);F(s),F(o),H(()=>{Z(o,`background:${U(r)}; color:${U(a)}`),Q(o,`title`,`${U(t).name} (${n}) — ${U(r)}`),q(c,U(t).label)}),K(e,o)}),F(s),F(r),H(()=>q(o,n===`light`?`L`:`D`)),K(e,r)}),F(n),H(()=>q(a,U(t).heading)),K(e,n)}),F(De),F(Ee);var P=V(Ee,4),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var r=Fu(),i=V(B(r),2);Y(i,21,()=>de,([e,t])=>e.name,(e,r)=>{var i=I(()=>h(U(r),2));let a=()=>U(i)[0],o=()=>U(i)[1],s=I(()=>!!(o()&&o().name in t.overrides)),c=I(()=>U(oe).has(a().colorKey)&&!U(s));var l=Pu(),u=z(l),d=z(u),p=z(d,!0);F(d);var m=V(d,2),_=e=>{var t=Ou(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(c)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300`:`border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(n,U(c)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(a().colorKey,o(),a().name)),K(e,t)};J(m,e=>{o()&&e(_)}),F(u);var v=V(u,2);{let e=I(()=>`${a().label} (light)`),n=I(()=>N(a())),r=I(()=>a().name in t.overrides);tu(v,{get label(){return U(e)},get tokenName(){return a().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>xe(a(),o(),e),onReset:()=>t.onReset(a().name)})}var y=V(v,2),b=e=>{let t=I(()=>N(a())),n=I(()=>U(c)?pe(U(t),a().colorKey):o()?N(o()):U(t)),r=I(me),i=I(he),s=I(ge),l=I(_e);var u=Mu(),d=B(u),p=z(d),m=V(z(p),2);Y(m,20,()=>f,e=>e,(e,n)=>{let i=I(()=>be(a().colorKey,U(t),n,U(r),U(s)));var o=ku();let c;Cu(z(o),()=>`${a().colorKey}-${n}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${n} (light) — ${U(i)}`),c=Z(o,``,c,{background:U(i)})}),K(e,o)}),F(m),F(p);var h=V(p,2),g=V(z(h),2);Y(g,20,()=>f,e=>e,(e,t)=>{let r=I(()=>be(a().colorKey,U(n),t,U(i),U(l)));var o=Au();let s;Cu(z(o),()=>`${a().colorKey}-${t}`),F(o),H(()=>{Q(o,`title`,`${a().colorKey}-${t} (dark) — ${U(r)}`),s=Z(o,``,s,{background:U(r)})}),K(e,o)}),F(g),F(h),F(d);var _=V(d,2),v=e=>{K(e,ju())};J(_,e=>{a().colorKey===`base`&&e(v)}),K(e,u)},x=I(()=>g.includes(a().colorKey));J(y,e=>{U(x)&&e(b)});var S=V(y,2),C=e=>{{let n=I(()=>`${o().label} (dark mode)`),r=I(()=>N(o())),i=I(()=>o().name in t.overrides);tu(e,{get label(){return U(n)},get tokenName(){return o().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}},w=e=>{let t=I(()=>pe(N(a()),a().colorKey));var r=Nu(),i=z(r);let o;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),o=Z(i,``,o,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(S,e=>{o()&&!U(c)?e(C):o()&&U(c)&&e(w,1)}),F(l),H(()=>q(p,a().label)),K(e,l)}),F(i),K(e,r)};J(je,e=>{U(S)&&e(Ne)}),F(P);var Pe=V(P,4),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var r=Lu(),a=V(B(r),2);{let e=I(()=>`--sf-lumlocker`in t.overrides);$(a,{label:`LumLocker lightness (L)`,get value(){return U(ne)},min:0,max:1,step:.01,help:`--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-lumlocker`,String(e)),onReset:()=>t.onReset(`--sf-lumlocker`)})}var s=V(a,2);Y(V(z(s),2),17,()=>o,e=>e.key,(e,t)=>{var r=Xr();Y(B(r),16,()=>[`light`,`dark`],e=>e,(e,r)=>{let a=I(()=>i(`var(--sf-color-${U(t).key}-source-${r})`,r,``)),o=I(()=>ae(U(t).key,r));var s=Iu(),c=z(s),l=z(c),u=V(l),d=z(u,!0);F(u),F(c);var f=V(c,2),p=V(f,4);F(s),H(e=>{q(l,`${U(t).label??``} `),q(d,r===`light`?`L`:`D`),Z(f,`background:${U(a)||`var(--sf-color-${U(t).key})`}`),Z(p,e),Q(p,`title`,U(o))},[()=>`background:${n(U(o),U(o))}`]),K(e,s)}),K(e,r)}),F(s);var c=V(s,2),l=z(c,!0);F(c),H(()=>{X(c,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${yl.value?`bg-indigo-600/25 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/10 dark:border-white/10 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(l,yl.value?`✓ LumLocker active on canvas — click to disable`:`Preview LumLocker on live canvas`)}),W(`click`,c,()=>{yl.value=!yl.value}),K(e,r)};J(Re,e=>{U(k)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var r=Hu(),a=V(B(r),2);Y(a,21,()=>fe,([e,t])=>e.name,(e,r)=>{var a=I(()=>h(U(r),2));let o=()=>U(a)[0],s=()=>U(a)[1],c=I(()=>!!(s()&&s().name in t.overrides)),l=I(()=>U(oe).has(o().colorKey)&&!U(c));var u=Vu(),d=z(u),f=z(d),p=z(f,!0);F(f);var m=V(f,2),g=e=>{var t=Ou(),n=z(t,!0);F(t),H(()=>{X(t,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${U(l)?`border-indigo-500/40 bg-indigo-500/15 text-indigo-700 dark:text-indigo-300`:`border-black/10 dark:border-white/10 text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(n,U(l)?`Auto dark`:`Manual dark`)}),W(`click`,t,()=>Se(o().colorKey,s(),o().name)),K(e,t)};J(m,e=>{s()&&e(g)}),F(d);var v=V(d,2);{let e=I(()=>`${o().label} light`),n=I(()=>N(o())),r=I(()=>o().name in t.overrides);tu(v,{get label(){return U(e)},get tokenName(){return o().name},get value(){return U(n)},get overridden(){return U(r)},onChange:e=>t.onSet(o().name,e),onReset:()=>t.onReset(o().name)})}var y=V(v,2),b=e=>{{let n=I(()=>`${s().label} dark`),r=I(()=>N(s())),i=I(()=>s().name in t.overrides);tu(e,{get label(){return U(n)},get tokenName(){return s().name},get value(){return U(r)},get overridden(){return U(i)},onChange:e=>t.onSet(s().name,e),onReset:()=>t.onReset(s().name)})}},x=e=>{let t=I(()=>pe(N(o()),o().colorKey));var r=Nu(),i=z(r);let a;var s=V(i);F(r),H(e=>{Q(i,`title`,U(t)),a=Z(i,``,a,e),q(s,` Dark: auto-derived (${U(t)??``})`)},[()=>({background:n(U(t),U(t))})]),K(e,r)};J(y,e=>{s()&&!U(l)?e(b):s()&&U(l)&&e(x,1)});var S=V(y,2),C=z(S),w=V(z(C),2);Y(w,21,()=>_,e=>e.label,(e,t)=>{var n=Ru(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(w),F(C),Y(V(C,2),16,()=>[[`L`,`light`],[`D`,`dark`]],([e,t])=>e,(e,t)=>{var n=I(()=>h(t,2));let r=()=>U(n)[0],a=()=>U(n)[1];var s=Bu(),c=z(s),l=z(c,!0);F(c);var u=V(c,2);Y(u,21,()=>_,e=>e.label,(e,t)=>{let n=I(()=>i(U(t).expr(o().colorKey),a(),``));var r=zu();let s;var c=z(r);{let e=I(()=>`${o().colorKey}-${U(t).label.toLowerCase()}`);Cu(c,()=>U(e))}F(r),H(e=>{Q(r,`title`,e),s=Z(r,``,s,{background:U(n)})},[()=>`${o().colorKey}-${U(t).label.toLowerCase()} (${a()}) — ${U(n)}`]),K(e,r)}),F(u),F(s),H(()=>q(l,r())),K(e,s)}),F(S),Me(2),F(u),H(()=>q(p,o().label)),K(e,u)}),F(a),K(e,r)};J(Ke,e=>{U(T)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var r=Gu(),i=V(B(r),2);Y(i,17,()=>b,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})});var a=V(i,2),o=z(a);Y(o,17,()=>Ce,e=>e.label,(e,t)=>{let r=I(()=>we(U(t).fg,U(t).bg));var i=Xr(),a=B(i),o=e=>{var i=Uu(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H((e,n)=>{Z(a,e),q(s,U(t).label),q(l,`${n??``}:1`),X(u,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${U(r)>=4.5?`bg-emerald-500/20 text-emerald-700 dark:text-emerald-300`:`bg-amber-500/20 text-amber-700 dark:text-amber-300`}`),q(d,U(r)>=4.5?`AA`:U(r)>=3?`AA-L`:`✗`)},[()=>`background:${n(U(t).bg,U(t).bg)}; color:${n(U(t).fg,U(t).fg)}`,()=>U(r).toFixed(2)]),K(e,i)};J(a,e=>{U(r)!==null&&e(o)}),K(e,i)});var s=V(o,2),c=e=>{var n=Wu();W(`click`,n,()=>t.onSelectDomain?.(`wcag`)),K(e,n)};J(s,e=>{t.onSelectDomain&&e(c)}),F(a),Y(V(a,2),17,()=>x,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),K(e,r)};J(Qe,e=>{U(C)&&e($e)}),F(Je);var et=V(Je,4),tt=z(et),nt=V(z(tt),2),rt=z(nt,!0);F(nt),F(tt);var it=V(tt,2),at=e=>{let n=I(()=>t.overrides[`--sf-color-primary-source-light`]??s.find(e=>e.name===`--sf-color-primary-source-light`)?.default??`oklch(0.47 0.27 264)`),r=I(()=>t.overrides[`--sf-color-primary-source-dark`]),i=I(()=>U(r)??(!U(oe).has(`primary`)||U(r)?s.find(e=>e.name===`--sf-color-primary-source-dark`)?.default??pe(U(n),`primary`):pe(U(n),`primary`))),a=I(()=>U(ee)===`light`?U(n):U(i)),o=I(()=>U(ee)===`light`?me():he()),c=I(()=>U(ee)===`light`?ge():_e()),d=I(()=>U(ee)===`light`?me():he()),m=I(()=>U(ee)===`light`?ge():_e());var h=Xu(),g=V(B(h),2);Y(g,21,()=>u,e=>e.label,(e,n)=>{var r=Ku(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o,!0);F(o),F(r),H(()=>{X(r,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${U(le)?.label===U(n).label?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,U(n).label),q(s,U(n).desc)}),W(`click`,r,()=>t.onBulkChange(U(n).patch)),K(e,r)}),F(g);var _=V(g,2),v=V(z(_),2);Y(v,21,()=>l.filter(e=>e.step===`tint`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(v),F(_);var y=V(_,2),b=V(z(y),2);Y(b,21,()=>l.filter(e=>e.step===`shade`),e=>e.name,(e,n)=>{{let r=I(()=>ue(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,max:100,step:1,unit:`%`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}%`),onReset:()=>t.onReset(U(n).name)})}}),F(b),F(y);var x=V(y,2),S=z(x),C=V(z(S),2);Y(C,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=Ou(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(ee)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(ee,t,!0)}),K(e,n)}),F(C),F(S);var w=V(S,2);Y(w,21,()=>l,e=>e.name,(e,t)=>{let n=I(()=>ue(U(t))),r=I(()=>U(t).label),i=I(()=>ve(U(a),U(r),U(o),U(c)));var s=qu(),l=z(s),u=z(l,!0);F(l);var d=V(l,2);Cu(z(d),()=>`primary-${U(r)}`),F(d);var f=V(d,2),p=z(f,!0);F(f),F(s),H((e,t,n)=>{q(u,e),Z(d,t),Q(d,`title`,n),q(p,U(r))},[()=>Math.round(U(n)),()=>`background:${U(i)}; height: ${Math.max(U(n)/100*56,6)}px`,()=>`primary-${U(r)} (${U(ee)}) · mix ${Math.round(U(n))}%`]),K(e,s)}),F(w),Me(2),F(x);var T=V(x,2),E=z(T),D=V(z(E),2);Y(D,20,()=>[`light`,`dark`],e=>e,(e,t)=>{var n=Ou(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${U(ee)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t===`light`?`Light`:`Dark`)}),W(`click`,n,()=>{R(ee,t,!0)}),K(e,n)}),F(D),F(E),Y(V(E,2),16,()=>p,e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-color-${n}-source-light`]??s.find(e=>e.name===`--sf-color-${n}-source-light`)?.default??`oklch(0.5 0.15 264)`),i=I(()=>`--sf-color-${n}-source-dark`),a=I(()=>t.overrides[U(i)]??(U(oe).has(n)&&!t.overrides[U(i)]?pe(U(r),n):s.find(e=>e.name===U(i))?.default??pe(U(r),n))),o=I(()=>U(ee)===`light`?U(r):U(a));var c=Yu(),l=z(c),u=z(l,!0);F(l);var p=V(l,2);Y(p,20,()=>f,e=>e,(e,t)=>{let r=I(()=>ve(U(o),t,U(d),U(m)));var i=Ju();Cu(z(i),()=>`${n}-${t}`),F(i),H(()=>{Z(i,`background:${U(r)}`),Q(i,`title`,`${n}-${t} (${U(ee)})`)}),K(e,i)}),F(p),F(c),H(()=>q(u,n)),K(e,c)}),F(T),K(e,h)};J(it,e=>{U(w)&&e(at)}),F(et);var ot=V(et,4),st=z(ot),ct=V(z(st),2),lt=z(ct,!0);F(ct),F(st);var ut=V(st,2),dt=e=>{var n=nd();Y(V(B(n),2),16,()=>[`brand`,`fade`],e=>e,(e,n)=>{var i=td(),o=B(i),s=z(o,!0);F(o);var c=V(o,2);Y(c,21,()=>a.filter(e=>e.group===n),e=>e.name,(e,n)=>{let i=I(()=>`var(${U(n).name})`),a=I(()=>M(U(n)));var o=ed(),s=z(o),c=V(s,2),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{var r=Zu();W(`click`,r,()=>{delete te[U(n).name],t.onReset(U(n).name)}),K(e,r)};J(f,e=>{U(n).name in t.overrides&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Qu();Y(V(z(t),2),16,()=>[`top`,`right`,`bottom`,`left`],e=>e,(e,t)=>{var r=Ou(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${U(a).dir===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(i,t)}),W(`click`,r,()=>ie(U(n),`dir`,t)),K(e,r)}),F(t),K(e,t)},g=e=>{var t=$u(),r=V(z(t),2);zi(r);var i=V(r,2),o=z(i);F(i),F(t),H(()=>{Bi(r,U(a).angle),q(o,`${U(a).angle??``}°`)}),W(`input`,r,e=>ie(U(n),`angle`,parseInt(e.target.value))),K(e,t)};J(m,e=>{U(n).kind===`dir`&&U(n).group!==`fade`?e(h):U(n).kind!==`dir`&&e(g,1)});var _=V(m,2),v=V(z(_),2);zi(v);var y=V(v,2);zi(y),F(_);var b=V(_,2),x=V(z(b));F(b);var S=V(b,2);zi(S),F(c),F(o),H(e=>{Z(s,e),q(d,U(n).label),Bi(v,U(a).stop1),Bi(y,U(a).stop2),q(x,` ${U(n).formula??``}`),Bi(S,t.overrides[U(n).name]??``)},[()=>`background:${r(U(i),U(i))}`]),W(`change`,v,e=>ie(U(n),`stop1`,e.target.value.trim())),W(`change`,y,e=>ie(U(n),`stop2`,e.target.value.trim())),W(`change`,S,e=>{let r=e.target.value.trim();delete te[U(n).name],r?t.onSet(U(n).name,r):t.onReset(U(n).name)}),K(e,o)}),F(c),H(()=>q(s,n===`brand`?`Brand & surface`:`Edge fades`)),K(e,i)}),K(e,n)};J(ut,e=>{U(O)&&e(dt)}),F(ot);var ft=V(ot,4),pt=z(ft),mt=V(z(pt),2),ht=z(mt,!0);F(mt),F(pt);var gt=V(pt,2),_t=e=>{var n=rd(),r=V(B(n),2);Y(r,20,()=>[[`light dark`,`light dark (default)`],[`light`,`Light only`],[`dark`,`Dark only`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-color-scheme`]??`light dark`);var s=Ou(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`light dark`?t.onReset(`--sf-color-scheme`):t.onSet(`--sf-color-scheme`,i())),K(e,s)}),F(r),K(e,n)};J(gt,e=>{U(D)&&e(_t)}),F(ft);var vt=V(ft,4),yt=z(vt),bt=V(z(yt),2),xt=z(bt,!0);F(bt),F(yt);var St=V(yt,2),Ct=e=>{var r=ad(),i=V(B(r),2);Y(i,21,()=>d,e=>e.name,(e,r)=>{let i=I(()=>n(`var(${U(r).name})`,``));var a=id(),o=z(a),s=z(o,!0);F(o);var c=V(o,2);{let e=I(()=>t.overrides[U(r).name]??``),n=I(()=>U(i)?`auto-derived · ${U(i)}`:`auto-derived`),a=I(()=>U(r).name in t.overrides);Su(c,{get token(){return U(r).name},get value(){return U(e)},get placeholder(){return U(n)},get isOverridden(){return U(a)},onSet:e=>t.onSet(U(r).name,e),onReset:()=>t.onReset(U(r).name)})}F(a),H(()=>q(s,U(r).label)),K(e,a)}),F(i),K(e,r)};J(St,e=>{U(E)&&e(Ct)}),F(vt),Me(2),F(Te),H(()=>{Q(Oe,`aria-expanded`,U(S)),q(Ae,U(S)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(k)),q(Le,U(k)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(T)),q(Ge,U(T)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(C)),q(Ze,U(C)?`▲`:`▼`),Q(tt,`aria-expanded`,U(w)),q(rt,U(w)?`▲`:`▼`),Q(st,`aria-expanded`,U(O)),q(lt,U(O)?`▲`:`▼`),Q(pt,`aria-expanded`,U(D)),q(ht,U(D)?`▲`:`▼`),Q(yt,`aria-expanded`,U(E)),q(xt,U(E)?`▲`:`▼`)}),W(`click`,Oe,()=>{R(S,!U(S))}),W(`click`,Fe,()=>{R(k,!U(k))}),W(`click`,Ve,()=>{R(T,!U(T))}),W(`click`,Ye,()=>{R(C,!U(C))}),W(`click`,tt,()=>{R(w,!U(w))}),W(`click`,st,()=>{R(O,!U(O))}),W(`click`,pt,()=>{R(D,!U(D))}),W(`click`,yt,()=>{R(E,!U(E))}),K(e,Te),We()}Br([`click`,`input`,`change`]);var cd=G(`
Aa Aa
`),ld=G(`
min
max
`),ud=G(``),dd=G(``),fd=G(`
`),pd=G(`
Modular scale ratio
`),md=G(`
`),hd=G(`
clamp( … )
`);function gd(e,t){Ue(t,!0);let n=na(t,`unit`,3,`rem`),r=na(t,`minLabel`,3,`Min`),i=na(t,`maxLabel`,3,`Max`),a=na(t,`overridden`,3,!1),o=na(t,`ratioMin_bound`,3,1.05),s=na(t,`ratioMax_bound`,3,1.8),c=na(t,`previewKind`,3,`none`);function l(e){return Math.min(t.max,Math.max(t.min,e))}let u=I(()=>(t.minValue-t.min)/(t.max-t.min)*100),d=I(()=>(t.maxValue-t.min)/(t.max-t.min)*100);function f(e){return Math.min(s(),Math.max(o(),e))}let p=I(()=>t.ratioPresets?.find(e=>t.ratioMin!==void 0&&Math.abs(e.value-t.ratioMin)<.0015)?.value),m=I(()=>t.ratioPresets?.find(e=>t.ratioMax!==void 0&&Math.abs(e.value-t.ratioMax)<.0015)?.value);var h=hd(),g=z(h),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=V(z(y)),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),Me(),F(y),F(g);var w=V(g,2),T=V(z(w),2),E=V(T,2);zi(E);var D=V(E,2);zi(D);var O=V(D,2),k=V(O,2);F(w);var ee=V(w,2),te=z(ee),ne=z(te),A=z(ne,!0);F(ne);var j=V(ne,2);zi(j),F(te);var M=V(te,2),re=z(M),ie=z(re,!0);F(re);var ae=V(re,2);zi(ae),F(M),F(ee);var oe=V(ee,2),se=e=>{var n=cd(),a=z(n),o=V(z(a)),s=z(o,!0);F(o),F(a);var c=V(a,2),l=V(z(c)),u=z(l,!0);F(l),F(c),F(n),H((e,t,n,r)=>{Z(a,e),q(s,t),Z(c,n),q(u,r)},[()=>`font-size:${Math.min(t.minValue,2)}rem`,()=>r().toLowerCase(),()=>`font-size:${Math.min(t.maxValue,2.6)}rem`,()=>i().toLowerCase()]),K(e,n)},N=e=>{var n=ld(),r=z(n),i=V(r,4);Me(2),F(n),H((e,t)=>{Z(r,e),Z(i,t)},[()=>`width:${Math.min(t.minValue*28,120)}px`,()=>`width:${Math.min(t.maxValue*28,200)}px`]),K(e,n)};J(oe,e=>{c()===`type`?e(se):c()===`space`&&e(N,1)});var ce=V(oe,2),le=e=>{var n=pd(),a=V(z(n),2);Y(a,21,()=>[{side:r(),value:t.ratioMin,active:U(p),onChange:t.onRatioMinChange},{side:i(),value:t.ratioMax,active:U(m),onChange:t.onRatioMaxChange}],e=>e.side,(e,n)=>{var r=fd(),i=z(r),a=z(i,!0);F(i);var c=V(i,2),l=z(c),u=e=>{var t=ud();t.value=t.__value=``,K(e,t)};J(l,e=>{U(n).active===void 0&&e(u)}),Y(V(l),17,()=>t.ratioPresets,e=>e.value,(e,t)=>{var n=dd(),r=z(n,!0);F(n);var i={};H(e=>{q(r,U(t).label),i!==(i=e)&&(n.value=(n.__value=e)??``)},[()=>String(U(t).value)]),K(e,n)}),F(c);var d;Di(c);var p=V(c,2);zi(p),Q(p,`step`,.001),F(r),H(e=>{q(a,U(n).side),Q(c,`aria-label`,`${U(n).side} modular scale ratio preset`),d!==(d=e)&&(c.value=(c.__value=e)??``,Ei(c,e)),Q(p,`aria-label`,`${U(n).side} modular scale custom ratio`),Q(p,`min`,o()),Q(p,`max`,s()),Bi(p,U(n).value)},[()=>U(n).active===void 0?``:String(U(n).active)]),W(`change`,c,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),W(`change`,p,e=>{let t=parseFloat(e.target.value);Number.isFinite(t)&&U(n).onChange?.(f(t))}),K(e,r)}),F(a),F(n),K(e,n)};J(ce,e=>{t.ratioPresets&&e(le)});var ue=V(ce,2),de=e=>{var n=md(),r=z(n);F(n),W(`click`,r,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(ue,e=>{a()&&t.onReset&&e(de)}),F(h),H(e=>{X(h,1,`rounded-xl border p-3 ${a()?`bg-indigo-500/8 border-indigo-500/25`:`bg-black/4 dark:bg-white/4 border-black/8 dark:border-white/8`}`,`svelte-iy59wr`),q(v,t.title),q(x,`${t.minValue??``}${n()??``}`),q(C,`${t.maxValue??``}${n()??``}`),Z(T,e),Q(E,`min`,t.min),Q(E,`max`,t.max),Q(E,`step`,t.step),Bi(E,t.minValue),Q(E,`aria-label`,`${t.title} min`),Q(D,`min`,t.min),Q(D,`max`,t.max),Q(D,`step`,t.step),Bi(D,t.maxValue),Q(D,`aria-label`,`${t.title} max`),Z(O,`left: calc(${U(u)}% - 6px)`),Z(k,`left: calc(${U(d)}% - 6px)`),q(A,r()),Q(j,`min`,t.min),Q(j,`max`,t.max),Q(j,`step`,t.step),Bi(j,t.minValue),q(ie,i()),Q(ae,`min`,t.min),Q(ae,`max`,t.max),Q(ae,`step`,t.step),Bi(ae,t.maxValue)},[()=>`left:${Math.min(U(u),U(d))}%; right:${100-Math.max(U(u),U(d))}%`]),W(`input`,E,e=>t.onMinChange(Math.min(l(parseFloat(e.target.value)),t.maxValue))),W(`input`,D,e=>t.onMaxChange(Math.max(l(parseFloat(e.target.value)),t.minValue))),W(`change`,j,e=>t.onMinChange(l(parseFloat(e.target.value)||t.min))),W(`change`,ae,e=>t.onMaxChange(l(parseFloat(e.target.value)||t.max))),K(e,h),We()}Br([`input`,`change`,`click`]);var _d=G(``),vd=G(``),yd=G(``),bd=G(`
`),xd=G(`
Google Font
`,1),Sd=G(``),Cd=G(``),wd=G(``),Td=G(``),Ed=G(`
Tracking
`),Dd=G(`
Max width
`),Od=G(``),kd=G(`
The quick brown fox
Size
Line height
Weight
`,1),Ad=G(``),jd=G(`
`),Md=G(``),Nd=G(`
`),Pd=G(`
Emphasis style
External marker
`,1),Fd=G(``),Id=G(`
`),Ld=G(`

Named weight tokens. Override if your font uses non-standard axis values.

`,1),Rd=G(`
`),zd=G(`
`,1),Bd=G(`
`),Vd=G(`
`),Hd=G(`

Utopia-style fluid scale. Each endpoint has three values — viewport width, + base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.

Line height scale
Letter-spacing scale

Overriding these propagates to heading sizes that reference them.

`,1),Ud=G(`
Aa
`),Wd=G(`
`),Gd=G(``),Kd=G(`
`),qd=G(`

Per-text-size max-width caps on .sf-text-* elements. Set to none to remove the constraint; use ch units for character-based measures.

`,1),Jd=G(`

Advanced OpenType and variable-font axes. Leave as normal unless your font supports these features.

Numeric figures
Optical sizing
Font features
Variation
`,1),Yd=G(`
`);function Xd(e,t){Ue(t,!0);let n=[{label:`Minor Second — 1.067`,value:1.067},{label:`Major Second — 1.125`,value:1.125},{label:`Minor Third — 1.200`,value:1.2},{label:`Major Third — 1.250`,value:1.25},{label:`Perfect Fourth — 1.333`,value:1.333},{label:`Aug. Fourth — 1.414`,value:1.414},{label:`Golden — 1.618`,value:1.618}],r=[{label:`System sans-serif`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Merriweather (serif)`,value:`'Merriweather', Georgia, serif`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`}],i=[{label:`Same as body`,value:``},{label:`Geometric (Avenir, Montserrat…)`,value:`var(--sf-font-geometric)`},{label:`Humanist (Seravek, Gill Sans…)`,value:`var(--sf-font-humanist)`},{label:`Slab serif (Rockwell, Roboto Slab…)`,value:`var(--sf-font-slab)`},{label:`Inter`,value:`Inter, system-ui, sans-serif`},{label:`Georgia (serif)`,value:`Georgia, 'Times New Roman', serif`},{label:`Impact / condensed`,value:`Impact, 'Arial Narrow', sans-serif`}],a=[{label:`System mono`,value:`ui-monospace, monospace`},{label:`JetBrains Mono`,value:`'JetBrains Mono', 'Fira Code', monospace`},{label:`Source Code Pro`,value:`'Source Code Pro', 'Courier New', monospace`}],o=`Inter.Roboto.Open Sans.Lato.Montserrat.Poppins.Source Sans 3.Raleway.Nunito.Work Sans.Manrope.DM Sans.Outfit.Plus Jakarta Sans.Geist.Space Grotesk.Figtree.Merriweather.Playfair Display.Lora.Source Serif 4.Roboto Slab.IBM Plex Sans.IBM Plex Mono.JetBrains Mono.Fira Code.Space Mono`.split(`.`),s=[{label:`balance`,value:`balance`},{label:`pretty`,value:`pretty`},{label:`normal`,value:`normal`}],c=[`100`,`200`,`300`,`400`,`500`,`600`,`700`,`800`,`900`],l={"--sf-font-weight-body":`400`,"--sf-font-weight-heading":`600`,"--sf-font-weight-display":`700`,"--sf-font-weight-interactive":`600`},u=[{label:`2xs`,factor:.64},{label:`xs`,factor:.75},{label:`s`,factor:.875},{label:`m`,factor:1},{label:`l`,factor:1.125},{label:`xl`,factor:1.25},{label:`2xl`,factor:1.5},{label:`3xl`,factor:1.875},{label:`4xl`,factor:2.25}],d=[{label:`Tight`,token:`--sf-tracking-tight`,default:-.025},{label:`Normal`,token:`--sf-tracking-normal`,default:0},{label:`Wide`,token:`--sf-tracking-wide`,default:.025},{label:`Wider`,token:`--sf-tracking-wider`,default:.05},{label:`Widest`,token:`--sf-tracking-widest`,default:.1}],f=[{label:`Tight`,token:`--sf-leading-tight`,default:1.1},{label:`Snug`,token:`--sf-leading-snug`,default:1.3},{label:`Normal`,token:`--sf-leading-normal`,default:1.5},{label:`Relaxed`,token:`--sf-leading-relaxed`,default:1.625}],p=[{label:`2xs`,value:`var(--sf-text-2xs)`,approx:.64},{label:`xs`,value:`var(--sf-text-xs)`,approx:.75},{label:`s`,value:`var(--sf-text-s)`,approx:.875},{label:`m`,value:`var(--sf-text-m)`,approx:1},{label:`l`,value:`var(--sf-text-l)`,approx:1.125},{label:`xl`,value:`var(--sf-text-xl)`,approx:1.25},{label:`2xl`,value:`var(--sf-text-2xl)`,approx:1.5},{label:`3xl`,value:`var(--sf-text-3xl)`,approx:1.875},{label:`4xl`,value:`var(--sf-text-4xl)`,approx:2.25},{label:`display-s`,value:`var(--sf-text-display-s)`,approx:2.6},{label:`display-m`,value:`var(--sf-text-display-m)`,approx:3.2},{label:`display-l`,value:`var(--sf-text-display-l)`,approx:3.8}],m=f.map(e=>({label:e.label,value:`var(${e.token})`,num:e.default})),g=d.map(e=>({label:e.label,value:`var(${e.token})`,em:e.default})),_=[{id:`body`,label:`Body`,size:`--sf-body-font-size`,lh:`--sf-body-line-height`,wt:`--sf-body-font-weight`,ls:null,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`400`,dLs:``},{id:`h1`,label:`H1`,size:`--sf-h1-size`,lh:`--sf-h1-line-height`,wt:`--sf-h1-font-weight`,ls:`--sf-h1-letter-spacing`,dSize:`var(--sf-text-4xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h2`,label:`H2`,size:`--sf-h2-size`,lh:`--sf-h2-line-height`,wt:`--sf-h2-font-weight`,ls:`--sf-h2-letter-spacing`,dSize:`var(--sf-text-3xl)`,dLh:`var(--sf-leading-tight)`,dWt:`600`,dLs:`var(--sf-tracking-tight)`},{id:`h3`,label:`H3`,size:`--sf-h3-size`,lh:`--sf-h3-line-height`,wt:`--sf-h3-font-weight`,ls:`--sf-h3-letter-spacing`,dSize:`var(--sf-text-2xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h4`,label:`H4`,size:`--sf-h4-size`,lh:`--sf-h4-line-height`,wt:`--sf-h4-font-weight`,ls:`--sf-h4-letter-spacing`,dSize:`var(--sf-text-xl)`,dLh:`var(--sf-leading-snug)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h5`,label:`H5`,size:`--sf-h5-size`,lh:`--sf-h5-line-height`,wt:`--sf-h5-font-weight`,ls:`--sf-h5-letter-spacing`,dSize:`var(--sf-text-l)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-normal)`},{id:`h6`,label:`H6`,size:`--sf-h6-size`,lh:`--sf-h6-line-height`,wt:`--sf-h6-font-weight`,ls:`--sf-h6-letter-spacing`,dSize:`var(--sf-text-m)`,dLh:`var(--sf-leading-normal)`,dWt:`600`,dLs:`var(--sf-tracking-wide)`}],v=L(`h1`),y=I(()=>_.find(e=>e.id===U(v))),b=Hl.typography??[];function x(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let S=I(()=>x(`--sf-text-ratio-min`,1.25)),C=I(()=>x(`--sf-text-ratio-max`,1.333)),w=I(()=>x(`--sf-text-base-min`,1)),T=I(()=>x(`--sf-text-base-max`,1.25)),E=I(()=>x(`--sf-text-display-base-min`,2.4)),D=I(()=>x(`--sf-text-display-base-max`,3)),O=I(()=>x(`--sf-leading-taper`,0)),k=I(()=>x(`--sf-text-scale`,1)),ee=I(()=>x(`--sf-fluid-min-vw`,22.5)),te=I(()=>x(`--sf-fluid-max-vw`,90)),ne=L(!1),A=L(!1),j=L(!1),M=L(!1),re=L(!1),ie=L(!1),ae=L(!1),oe=L(!1),se=L(!1),N=L(!1),ce=I(()=>t.overrides[`--sf-font-body`]??``),le=I(()=>t.overrides[`--sf-font-heading`]??``),ue=I(()=>t.overrides[`--sf-font-mono`]??`ui-monospace, monospace`),de=L(``),fe=L(`body`);function pe(e){let n=t.overrides[e.token];return n?parseFloat(n.replace(`em`,``)):e.default}function me(e){return x(e.token,e.default)}function he(e){if(!e.trim())return;let t=`gf-${e.replace(/\s+/g,`-`)}`;if(!document.getElementById(t)){let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@100;200;300;400;500;600;700;800;900&display=swap`,document.head.appendChild(n)}}function ge(e,n){if(!e.trim())return;he(e);let r=n===`body`?`--sf-font-body`:`--sf-font-heading`;t.onSet(r,`'${e}', sans-serif`)}function _e(e,n){return e?t.overrides[e]??n:n}function ve(e,n,r){e&&(n===r?t.onReset(e):t.onSet(e,n))}let ye=I(()=>{let e=_e(U(y).size,U(y).dSize),t=p.find(t=>t.value===e),n=(U(w)+U(T))/2;return Math.min((t?.approx??1)*n*U(k),2.4)}),be=I(()=>{let e=_e(U(y).wt,U(y).dWt),t=parseInt(e);return isNaN(t)?600:t}),xe=I(()=>{if(!U(y).ls)return 0;let e=_e(U(y).ls,U(y).dLs),t=g.find(t=>t.value===e);if(t)return t.em;let n=parseFloat(e.replace(`em`,``));return isNaN(n)?0:n}),Se=I(()=>{let e=_e(U(y).lh,U(y).dLh),t=m.find(t=>t.value===e);if(t)return t.num;let n=parseFloat(e);return isNaN(n)?1.3:n});var Ce=Yd(),we=z(Ce),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=xd(),s=B(n);Y(s,17,()=>[{label:`Body`,token:`--sf-font-body`,current:U(ce),opts:r},{label:`Heading`,token:`--sf-font-heading`,current:U(le),opts:i},{label:`Mono`,token:`--sf-font-mono`,current:U(ue),opts:a}],e=>e.token,(e,n)=>{var r=bd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);Y(s,17,()=>U(n).opts,e=>e.label,(e,t)=>{var n=_d(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var c=V(s),l=e=>{var t=vd(),r=z(t);F(t);var i={};H(e=>{q(r,`Custom: ${e??``}`),i!==(i=U(n).current)&&(t.value=(t.__value=U(n).current)??``)},[()=>U(n).current.split(`,`)[0].replace(/['"]/g,``)]),K(e,t)},u=I(()=>U(n).current&&!U(n).opts.some(e=>e.value===U(n).current));J(c,e=>{U(u)&&e(l)}),F(o);var d;Di(o);var f=V(o,2),p=e=>{var r=yd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(f,e=>{U(n).token in t.overrides&&e(p)}),F(r),H(()=>{q(a,U(n).label),Z(o,`font-family: ${U(n).current||`inherit`}`),d!==(d=U(n).current)&&(o.value=(o.__value=U(n).current)??``,Ei(o,U(n).current))}),W(`change`,o,e=>{let r=e.target.value;r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)});var c=V(s,2),l=V(z(c),2),u=z(l),d=z(u);d.value=d.__value=``,Y(V(d),16,()=>o,e=>e,(e,t)=>{var n=vd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(u);var f;Di(u);var p=V(u,2),m=z(p),h=V(m,2);F(p),F(l);var g=V(l,2);zi(g);var _=V(g,2),v=z(_);F(_),F(c),H(()=>{f!==(f=U(de))&&(u.value=(u.__value=U(de))??``,Ei(u,U(de))),X(m,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`body`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400`}`),X(h,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${U(fe)===`heading`?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400`}`),Bi(g,U(de)),q(v,`Load & apply to ${U(fe)??``}`)}),W(`change`,u,e=>{R(de,e.target.value,!0)}),W(`click`,m,()=>{R(fe,`body`)}),W(`click`,h,()=>{R(fe,`heading`)}),W(`input`,g,e=>{R(de,e.target.value,!0)}),W(`click`,_,()=>ge(U(de),U(fe))),K(e,n)};J(P,e=>{U(ne)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Me=z(je,!0);F(je),F(Ae);var Ne=V(Ae,2),Pe=e=>{var n=kd(),r=B(n);Y(r,21,()=>_,e=>e.id,(e,n)=>{let r=I(()=>U(n).size in t.overrides||U(n).lh in t.overrides||U(n).wt in t.overrides||!!U(n).ls&&U(n).ls in t.overrides);var i=Cd(),a=z(i),o=V(a),s=e=>{K(e,Sd())};J(o,e=>{U(r)&&e(s)}),F(i),H(()=>{X(i,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${U(v)===U(n).id?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(a,`${U(n).label??``} `)}),W(`click`,i,()=>{R(v,U(n).id,!0)}),K(e,i)}),F(r);var i=V(r,2),a=z(i);F(i);var o=V(i,2),s=V(z(o),2),l=z(s);Y(l,17,()=>p,e=>e.value,(e,t)=>{var n=vd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var u=V(l),d=e=>{var t=wd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).size,U(y).dSize)]),K(e,t)},f=I(()=>!p.some(e=>e.value===_e(U(y).size,U(y).dSize)));J(u,e=>{U(f)&&e(d)}),F(s);var h;Di(s),F(o);var b=V(o,2),x=V(z(b),2),S=z(x);Y(S,17,()=>m,e=>e.value,(e,t)=>{var n=vd(),r=z(n);F(n);var i={};H(()=>{q(r,`${U(t).label??``} · ${U(t).num??``}`),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var C=V(S),w=e=>{var t=wd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).lh,U(y).dLh)]),K(e,t)},T=I(()=>!m.some(e=>e.value===_e(U(y).lh,U(y).dLh)));J(C,e=>{U(T)&&e(w)}),F(x);var E;Di(x),F(b);var D=V(b,2),O=V(z(D),2);Y(O,20,()=>c,e=>e,(e,t)=>{let n=I(()=>_e(U(y).wt,U(y).dWt));var r=Td(),i=z(r,!0);F(r),H(e=>{Z(r,e),X(r,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(n)===t?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,t)},[()=>`font-weight:${parseInt(t)}`]),W(`click`,r,()=>ve(U(y).wt,t,U(y).dWt)),K(e,r)}),F(O),F(D);var k=V(D,2),ee=e=>{var t=Ed(),n=V(z(t),2),r=z(n);Y(r,17,()=>g,e=>e.value,(e,t)=>{var n=vd(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).value)&&(n.value=(n.__value=U(t).value)??``)}),K(e,n)});var i=V(r),a=e=>{var t=wd(),n={};H(e=>{n!==(n=e)&&(t.value=(t.__value=e)??``)},[()=>_e(U(y).ls,U(y).dLs)]),K(e,t)},o=I(()=>!g.some(e=>e.value===_e(U(y).ls,U(y).dLs)));J(i,e=>{U(o)&&e(a)}),F(n);var s;Di(n),F(t),H(e=>{s!==(s=e)&&(n.value=(n.__value=e)??``,Ei(n,e))},[()=>_e(U(y).ls,U(y).dLs)]),W(`change`,n,e=>ve(U(y).ls,e.target.value,U(y).dLs)),K(e,t)};J(k,e=>{U(y).ls&&e(ee)});var te=V(k,2),ne=e=>{let n=I(()=>`--sf-${U(y).id}-max-width`);var r=Dd(),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var r=yd();W(`click`,r,()=>t.onReset(U(n))),K(e,r)};J(a,e=>{U(n)in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[U(n)]??``)),W(`input`,i,e=>{let r=e.target.value.trim();r?t.onSet(U(n),r):t.onReset(U(n))}),K(e,r)};J(te,e=>{U(y).id!==`body`&&e(ne)});var A=V(te,2),j=z(A),M=e=>{var n=Od(),r=z(n);F(n),H(()=>q(r,`reset ${U(y).label??``}`)),W(`click`,n,()=>{let e={[U(y).size]:null,[U(y).lh]:null,[U(y).wt]:null};U(y).ls&&(e[U(y).ls]=null),t.onBulkChange(e)}),K(e,n)};J(j,e=>{(U(y).size in t.overrides||U(y).lh in t.overrides||U(y).wt in t.overrides||U(y).ls&&U(y).ls in t.overrides)&&e(M)}),F(A),H((e,t)=>{Z(a,`font-size:${U(ye)}rem; font-weight:${U(be)}; letter-spacing:${U(xe)}em; line-height:${U(Se)}; font-family:${U(y).id===`body`?U(ce)||`inherit`:U(le)||U(ce)||`inherit`}`),h!==(h=e)&&(s.value=(s.__value=e)??``,Ei(s,e)),E!==(E=t)&&(x.value=(x.__value=t)??``,Ei(x,t))},[()=>_e(U(y).size,U(y).dSize),()=>_e(U(y).lh,U(y).dLh)]),W(`change`,s,e=>ve(U(y).size,e.target.value,U(y).dSize)),W(`change`,x,e=>ve(U(y).lh,e.target.value,U(y).dLh)),K(e,n)};J(Ne,e=>{U(A)&&e(Pe)}),F(ke);var Fe=V(ke,4),Ie=z(Fe),Le=V(z(Ie),2),Re=z(Le,!0);F(Le),F(Ie);var ze=V(Ie,2),Be=e=>{var n=Pd(),r=B(n);Y(r,16,()=>[{label:`Body strong`,tokenName:`--sf-font-weight-strong`},{label:`Interactive`,tokenName:`--sf-font-weight-interactive`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`600`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=jd(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=Ad();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=Td(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)});var i=V(r,2),a=V(z(i),2);Y(a,20,()=>[[`Italic`,`italic`],[`Normal`,`normal`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-body-em-style`]??`italic`);var s=Md(),c=z(s),l=z(c,!0);F(c),F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),Z(c,`font-style: ${a()}`),q(l,i())}),W(`click`,s,()=>a()===`italic`?t.onReset(`--sf-body-em-style`):t.onSet(`--sf-body-em-style`,a())),K(e,s)}),F(a),F(i);var o=V(i,2);{let e=I(()=>x(`--sf-code-font-size`,.875)),n=I(()=>`--sf-code-font-size`in t.overrides);$(o,{label:`Code font size`,get value(){return U(e)},min:.7,max:1.1,step:.005,unit:`em`,help:`--sf-code-font-size — size of inline code relative to surrounding text`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-code-font-size`,`${e}em`),onReset:()=>t.onReset(`--sf-code-font-size`)})}var u=V(o,2);Y(u,16,()=>[{label:`Heading wrap`,token:`--sf-heading-text-wrap`,defaultVal:`balance`},{label:`Body wrap`,token:`--sf-body-text-wrap`,defaultVal:`pretty`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??n.defaultVal);var i=Nd(),a=z(i),o=z(a,!0);F(a);var c=V(a,2);Y(c,21,()=>s,e=>e.value,(e,i)=>{var a=Td(),o=z(a,!0);F(a),H(()=>{X(a,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(r)===U(i).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(o,U(i).label)}),W(`click`,a,()=>U(i).value===n.defaultVal&&!(n.token in t.overrides)?void 0:U(i).value===n.defaultVal?t.onReset(n.token):t.onSet(n.token,U(i).value)),K(e,a)}),F(c),F(i),H(()=>q(o,n.label)),K(e,i)});var d=V(u,2),f=V(z(d),2);zi(f),Q(f,`placeholder`,`" ↗"`);var p=V(f,2),m=e=>{var n=yd();W(`click`,n,()=>t.onReset(`--sf-link-external-marker`)),K(e,n)};J(p,e=>{`--sf-link-external-marker`in t.overrides&&e(m)}),F(d),H(()=>Bi(f,t.overrides[`--sf-link-external-marker`]??``)),W(`input`,f,e=>{let n=e.target.value;n?t.onSet(`--sf-link-external-marker`,n):t.onReset(`--sf-link-external-marker`)}),K(e,n)};J(ze,e=>{U(j)&&e(Be)}),F(Fe);var Ve=V(Fe,4),He=z(Ve),Ge=V(z(He),2),Ke=z(Ge,!0);F(Ge),F(He);var qe=V(He,2),Je=e=>{var n=Ld();Y(V(B(n),2),16,()=>[{label:`Light`,token:`--sf-font-weight-light`,def:300},{label:`Normal`,token:`--sf-font-weight-normal`,def:400},{label:`Medium`,token:`--sf-font-weight-medium`,def:500},{label:`Semibold`,token:`--sf-font-weight-semibold`,def:600},{label:`Bold`,token:`--sf-font-weight-bold`,def:700}],e=>e.token,(e,n)=>{var r=Id(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),l=e=>{var r=Fd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(l)}),F(i);var u=V(i,2);Y(u,20,()=>c,e=>e,(e,r)=>{let i=I(()=>t.overrides[n.token]??String(n.def));var a=Td(),o=z(a,!0);F(a),H(e=>{Z(a,e),X(a,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===r?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(o,r)},[()=>`font-weight:${parseInt(r)}`]),W(`click`,a,()=>r===String(n.def)&&!(n.token in t.overrides)?void 0:r===String(n.def)?t.onReset(n.token):t.onSet(n.token,r)),K(e,a)}),F(u),F(r),H(()=>q(o,n.label)),K(e,r)}),K(e,n)};J(qe,e=>{U(N)&&e(Je)}),F(Ve);var Ye=V(Ve,4),Xe=z(Ye),Ze=V(z(Xe),2),Qe=z(Ze,!0);F(Ze),F(Xe);var $e=V(Xe,2),et=e=>{var n=zd(),r=B(n);{let e=I(()=>`--sf-text-display-base-min`in t.overrides||`--sf-text-display-base-max`in t.overrides);gd(r,{title:`Display base size`,get minValue(){return U(E)},get maxValue(){return U(D)},min:1.5,max:6,step:.05,unit:`rem`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-display-base-min`),t.onReset(`--sf-text-display-base-max`)},onMinChange:e=>t.onSet(`--sf-text-display-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-display-base-max`,String(e))})}var i=V(r,2);Y(i,20,()=>[{label:`Display L line-height`,token:`--sf-display-l-line-height`,def:1},{label:`Display M line-height`,token:`--sf-display-m-line-height`,def:1.05}],e=>e.token,(e,n)=>{var r=Rd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>x(n.token,n.def)),r=I(()=>n.token in t.overrides);$(o,{label:``,get value(){return U(e)},min:.8,max:1.5,step:.025,get overridden(){return U(r)},onChange:e=>t.onSet(n.token,String(e)),onReset:()=>t.onReset(n.token)})}F(r),H(()=>q(a,n.label)),K(e,r)}),F(i),Y(V(i,2),16,()=>[{label:`Display`,tokenName:`--sf-font-weight-display`},{label:`Heading`,tokenName:`--sf-font-weight-heading`}],e=>e.tokenName,(e,n)=>{let r=I(()=>l[n.tokenName]??`700`),i=I(()=>t.overrides[n.tokenName]??U(r)),a=I(()=>n.tokenName in t.overrides);var o=jd(),s=z(o),u=z(s),d=z(u);F(u);var f=V(u,2),p=e=>{var r=Ad();W(`click`,r,()=>t.onReset(n.tokenName)),K(e,r)};J(f,e=>{U(a)&&e(p)}),F(s);var m=V(s,2);Y(m,20,()=>c,e=>e,(e,o)=>{var s=Td(),c=z(s,!0);F(s),H(e=>{Z(s,e),X(s,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(i)===o?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,o)},[()=>`font-weight: ${parseInt(o)}`]),W(`click`,s,()=>o===U(r)&&!U(a)?void 0:o===U(r)?t.onReset(n.tokenName):t.onSet(n.tokenName,o)),K(e,s)}),F(m),F(o),H(()=>q(d,`${n.label??``} weight`)),K(e,o)}),K(e,n)};J($e,e=>{U(M)&&e(et)}),F(Ye);var tt=V(Ye,4),nt=z(tt),rt=V(z(nt),2),it=z(rt,!0);F(rt),F(nt);var at=V(nt,2),ot=e=>{var r=Hd(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);gd(i,{title:`Viewport range`,get minValue(){return U(ee)},get maxValue(){return U(te)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-text-base-min`in t.overrides||`--sf-text-base-max`in t.overrides);gd(a,{title:`Base size & ratio`,get minValue(){return U(w)},get maxValue(){return U(T)},min:.7,max:2,step:.01,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`type`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-text-base-min`),t.onReset(`--sf-text-base-max`)},onMinChange:e=>t.onSet(`--sf-text-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-text-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(S)},get ratioMax(){return U(C)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-text-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-text-ratio-max`,String(e))})}var o=V(a,2),s=V(z(o),2);Y(s,21,()=>f,e=>e.token,(e,n)=>{{let r=I(()=>me(U(n))),i=I(()=>`${U(n).token} — ${U(n).label.toLowerCase()} line height`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:2.2,step:.05,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(s),F(o);var c=V(o,2);{let e=I(()=>`--sf-leading-taper`in t.overrides);$(c,{label:`Leading taper`,get value(){return U(O)},min:0,max:.5,step:.01,help:`How aggressively large display sizes shrink their line-height.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-leading-taper`,String(e)),onReset:()=>t.onReset(`--sf-leading-taper`)})}var l=V(c,2),u=V(z(l),4);Y(u,21,()=>d,e=>e.token,(e,n)=>{var r=Bd(),i=z(r),a=z(i),o=z(a,!0);F(a);var s=V(a,2),c=e=>{var r=Fd();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(i);var l=V(i,2);{let e=I(()=>pe(U(n)));Xl(l,{get value(){return U(e)},min:-.1,max:.2,step:.005,unit:`em`,onChange:e=>t.onSet(U(n).token,`${e}em`)})}F(r),H(()=>q(o,U(n).label)),K(e,r)}),F(u),F(l);var p=V(l,2),m=z(p),h=V(z(m),2),g=z(h,!0);F(h),F(m);var _=V(m,2),v=e=>{var n=Vd();Y(n,21,()=>b,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(_,e=>{U(ie)&&e(v)}),F(p),H(()=>{Q(m,`aria-expanded`,U(ie)),q(g,U(ie)?`▲`:`▼`)}),W(`click`,m,()=>{R(ie,!U(ie))}),K(e,r)};J(at,e=>{U(re)&&e(ot)}),F(tt);var st=V(tt,4),ct=z(st),lt=V(z(ct),2),ut=z(lt,!0);F(lt),F(ct);var dt=V(ct,2),ft=e=>{var t=Wd();Y(t,21,()=>[...u].reverse(),({label:e,factor:t})=>e,(e,t)=>{let n=()=>U(t).label,r=()=>U(t).factor,i=I(()=>(U(w)+U(T))/2),a=I(()=>U(i)*r()*U(k));var o=Ud(),s=z(o),c=z(s,!0);F(s);var l=V(s,2),u=V(l,2),d=z(u);F(u),F(o),H((e,t)=>{q(c,n()),Z(l,e),q(d,`${t??``}rem`)},[()=>`font-size: ${Math.min(U(a),2.5)}rem; font-family: ${U(ce)||`inherit`}`,()=>U(a).toFixed(2)]),K(e,o)}),F(t),K(e,t)};J(dt,e=>{U(ae)&&e(ft)}),F(st);var pt=V(st,4),mt=z(pt),ht=V(z(mt),2),gt=z(ht,!0);F(ht),F(mt);var _t=V(mt,2),vt=e=>{var n=qd(),r=V(B(n),2);Y(r,20,()=>[{label:`2xs`,token:`--sf-text-2xs-max-width`,def:`55ch`},{label:`xs`,token:`--sf-text-xs-max-width`,def:`60ch`},{label:`s`,token:`--sf-text-s-max-width`,def:`65ch`},{label:`m`,token:`--sf-text-m-max-width`,def:`65ch`},{label:`l`,token:`--sf-text-l-max-width`,def:`none`},{label:`xl`,token:`--sf-text-xl-max-width`,def:`none`},{label:`2xl`,token:`--sf-text-2xl-max-width`,def:`none`},{label:`3xl`,token:`--sf-text-3xl-max-width`,def:`none`},{label:`4xl`,token:`--sf-text-4xl-max-width`,def:`none`}],e=>e.token,(e,n)=>{var r=Kd(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Gd();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(_t,e=>{U(se)&&e(vt)}),F(pt);var yt=V(pt,4),bt=z(yt),xt=V(z(bt),2),St=z(xt,!0);F(xt),F(bt);var Ct=V(bt,2),wt=e=>{var n=Jd(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[[`tabular-nums`,`tabular-nums (default)`],[`proportional-nums`,`proportional-nums`],[`normal`,`normal`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-font-numeric`]??`tabular-nums`);var s=Td(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`tabular-nums`?t.onReset(`--sf-font-numeric`):t.onSet(`--sf-font-numeric`,i())),K(e,s)}),F(i),F(r);var a=V(r,2),o=V(z(a),2);Y(o,20,()=>[[`auto`,`auto (default)`],[`none`,`none`]],([e,t])=>e,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1],o=I(()=>t.overrides[`--sf-optical-sizing`]??`auto`);var s=Td(),c=z(s,!0);F(s),H(()=>{X(s,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(o)===i()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(c,a())}),W(`click`,s,()=>i()===`auto`?t.onReset(`--sf-optical-sizing`):t.onSet(`--sf-optical-sizing`,i())),K(e,s)}),F(o),F(a);var s=V(a,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Gd();W(`click`,n,()=>t.onReset(`--sf-font-features`)),K(e,n)};J(l,e=>{`--sf-font-features`in t.overrides&&e(u)}),F(s);var d=V(s,2),f=V(z(d),2);zi(f);var p=V(f,2),m=e=>{var n=Gd();W(`click`,n,()=>t.onReset(`--sf-font-variation`)),K(e,n)};J(p,e=>{`--sf-font-variation`in t.overrides&&e(m)}),F(d),H(()=>{Bi(c,t.overrides[`--sf-font-features`]??``),Bi(f,t.overrides[`--sf-font-variation`]??``)}),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-features`,n):t.onReset(`--sf-font-features`)}),W(`input`,f,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-font-variation`,n):t.onReset(`--sf-font-variation`)}),K(e,n)};J(Ct,e=>{U(oe)&&e(wt)}),F(yt),F(Ce),H(()=>{Q(Te,`aria-expanded`,U(ne)),q(De,U(ne)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(A)),q(Me,U(A)?`▲`:`▼`),Q(Ie,`aria-expanded`,U(j)),q(Re,U(j)?`▲`:`▼`),Q(He,`aria-expanded`,U(N)),q(Ke,U(N)?`▲`:`▼`),Q(Xe,`aria-expanded`,U(M)),q(Qe,U(M)?`▲`:`▼`),Q(nt,`aria-expanded`,U(re)),q(it,U(re)?`▲`:`▼`),Q(ct,`aria-expanded`,U(ae)),q(ut,U(ae)?`▲`:`▼`),Q(mt,`aria-expanded`,U(se)),q(gt,U(se)?`▲`:`▼`),Q(bt,`aria-expanded`,U(oe)),q(St,U(oe)?`▲`:`▼`)}),W(`click`,Te,()=>{R(ne,!U(ne))}),W(`click`,Ae,()=>{R(A,!U(A))}),W(`click`,Ie,()=>{R(j,!U(j))}),W(`click`,He,()=>{R(N,!U(N))}),W(`click`,Xe,()=>{R(M,!U(M))}),W(`click`,nt,()=>{R(re,!U(re))}),W(`click`,ct,()=>{R(ae,!U(ae))}),W(`click`,mt,()=>{R(se,!U(se))}),W(`click`,bt,()=>{R(oe,!U(oe))}),K(e,Ce),We()}Br([`click`,`change`,`input`]);var Zd=G(`
`),Qd=G(`

The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).

`,1),$d=G(`

Utopia-style fluid scale — viewport width, base unit and ratio per endpoint. + The viewport range is shared with the type scale.

`,1),ef=G(`
`),tf=G(`
Space scale preview
`);function nf(e,t){Ue(t,!0);let n=[{label:`Minor Third — 1.200`,value:1.2},{label:`Major Third — 1.250`,value:1.25},{label:`Perfect Fourth — 1.333`,value:1.333},{label:`Aug. Fourth — 1.414`,value:1.414},{label:`Golden — 1.618`,value:1.618}],r=[`2xs`,`xs`,`s`,`m`,`l`,`xl`,`2xl`,`3xl`,`4xl`],i=Hl.spacing??[];function a(e,n){let r=parseFloat(t.overrides[e]??``);return isNaN(r)?n:r}let o=I(()=>a(`--sf-space-ratio-min`,1.25)),s=I(()=>a(`--sf-space-ratio-max`,1.333)),c=I(()=>a(`--sf-space-base-min`,1)),l=I(()=>a(`--sf-space-base-max`,2)),u=I(()=>a(`--sf-space-scale`,1)),d=I(()=>a(`--sf-gap`,1)),f=I(()=>a(`--sf-gutter`,1.5)),p=I(()=>a(`--sf-content-gap`,.5)),m=I(()=>a(`--sf-fluid-min-vw`,22.5)),h=I(()=>a(`--sf-fluid-max-vw`,90)),g=L(!1),_=L(!1),v=L(!1);var y=tf(),b=z(y),x=V(z(b),2);Y(x,22,()=>r,e=>e,(e,t,n)=>{let r=I(()=>(U(c)+U(l))/2),i=I(()=>(U(o)+U(s))/2),a=I(()=>U(n)-3),d=I(()=>U(a)>=0?U(r)*U(i)**+U(a):U(r)/U(i)**+-U(a)),f=I(()=>U(d)*U(u)),p=I(()=>Math.min(U(f)*28,240));var m=Zd(),h=z(m),g=z(h,!0);F(h);var _=V(h,2),v=V(_,2),y=z(v);F(v),F(m),H(e=>{q(g,t),Z(_,`width: ${U(p)}px; min-width: 3px`),q(y,`${e??``}rem`)},[()=>U(f).toFixed(2)]),K(e,m)}),F(x),F(b);var S=V(b,4),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=Qd(),r=V(B(n),2);{let e=I(()=>`--sf-gap`in t.overrides);$(r,{label:`Gap`,get value(){return U(d)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-gap`]},onRawSet:e=>t.onSet(`--sf-gap`,e)})}var i=V(r,2);{let e=I(()=>`--sf-content-gap`in t.overrides);$(i,{label:`Content gap`,get value(){return U(p)},min:0,max:2,step:.0625,unit:`rem`,help:`--sf-content-gap — tighter gap within components (defaults to space-s)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-gap`),rawDefault:`var(--sf-space-s)`,get currentRaw(){return t.overrides[`--sf-content-gap`]},onRawSet:e=>t.onSet(`--sf-content-gap`,e)})}var a=V(i,2);{let e=I(()=>`--sf-gutter`in t.overrides);$(a,{label:`Gutter`,get value(){return U(f)},min:0,max:6,step:.0625,unit:`rem`,help:`--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-gutter`),rawDefault:`var(--sf-space-l)`,get currentRaw(){return t.overrides[`--sf-gutter`]},onRawSet:e=>t.onSet(`--sf-gutter`,e)})}K(e,n)};J(E,e=>{U(g)&&e(D)}),F(S);var O=V(S,4),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var r=$d(),i=V(B(r),2);{let e=I(()=>`--sf-fluid-min-vw`in t.overrides||`--sf-fluid-max-vw`in t.overrides);gd(i,{title:`Viewport range`,get minValue(){return U(m)},get maxValue(){return U(h)},min:15,max:120,step:.5,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-fluid-min-vw`),t.onReset(`--sf-fluid-max-vw`)},onMinChange:e=>t.onSet(`--sf-fluid-min-vw`,String(e)),onMaxChange:e=>t.onSet(`--sf-fluid-max-vw`,String(e))})}var a=V(i,2);{let e=I(()=>`--sf-space-base-min`in t.overrides||`--sf-space-base-max`in t.overrides);gd(a,{title:`Base unit & ratio`,get minValue(){return U(c)},get maxValue(){return U(l)},min:.5,max:4,step:.05,unit:`rem`,minLabel:`Mobile`,maxLabel:`Desktop`,previewKind:`space`,get overridden(){return U(e)},onReset:()=>{t.onReset(`--sf-space-base-min`),t.onReset(`--sf-space-base-max`)},onMinChange:e=>t.onSet(`--sf-space-base-min`,String(e)),onMaxChange:e=>t.onSet(`--sf-space-base-max`,String(e)),get ratioPresets(){return n},get ratioMin(){return U(o)},get ratioMax(){return U(s)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:e=>t.onSet(`--sf-space-ratio-min`,String(e)),onRatioMaxChange:e=>t.onSet(`--sf-space-ratio-max`,String(e))})}K(e,r)};J(ne,e=>{U(_)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=ef();Y(n,21,()=>i,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ae,e=>{U(v)&&e(oe)}),F(j),F(y),H(()=>{Q(C,`aria-expanded`,U(g)),q(T,U(g)?`▲`:`▼`),Q(k,`aria-expanded`,U(_)),q(te,U(_)?`▲`:`▼`),Q(M,`aria-expanded`,U(v)),q(ie,U(v)?`▲`:`▼`)}),W(`click`,C,()=>{R(g,!U(g))}),W(`click`,k,()=>{R(_,!U(_))}),W(`click`,M,()=>{R(v,!U(v))}),K(e,y),We()}Br([`click`]);var rf=G(`
`),af=G(`
Narrow
Prose
Default
Wide
`,1),of=G(` `,1),sf=G(`
col
`),cf=G(`
Named sizes (grid-min-xs → 2xl)
Preview at 360px panel width
`,1),lf=G(`
`),uf=G(`
Mobile
Desktop
`,1),df=G(`

Offsets position:sticky elements below a fixed header. Defaults to header heights.

Mobile
Desktop
`,1),ff=G(`
`,1),pf=G(`
`),mf=G(``),hf=G(``),gf=G(`
`),_f=G(``),vf=G(`
Switcher
Sidebar content
Cluster
Equal grid
Named column counts (equal-min-col-2/3/4/6)
Cover
Frame ratio

--sf-frame-ratio — aspect ratio for .sf-frame

Reel

--sf-reel-item-width — width of each item in a horizontal .sf-reel

Height
Imposter
Content grid (breakout)
Alternate (zigzag)
`),yf=G(`
`),bf=G(`

Override the built-in named aspect ratios used by .sf-ratio-* utilities.

`),xf=G(`

Default values for the .sf-bg full-bleed background utility.

`),Sf=G(`
`);function Cf(e,t){Ue(t,!0);function n(e,t){if(!e)return t;let n=parseFloat(e);return isNaN(n)?t:n}let r=I(()=>n(t.overrides[`--sf-container-narrow`],38)),i=I(()=>n(t.overrides[`--sf-container-prose`],65)),a=I(()=>n(t.overrides[`--sf-container-default`],75)),o=I(()=>n(t.overrides[`--sf-container-wide`],90)),s=I(()=>n(t.overrides[`--sf-center-max`],75)),c=I(()=>n(t.overrides[`--sf-center-gutter`],1)),l=I(()=>n(t.overrides[`--sf-grid-min`],16)),u=I(()=>n(t.overrides[`--sf-header-height-mobile`],3.5)),d=I(()=>n(t.overrides[`--sf-header-height-desktop`],5)),f=I(()=>n(t.overrides[`--sf-sidebar-width`],18)),p=I(()=>n(t.overrides[`--sf-sticky-offset-mobile`],3.5)),m=I(()=>n(t.overrides[`--sf-sticky-offset-desktop`],5)),h=[{label:`Columns`,token:`--sf-bento-cols-default`,min:1,max:12,step:1,unit:``,default:4},{label:`Row default`,token:`--sf-bento-row-default`,min:4,max:24,step:.5,unit:`rem`,default:10},{label:`Row compact`,token:`--sf-bento-row-compact`,min:2,max:16,step:.5,unit:`rem`,default:6},{label:`Row tall`,token:`--sf-bento-row-tall`,min:8,max:32,step:.5,unit:`rem`,default:16}],g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){let n=t.overrides[e.token];return n?parseFloat(n):e.default}let D=I(()=>n(t.overrides[`--sf-switcher-threshold`],30)),O=I(()=>n(t.overrides[`--sf-sidebar-min-width`],50)),k=I(()=>n(t.overrides[`--sf-equal-min-col`],16)),ee=I(()=>n(t.overrides[`--sf-cover-min-height`],100)),te=I(()=>n(t.overrides[`--sf-imposter-margin`],1)),ne=I(()=>n(t.overrides[`--sf-breakout-width`],90)),A=I(()=>n(t.overrides[`--sf-content-width`],75)),j=I(()=>n(t.overrides[`--sf-alternate-inner-gap`],1)),M=I(()=>t.overrides[`--sf-frame-ratio`]??`16 / 9`),re=I(()=>t.overrides[`--sf-reel-item-width`]??`max-content`),ie=[`16 / 9`,`4 / 3`,`3 / 2`,`1 / 1`,`21 / 9`],ae=[{label:`auto`,value:`max-content`},{label:`12rem`,value:`12rem`},{label:`16rem`,value:`16rem`},{label:`20rem`,value:`20rem`}];var oe=Sf(),se=z(oe),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=af(),s=B(n),c=z(s),l=V(z(c),2);{let e=I(()=>`--sf-container-narrow`in t.overrides);$(l,{label:``,get value(){return U(r)},min:20,max:60,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-narrow`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-narrow`)})}F(c);var u=V(c,2),d=V(z(u),2);{let e=I(()=>`--sf-container-prose`in t.overrides);$(d,{label:``,get value(){return U(i)},min:40,max:90,step:1,unit:`ch`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-prose`,`${e}ch`),onReset:()=>t.onReset(`--sf-container-prose`)})}F(u);var f=V(u,2),p=V(z(f),2);{let e=I(()=>`--sf-container-default`in t.overrides);$(p,{label:``,get value(){return U(a)},min:50,max:120,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-default`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-default`)})}F(f);var m=V(f,2),h=V(z(m),2);{let e=I(()=>`--sf-container-wide`in t.overrides);$(h,{label:``,get value(){return U(o)},min:60,max:160,step:1,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-container-wide`,`${e}rem`),onReset:()=>t.onReset(`--sf-container-wide`)})}F(m),F(s);var g=V(s,2);Y(g,21,()=>[{label:`narrow`,value:U(r),max:U(o),unit:`rem`},{label:`prose`,value:U(i),max:U(o)*1.5,unit:`ch`},{label:`default`,value:U(a),max:U(o),unit:`rem`},{label:`wide`,value:U(o),max:U(o),unit:`rem`}],e=>e.label,(e,t)=>{var n=rf(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=z(a);F(a);var s=V(a,2),c=z(s);F(s),F(n),H(e=>{q(i,U(t).label),Z(o,e),q(c,`${U(t).value??``}${U(t).unit??``}`)},[()=>`width: ${Math.min(U(t).value/U(t).max*100,100)}%`]),K(e,n)}),F(g),K(e,n)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=of(),r=B(n);{let e=I(()=>`--sf-center-max`in t.overrides);$(r,{label:`Max width`,get value(){return U(s)},min:30,max:160,step:1,unit:`rem`,help:`--sf-center-max — max-width of the .sf-center centering wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-max`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-max`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-center-max`]},onRawSet:e=>t.onSet(`--sf-center-max`,e)})}var i=V(r,2);{let e=I(()=>`--sf-center-gutter`in t.overrides);$(i,{label:`Gutter`,get value(){return U(c)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-center-gutter — minimum side padding inside the center wrapper`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-center-gutter`,`${e}rem`),onReset:()=>t.onReset(`--sf-center-gutter`),rawDefault:`var(--sf-gutter)`,get currentRaw(){return t.overrides[`--sf-center-gutter`]},onRawSet:e=>t.onSet(`--sf-center-gutter`,e)})}K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var r=cf(),i=B(r);{let e=I(()=>`--sf-grid-min`in t.overrides);$(i,{label:`Grid min cell width`,get value(){return U(l)},min:8,max:40,step:.5,unit:`rem`,help:`sf-grid minimum column width — browser auto-fills columns`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-grid-min`,`${e}rem`),onReset:()=>t.onReset(`--sf-grid-min`)})}var a=V(i,2),o=V(z(a),2);Y(o,20,()=>[{label:`xs`,token:`--sf-grid-min-xs`,def:10},{label:`s`,token:`--sf-grid-min-s`,def:13},{label:`m`,token:`--sf-grid-min-m`,def:16},{label:`l`,token:`--sf-grid-min-l`,def:20},{label:`xl`,token:`--sf-grid-min-xl`,def:24},{label:`2xl`,token:`--sf-grid-min-2xl`,def:28}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:6,max:40,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(o),F(a);var s=V(a,2),c=V(z(s),2);Y(c,20,()=>Array.from({length:8}),ii,(e,t)=>{K(e,sf())}),F(c),F(s),H(e=>Z(c,e),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(U(l)*16*(360/1200),120)}px, 1fr))`]),K(e,r)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=uf(),r=B(n),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-header-height-mobile`in t.overrides);$(a,{label:``,get value(){return U(u)},min:2,max:8,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-mobile`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-header-height-desktop`in t.overrides);$(s,{label:``,get value(){return U(d)},min:3,max:10,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-header-height-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-header-height-desktop`)})}F(o),F(r);var c=V(r,2),l=z(c),f=V(z(l),2);Y(f,20,()=>[1,2,3],e=>e,(e,t)=>{K(e,lf())}),F(f),F(l);var p=V(l,2),m=z(p);F(p),F(c),H(e=>{Z(l,e),q(m,`${U(u)??``}rem mobile · ${U(d)??``}rem desktop`)},[()=>`height: ${Math.min(U(u)*12,64)}px`]),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=df(),r=V(B(n),2),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-sticky-offset-mobile`in t.overrides);$(a,{label:``,get value(){return U(p)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-mobile`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-mobile`),rawDefault:`var(--sf-header-height-mobile)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-mobile`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-mobile`,e)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sticky-offset-desktop`in t.overrides);$(s,{label:``,get value(){return U(m)},min:0,max:12,step:.25,unit:`rem`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sticky-offset-desktop`,`${e}rem`),onReset:()=>t.onReset(`--sf-sticky-offset-desktop`),rawDefault:`var(--sf-header-height-desktop)`,get currentRaw(){return t.overrides[`--sf-sticky-offset-desktop`]},onRawSet:e=>t.onSet(`--sf-sticky-offset-desktop`,e)})}F(o),F(r),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=ff(),r=B(n);{let e=I(()=>`--sf-sidebar-width`in t.overrides);$(r,{label:`Sidebar width`,get value(){return U(f)},min:10,max:32,step:.5,unit:`rem`,help:`--sf-sidebar-width — default sidebar / drawer width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-sidebar-width`)})}var i=V(r,2),a=z(i),o=z(a),s=z(o);F(o),F(a),Me(2),F(i),H(e=>{Z(a,e),q(s,`${U(f)??``}rem`)},[()=>`width: ${Math.min(U(f)*3.5,100)}px`]),K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=pf();Y(n,21,()=>h,e=>e.token,(e,n)=>{{let r=I(()=>E(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,U(n).unit?`${e}${U(n).unit}`:String(e)),onReset:()=>t.onReset(U(n).token)})}}),F(n),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var r=vf(),i=z(r),a=V(z(i),2);{let e=I(()=>`--sf-switcher-threshold`in t.overrides);$(a,{label:`Threshold`,get value(){return U(D)},min:10,max:60,step:1,unit:`rem`,help:`--sf-switcher-threshold — width below which .sf-switcher stacks vertically`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-switcher-threshold`,`${e}rem`),onReset:()=>t.onReset(`--sf-switcher-threshold`)})}F(i);var o=V(i,2),s=V(z(o),2);{let e=I(()=>`--sf-sidebar-min-width`in t.overrides);$(s,{label:`Content min width`,get value(){return U(O)},min:20,max:80,step:1,unit:`%`,help:`--sf-sidebar-min-width — minimum width of the .sf-sidebar content column before it wraps`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-sidebar-min-width`,`${e}%`),onReset:()=>t.onReset(`--sf-sidebar-min-width`)})}F(o);var c=V(o,2);Y(V(z(c),2),16,()=>[{label:`Align`,token:`--sf-cluster-align`,def:`center`,opts:[`flex-start`,`center`,`flex-end`,`stretch`,`baseline`]},{label:`Justify`,token:`--sf-cluster-justify`,def:`flex-start`,opts:[`flex-start`,`center`,`flex-end`,`space-between`,`space-around`]}],e=>e.token,(e,n)=>{var r=gf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=mf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Di(o);var c=V(o,2),l=e=>{var r=hf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.def)&&(o.value=(o.__value=t.overrides[n.token]??n.def)??``,Ei(o,t.overrides[n.token]??n.def))}),W(`change`,o,e=>{let r=e.target.value;r===n.def?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)}),F(c);var l=V(c,2),u=V(z(l),2);{let e=I(()=>`--sf-equal-min-col`in t.overrides);$(u,{label:`Min column`,get value(){return U(k)},min:6,max:36,step:.5,unit:`rem`,help:`--sf-equal-min-col — minimum column width for .sf-equal`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-equal-min-col`,`${e}rem`),onReset:()=>t.onReset(`--sf-equal-min-col`)})}var d=V(u,2),f=V(z(d),2);Y(f,20,()=>[{label:`2-col`,token:`--sf-equal-min-col-2`,def:28},{label:`3-col`,token:`--sf-equal-min-col-3`,def:15},{label:`4-col`,token:`--sf-equal-min-col-4`,def:16},{label:`6-col`,token:`--sf-equal-min-col-6`,def:10}],e=>e.token,(e,r)=>{{let i=I(()=>n(t.overrides[r.token],r.def)),a=I(()=>r.token in t.overrides);$(e,{get label(){return r.label},get value(){return U(i)},min:4,max:36,step:.5,unit:`rem`,get overridden(){return U(a)},onChange:e=>t.onSet(r.token,`${e}rem`),onReset:()=>t.onReset(r.token)})}}),F(f),F(d),F(l);var p=V(l,2),m=V(z(p),2);{let e=I(()=>`--sf-cover-min-height`in t.overrides);$(m,{label:`Min height`,get value(){return U(ee)},min:20,max:100,step:1,unit:`dvh`,help:`--sf-cover-min-height — minimum height of the .sf-cover layout`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-cover-min-height`,`${e}dvh`),onReset:()=>t.onReset(`--sf-cover-min-height`)})}F(p);var h=V(p,2),g=V(z(h),4);Y(g,20,()=>ie,e=>e,(e,n)=>{var r=_f(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,n)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${U(M).replace(/\s/g,``)===n.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`]),W(`click`,r,()=>n===`16 / 9`?t.onReset(`--sf-frame-ratio`):t.onSet(`--sf-frame-ratio`,n)),K(e,r)}),F(g),F(h);var _=V(h,2),v=V(z(_),4);Y(v,21,()=>ae,e=>e.value,(e,n)=>{var r=_f(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${U(re)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`max-content`?t.onReset(`--sf-reel-item-width`):t.onSet(`--sf-reel-item-width`,U(n).value)),K(e,r)}),F(v);var y=V(v,2),b=V(z(y),2);zi(b);var x=V(b,2),S=e=>{var n=hf();W(`click`,n,()=>t.onReset(`--sf-reel-height`)),K(e,n)};J(x,e=>{`--sf-reel-height`in t.overrides&&e(S)}),F(y),F(_);var C=V(_,2),w=V(z(C),2);{let e=I(()=>`--sf-imposter-margin`in t.overrides);$(w,{label:`Margin`,get value(){return U(te)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-imposter-margin`,`${e}rem`),onReset:()=>t.onReset(`--sf-imposter-margin`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-imposter-margin`]},onRawSet:e=>t.onSet(`--sf-imposter-margin`,e)})}F(C);var T=V(C,2),E=V(z(T),2);{let e=I(()=>`--sf-content-width`in t.overrides);$(E,{label:`Content width`,get value(){return U(A)},min:40,max:120,step:1,unit:`rem`,help:`--sf-content-width — default reading column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-content-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-content-width`),rawDefault:`var(--sf-container-default)`,get currentRaw(){return t.overrides[`--sf-content-width`]},onRawSet:e=>t.onSet(`--sf-content-width`,e)})}var oe=V(E,2);{let e=I(()=>`--sf-breakout-width`in t.overrides);$(oe,{label:`Breakout width`,get value(){return U(ne)},min:50,max:160,step:1,unit:`rem`,help:`--sf-breakout-width — wide breakout column width in .sf-content-grid`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-breakout-width`,`${e}rem`),onReset:()=>t.onReset(`--sf-breakout-width`),rawDefault:`var(--sf-container-wide)`,get currentRaw(){return t.overrides[`--sf-breakout-width`]},onRawSet:e=>t.onSet(`--sf-breakout-width`,e)})}F(T);var se=V(T,2),N=V(z(se),2);{let e=I(()=>`--sf-alternate-inner-gap`in t.overrides);$(N,{label:`Inner gap`,get value(){return U(j)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-alternate-inner-gap — gap between media and text within an .sf-alternate row`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-alternate-inner-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-alternate-inner-gap`),rawDefault:`var(--sf-gap)`,get currentRaw(){return t.overrides[`--sf-alternate-inner-gap`]},onRawSet:e=>t.onSet(`--sf-alternate-inner-gap`,e)})}F(se),F(r),H(()=>Bi(b,t.overrides[`--sf-reel-height`]??``)),W(`input`,b,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-reel-height`,n):t.onReset(`--sf-reel-height`)}),K(e,r)};J(et,e=>{U(C)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=bf();Y(V(z(n),2),16,()=>[{label:`Square`,token:`--sf-ratio-square`,def:`1`},{label:`Portrait`,token:`--sf-ratio-portrait`,def:`3 / 4`},{label:`3:2`,token:`--sf-ratio-3-2`,def:`3 / 2`},{label:`4:3`,token:`--sf-ratio-4-3`,def:`4 / 3`},{label:`Video`,token:`--sf-ratio-video`,def:`16 / 9`},{label:`Cinema`,token:`--sf-ratio-cinema`,def:`21 / 9`},{label:`Golden`,token:`--sf-ratio-golden`,def:`1.618 / 1`}],e=>e.token,(e,n)=>{var r=yf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=hf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.def)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(n),K(e,n)};J(ot,e=>{U(T)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var r=xf(),i=V(z(r),2);Y(i,16,()=>[{label:`Fit`,token:`--sf-bg-fit`,placeholder:`cover`,opts:[`cover`,`contain`,`fill`,`none`,`scale-down`]},{label:`Position`,token:`--sf-bg-position`,placeholder:`50% 50%`,opts:[`50% 50%`,`top`,`bottom`,`left`,`right`,`center`]}],e=>e.token,(e,n)=>{var r=gf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);Y(o,20,()=>n.opts,e=>e,(e,t)=>{var n=mf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,t),i!==(i=t)&&(n.value=(n.__value=t)??``)}),K(e,n)}),F(o);var s;Di(o);var c=V(o,2),l=e=>{var r=hf();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(c,e=>{n.token in t.overrides&&e(l)}),F(r),H(()=>{q(a,n.label),s!==(s=t.overrides[n.token]??n.placeholder)&&(o.value=(o.__value=t.overrides[n.token]??n.placeholder)??``,Ei(o,t.overrides[n.token]??n.placeholder))}),W(`change`,o,e=>{let r=e.target.value;r===n.placeholder?t.onReset(n.token):t.onSet(n.token,r)}),K(e,r)});var a=V(i,2);{let e=I(()=>n(t.overrides[`--sf-bg-inset`],0)),r=I(()=>`--sf-bg-inset`in t.overrides);$(a,{label:`Inset`,get value(){return U(e)},min:0,max:4,step:.25,unit:`rem`,help:`--sf-bg-inset — inset the background from the container edges`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-inset`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-inset`)})}var o=V(a,2);{let e=I(()=>n(t.overrides[`--sf-bg-radius`],0)),r=I(()=>`--sf-bg-radius`in t.overrides);$(o,{label:`Radius`,get value(){return U(e)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-bg-radius — corner radius of the background element`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-radius`,`${e}rem`),onReset:()=>t.onReset(`--sf-bg-radius`)})}var s=V(o,2);{let e=I(()=>n(t.overrides[`--sf-bg-z`],-2)),r=I(()=>`--sf-bg-z`in t.overrides);$(s,{label:`Z-index`,get value(){return U(e)},min:-10,max:0,step:1,help:`--sf-bg-z — stack order of the background pseudo-element (typically negative)`,get overridden(){return U(r)},onChange:e=>t.onSet(`--sf-bg-z`,String(e)),onReset:()=>t.onReset(`--sf-bg-z`)})}F(r),K(e,r)};J(ft,e=>{U(w)&&e(pt)}),F(ct),F(oe),H(()=>{Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(C)),q($e,U(C)?`▲`:`▼`),Q(rt,`aria-expanded`,U(T)),q(at,U(T)?`▲`:`▼`),Q(lt,`aria-expanded`,U(w)),q(dt,U(w)?`▲`:`▼`)}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(C,!U(C))}),W(`click`,rt,()=>{R(T,!U(T))}),W(`click`,lt,()=>{R(w,!U(w))}),K(e,oe),We()}Br([`click`,`change`,`input`]);var wf=G(`

Drives --sf-color-border--strong, --subtle, --translucent automatically.

`,1),Tf=G(`
`),Ef=G(`
`,1),Df=G(``),Of=G(`
`),kf=G(`
Border sample
`,1),Af=G(`
Color
`,1),jf=G(`
Ring color
Focus preview
`,1),Mf=G(`
`),Nf=G(`
`),Pf=G(`
`),Ff=G(`
`),If=G(`
`),Lf=G(`
Radius
`);function Rf(e,t){Ue(t,!0);let n=[`solid`,`dashed`,`dotted`],r=[`xs`,`s`,`m`,`l`,`xl`,`2xl`,`full`],i={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},a=[{step:`xs`,name:`--sf-radius-xs`,default:2,max:16,step_size:.5,rawDefault:`calc(2px * var(--sf-radius-scale))`},{step:`s`,name:`--sf-radius-s`,default:4,max:24,step_size:.5,rawDefault:`calc(4px * var(--sf-radius-scale))`},{step:`m`,name:`--sf-radius-m`,default:8,max:32,step_size:1,rawDefault:`calc(8px * var(--sf-radius-scale))`},{step:`l`,name:`--sf-radius-l`,default:12,max:48,step_size:1,rawDefault:`calc(12px * var(--sf-radius-scale))`},{step:`xl`,name:`--sf-radius-xl`,default:16,max:64,step_size:1,rawDefault:`calc(16px * var(--sf-radius-scale))`},{step:`2xl`,name:`--sf-radius-2xl`,default:24,max:80,step_size:2,rawDefault:`calc(24px * var(--sf-radius-scale))`}],o=[{label:`Button radius`,token:`--sf-btn-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,help:`--sf-btn-radius`},{label:`Button padding block`,token:`--sf-btn-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,help:`--sf-btn-padding-block`},{label:`Button padding inline`,token:`--sf-btn-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:1,rawDefault:`var(--sf-space-m)`,help:`--sf-btn-padding-inline`},{label:`Field radius`,token:`--sf-field-radius`,unit:`rem`,min:0,max:2,step:.05,default:.5,rawDefault:`var(--sf-radius-m)`,help:`--sf-field-radius`},{label:`Field padding block`,token:`--sf-field-padding-block`,unit:`rem`,min:0,max:1,step:.025,default:.375,rawDefault:`var(--sf-space-xs)`,help:`--sf-field-padding-block`},{label:`Field padding inline`,token:`--sf-field-padding-inline`,unit:`rem`,min:0,max:2,step:.025,default:.75,rawDefault:`var(--sf-space-s)`,help:`--sf-field-padding-inline`}],s=Hl.borders??[],c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=L(!1),m=L(!1),h=L(!1),g=L(!1);function _(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let v=I(()=>_(t.overrides[`--sf-radius-scale`],1)),y=I(()=>_(t.overrides[`--sf-border-scale`],1)),b=I(()=>_(t.overrides[`--sf-focus-ring-width`],2,`px`)),x=I(()=>_(t.overrides[`--sf-focus-ring-offset`],2,`px`)),S=I(()=>_(t.overrides[`--sf-divider-width`]?.replace(`px`,``),1)),C=I(()=>_(t.overrides[`--sf-divider-gap`]?.replace(`rem`,``),1)),w=I(()=>t.overrides[`--sf-color-border`]??``),T=I(()=>t.overrides[`--sf-border-style`]??`solid`),E=I(()=>t.overrides[`--sf-focus-ring-color`]??``),D=I(()=>t.overrides[`--sf-divider-color`]??``);function O(e,n){return t.overrides[e]??n}function k(e){let n=t.overrides[e.name];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}function ee(e){let n=t.overrides[e.token];if(!n||/^(var|calc|clamp)\(/.test(n.trim()))return e.default;let r=parseFloat(n);return isNaN(r)?e.default:r}var te=Lf(),ne=z(te),A=z(ne),j=V(z(A),2),M=z(j,!0);F(j),F(A);var re=V(A,2),ie=e=>{var n=wf(),r=B(n);{let e=I(()=>`--sf-color-border`in t.overrides);Su(r,{token:`--sf-color-border`,get value(){return U(w)},placeholder:`auto-derived`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-color-border`,e),onReset:()=>t.onReset(`--sf-color-border`)})}Me(2),K(e,n)};J(re,e=>{U(c)&&e(ie)}),F(ne);var ae=V(ne,4),oe=z(ae),se=V(z(oe),2),N=z(se,!0);F(se),F(oe);var ce=V(oe,2),le=e=>{var n=Ef(),r=B(n);{let e=I(()=>`--sf-border-scale`in t.overrides);$(r,{label:`Border scale`,get value(){return U(y)},min:0,max:4,step:.25,help:`Multiplier applied to all border widths. 0 hides all borders.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-border-scale`,String(e)),onReset:()=>t.onReset(`--sf-border-scale`)})}var i=V(r,2);{let e=I(()=>_(t.overrides[`--sf-border-width-hairline`]?.replace(`px`,``),.5)),n=I(()=>`--sf-border-width-hairline`in t.overrides);$(i,{label:`Hairline`,get value(){return U(e)},min:0,max:1,step:.25,unit:`px`,help:`--sf-border-width-hairline — ultra-thin border for retina displays`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-border-width-hairline`,`${e}px`),onReset:()=>t.onReset(`--sf-border-width-hairline`)})}var a=V(i,2);{let e=I(()=>_(t.overrides[`--sf-box-border-width`]?.replace(`px`,``),0)),n=I(()=>`--sf-box-border-width`in t.overrides);$(a,{label:`Box border`,get value(){return U(e)},min:0,max:4,step:.5,unit:`px`,help:`--sf-box-border-width — box-shadow border drawn without affecting layout`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-box-border-width`,`${e}px`),onReset:()=>t.onReset(`--sf-box-border-width`)})}var o=V(a,2);Y(o,20,()=>[1,2,3,4],e=>e,(e,t)=>{var n=Tf(),r=z(n),i=z(r);F(r);var a=V(r,2),o=V(a,2),s=z(o);F(o),F(n),H((e,n)=>{q(i,`${t??``}px →`),Z(a,e),q(s,`${n??``}px`)},[()=>`height: ${Math.max(t*U(y),.5)}px`,()=>(t*U(y)).toFixed(1)]),K(e,n)}),F(o),K(e,n)};J(ce,e=>{U(l)&&e(le)}),F(ae);var ue=V(ae,4),de=z(ue),fe=V(z(de),2),pe=z(fe,!0);F(fe),F(de);var me=V(de,2),he=e=>{var r=kf(),i=B(r);Y(i,20,()=>[{label:`Border`,token:`--sf-border-style`,default:`solid`},{label:`Divider`,token:`--sf-divider-style`,default:`solid`}],e=>e.token,(e,r)=>{var i=Of(),a=z(i),o=z(a,!0);F(a);var s=V(a,2);Y(s,20,()=>n,e=>e,(e,n)=>{let i=I(()=>O(r.token,r.default));var a=Df(),o=z(a),s=V(o);F(a),H(()=>{X(a,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${U(i)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),Z(o,`width: 20px; height: 0; border-bottom: 2px ${n} currentColor; opacity: 0.7`),q(s,` ${n??``}`)}),W(`click`,a,()=>n===r.default?t.onReset(r.token):t.onSet(r.token,n)),K(e,a)}),F(s),F(i),H(()=>q(o,r.label)),K(e,i)}),F(i);var a=V(i,2),o=z(a),s=V(o,2),c=z(s);F(s),F(a),H((e,t)=>{Z(o,e),q(c,`${t??``}px · ${U(T)??``}`)},[()=>`border: ${Math.max(U(y),.5)}px ${U(T)} ${U(w)||`var(--sf-color-border, #64748b)`}`,()=>(1*U(y)).toFixed(1)]),K(e,r)};J(me,e=>{U(u)&&e(he)}),F(ue);var ge=V(ue,4),_e=z(ge),ve=V(z(_e),2),ye=z(ve,!0);F(ve),F(_e);var be=V(_e,2),xe=e=>{var n=Af(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-divider-color`in t.overrides);Su(i,{token:`--sf-divider-color`,get value(){return U(D)},placeholder:`inherits border`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-divider-color`,e),onReset:()=>t.onReset(`--sf-divider-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-divider-width`in t.overrides);$(a,{label:`Width`,get value(){return U(S)},min:.5,max:4,step:.5,unit:`px`,help:`--sf-divider-width`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-width`,`${e}px`),onReset:()=>t.onReset(`--sf-divider-width`),rawDefault:`var(--sf-border-width-1)`,get currentRaw(){return t.overrides[`--sf-divider-width`]},onRawSet:e=>t.onSet(`--sf-divider-width`,e)})}var o=V(a,2);{let e=I(()=>`--sf-divider-gap`in t.overrides);$(o,{label:`Gap`,get value(){return U(C)},min:0,max:4,step:.125,unit:`rem`,help:`--sf-divider-gap — spacing around divider lines`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-divider-gap`,`${e}rem`),onReset:()=>t.onReset(`--sf-divider-gap`),rawDefault:`var(--sf-space-m)`,get currentRaw(){return t.overrides[`--sf-divider-gap`]},onRawSet:e=>t.onSet(`--sf-divider-gap`,e)})}K(e,n)};J(be,e=>{U(d)&&e(xe)}),F(ge);var Se=V(ge,4),Ce=z(Se),we=V(z(Ce),2),Te=z(we,!0);F(we),F(Ce);var Ee=V(Ce,2),De=e=>{var n=jf(),r=B(n);{let e=I(()=>`--sf-focus-ring-width`in t.overrides);$(r,{label:`Ring width`,get value(){return U(b)},min:0,max:6,step:.5,unit:`px`,help:`Thickness of the keyboard focus indicator`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-width`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-width`)})}var i=V(r,2);{let e=I(()=>`--sf-focus-ring-offset`in t.overrides);$(i,{label:`Ring offset`,get value(){return U(x)},min:0,max:8,step:.5,unit:`px`,help:`Gap between element edge and focus ring`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-focus-ring-offset`,`${e}px`),onReset:()=>t.onReset(`--sf-focus-ring-offset`)})}var a=V(i,2),o=V(z(a),2);{let e=I(()=>`--sf-focus-ring-color`in t.overrides);Su(o,{token:`--sf-focus-ring-color`,get value(){return U(E)},placeholder:`default (action)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-focus-ring-color`,e),onReset:()=>t.onReset(`--sf-focus-ring-color`)})}F(a);var s=V(a,2),c=z(s);F(s),H(()=>Z(c,`outline: ${U(b)}px solid ${U(E)||`oklch(0.7 0.2 235)`}; outline-offset: ${U(x)}px`)),K(e,n)};J(Ee,e=>{U(f)&&e(De)}),F(Se);var P=V(Se,6),Oe=z(P),ke=V(z(Oe),2),Ae=z(ke,!0);F(ke),F(Oe);var je=V(Oe,2),Ne=e=>{var n=Mf();Y(n,21,()=>a,e=>e.name,(e,n)=>{{let r=I(()=>k(U(n))),i=I(()=>U(n).name in t.overrides);$(e,{get label(){return U(n).step},get value(){return U(r)},min:0,get max(){return U(n).max},get step(){return U(n).step_size},unit:`px`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).name,`${e}px`),onReset:()=>t.onReset(U(n).name),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).name]},onRawSet:e=>t.onSet(U(n).name,e)})}}),F(n),K(e,n)};J(je,e=>{U(h)&&e(Ne)}),F(P);var Pe=V(P,2),Fe=z(Pe),Ie=V(z(Fe),2),Le=z(Ie,!0);F(Ie),F(Fe);var Re=V(Fe,2),ze=e=>{var t=Pf(),n=z(t);Y(n,20,()=>r,e=>e,(e,t)=>{let n=I(()=>i[t]??6),r=I(()=>t===`full`?9999:U(n)*U(v));var a=Nf(),o=z(a),s=V(o,2),c=z(s,!0);F(s),F(a),H(e=>{Z(o,e),q(c,t)},[()=>`border-radius: ${Math.min(U(r),9999)}px`]),K(e,a)}),F(n),F(t),K(e,t)};J(Re,e=>{U(m)&&e(ze)}),F(Pe);var Be=V(Pe,4),Ve=z(Be),He=V(z(Ve),2),Ge=z(He,!0);F(He),F(Ve);var Ke=V(Ve,2),qe=e=>{var n=Ff();Y(n,21,()=>o,e=>e.token,(e,n)=>{{let r=I(()=>ee(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},get min(){return U(n).min},get max(){return U(n).max},get step(){return U(n).step},get unit(){return U(n).unit},get help(){return U(n).help},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}${U(n).unit}`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).rawDefault},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}}),F(n),K(e,n)};J(Ke,e=>{U(g)&&e(qe)}),F(Be);var Je=V(Be,4),Ye=z(Je),Xe=V(z(Ye),2),Ze=z(Xe,!0);F(Xe),F(Ye);var Qe=V(Ye,2),$e=e=>{var n=If();Y(n,21,()=>s,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(Qe,e=>{U(p)&&e($e)}),F(Je),F(te),H(()=>{Q(A,`aria-expanded`,U(c)),q(M,U(c)?`▲`:`▼`),Q(oe,`aria-expanded`,U(l)),q(N,U(l)?`▲`:`▼`),Q(de,`aria-expanded`,U(u)),q(pe,U(u)?`▲`:`▼`),Q(_e,`aria-expanded`,U(d)),q(ye,U(d)?`▲`:`▼`),Q(Ce,`aria-expanded`,U(f)),q(Te,U(f)?`▲`:`▼`),Q(Oe,`aria-expanded`,U(h)),q(Ae,U(h)?`▲`:`▼`),Q(Fe,`aria-expanded`,U(m)),q(Le,U(m)?`▲`:`▼`),Q(Ve,`aria-expanded`,U(g)),q(Ge,U(g)?`▲`:`▼`),Q(Ye,`aria-expanded`,U(p)),q(Ze,U(p)?`▲`:`▼`)}),W(`click`,A,()=>{R(c,!U(c))}),W(`click`,oe,()=>{R(l,!U(l))}),W(`click`,de,()=>{R(u,!U(u))}),W(`click`,_e,()=>{R(d,!U(d))}),W(`click`,Ce,()=>{R(f,!U(f))}),W(`click`,Oe,()=>{R(h,!U(h))}),W(`click`,Fe,()=>{R(m,!U(m))}),W(`click`,Ve,()=>{R(g,!U(g))}),W(`click`,Ye,()=>{R(p,!U(p))}),K(e,te),We()}Br([`click`]);var zf=G(`
`),Bf=G(`
Shadow color

Warm, cool or brand-tinted shadows. Default uses neutral hue.

`),Vf=G(`
Glow color

Which brand color radiates the glow. Defaults to primary.

`),Hf=G(`

Glow disabled.

`),Uf=G(`
Shadow glow
Ambient glow on elevated surfaces
`,1),Wf=G(`
`),Gf=G(`
`);function Kf(e,t){Ue(t,!0);let n=[`xs`,`s`,`m`,`l`,`xl`,`2xl`],r=Hl.shadows??[],i=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-shadow-lightness`]??`0.15`);return isFinite(e)?e:.15})()),a=I(()=>t.overrides[`--sf-shadow-color`]??``),o=I(()=>t.overrides[`--sf-shadow-glow-color`]??``),s=I(()=>t.overrides[`--sf-shadow-glow`]===`none`),c=L(!1),l=L(!1),u=L(!1);var d=Gf(),f=z(d);Y(f,22,()=>n,e=>e,(e,t,n)=>{var r=zf(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(()=>{Z(i,`width: ${40+U(n)*4}px; height: ${40+U(n)*4}px; box-shadow: var(--sf-shadow-${t})`),q(o,t)}),K(e,r)}),F(f);var p=V(f,4);{let e=I(()=>`--sf-shadow-lightness`in t.overrides);$(p,{label:`Shadow lightness`,get value(){return U(i)},min:0,max:.5,step:.01,help:`--sf-shadow-lightness — OKLCH lightness of the shadow color. Lower = darker, more visible shadows.`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-shadow-lightness`,String(e)),onReset:()=>t.onReset(`--sf-shadow-lightness`)})}var m=V(p,4),h=z(m),g=V(z(h),2),_=z(g,!0);F(g),F(h);var v=V(h,2),y=e=>{var n=Bf(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-color`in t.overrides);Su(r,{token:`--sf-shadow-color`,get value(){return U(a)},placeholder:`auto (neutral hue)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-color`,e),onReset:()=>t.onReset(`--sf-shadow-color`)})}Me(2),F(n),K(e,n)};J(v,e=>{U(c)&&e(y)}),F(m);var b=V(m,4),x=z(b),S=V(z(x),2),C=z(S,!0);F(S),F(x);var w=V(x,2),T=e=>{var n=Uf(),r=B(n),i=V(z(r),2),a=z(i);F(i),F(r);var c=V(r,2),l=e=>{var n=Vf(),r=V(z(n),2);{let e=I(()=>`--sf-shadow-glow-color`in t.overrides);Su(r,{token:`--sf-shadow-glow-color`,get value(){return U(o)},placeholder:`default (primary color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-shadow-glow-color`,e),onReset:()=>t.onReset(`--sf-shadow-glow-color`)})}Me(2),F(n),K(e,n)};J(c,e=>{U(s)||e(l)});var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=e=>{K(e,Hf())};J(f,e=>{U(s)&&e(p)}),H(()=>{Q(i,`aria-label`,U(s)?`Enable shadow glow`:`Disable shadow glow`),X(i,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-black/10 dark:bg-white/10`:`bg-indigo-600`}`),X(a,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-0.5`:`translate-x-4`}`),Z(d,`box-shadow: ${U(s)?`none`:`var(--sf-shadow-glow)`}`)}),W(`click`,i,()=>{U(s)?t.onReset(`--sf-shadow-glow`):t.onSet(`--sf-shadow-glow`,`none`)}),K(e,n)};J(w,e=>{U(l)&&e(T)}),F(b);var E=V(b,4),D=z(E),O=V(z(D),2),k=z(O,!0);F(O),F(D);var ee=V(D,2),te=e=>{var n=Wf();Y(n,21,()=>r,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(n),K(e,n)};J(ee,e=>{U(u)&&e(te)}),F(E),F(d),H(()=>{Q(h,`aria-expanded`,U(c)),q(_,U(c)?`▲`:`▼`),Q(x,`aria-expanded`,U(l)),q(C,U(l)?`▲`:`▼`),Q(D,`aria-expanded`,U(u)),q(k,U(u)?`▲`:`▼`)}),W(`click`,h,()=>{R(c,!U(c))}),W(`click`,x,()=>{R(l,!U(l))}),W(`click`,D,()=>{R(u,!U(u))}),K(e,d),We()}Br([`click`]);var qf=G(`

Motion is disabled — duration & easing have no effect while scale is 0.

`),Jf=G(``),Yf=G(`(No effect while motion is disabled.)`),Xf=G(`
`),Zf=G(`

Named duration tokens. Drag to set an absolute ms value, overriding the global scale.

`,1),Qf=G(``),$f=G(`
`),ep=G(`

Edit the named easing tokens. Accepts any CSS timing function — cubic-bezier(…) or linear(…). Use “Live preview” above to feel a curve.

`,1),tp=G(``),np=G(`
`),rp=G(`

One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).

Stagger base
`,1),ip=G(``),ap=G(`
`),op=G(`

Default animation-range for scroll-driven animations using the .sf-scroll-timeline utility.

`,1),sp=G(`
Disable motion
Respects prefers-reduced-motion
Live preview
`);function cp(e,t){Ue(t,!0);let n=[{label:`Instant`,token:`--sf-duration-instant`,base:100,max:300},{label:`Fast`,token:`--sf-duration-fast`,base:150,max:500},{label:`Normal`,token:`--sf-duration-normal`,base:250,max:800},{label:`Slow`,token:`--sf-duration-slow`,base:400,max:1200},{label:`Slower`,token:`--sf-duration-slower`,base:600,max:2e3}],r=[{label:`Linear`,token:`--sf-ease-linear`,value:`linear`,preview:`M0,40 L40,0`},{label:`Ease out`,token:`--sf-ease-out`,value:`cubic-bezier(0.25, 0, 0.15, 1)`,preview:`M0,40 C8,40 28,0 40,0`},{label:`Ease in`,token:`--sf-ease-in`,value:`cubic-bezier(0.5, 0, 0.75, 0.25)`,preview:`M0,40 C12,40 32,32 40,0`},{label:`Ease in-out`,token:`--sf-ease-in-out`,value:`cubic-bezier(0.4, 0, 0.2, 1)`,preview:`M0,40 C8,40 32,0 40,0`},{label:`Spring`,token:`--sf-ease-spring`,value:`linear(0, 0.5, 1.1, 0.95, 1.02, 1)`,preview:`M0,40 C10,20 20,-4 28,-2 S38,2 40,0`},{label:`Bounce`,token:`--sf-ease-bounce`,value:`linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)`,preview:`M0,40 L12,16 L20,0 L26,6 L32,-1 L36,1 L40,0`},{label:`Elastic`,token:`--sf-ease-elastic`,value:`linear(0, 0.3, 1.2, 0.9, 1.05, 1)`,preview:`M0,40 C8,40 16,-10 24,-2 S36,2 40,0`},{label:`Overshoot`,token:`--sf-ease-overshoot`,value:`linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)`,preview:`M0,40 C8,40 20,-10 40,0`}],i=[`--sf-animation-delay-1`,`--sf-animation-delay-2`,`--sf-animation-delay-3`,`--sf-animation-delay-4`,`--sf-animation-delay-5`],a=Hl.motion??[],o=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-motion-scale`]??`1`);return isFinite(e)?e:1})()),s=I(()=>t.overrides[`--sf-motion-scale`]===`0`),c=I(()=>(()=>{let e=parseFloat(t.overrides[`--sf-theme-transition-duration`]?.replace(`ms`,``)??String(300*U(o)));return isFinite(e)?e:Math.round(300*U(o))})()),l=I(()=>{let e=t.overrides[i[0]];return e?parseFloat(e.replace(`ms`,``)):75*U(o)}),u=L(!1),d=L(0),f=L(`--sf-ease-out`),p=L(`--sf-duration-normal`),m=L(!1),h=L(!1),g=L(!1),_=L(!1);function v(e,n){let r=t.overrides[e];if(r){let e=parseFloat(r);if(isFinite(e))return e}return Math.round(n*U(o))}function y(e){return t.overrides[e]??r.find(t=>t.token===e)?.value??`ease`}function b(){if(U(u))return;let e=n.find(e=>e.token===U(p))?.base??250,t=v(U(p),e);R(u,!0),R(d,180),setTimeout(()=>{R(d,0),setTimeout(()=>{R(u,!1)},t)},t)}function x(e){let n={};for(let t=1;t<=5;t++)n[`--sf-animation-delay-${t}`]=`${Math.round(e*t)}ms`;t.onBulkChange(n)}function S(){let e={};for(let t=1;t<=5;t++)e[`--sf-animation-delay-${t}`]=null;t.onBulkChange(e)}var C=sp(),w=z(C),T=V(z(w),2),E=z(T);F(T),F(w);var D=V(w,2),O=e=>{K(e,qf())};J(D,e=>{U(s)&&e(O)});var k=V(D,2),ee=V(z(k),2),te=z(ee),ne=z(te);F(te);var A=V(te,2),j=z(A);Y(j,21,()=>r,e=>e.token,(e,t)=>{var n=Jf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(j);var M;Di(j);var re=V(j,2);Y(re,21,()=>n,e=>e.token,(e,t)=>{var n=Jf(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).token)&&(n.value=(n.__value=U(t).token)??``)}),K(e,n)}),F(re);var ie;Di(re);var ae=V(re,2),oe=z(ae,!0);F(ae),F(A),F(ee),F(k);var se=V(k,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Zf(),i=B(r),a=V(z(i)),o=e=>{K(e,Yf())};J(a,e=>{U(s)&&e(o)}),F(i);var c=V(i,2);Y(c,17,()=>n,e=>e.token,(e,n)=>{let r=I(()=>v(U(n).token,U(n).base));{let i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:10,unit:`ms`,get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}ms`),onReset:()=>t.onReset(U(n).token)})}});var l=V(c,2);Y(l,21,()=>n,e=>e.label,(e,t)=>{let n=I(()=>v(U(t).token,U(t).base));var r=Xf(),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),l=z(c);F(c),F(r),H(e=>{q(a,U(t).label),Z(s,e),q(l,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/1200*100,100)}%`]),K(e,r)}),F(l),K(e,r)};J(ue,e=>{U(m)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=ep(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=$f(),a=z(i),o=z(a),s=z(o);F(o);var c=V(o,2),l=z(c),u=z(l),d=z(u,!0);F(u);var p=V(u,2),m=z(p),h=V(m,2),g=e=>{var r=Qf();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(h,e=>{U(r)&&e(g)}),F(p),F(l);var _=V(l,2);zi(_),F(c),F(a),F(i),H(()=>{X(i,1,`p-2.5 rounded-xl border transition-all ${U(r)?`bg-indigo-500/10 border-indigo-500/30`:`border-black/8 dark:border-white/8 bg-black/3 dark:bg-white/3`}`),Q(s,`d`,U(n).preview),q(d,U(n).label),Bi(_,t.overrides[U(n).token]??``),Q(_,`placeholder`,U(n).value)}),W(`click`,m,()=>{R(f,U(n).token,!0),b()}),W(`input`,_,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,i)}),F(i),K(e,n)};J(ge,e=>{U(h)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=rp(),r=V(B(n),2),a=z(r),o=V(z(a),2),s=e=>{var t=tp();W(`click`,t,S),K(e,t)},c=I(()=>i.some(e=>e in t.overrides));J(o,e=>{U(c)&&e(s)}),F(a);var u=V(a,2);{let e=I(()=>Math.round(U(l))),n=I(()=>i.some(e=>e in t.overrides));$(u,{label:``,get value(){return U(e)},min:0,max:200,step:5,unit:`ms`,help:`Base unit for --sf-animation-delay-1 through -5`,get overridden(){return U(n)},onChange:e=>x(e),onReset:S})}F(r);var d=V(r,2);Y(d,20,()=>[1,2,3,4,5],e=>e,(e,t)=>{let n=I(()=>Math.round(U(l)*t));var r=np(),i=z(r),a=z(i);F(i);var o=V(i,2),s=z(o);F(o);var c=V(o,2),u=z(c);F(c),F(r),H(e=>{q(a,`–${t??``}`),Z(s,e),q(u,`${U(n)??``}ms`)},[()=>`width: ${Math.min(U(n)/600*100,100)}%`]),K(e,r)}),F(d),K(e,n)};J(Se,e=>{U(g)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=op(),r=B(n);Y(r,21,()=>a,e=>e.name,(e,n)=>{ou(e,{get knob(){return U(n)},get overrides(){return t.overrides},onChange:(e,n)=>n===null?t.onReset(e):t.onSet(e,n)})}),F(r);var i=V(r,2);{let e=I(()=>`--sf-theme-transition-duration`in t.overrides);$(i,{label:`Theme switch speed`,get value(){return U(c)},min:0,max:600,step:10,unit:`ms`,help:`--sf-theme-transition-duration — dark/light color-scheme switch animation speed`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-theme-transition-duration`,`${e}ms`),onReset:()=>t.onReset(`--sf-theme-transition-duration`)})}var o=V(i,2);Y(V(z(o),2),16,()=>[{label:`Range start`,token:`--sf-scroll-timeline-range-start`,placeholder:`entry 0%`},{label:`Range end`,token:`--sf-scroll-timeline-range-end`,placeholder:`cover 30%`}],e=>e.token,(e,n)=>{var r=ap(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(o),K(e,n)};J(P,e=>{U(_)&&e(Oe)}),F(we),F(C),H(e=>{Q(T,`title`,U(s)?`Enable motion`:`Disable motion`),X(T,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${U(s)?`bg-indigo-600`:`bg-black/10 dark:bg-white/10`}`),X(E,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${U(s)?`translate-x-4`:`translate-x-0.5`}`),Z(ne,e),M!==(M=U(f))&&(j.value=(j.__value=U(f))??``,Ei(j,U(f))),ie!==(ie=U(p))&&(re.value=(re.__value=U(p))??``,Ei(re,U(p))),ae.disabled=U(u),q(oe,U(u)?`…`:`▶ Play`),Q(N,`aria-expanded`,U(m)),q(le,U(m)?`▲`:`▼`),Q(pe,`aria-expanded`,U(h)),q(he,U(h)?`▲`:`▼`),Q(ye,`aria-expanded`,U(g)),q(xe,U(g)?`▲`:`▼`),Q(Te,`aria-expanded`,U(_)),q(De,U(_)?`▲`:`▼`)},[()=>`transform: translateX(${U(d)}px); transition: transform ${v(U(p),n.find(e=>e.token===U(p))?.base??250)}ms ${y(U(f))}`]),W(`click`,T,()=>{U(s)?t.onReset(`--sf-motion-scale`):t.onSet(`--sf-motion-scale`,`0`)}),W(`change`,j,e=>{R(f,e.target.value,!0)}),W(`change`,re,e=>{R(p,e.target.value,!0)}),W(`click`,ae,b),W(`click`,N,()=>{R(m,!U(m))}),W(`click`,pe,()=>{R(h,!U(h))}),W(`click`,ye,()=>{R(g,!U(g))}),W(`click`,Te,()=>{R(_,!U(_))}),K(e,C),We()}Br([`click`,`change`,`input`]);var lp=G(`
`),up=G(`
`,1),dp=G(`
`),fp=G(`
`,1),pp=G(``),mp=G(`

Gradient overlay for hero images and media content. Used by the .sf-scrim macro.

Color
Direction
Scrim preview
`,1),hp=G(`
`),gp=G(`
Scrollbar preview
`,1),_p=G(``),vp=G(`
`),yp=G(`

Controls text legibility over images. Applied via text-shadow: var(--sf-text-shadow-m). + Edit each token directly — use none to disable.

`,1),bp=G(`
`);function xp(e,t){Ue(t,!0);let n=[{label:`To top`,value:`to top`},{label:`To bottom`,value:`to bottom`},{label:`To left`,value:`to left`},{label:`To right`,value:`to right`}],r=[{label:`Small`,token:`--sf-text-shadow-s`,default:`0 1px 2px oklch(…)`},{label:`Medium`,token:`--sf-text-shadow-m`,default:`0 2px 4px oklch(…)`},{label:`Large`,token:`--sf-text-shadow-l`,default:`0 4px 8px oklch(…)`}];function i(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let a=I(()=>i(t.overrides[`--sf-blur`],12,`px`)),o=I(()=>i(t.overrides[`--sf-opacity-muted`],.5)),s=I(()=>i(t.overrides[`--sf-opacity-disabled`],.45)),c=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),l=I(()=>t.overrides[`--sf-scrim-color`]??``),u=I(()=>i(t.overrides[`--sf-scroll-shadow-size`]?.replace(`rem`,``),2)),d=I(()=>i(t.overrides[`--sf-state-pending-opacity`],.7)),f=I(()=>t.overrides[`--sf-scrollbar-thumb`]??``),p=I(()=>t.overrides[`--sf-scrollbar-track`]??``),m=L(!1),h=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1);var b=bp(),x=z(b),S=z(x),C=V(z(S),2),w=z(C,!0);F(C),F(S);var T=V(S,2),E=e=>{var n=up(),r=B(n);{let e=I(()=>`--sf-blur`in t.overrides);$(r,{label:`Blur radius`,get value(){return U(a)},min:0,max:48,step:1,unit:`px`,help:`--sf-blur — used for frosted glass, modals, tooltips`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-blur`,`${e}px`),onReset:()=>t.onReset(`--sf-blur`)})}var i=V(r,2),o=z(i);Y(o,20,()=>Array.from({length:12}),ii,(e,t,n)=>{var r=lp();X(r,1,yi(n%3==0?`bg-indigo-500/50`:n%3==1?`bg-purple-500/40`:`bg-blue-500/30`)),K(e,r)}),F(o);var s=V(o,2),c=z(s),l=z(c);F(c),F(s),F(i),H(()=>{Z(s,`backdrop-filter: blur(${U(a)}px)`),q(l,`${U(a)??``}px`)}),K(e,n)};J(T,e=>{U(m)&&e(E)}),F(x);var D=V(x,4),O=z(D),k=V(z(O),2),ee=z(k,!0);F(k),F(O);var te=V(O,2),ne=e=>{var n=fp(),r=B(n);{let e=I(()=>`--sf-opacity-muted`in t.overrides);$(r,{label:`Muted opacity`,get value(){return U(o)},min:0,max:1,step:.05,help:`--sf-opacity-muted — secondary text, icons, and placeholder content`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-muted`,String(e)),onReset:()=>t.onReset(`--sf-opacity-muted`)})}var i=V(r,2);{let e=I(()=>`--sf-opacity-disabled`in t.overrides);$(i,{label:`Disabled opacity`,get value(){return U(s)},min:0,max:1,step:.05,help:`--sf-opacity-disabled — disabled form controls and interactive elements`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-opacity-disabled`,String(e)),onReset:()=>t.onReset(`--sf-opacity-disabled`)})}var a=V(i,2);{let e=I(()=>`--sf-state-pending-opacity`in t.overrides);$(a,{label:`Pending opacity`,get value(){return U(d)},min:.1,max:1,step:.05,help:`--sf-state-pending-opacity — opacity of elements in loading/pending state`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-state-pending-opacity`,String(e)),onReset:()=>t.onReset(`--sf-state-pending-opacity`)})}var c=V(a,2);Y(c,21,()=>[{label:`muted`,val:U(o)},{label:`disabled`,val:U(s)},{label:`pending`,val:U(d)}],e=>e.label,(e,t)=>{var n=dp(),r=z(n),i=z(r,!0);F(r);var a=V(r,2),o=V(a,2),s=z(o,!0);F(o),F(n),H(()=>{q(i,U(t).label),Z(a,`opacity: ${U(t).val}`),q(s,U(t).val)}),K(e,n)}),F(c),K(e,n)};J(te,e=>{U(h)&&e(ne)}),F(D);var A=V(D,4),j=z(A),M=V(z(j),2),re=z(M,!0);F(M),F(j);var ie=V(j,2),ae=e=>{var r=mp(),i=V(B(r),2),a=V(z(i),2);{let e=I(()=>`--sf-scrim-color`in t.overrides);Su(a,{token:`--sf-scrim-color`,get value(){return U(l)},placeholder:`default (base color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-scrim-color`,e),onReset:()=>t.onReset(`--sf-scrim-color`)})}F(i);var o=V(i,2),s=V(z(o),2);Y(s,21,()=>n,e=>e.value,(e,n)=>{var r=pp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${U(c)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(s),F(o);var u=V(o,2),d=z(u),f=z(d);Me(2),F(d),F(u),H(()=>Z(f,`background: linear-gradient(${U(c)}, ${U(l)||`oklch(0 0 0 / 0.6)`}, transparent)`)),K(e,r)};J(ie,e=>{U(g)&&e(ae)}),F(A);var oe=V(A,4),se=z(oe),N=V(z(se),2),ce=z(N,!0);F(N),F(se);var le=V(se,2),ue=e=>{var n=gp(),r=B(n);Y(r,17,()=>[{label:`Thumb color`,token:`--sf-scrollbar-thumb`,val:U(f)},{label:`Track color`,token:`--sf-scrollbar-track`,val:U(p)}],e=>e.token,(e,n)=>{var r=hp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);{let e=I(()=>U(n).token in t.overrides);Su(o,{get token(){return U(n).token},get value(){return U(n).val},placeholder:`default`,get isOverridden(){return U(e)},onSet:e=>t.onSet(U(n).token,e),onReset:()=>t.onReset(U(n).token)})}F(r),H(()=>q(a,U(n).label)),K(e,r)});var i=V(r,2),a=z(i);let o;var s=z(a);let c;F(a),Me(2),F(i),H(()=>{o=Z(a,``,o,{background:U(p)||`rgba(255,255,255,0.08)`}),c=Z(s,``,c,{background:U(f)||`oklch(0.52 0.025 260)`})}),K(e,n)};J(le,e=>{U(_)&&e(ue)}),F(oe);var de=V(oe,4),fe=z(de),pe=V(z(fe),2),me=z(pe,!0);F(pe),F(fe);var he=V(fe,2),ge=e=>{{let n=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(e,{label:`Shadow size`,get value(){return U(u)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`)})}};J(he,e=>{U(v)&&e(ge)}),F(de);var _e=V(de,4),ve=z(_e),ye=V(z(ve),2),be=z(ye,!0);F(ye),F(ve);var xe=V(ve,2),Se=e=>{var n=yp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.token,(e,n)=>{var r=vp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=_p();W(`click`,r,()=>t.onReset(U(n).token)),K(e,r)};J(s,e=>{U(n).token in t.overrides&&e(c)}),F(r),H(()=>{q(a,U(n).label),Bi(o,t.overrides[U(n).token]??``),Q(o,`placeholder`,U(n).default)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(U(n).token,r):t.onReset(U(n).token)}),K(e,r)}),F(i),K(e,n)};J(xe,e=>{U(y)&&e(Se)}),F(_e),F(b),H(()=>{Q(S,`aria-expanded`,U(m)),q(w,U(m)?`▲`:`▼`),Q(O,`aria-expanded`,U(h)),q(ee,U(h)?`▲`:`▼`),Q(j,`aria-expanded`,U(g)),q(re,U(g)?`▲`:`▼`),Q(se,`aria-expanded`,U(_)),q(ce,U(_)?`▲`:`▼`),Q(fe,`aria-expanded`,U(v)),q(me,U(v)?`▲`:`▼`),Q(ve,`aria-expanded`,U(y)),q(be,U(y)?`▲`:`▼`)}),W(`click`,S,()=>{R(m,!U(m))}),W(`click`,O,()=>{R(h,!U(h))}),W(`click`,j,()=>{R(g,!U(g))}),W(`click`,se,()=>{R(_,!U(_))}),W(`click`,fe,()=>{R(v,!U(v))}),W(`click`,ve,()=>{R(y,!U(y))}),K(e,b),We()}Br([`click`,`input`]);var Sp=G(`
`),Cp=G(`
`,1),wp=G(`

SLASHED is a token-first CSS framework. This sample paragraph repeats so you can see exactly how many lines survive the clamp before the ellipsis kicks in. Drag the slider above and watch the visible line count change in real time. - Extra filler text keeps the block taller than the clamp at every setting.

`,1),mp=G(``),hp=G(`

--sf-aspect — default ratio for .sf-aspect / .sf-frame

`,1),gp=G(`
`,1),_p=G(``),vp=G(`

--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim

Color
Direction
Caption over scrim
Text shadow
`,1),yp=G(`

Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.

Marker color
`,1),bp=G(`

--sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.

Intrinsic size
`,1),xp=G(`

Tokens for the framework's utility macros — .sf-prose, .sf-flow, .sf-line-clamp, .sf-aspect, .sf-scroll-shadow and .sf-scrim.

All tokens tab — edit every prose, scrim and surface token directly.

`);function Sp(e,t){Ue(t,!0);function n(e,n,r){let i=t.overrides[e];if(!i)return n;let a=parseFloat(r?i.replace(r,``):i);return isNaN(a)?n:a}let r=[{label:`16 / 9`,value:`16 / 9`},{label:`4 / 3`,value:`4 / 3`},{label:`3 / 2`,value:`3 / 2`},{label:`1 / 1`,value:`1 / 1`},{label:`21 / 9`,value:`21 / 9`},{label:`9 / 16`,value:`9 / 16`}],i=[{label:`↑ top`,value:`to top`},{label:`↓ bottom`,value:`to bottom`},{label:`← left`,value:`to left`},{label:`→ right`,value:`to right`},{label:`↗ top-right`,value:`to top right`},{label:`↖ top-left`,value:`to top left`}],a=[{label:`Heading gap`,token:`--sf-prose-heading-gap`,def:.75,max:3,raw:`var(--sf-space-s)`},{label:`List gap`,token:`--sf-prose-list-gap`,def:.5,max:2,raw:`var(--sf-space-xs)`},{label:`Block margin`,token:`--sf-prose-block-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Media margin`,token:`--sf-prose-media-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Figure margin`,token:`--sf-prose-figure-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`},{label:`Blockquote padding`,token:`--sf-prose-blockquote-padding`,def:1,max:3,raw:`var(--sf-space-m)`},{label:`HR margin`,token:`--sf-prose-hr-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`}],o=L(!1),s=L(!1),c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=I(()=>n(`--sf-line-clamp`,3)),m=I(()=>n(`--sf-flow-space`,.5,`rem`)),h=I(()=>n(`--sf-scroll-shadow-size`,2,`rem`)),g=I(()=>t.overrides[`--sf-aspect`]??`16 / 9`),_=I(()=>t.overrides[`--sf-scrim-color`]??`oklch(0 0 0 / 0.55)`),v=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),y=I(()=>n(`--sf-prose-media-radius`,6,`px`));function b(e){let n=t.overrides[e.token];if(!n)return e.def;let r=parseFloat(n);return isNaN(r)?e.def:r}var x=xp(),S=V(z(x),2),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=fp(),r=B(n);{let e=I(()=>`--sf-flow-space`in t.overrides);$(r,{label:`Flow space`,get value(){return U(m)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-flow-space — vertical gap between adjacent children of .sf-flow`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-flow-space`,`${e}rem`),onReset:()=>t.onReset(`--sf-flow-space`),rawDefault:`var(--sf-content-gap)`,get currentRaw(){return t.overrides[`--sf-flow-space`]},onRawSet:e=>t.onSet(`--sf-flow-space`,e)})}var i=V(r,2);Y(i,20,()=>[0,1,2],e=>e,(e,t)=>{var n=dp();H(()=>Z(n,`width:${90-t*12}%`)),K(e,n)}),F(i),H(()=>Z(i,`display:flex;flex-direction:column;gap:${U(m)}rem`)),K(e,n)};J(E,e=>{U(o)&&e(D)}),F(S);var O=V(S,4),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var n=pp(),r=B(n);{let e=I(()=>`--sf-line-clamp`in t.overrides);$(r,{label:`Default lines`,get value(){return U(p)},min:1,max:8,step:1,help:`--sf-line-clamp — default line count for .sf-line-clamp (override per element)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-line-clamp`,String(e)),onReset:()=>t.onReset(`--sf-line-clamp`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${U(p)};overflow:hidden`)),K(e,n)};J(ne,e=>{U(s)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=hp(),i=V(B(n),2);Y(i,21,()=>r,e=>e.value,(e,n)=>{var r=mp(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,U(n).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(g).replace(/\s/g,``)===U(n).value.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`]),W(`click`,r,()=>U(n).value===`16 / 9`?t.onReset(`--sf-aspect`):t.onSet(`--sf-aspect`,U(n).value)),K(e,r)}),F(i);var a=V(i,2),o=z(a),s=z(o,!0);F(o),F(a),H(()=>{Z(o,`aspect-ratio:${U(g)};max-height:120px;max-width:100%;width:auto;height:120px`),q(s,U(g))}),K(e,n)};J(ae,e=>{U(c)&&e(oe)}),F(j);var se=V(j,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=gp(),r=B(n);{let e=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(r,{label:`Fade size`,get value(){return U(h)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`),rawDefault:`2rem`,get currentRaw(){return t.overrides[`--sf-scroll-shadow-size`]},onRawSet:e=>t.onSet(`--sf-scroll-shadow-size`,e)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`mask:linear-gradient(to right, transparent, #000 ${U(h)}rem, #000 calc(100% - ${U(h)}rem), transparent)`)),K(e,n)};J(ue,e=>{U(l)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=vp(),r=V(B(n),2),a=V(z(r),2);zi(a);var o=V(a,2),s=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-scrim-color`)),K(e,n)};J(o,e=>{`--sf-scrim-color`in t.overrides&&e(s)}),F(r);var c=V(r,2),l=V(z(c),2);Y(l,21,()=>i,e=>e.value,(e,n)=>{var r=mp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(v)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(l),F(c);var u=V(c,2),d=z(u);Me(2),F(u);var f=V(u,2),p=V(z(f),2);zi(p);var m=V(p,2),h=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-scrim-text-shadow`)),K(e,n)};J(m,e=>{`--sf-scrim-text-shadow`in t.overrides&&e(h)}),F(f),H(()=>{Bi(a,t.overrides[`--sf-scrim-color`]??``),Z(d,`background:linear-gradient(${U(v)}, ${U(_)}, transparent)`),Bi(p,t.overrides[`--sf-scrim-text-shadow`]??``)}),W(`input`,a,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-color`,n):t.onReset(`--sf-scrim-color`)}),W(`input`,p,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-text-shadow`,n):t.onReset(`--sf-scrim-text-shadow`)}),K(e,n)};J(ge,e=>{U(u)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=yp(),r=V(B(n),2),i=z(r);Y(i,17,()=>a,e=>e.token,(e,n)=>{{let r=I(()=>b(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:.0625,unit:`rem`,get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).raw},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var o=V(i,2);{let e=I(()=>`--sf-prose-media-radius`in t.overrides);$(o,{label:`Media radius`,get value(){return U(y)},min:0,max:32,step:1,unit:`px`,help:`--sf-prose-media-radius — corner radius on prose images/video`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-prose-media-radius`,`${e}px`),onReset:()=>t.onReset(`--sf-prose-media-radius`),rawDefault:`var(--sf-radius-m)`,get currentRaw(){return t.overrides[`--sf-prose-media-radius`]},onRawSet:e=>t.onSet(`--sf-prose-media-radius`,e)})}var s=V(o,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-prose-marker-color`)),K(e,n)};J(l,e=>{`--sf-prose-marker-color`in t.overrides&&e(u)}),F(s),F(r),H(()=>Bi(c,t.overrides[`--sf-prose-marker-color`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-prose-marker-color`,n):t.onReset(`--sf-prose-marker-color`)}),K(e,n)};J(Se,e=>{U(d)&&e(Ce)}),F(ve);var we=V(ve,2),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=bp(),r=V(B(n),2),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var n=_p();W(`click`,n,()=>t.onReset(`--sf-content-intrinsic-size`)),K(e,n)};J(a,e=>{`--sf-content-intrinsic-size`in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[`--sf-content-intrinsic-size`]??``)),W(`input`,i,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-content-intrinsic-size`,n):t.onReset(`--sf-content-intrinsic-size`)}),K(e,n)};J(P,e=>{U(f)&&e(Oe)}),F(we),Me(2),F(x),H(()=>{Q(C,`aria-expanded`,U(o)),q(T,U(o)?`▲`:`▼`),Q(k,`aria-expanded`,U(s)),q(te,U(s)?`▲`:`▼`),Q(M,`aria-expanded`,U(c)),q(ie,U(c)?`▲`:`▼`),Q(N,`aria-expanded`,U(l)),q(le,U(l)?`▲`:`▼`),Q(pe,`aria-expanded`,U(u)),q(he,U(u)?`▲`:`▼`),Q(ye,`aria-expanded`,U(d)),q(xe,U(d)?`▲`:`▼`),Q(Te,`aria-expanded`,U(f)),q(De,U(f)?`▲`:`▼`)}),W(`click`,C,()=>{R(o,!U(o))}),W(`click`,k,()=>{R(s,!U(s))}),W(`click`,M,()=>{R(c,!U(c))}),W(`click`,N,()=>{R(l,!U(l))}),W(`click`,pe,()=>{R(u,!U(u))}),W(`click`,ye,()=>{R(d,!U(d))}),W(`click`,Te,()=>{R(f,!U(f))}),K(e,x),We()}Br([`click`,`input`]);var Cp=G(`

Minimum interactive area — ensures accessibility on touch devices.

`,1),wp=G(``),Tp=G(`
`),Ep=G(`
`),Dp=G(`

Override individual z-index tokens in the "All tokens" tab.

`,1),Op=G(`
Selection background
Selection text color

Select this text to preview the selection color.

`),kp=G(`
`,1),Ap=G(`
`),jp=G(`

Controls the height / tap-target of all sized components (buttons, inputs, badges).

`,1),Mp=G(``),Np=G(`
Caret color
Underline thickness

A sample link with the current underline settings.

`,1),Pp=G(`

Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.

`,1),Fp=G(``),Ip=G(``),Lp=G(`

Default values for .sf-media images and replaced elements.

Fit
Position
`,1),Rp=G(`
`),zp=G(`

Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.

`,1),Bp=G(`
`),Vp=G(`

Applied inside @media print via optional/print.css.

Page size
`,1),Hp=G(`
`),Up=G(`

Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles. - Overriding globally forces all matching elements into that state — useful for testing and demos.

Required marker
`,1),Wp=G(`

Selection colors, caret, links, focus ring, borders and sizes all render in the - live preview (try the Components template). Scroll behavior applies to the page - itself and can't be shown in the static canvas.

`);function Gp(e,t){Ue(t,!0);let n=[{label:`Below`,token:`--sf-z-below`,note:`Behind content (e.g. decorative BG)`},{label:`Raised`,token:`--sf-z-raised`,note:`Slightly above flow`},{label:`Dropdown`,token:`--sf-z-dropdown`,note:`Dropdowns, popovers`},{label:`Sticky`,token:`--sf-z-sticky`,note:`Sticky headers, toolbars`},{label:`Fixed`,token:`--sf-z-fixed`,note:`Fixed UI chrome`},{label:`Overlay`,token:`--sf-z-overlay`,note:`Modals, drawers backdrop`},{label:`Modal`,token:`--sf-z-modal`,note:`Modal dialogs`},{label:`Popover`,token:`--sf-z-popover`,note:`Tooltips, menus`},{label:`Tooltip`,token:`--sf-z-tooltip`,note:`Inline tooltips`},{label:`Toast`,token:`--sf-z-toast`,note:`Notifications`}],r=[{label:`Smooth`,value:`smooth`},{label:`Auto`,value:`auto`}],i=[{label:`XS`,token:`--sf-size-xs`,default:1.5},{label:`S`,token:`--sf-size-s`,default:2},{label:`M`,token:`--sf-size-m`,default:2.5},{label:`L`,token:`--sf-size-l`,default:2.75},{label:`XL`,token:`--sf-size-xl`,default:3.5}];function a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-touch-target`],44,`px`)),s=I(()=>t.overrides[`--sf-scroll-behavior`]??`smooth`),c=I(()=>a(t.overrides[`--sf-z-base`],0)),l=I(()=>t.overrides[`--sf-caret-color`]??``),u=I(()=>a(t.overrides[`--sf-link-underline-offset`]?.replace(`em`,``),.15)),d=I(()=>t.overrides[`--sf-link-underline-thickness`]??`auto`),f=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`),p=L(!1),m=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){return a(t.overrides[e.token]?.replace(`rem`,``),e.default)}var D=Wp(),O=z(D),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var n=Cp(),r=B(n);{let e=I(()=>`--sf-touch-target`in t.overrides);$(r,{label:`Min touch size`,get value(){return U(o)},min:32,max:64,step:1,unit:`px`,help:`--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-touch-target`,`${e}px`),onReset:()=>t.onReset(`--sf-touch-target`)})}var i=V(r,2),a=z(i),s=z(a);F(a),Me(2),F(i),H(()=>{Z(a,`width: ${U(o)}px; height: ${U(o)}px`),q(s,`${U(o)??``}px`)}),K(e,n)};J(ne,e=>{U(p)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Tp();Y(n,21,()=>r,e=>e.value,(e,n)=>{var r=wp(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(s)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`smooth`?t.onReset(`--sf-scroll-behavior`):t.onSet(`--sf-scroll-behavior`,U(n).value)),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(m)&&e(oe)}),F(j);var se=V(j,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Dp(),i=B(r);{let e=I(()=>`--sf-z-base`in t.overrides);$(i,{label:`Base offset`,get value(){return U(c)},min:0,max:1e3,step:10,help:`--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-z-base`,String(e)),onReset:()=>t.onReset(`--sf-z-base`)})}var a=V(i,2);Y(a,21,()=>n,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=Ep(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c,!0);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H(e=>{X(a,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(r)?`bg-amber-400`:`bg-white/20`}`),q(s,U(n).label),q(l,U(n).note),q(d,e)},[()=>U(n).token.replace(`--sf-z-`,``)]),K(e,i)}),F(a),Me(2),K(e,r)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=Op(),r=z(n),i=V(z(r),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg`]??``),n=I(()=>`--sf-color-selection-bg`in t.overrides);du(i,{token:`--sf-color-selection-bg`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg`,e),onReset:()=>t.onReset(`--sf-color-selection-bg`)})}F(r);var a=V(r,2),o=V(z(a),2);{let e=I(()=>t.overrides[`--sf-color-selection-text`]??``),n=I(()=>`--sf-color-selection-text`in t.overrides);du(o,{token:`--sf-color-selection-text`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text`,e),onReset:()=>t.onReset(`--sf-color-selection-text`)})}F(a);var s=V(a,2),c=z(s);F(s),F(n),H(()=>Z(c,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg`]??`#6366f1`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text`]??`#ffffff`}`)),K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=kp(),r=B(n);Y(r,20,()=>[`solid`,`dashed`,`dotted`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`);var i=wp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(a,n)}),W(`click`,i,()=>n===`solid`?t.onReset(`--sf-focus-ring-style`):t.onSet(`--sf-focus-ring-style`,n)),K(e,i)}),F(r);var i=V(r,2),a=z(i),o=z(a);F(a),F(i),H(()=>{Z(a,`outline: 2px ${U(f)} ${t.overrides[`--sf-focus-ring-color`]||`oklch(0.7 0.2 235)`}; outline-offset: 2px`),q(o,`Focus ring · ${U(f)??``}`)}),K(e,n)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=jp(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>E(U(n)));{let i=I(()=>`${U(n).token} — component size step ${U(n).label}`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:5,step:.05,unit:`rem`,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token)})}}),F(r);var a=V(r,2);Y(a,21,()=>i,e=>e.token,(e,t)=>{let n=I(()=>E(U(t)));var r=Ap(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(e=>{Z(i,e),q(o,U(t).label)},[()=>`height: ${Math.min(U(n)*14,64)}px`]),K(e,r)}),F(a),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=Np(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-caret-color`in t.overrides);du(i,{token:`--sf-caret-color`,get value(){return U(l)},placeholder:`default (action color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-caret-color`,e),onReset:()=>t.onReset(`--sf-caret-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-link-underline-offset`in t.overrides);$(a,{label:`Underline offset`,get value(){return U(u)},min:0,max:.5,step:.01,unit:`em`,help:`--sf-link-underline-offset — gap between text baseline and underline`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-link-underline-offset`,`${e}em`),onReset:()=>t.onReset(`--sf-link-underline-offset`)})}var o=V(a,2),s=z(o),c=V(z(s),2),f=e=>{var n=Mp();W(`click`,n,()=>t.onReset(`--sf-link-underline-thickness`)),K(e,n)};J(c,e=>{`--sf-link-underline-thickness`in t.overrides&&e(f)}),F(s);var p=V(s,2);Y(p,20,()=>[[`auto`,`auto`],[`1px`,`1px`],[`2px`,`2px`],[`3px`,`3px`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1];var o=wp(),s=z(o,!0);F(o),H(()=>{X(o,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(d)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200`}`),q(s,i())}),W(`click`,o,()=>a()===`auto`?t.onReset(`--sf-link-underline-thickness`):t.onSet(`--sf-link-underline-thickness`,a())),K(e,o)}),F(p),F(o);var m=V(o,2),g=z(m),_=V(g,2),v=V(z(_));Me(),F(_),F(m),H(()=>{Z(g,`caret-color:${U(l)||`#6366f1`}`),Z(v,`text-decoration:underline;text-underline-offset:${U(u)}em;text-decoration-thickness:${U(d)}`)}),W(`click`,v,e=>e.preventDefault()),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=Pp(),r=V(B(n),2);Y(r,20,()=>[{label:`xs`,token:`--sf-icon-xs`,def:.875},{label:`s`,token:`--sf-icon-s`,def:1},{label:`m`,token:`--sf-icon-m`,def:1.5},{label:`l`,token:`--sf-icon-l`,def:2},{label:`xl`,token:`--sf-icon-xl`,def:3},{label:`2xl`,token:`--sf-icon-2xl`,def:4}],e=>e.token,(e,n)=>{{let r=I(()=>a(t.overrides[n.token]?.replace(`em`,``),n.def)),i=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:.5,max:6,step:.125,unit:`em`,get overridden(){return U(i)},onChange:e=>t.onSet(n.token,`${e}em`),onReset:()=>t.onReset(n.token)})}}),F(r);var i=V(r,2);{let e=I(()=>a(t.overrides[`--sf-icon-box-pad`]?.replace(`em`,``),.5)),n=I(()=>`--sf-icon-box-pad`in t.overrides);$(i,{label:`Box padding`,get value(){return U(e)},min:0,max:2,step:.125,unit:`em`,help:`--sf-icon-box-pad — padding around icon when using .sf-icon-box`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-icon-box-pad`,`${e}em`),onReset:()=>t.onReset(`--sf-icon-box-pad`)})}K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Lp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`cover`,`contain`,`fill`,`none`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=wp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(i);var a=V(i,2),o=e=>{var n=Fp();W(`click`,n,()=>t.onReset(`--sf-object-fit`)),K(e,n)};J(a,e=>{`--sf-object-fit`in t.overrides&&e(o)}),F(r);var s=V(r,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Ip();W(`click`,n,()=>t.onReset(`--sf-object-position`)),K(e,n)};J(l,e=>{`--sf-object-position`in t.overrides&&e(u)}),F(s),H(()=>Bi(c,t.overrides[`--sf-object-position`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-object-position`,n):t.onReset(`--sf-object-position`)}),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=zp(),r=V(B(n),2);Y(r,20,()=>[{label:`Top`,token:`--sf-safe-top`,placeholder:`env(safe-area-inset-top, 0px)`},{label:`Right`,token:`--sf-safe-right`,placeholder:`env(safe-area-inset-right, 0px)`},{label:`Bottom`,token:`--sf-safe-bottom`,placeholder:`env(safe-area-inset-bottom, 0px)`},{label:`Left`,token:`--sf-safe-left`,placeholder:`env(safe-area-inset-left, 0px)`}],e=>e.token,(e,n)=>{var r=Rp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(et,e=>{U(w)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Vp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`a4`,`letter`,`legal`,`a3`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-print-page-size`]??`a4`);var i=wp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-200`:`border-white/8 text-slate-400 hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`a4`?t.onReset(`--sf-print-page-size`):t.onSet(`--sf-print-page-size`,n)),K(e,i)}),F(i),F(r),Y(V(r,2),16,()=>[{label:`Base size`,token:`--sf-print-base-size`,placeholder:`11pt`},{label:`Page margin`,token:`--sf-print-page-margin`,placeholder:`2cm`}],e=>e.token,(e,n)=>{var r=Bp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=Ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),K(e,n)};J(ot,e=>{U(C)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var n=Up(),r=V(B(n),2);Y(r,20,()=>[{label:`is-active`,token:`--sf-is-active`,note:`Active/selected state`},{label:`is-current`,token:`--sf-is-current`,note:`Current page/item`},{label:`is-open`,token:`--sf-is-open`,note:`Open/expanded state`},{label:`is-pressed`,token:`--sf-is-pressed`,note:`Pressed/depressed state`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??`0`);var i=Hp(),a=z(i),o=z(a);F(a);var s=V(a,2),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l);var d=V(l,2),f=e=>{var r=Ip();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(d,e=>{n.token in t.overrides&&e(f)}),F(i),H(()=>{Q(a,`aria-label`,n.label),Q(a,`aria-pressed`,U(r)===`1`),X(a,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${U(r)===`1`?`bg-indigo-600`:`bg-white/10`}`),X(o,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${U(r)===`1`?`translate-x-4`:`translate-x-0.5`}`),q(c,n.label),q(u,n.note)}),W(`click`,a,()=>U(r)===`1`?t.onReset(n.token):t.onSet(n.token,`1`)),K(e,i)}),F(r);var i=V(r,2),a=V(z(i),2);zi(a);var o=V(a,2),s=e=>{var n=Ip();W(`click`,n,()=>t.onReset(`--sf-field-required-marker`)),K(e,n)};J(o,e=>{`--sf-field-required-marker`in t.overrides&&e(s)}),F(i),H(()=>Bi(a,t.overrides[`--sf-field-required-marker`]??``)),W(`input`,a,e=>{let n=e.target.value;n?t.onSet(`--sf-field-required-marker`,n):t.onReset(`--sf-field-required-marker`)}),K(e,n)};J(ft,e=>{U(T)&&e(pt)}),F(ct),Me(4),F(D),H(()=>{Q(k,`aria-expanded`,U(p)),q(te,U(p)?`▲`:`▼`),Q(M,`aria-expanded`,U(m)),q(ie,U(m)?`▲`:`▼`),Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(w)),q($e,U(w)?`▲`:`▼`),Q(rt,`aria-expanded`,U(C)),q(at,U(C)?`▲`:`▼`),Q(lt,`aria-expanded`,U(T)),q(dt,U(T)?`▲`:`▼`)}),W(`click`,k,()=>{R(p,!U(p))}),W(`click`,M,()=>{R(m,!U(m))}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(w,!U(w))}),W(`click`,rt,()=>{R(C,!U(C))}),W(`click`,lt,()=>{R(T,!U(T))}),K(e,D),We()}Br([`click`,`input`]);var Kp=G(`

No saved themes yet.

Configure your tokens, then save them above.

`),qp=G(`
`),Jp=G(`
`),Yp=G(` `),Xp=G(`
`),Zp=G(`
`),Qp=G(``),$p=G(`
Themes

Save your current configuration as a named theme, then re-apply it any time. - Themes are stored in this browser.

Save current

`);function em(e,t){Ue(t,!0);let n=L(nn(yc())),r=L(``),i=I(()=>Object.keys(t.overrides).length);function a(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let o=I(()=>U(n).find(e=>a(e.overrides,t.overrides))?.id??``);function s(){U(i)!==0&&(R(n,bc(U(r),t.overrides),!0),R(r,``))}function c(e){R(n,xc(e),!0)}var l=$p(),u=V(z(l),4),d=V(z(u),2),f=z(d);zi(f);var p=V(f,2);ro(z(p),{class:`w-3 h-3`}),Me(),F(p),F(d);var m=V(d,2),g=z(m),_=e=>{K(e,Yr(`No active overrides yet — adjust some tokens first.`))},v=e=>{var t=Yr();H(()=>q(t,`Captures all ${U(i)??``} active override${U(i)===1?``:`s`}.`)),K(e,t)};J(g,e=>{U(i)===0?e(_):e(v,-1)}),F(m),F(u);var y=V(u,2),b=z(y),x=e=>{K(e,Kp())},S=e=>{var r=Xr();Y(B(r),17,()=>U(n),e=>e.id,(e,n)=>{let r=I(()=>Object.keys(U(n).overrides).length);var i=Zp(),a=z(i),s=z(a),l=z(s,!0);F(s);var u=V(s,2),d=z(u),f=z(d),p=V(f),m=e=>{_a(e,{class:`w-3 h-3 text-indigo-400`})};J(p,e=>{U(o)===U(n).id&&e(m)}),F(d);var g=V(d,2),_=z(g);F(g),F(u);var v=V(u,2),y=z(v),b=V(y,2);wo(z(b),{class:`w-3.5 h-3.5`}),F(b),F(v),F(a);var x=V(a,2),S=e=>{var t=Xp(),i=z(t);Y(i,17,()=>Object.entries(U(n).overrides).slice(0,5),([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Jp(),o=z(a),s=e=>{var t=qp();let n;H(()=>n=Z(t,``,n,{background:i()})),K(e,t)},c=I(()=>r().includes(`color`)||r().includes(`source`));J(o,e=>{U(c)&&e(s)});var l=V(o,2),u=z(l,!0);F(l),F(a),H(e=>q(u,e),[()=>r().replace(`--sf-`,``)]),K(e,a)});var a=V(i,2),o=e=>{var t=Yp(),n=z(t);F(t),H(()=>q(n,`+${U(r)-5} more`)),K(e,t)};J(a,e=>{U(r)>5&&e(o)}),F(t),K(e,t)};J(x,e=>{U(r)>0&&e(S)}),F(i),H(()=>{X(i,1,`group rounded-xl border transition-all overflow-hidden ${U(o)===U(n).id?`border-indigo-500/40 bg-indigo-500/10`:`border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14`}`),q(l,U(n).icon),q(f,`${U(n).name??``} `),q(_,`${U(r)??``} override${U(r)===1?``:`s`}`)}),W(`click`,y,()=>t.onApplyTheme(U(n).overrides)),W(`click`,b,()=>c(U(n).id)),K(e,i)}),K(e,r)};J(b,e=>{U(n).length===0?e(x):e(S,-1)}),F(y);var C=V(y,2),w=e=>{var n=Qp();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(C,e=>{U(i)>0&&e(w)}),F(l),H(()=>p.disabled=U(i)===0),W(`keydown`,f,e=>{e.key===`Enter`&&s()}),qi(f,()=>U(r),e=>R(r,e)),W(`click`,p,s),K(e,l),We()}Br([`keydown`,`click`]);var tm=G(` Link copied!`,1),nm=G(` Copy shareable link`,1),rm=G(`
Export

CSS output
Usage
Paste this CSS into your project after the SLASHED import.
`);function im(e,t){Ue(t,!0);let n=L(`layer`),r=L(!1),i=L(!1),a=I(()=>cc(t.overrides,{mode:U(n),banner:!0})),o=I(()=>Object.keys(t.overrides).length);async function s(){try{await navigator.clipboard.writeText(U(a)),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}async function c(){try{let e=fc(t.overrides);await navigator.clipboard.writeText(e),R(i,!0),setTimeout(()=>{R(i,!1)},2e3)}catch{}}function l(){let e=new Blob([U(a)],{type:`text/css`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`slashed-overrides.css`,n.click(),URL.revokeObjectURL(t)}function u(e){return e.includes(`color`)||e.includes(`scrim-color`)||e.includes(`shadow-color`)?`color`:e.includes(`duration`)||e.includes(`delay`)||e.includes(`transition-duration`)?`duration`:e.includes(`radius`)||e.includes(`space`)||e.includes(`size`)||e.includes(`width`)||e.includes(`height`)||e.includes(`gap`)||e.includes(`blur`)||e.includes(`text-`)||e.includes(`leading`)||e.includes(`tracking`)?`dimension`:e.includes(`font-family`)||e.includes(`font-mono`)||e.includes(`font-body`)||e.includes(`font-heading`)||e.includes(`font-code`)?`fontFamily`:e.includes(`font-weight`)||e.includes(`weight`)?`fontWeight`:`string`}function d(){let e={};for(let[n,r]of Object.entries(t.overrides)){let t=n.replace(/^--sf-/,``).replace(/-/g,`.`);e[t]={$value:r,$type:u(n)}}let n=JSON.stringify({$schema:`https://design-tokens.github.io/community-group/format/`,...e},null,2),r=new Blob([n],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`slashed-tokens.w3c.json`,a.click(),URL.revokeObjectURL(i)}var f=rm(),p=z(f),m=V(z(p),2),h=z(m,!0);F(m),F(p);var g=V(p,2),_=z(g),v=e=>{var t=tm();_a(B(t),{class:`w-3 h-3 text-emerald-400`}),Me(2),K(e,t)},y=e=>{var t=nm();Fa(B(t),{class:`w-3 h-3`}),Me(),K(e,t)};J(_,e=>{U(i)?e(v):e(y,-1)}),F(g);var b=V(g,2),x=V(z(b),2),S=z(x),C=V(S,2);F(x),F(b);var w=V(b,2),T=z(w),E=z(T,!0);F(T);var D=V(T,2),O=z(D),k=z(O),ee=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},te=e=>{Ca(e,{class:`w-3 h-3`})};J(k,e=>{U(r)?e(ee):e(te,-1)}),F(O);var ne=V(O,2);Ta(z(ne),{class:`w-3 h-3`}),F(ne),F(D),F(w);var A=V(w,2);Ta(z(A),{class:`w-3 h-3`}),Me(),F(A);var j=V(A,2),M=V(z(j),4);M.textContent=`@import 'slashed/slashed.full.css';
-@import './slashed-overrides.css';`,F(j),F(f),H(()=>{q(h,U(o)>0?`${U(o)} override${U(o)===1?``:`s`} ready to export.`:`No overrides yet. Customise tokens, then export.`),g.disabled=U(o)===0,X(S,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`layer`?`bg-indigo-600 text-white`:`text-slate-400 hover:text-slate-200`}`),X(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`root`?`bg-indigo-600 text-white`:`text-slate-400 hover:text-slate-200`}`),q(E,U(a)||`/* No overrides */`),A.disabled=U(o)===0}),W(`click`,g,c),W(`click`,S,()=>{R(n,`layer`)}),W(`click`,C,()=>{R(n,`root`)}),W(`click`,O,s),W(`click`,ne,l),W(`click`,A,d),K(e,f),We()}Br([`click`]);var am={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`},classes:[{name:`is-active`,selector:`.is-active`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.`,optional:!1,layer:`slashed.states`},{name:`is-busy`,selector:`.is-busy`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Busy state — shows a progress cursor to indicate background processing. Does not mask content; use is-loading when content should be hidden during loading.`,optional:!1,layer:`slashed.states`},{name:`is-clickable`,selector:`.is-clickable`,kind:`state`,category:`State classes`,group:`FOCUS / INTERACTION MODIFIERS`,description:`Makes the element appear interactive (pointer cursor). Use when an element has a click handler but no native button or link role.`,optional:!1,layer:`slashed.states`},{name:`is-clipped`,selector:`.is-clipped`,kind:`state`,category:`State classes`,group:`OVERFLOW / CLIPPING`,description:`Clips overflowing content (overflow: hidden). Use to constrain media or tooltips within a container boundary.`,optional:!1,layer:`slashed.states`},{name:`is-collapsed`,selector:`.is-collapsed`,kind:`state`,category:`State classes`,group:`OPEN / CLOSED`,description:`Collapsed state for disclosure widgets — hides the expandable region. Pair with is-expanded or is-open. Components add transitions.`,optional:!1,layer:`slashed.states`},{name:`is-current`,selector:`.is-current`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.`,optional:!1,layer:`slashed.states`},{name:`is-danger`,selector:`.is-danger`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.`,optional:!1,layer:`slashed.states`},{name:`is-disabled`,selector:`.is-disabled`,kind:`state`,category:`State classes`,group:`INTERACTIVITY`,description:`Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.`,optional:!1,layer:`slashed.states`},{name:`is-draggable`,selector:`.is-draggable`,kind:`state`,category:`State classes`,group:`DRAG & DROP`,description:`Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.`,optional:!1,layer:`slashed.states`},{name:`is-dragging`,selector:`.is-dragging`,kind:`state`,category:`State classes`,group:`DRAG & DROP`,description:`Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.`,optional:!1,layer:`slashed.states`},{name:`is-drop-target`,selector:`.is-drop-target`,kind:`state`,category:`State classes`,group:`DRAG & DROP`,description:`Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.`,optional:!1,layer:`slashed.states`},{name:`is-empty`,selector:`.is-empty`,kind:`state`,category:`State classes`,group:`EMPTY STATE`,description:`Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.`,optional:!1,layer:`slashed.states`},{name:`is-error`,selector:`.is-error`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Error state — alias for is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to is-invalid.`,optional:!1,layer:`slashed.states`},{name:`is-expanded`,selector:`.is-expanded`,kind:`state`,category:`State classes`,group:`OPEN / CLOSED`,description:`Expanded state for disclosure widgets — shows the expandable region. Inverse of is-collapsed. Components add transitions.`,optional:!1,layer:`slashed.states`},{name:`is-fixed`,selector:`.is-fixed`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Fixed positioning state — removes the element from the document flow and positions it relative to the viewport. Respects writing-mode (logical variant of fixed positioning).`,optional:!1,layer:`slashed.states`},{name:`is-focused`,selector:`.is-focused`,kind:`state`,category:`State classes`,group:`FOCUS / INTERACTION MODIFIERS`,description:`Programmatic focus state — applies the focus ring to an element that should appear focused. Use when :focus-visible alone is insufficient (e.g. custom select).`,optional:!1,layer:`slashed.states`},{name:`is-fullscreen`,selector:`.is-fullscreen`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Fullscreen positioning state — stretches the element to cover the viewport. Bare positioning only; consumers supply inset values.`,optional:!1,layer:`slashed.states`},{name:`is-hidden`,selector:`.is-hidden`,kind:`state`,category:`State classes`,group:`VISIBILITY`,description:`Hidden state — removes the element from layout and accessibility tree (display: none !important).`,optional:!1,layer:`slashed.states`},{name:`is-highlighted`,selector:`.is-highlighted`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.`,optional:!1,layer:`slashed.states`},{name:`is-info`,selector:`.is-info`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Info status state — applies info color tokens. Use for neutral informational messages and hints.`,optional:!1,layer:`slashed.states`},{name:`is-invalid`,selector:`.is-invalid`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to is-error; the name signals form-field context.`,optional:!1,layer:`slashed.states`},{name:`is-invisible`,selector:`.is-invisible`,kind:`state`,category:`State classes`,group:`VISIBILITY`,description:`Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).`,optional:!1,layer:`slashed.states`},{name:`is-loading`,selector:`.is-loading`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.`,optional:!1,layer:`slashed.states`},{name:`is-open`,selector:`.is-open`,kind:`state`,category:`State classes`,group:`OPEN / CLOSED`,description:`Open/shown state for modals, dropdowns, and drawers — counterpart to is-collapsed/is-hidden. Sets --sf-is-open to 1 for calc() branching.`,optional:!1,layer:`slashed.states`},{name:`is-overlay`,selector:`.is-overlay`,kind:`state`,category:`State classes`,group:`OVERLAY / BACKDROP`,description:`Overlay positioning state — renders the element as a full-screen fixed overlay with a backdrop scrim. Use for modal backgrounds.`,optional:!1,layer:`slashed.states`},{name:`is-pending`,selector:`.is-pending`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from is-loading (which hides content entirely).`,optional:!1,layer:`slashed.states`},{name:`is-pinned`,selector:`.is-pinned`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Pinned / sticky state — applies a visual affordance (e.g. border or shadow) to indicate the element is in its stuck (sticky) position. Toggle via IntersectionObserver.`,optional:!1,layer:`slashed.states`},{name:`is-pressed`,selector:`.is-pressed`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.`,optional:!1,layer:`slashed.states`},{name:`is-readonly`,selector:`.is-readonly`,kind:`state`,category:`State classes`,group:`INTERACTIVITY`,description:`Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.`,optional:!1,layer:`slashed.states`},{name:`is-resizable`,selector:`.is-resizable`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Resizable state — enables user resize handle on the element (resize: both). Typically applied to textareas or panels.`,optional:!1,layer:`slashed.states`},{name:`is-scrollable`,selector:`.is-scrollable`,kind:`state`,category:`State classes`,group:`OVERFLOW / CLIPPING`,description:`Makes the element scrollable (overflow: auto) when its content overflows. Applies to both axes.`,optional:!1,layer:`slashed.states`},{name:`is-selected`,selector:`.is-selected`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.`,optional:!1,layer:`slashed.states`},{name:`is-skeleton`,selector:`.is-skeleton`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Skeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements.`,optional:!1,layer:`slashed.states`},{name:`is-sticky`,selector:`.is-sticky`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Sticky positioning state — sets position: sticky with a top offset from --sf-sticky-offset. Useful for sticky headers and sidebar sub-menus.`,optional:!1,layer:`slashed.states`},{name:`is-success`,selector:`.is-success`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.`,optional:!1,layer:`slashed.states`},{name:`is-truncated`,selector:`.is-truncated`,kind:`state`,category:`State classes`,group:`OVERFLOW / CLIPPING`,description:`Single-line truncation state — clips overflowing text with an ellipsis (overflow: hidden, text-overflow: ellipsis, white-space: nowrap).`,optional:!1,layer:`slashed.states`},{name:`is-unselectable`,selector:`.is-unselectable`,kind:`state`,category:`State classes`,group:`FOCUS / INTERACTION MODIFIERS`,description:`Prevents text selection (user-select: none) on the element. Use on interactive drag handles, labels, and UI chrome that shouldn't be selected.`,optional:!1,layer:`slashed.states`},{name:`is-valid`,selector:`.is-valid`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to is-success; the name signals form-field context.`,optional:!1,layer:`slashed.states`},{name:`is-visible`,selector:`.is-visible`,kind:`state`,category:`State classes`,group:`VISIBILITY`,description:`Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.`,optional:!1,layer:`slashed.states`},{name:`is-warning`,selector:`.is-warning`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.`,optional:!1,layer:`slashed.states`},{name:`no-motion`,selector:`.no-motion`,kind:`accessibility`,category:`Accessibility`,group:`Reduced motion. Token override helps components that read`,description:`Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.`,optional:!1,layer:`slashed.accessibility`},{name:`no-print`,selector:`.no-print`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.`,optional:!1,layer:`slashed.print`},{name:`print-color-exact`,selector:`.print-color-exact`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.`,optional:!1,layer:`slashed.print`},{name:`print-no-color`,selector:`.print-no-color`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.`,optional:!1,layer:`slashed.print`},{name:`print-only`,selector:`.print-only`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.`,optional:!1,layer:`slashed.print`},{name:`sf-alternate`,selector:`.sf-alternate`,kind:`layout`,category:`Layout primitives`,group:`Alternate (zigzag / media-object)`,description:`Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.`,optional:!1,layer:`slashed.layout`},{name:`sf-aspect`,selector:`.sf-aspect`,kind:`macro`,category:`Macro classes`,group:`Aspect`,description:`Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.`,optional:!1,layer:`slashed.macros`},{name:`sf-bento`,selector:`.sf-bento`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--2`,selector:`.sf-bento--2`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 2-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--3`,selector:`.sf-bento--3`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 3-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--6`,selector:`.sf-bento--6`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 6-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--compact`,selector:`.sf-bento--compact`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with shorter default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--tall`,selector:`.sf-bento--tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with taller default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-featured`,selector:`.sf-bento-featured`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: takes up 2×2 cells (featured hero placement).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-full`,selector:`.sf-bento-full`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: stretches across all columns (full-width banner).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-tall`,selector:`.sf-bento-tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: doubles the row height (tall card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-wide`,selector:`.sf-bento-wide`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: spans 2 columns (wide card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bg`,selector:`.sf-bg`,kind:`layout`,category:`Layout primitives`,group:`Background`,description:`Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare  or as a wrapper with a nested > img / > video / > picture.`,optional:!1,layer:`slashed.layout`},{name:`sf-box`,selector:`.sf-box`,kind:`layout`,category:`Layout primitives`,group:`Box`,description:`Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.`,optional:!1,layer:`slashed.layout`},{name:`sf-breakout`,selector:`.sf-breakout`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.`,optional:!1,layer:`slashed.layout`},{name:`sf-center`,selector:`.sf-center`,kind:`layout`,category:`Layout primitives`,group:`Center`,description:`Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.`,optional:!1,layer:`slashed.layout`},{name:`sf-center--intrinsic`,selector:`.sf-center--intrinsic`,kind:`layout`,category:`Layout primitives`,group:`Center`,description:`Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).`,optional:!1,layer:`slashed.layout`},{name:`sf-clickable-parent`,selector:`.sf-clickable-parent`,kind:`accessibility`,category:`Accessibility`,group:`Clickable-parent`,description:`Makes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the .`,optional:!1,layer:`slashed.accessibility`},{name:`sf-clickable-parent__overlay`,selector:`.sf-clickable-parent__overlay`,kind:`accessibility`,category:`Accessibility`,group:`Clickable-parent`,description:`The full-bleed overlay link inside an sf-clickable-parent. Stretches to cover the parent and uses pointer-events to let interactive children keep their own clicks.`,optional:!1,layer:`slashed.accessibility`},{name:`sf-cluster`,selector:`.sf-cluster`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--2xl`,selector:`.sf-cluster--2xl`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with 2xl gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--between`,selector:`.sf-cluster--between`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that distributes items with space-between alignment.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--center`,selector:`.sf-cluster--center`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that centers the item row horizontally.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--end`,selector:`.sf-cluster--end`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that aligns items to the inline end (right in LTR).`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--l`,selector:`.sf-cluster--l`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with large (l) gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--m`,selector:`.sf-cluster--m`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with medium (m) gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--no-wrap`,selector:`.sf-cluster--no-wrap`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that prevents item wrapping (single-line row).`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--s`,selector:`.sf-cluster--s`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with small (s) gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--xl`,selector:`.sf-cluster--xl`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with xl gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--xs`,selector:`.sf-cluster--xs`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with xs gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-color-pulse`,selector:`.sf-color-pulse`,kind:`motion`,category:`Motion / animation`,group:`@property color animation`,description:`Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion.`,optional:!1,layer:`slashed.motion`},{name:`sf-container`,selector:`.sf-container`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m.`,optional:!1,layer:`slashed.layout`},{name:`sf-container--full`,selector:`.sf-container--full`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant that spans the full viewport width (no max-width cap).`,optional:!1,layer:`slashed.layout`},{name:`sf-container--narrow`,selector:`.sf-container--narrow`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.`,optional:!1,layer:`slashed.layout`},{name:`sf-container--prose`,selector:`.sf-container--prose`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.`,optional:!1,layer:`slashed.layout`},{name:`sf-container--wide`,selector:`.sf-container--wide`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.`,optional:!1,layer:`slashed.layout`},{name:`sf-content-auto`,selector:`.sf-content-auto`,kind:`macro`,category:`Macro classes`,group:`Content visibility`,description:`Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.`,optional:!1,layer:`slashed.macros`},{name:`sf-content-grid`,selector:`.sf-content-grid`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover`,selector:`.sf-cover`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover__center`,selector:`.sf-cover__center`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--max`,selector:`.sf-cover--max`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant that uses a max-height instead of min-height for the viewport constraint.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--min`,selector:`.sf-cover--min`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant that reduces the minimum height to half a viewport.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--padding-l`,selector:`.sf-cover--padding-l`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant with large vertical padding above and below the centered content.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--padding-s`,selector:`.sf-cover--padding-s`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant with small vertical padding above and below the centered content.`,optional:!1,layer:`slashed.layout`},{name:`sf-cq`,selector:`.sf-cq`,kind:`layout`,category:`Layout primitives`,group:`Container query context`,description:`Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider`,selector:`.sf-divider`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--dashed`,selector:`.sf-divider--dashed`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with a dashed stroke.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--dotted`,selector:`.sf-divider--dotted`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with a dotted stroke.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--gradient`,selector:`.sf-divider--gradient`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant rendered as a gradient that fades to transparent at both ends.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--soft`,selector:`.sf-divider--soft`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with reduced opacity (subtle separator).`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--strong`,selector:`.sf-divider--strong`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with stronger/darker color for a more prominent separator.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--vertical`,selector:`.sf-divider--vertical`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant rendered as a vertical line. Use inside flex or grid containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-entrance--fade`,selector:`.sf-entrance--fade`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-down`,selector:`.sf-entrance--fade-down`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving downward into position.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-left`,selector:`.sf-entrance--fade-left`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving from the right toward the left.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-right`,selector:`.sf-entrance--fade-right`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving from the left toward the right.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-up`,selector:`.sf-entrance--fade-up`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving upward into position.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--scale-up`,selector:`.sf-entrance--scale-up`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while scaling up from a slightly smaller size.`,optional:!1,layer:`slashed.motion`},{name:`sf-equal`,selector:`.sf-equal`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Auto-fill equal-columns grid. Columns fill the row and wrap when they hit --sf-equal-min-col. No breakpoints needed.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--2`,selector:`.sf-equal--2`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 2 columns using --sf-equal-min-col-2.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--3`,selector:`.sf-equal--3`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 3 columns using --sf-equal-min-col-3.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--4`,selector:`.sf-equal--4`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 4 columns using --sf-equal-min-col-4.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--6`,selector:`.sf-equal--6`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 6 columns using --sf-equal-min-col-6.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal-height`,selector:`.sf-equal-height`,kind:`macro`,category:`Macro classes`,group:`Equal height`,description:`Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height.`,optional:!1,layer:`slashed.macros`},{name:`sf-fade-in`,selector:`.sf-fade-in`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users.`,optional:!1,layer:`slashed.motion`},{name:`sf-fade-out`,selector:`.sf-fade-out`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot fade-out animation (opacity 1 → 0). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-flow`,selector:`.sf-flow`,kind:`macro`,category:`Macro classes`,group:`Flow`,description:`Applies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers.`,optional:!1,layer:`slashed.macros`},{name:`sf-focus-parent`,selector:`.sf-focus-parent`,kind:`accessibility`,category:`Accessibility`,group:`Focus-parent`,description:`Forwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden .`,optional:!1,layer:`slashed.accessibility`},{name:`sf-focus-shadow`,selector:`.sf-focus-shadow`,kind:`accessibility`,category:`Accessibility`,group:`Focus-shadow opt-in`,description:`Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly.`,optional:!1,layer:`slashed.accessibility`},{name:`sf-frame`,selector:`.sf-frame`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--3-2`,selector:`.sf-frame--3-2`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a 3:2 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--4-3`,selector:`.sf-frame--4-3`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a 4:3 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--cinema`,selector:`.sf-frame--cinema`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a cinematic 21:9 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--golden`,selector:`.sf-frame--golden`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to the golden ratio (1.618:1).`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--portrait`,selector:`.sf-frame--portrait`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a portrait 2:3 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--square`,selector:`.sf-frame--square`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a square 1:1 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--video`,selector:`.sf-frame--video`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to the standard 16:9 video aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-full-bleed`,selector:`.sf-full-bleed`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap`,selector:`.sf-gap`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--2xl`,selector:`.sf-gap--2xl`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with 2xl gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--l`,selector:`.sf-gap--l`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with large (l) gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--m`,selector:`.sf-gap--m`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with medium (m) gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--s`,selector:`.sf-gap--s`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with small (s) gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--xl`,selector:`.sf-gap--xl`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with xl gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--xs`,selector:`.sf-gap--xs`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with xs gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid`,selector:`.sf-grid`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--2xl`,selector:`.sf-grid--2xl`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a 2xl minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--dense`,selector:`.sf-grid--dense`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--fit`,selector:`.sf-grid--fit`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant that switches from auto-fill to auto-fit, collapsing empty columns.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--l`,selector:`.sf-grid--l`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a large (l) minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--m`,selector:`.sf-grid--m`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a medium (m) minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--s`,selector:`.sf-grid--s`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a small (s) minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--xl`,selector:`.sf-grid--xl`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with an xl minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--xs`,selector:`.sf-grid--xs`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with an xs minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-1`,selector:`.sf-grid-cols-1`,kind:`layout`,category:`Layout primitives`,group:`Single-column grid`,description:`Single-column layout (forces all children to one column).`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-1-2`,selector:`.sf-grid-cols-1-2`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-1-3`,selector:`.sf-grid-cols-1-3`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-2`,selector:`.sf-grid-cols-2`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-2-1`,selector:`.sf-grid-cols-2-1`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-3`,selector:`.sf-grid-cols-3`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 3-column fixed grid. Collapses progressively on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-3-1`,selector:`.sf-grid-cols-3-1`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-4`,selector:`.sf-grid-cols-4`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 4-column fixed grid. Collapses progressively on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-6`,selector:`.sf-grid-cols-6`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 6-column fixed grid. Collapses progressively on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-icon`,selector:`.sf-icon`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text.`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--2xl`,selector:`.sf-icon--2xl`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-2xl (extra-extra-large).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--boxed`,selector:`.sf-icon--boxed`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--l`,selector:`.sf-icon--l`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-l (large).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--m`,selector:`.sf-icon--m`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-m (medium, same as base sf-icon).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--s`,selector:`.sf-icon--s`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-s (small).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--xl`,selector:`.sf-icon--xl`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-xl (extra-large).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--xs`,selector:`.sf-icon--xs`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-xs (extra-small).`,optional:!1,layer:`slashed.layout`},{name:`sf-imposter`,selector:`.sf-imposter`,kind:`layout`,category:`Layout primitives`,group:`Imposter`,description:`Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.`,optional:!1,layer:`slashed.layout`},{name:`sf-imposter--contain`,selector:`.sf-imposter--contain`,kind:`layout`,category:`Layout primitives`,group:`Imposter`,description:`Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.`,optional:!1,layer:`slashed.layout`},{name:`sf-imposter--fixed`,selector:`.sf-imposter--fixed`,kind:`layout`,category:`Layout primitives`,group:`Imposter`,description:`Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.`,optional:!1,layer:`slashed.layout`},{name:`sf-line-clamp-2`,selector:`.sf-line-clamp-2`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2.`,optional:!1,layer:`slashed.macros`},{name:`sf-line-clamp-3`,selector:`.sf-line-clamp-3`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.`,optional:!1,layer:`slashed.macros`},{name:`sf-line-clamp-N`,selector:`.sf-line-clamp-N`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.`,optional:!1,layer:`slashed.macros`},{name:`sf-link--reverse`,selector:`.sf-link--reverse`,kind:`macro`,category:`Macro classes`,group:`Link variants`,description:`Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.`,optional:!1,layer:`slashed.macros`},{name:`sf-link--subtle`,selector:`.sf-link--subtle`,kind:`macro`,category:`Macro classes`,group:`Link variants`,description:`Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover.`,optional:!1,layer:`slashed.macros`},{name:`sf-link-external`,selector:`.sf-link-external`,kind:`macro`,category:`Macro classes`,group:`External link indication`,description:`Automatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain.`,optional:!1,layer:`slashed.macros`},{name:`sf-no-tap-highlight`,selector:`.sf-no-tap-highlight`,kind:`macro`,category:`Macro classes`,group:`No tap highlight`,description:`Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.`,optional:!1,layer:`slashed.macros`},{name:`sf-not-prose`,selector:`.sf-not-prose`,kind:`macro`,category:`Macro classes`,group:`Prose`,description:`Opt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade`,selector:`.sf-overflow-fade`,kind:`macro`,category:`Macro classes`,group:`Overflow fade`,description:`Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--block`,selector:`.sf-overflow-fade--block`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades both the top and bottom edges simultaneously (block axis).`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--bottom`,selector:`.sf-overflow-fade--bottom`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the bottom (block-end) edge.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--inline`,selector:`.sf-overflow-fade--inline`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades both the left and right edges simultaneously (inline axis).`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--left`,selector:`.sf-overflow-fade--left`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the left (inline-start) edge.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--right`,selector:`.sf-overflow-fade--right`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--top`,selector:`.sf-overflow-fade--top`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the top (block-start) edge.`,optional:!1,layer:`slashed.macros`},{name:`sf-pancake`,selector:`.sf-pancake`,kind:`layout`,category:`Layout primitives`,group:`Pancake (sticky footer)`,description:`Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports.`,optional:!1,layer:`slashed.layout`},{name:`sf-prose`,selector:`.sf-prose`,kind:`macro`,category:`Macro classes`,group:`Prose`,description:`Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.`,optional:!1,layer:`slashed.macros`},{name:`sf-reel`,selector:`.sf-reel`,kind:`layout`,category:`Layout primitives`,group:`Reel`,description:`Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.`,optional:!1,layer:`slashed.layout`},{name:`sf-scale-down`,selector:`.sf-scale-down`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot scale-down animation (element shrinks from full size). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-scale-up`,selector:`.sf-scale-up`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot scale-up animation (element grows from smaller size). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-scrim`,selector:`.sf-scrim`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Overlay container with a gradient darkening scrim behind text placed on an image or colored background.`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim__content`,selector:`.sf-scrim__content`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Content area inside an sf-scrim. Positioned above the gradient overlay layer.`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim--bottom`,selector:`.sf-scrim--bottom`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim--full`,selector:`.sf-scrim--full`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Scrim variant that covers the entire surface with a uniform translucent overlay.`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim--top`,selector:`.sf-scrim--top`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Scrim variant with the gradient emanating from the top edge (top-to-bottom fade).`,optional:!1,layer:`slashed.macros`},{name:`sf-scroll-shadow`,selector:`.sf-scroll-shadow`,kind:`macro`,category:`Macro classes`,group:`Scroll shadow`,description:`Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.`,optional:!1,layer:`slashed.macros`},{name:`sf-scroll-snap`,selector:`.sf-scroll-snap`,kind:`macro`,category:`Macro classes`,group:`Scroll snap`,description:`Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.`,optional:!1,layer:`slashed.macros`},{name:`sf-section`,selector:`.sf-section`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--2xl`,selector:`.sf-section--2xl`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with 2xl vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--collapse`,selector:`.sf-section--collapse`,kind:`layout`,category:`Layout primitives`,group:`Collapse modifier`,description:`Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks).`,optional:!1,layer:`slashed.layout`},{name:`sf-section--guttered`,selector:`.sf-section--guttered`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--l`,selector:`.sf-section--l`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with large (l) vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--m`,selector:`.sf-section--m`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with medium (m) vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--s`,selector:`.sf-section--s`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with small (s) vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--xl`,selector:`.sf-section--xl`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with xl vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--xs`,selector:`.sf-section--xs`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with xs vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section-group`,selector:`.sf-section-group`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar`,selector:`.sf-sidebar`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left.`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar--narrow`,selector:`.sf-sidebar--narrow`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Sidebar variant with a narrower sidebar column.`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar--right`,selector:`.sf-sidebar--right`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Sidebar variant with the sidebar on the right (second child becomes the sidebar).`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar--wide`,selector:`.sf-sidebar--wide`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Sidebar variant with a wider sidebar column.`,optional:!1,layer:`slashed.layout`},{name:`sf-slide-in-down`,selector:`.sf-slide-in-down`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-above animation. Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-slide-in-left`,selector:`.sf-slide-in-left`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-right animation (slides to the left). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-slide-in-right`,selector:`.sf-slide-in-right`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-left animation (slides to the right). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-slide-in-up`,selector:`.sf-slide-in-up`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-below animation. Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-stack`,selector:`.sf-stack`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--2xl`,selector:`.sf-stack--2xl`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with 2xl gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--center`,selector:`.sf-stack--center`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant that centers children on the cross axis.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--end`,selector:`.sf-stack--end`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant that aligns children to the cross-axis end (right in LTR).`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--l`,selector:`.sf-stack--l`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with large (l) gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--m`,selector:`.sf-stack--m`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with medium (m) gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--s`,selector:`.sf-stack--s`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with small (s) gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--stretch`,selector:`.sf-stack--stretch`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant that stretches children to fill the full available width.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--xl`,selector:`.sf-stack--xl`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with xl gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--xs`,selector:`.sf-stack--xs`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with xs gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-subgrid`,selector:`.sf-subgrid`,kind:`layout`,category:`Layout primitives`,group:`Subgrid`,description:`Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns.`,optional:!1,layer:`slashed.layout`},{name:`sf-subgrid-rows`,selector:`.sf-subgrid-rows`,kind:`layout`,category:`Layout primitives`,group:`Subgrid`,description:`Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows.`,optional:!1,layer:`slashed.layout`},{name:`sf-surface`,selector:`.sf-surface`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--action`,selector:`.sf-surface--action`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the action color palette (button/CTA primary color).`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--danger`,selector:`.sf-surface--danger`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the danger status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--info`,selector:`.sf-surface--info`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the info status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--inverse`,selector:`.sf-surface--inverse`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--neutral`,selector:`.sf-surface--neutral`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the neutral palette (muted/gray).`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--primary`,selector:`.sf-surface--primary`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the primary brand color palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--secondary`,selector:`.sf-surface--secondary`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the secondary brand color palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--success`,selector:`.sf-surface--success`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the success status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--tertiary`,selector:`.sf-surface--tertiary`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the tertiary brand color palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--warning`,selector:`.sf-surface--warning`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the warning status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-switcher`,selector:`.sf-switcher`,kind:`layout`,category:`Layout primitives`,group:`Switcher`,description:`Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.`,optional:!1,layer:`slashed.layout`},{name:`sf-switcher--no-wrap`,selector:`.sf-switcher--no-wrap`,kind:`layout`,category:`Layout primitives`,group:`Switcher`,description:`Switcher variant that stays horizontal and never wraps (single-line regardless of container width).`,optional:!1,layer:`slashed.layout`},{name:`sf-switcher--vertical`,selector:`.sf-switcher--vertical`,kind:`layout`,category:`Layout primitives`,group:`Switcher`,description:`Switcher variant that starts in the vertical (stacked) direction on all sizes.`,optional:!1,layer:`slashed.layout`},{name:`sf-tabular-nums`,selector:`.sf-tabular-nums`,kind:`macro`,category:`Macro classes`,group:`Tabular figures`,description:`Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows.`,optional:!1,layer:`slashed.macros`},{name:`sf-text-gradient`,selector:`.sf-text-gradient`,kind:`macro`,category:`Macro classes`,group:`Text gradient`,description:`Applies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent.`,optional:!1,layer:`slashed.macros`},{name:`sf-text-protect`,selector:`.sf-text-protect`,kind:`macro`,category:`Macro classes`,group:`Text protect`,description:`Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.`,optional:!1,layer:`slashed.macros`},{name:`sf-theme-transition`,selector:`.sf-theme-transition`,kind:`theme`,category:`Theme utilities`,group:`OPT-IN THEME CROSS-FADE`,description:`Opt-in animated light/dark theme crossfade. Apply to  (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.`,optional:!1,layer:`slashed.themes`},{name:`sf-truncate`,selector:`.sf-truncate`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).`,optional:!1,layer:`slashed.macros`},{name:`skip-link`,selector:`.skip-link`,kind:`accessibility`,category:`Accessibility`,group:`Skip link`,description:`Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in .`,optional:!1,layer:`slashed.accessibility`},{name:`sr-only`,selector:`.sr-only`,kind:`accessibility`,category:`Accessibility`,group:`Screen-reader-only. Atomic contract: a partial override`,description:`Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs.`,optional:!1,layer:`slashed.accessibility`},{name:`sr-only-focusable`,selector:`.sr-only-focusable`,kind:`accessibility`,category:`Accessibility`,group:`Screen-reader-only. Atomic contract: a partial override`,description:`Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets.`,optional:!1,layer:`slashed.accessibility`},{name:`theme-transition`,selector:`.theme-transition`,kind:`theme`,category:`Theme example`,group:`5. SMOOTH THEME-TRANSITION HELPER`,description:`Internal helper class used by the sf-theme-transition macro. Applies per-property transitions to registered color tokens during light/dark mode switches.`,optional:!0,layer:`slashed.themes`}]},om={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`,tokensHash:`29dec6de6d0c`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`],counts:{tokens:685,byTier:{PUBLIC:629,"PUBLIC-ADVANCED":55,INTERNAL:1},byCategory:{"Layout tokens":54,"Core tokens":602,"Macro tokens":23,"Component tokens":6}}},tokens:[{name:`--sf-alternate-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`alternate`,category:`Layout tokens`,group:`Alternate (zigzag)`,description:`Gap tokens for the alternating content/media (zigzag) layout.`,note:`Gap between items in the alternating zigzag layout.`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-alternate-inner-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`alternate`,category:`Layout tokens`,group:`Alternate (zigzag)`,description:`Gap tokens for the alternating content/media (zigzag) layout.`,note:`Gap between content and media within each zigzag item.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-blink`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Blinking visibility loop. Use for cursor indicators or critical attention cues. Respect prefers-reduced-motion.`,value:`sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-color-pulse`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Pulsing color loop. Use for live-status badges (recording, live). Respect prefers-reduced-motion.`,value:`sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-1`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Shortest stagger delay. Apply to the first element in a sequentially animated group.`,value:`calc(75ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-2`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Second stagger delay step.`,value:`calc(150ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-3`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Third stagger delay step.`,value:`calc(225ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-4`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Fourth stagger delay step.`,value:`calc(300ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-5`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Longest stagger delay. Apply to the last element in a sequentially animated group.`,value:`calc(375ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-fade-in`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Fade-in entrance animation shorthand. Use directly as animation property value.`,value:`sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-fade-out`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Fade-out exit animation shorthand.`,value:`sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-float`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Gentle floating / levitating loop. Use for hero illustrations or floating UI elements. Decorative — disable for prefers-reduced-motion.`,value:`sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-ping`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Expanding ping / ripple loop. Use for notification badges and live-indicator dots.`,value:`sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-scale-down`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Scale-down exit animation. Pairs with --sf-animation-scale-up for enter/leave transitions.`,value:`sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-scale-up`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Scale-up entrance animation. Use for modals, popovers, and tooltips appearing.`,value:`sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-shimmer`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Shimmer / skeleton-loading sweep. Apply on placeholder elements while content loads.`,value:`sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-down`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from above. Use for dropdown menus and top-attached sheets.`,value:`sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-left`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from the left. Use for left-side drawers and navigation panels.`,value:`sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-right`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from the right. Use for right-side drawers and detail panels.`,value:`sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-up`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from below. Use for bottom sheets, toasts, and floating action buttons.`,value:`sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-spin`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Continuous rotation loop. Use for loading spinners and progress indicators.`,value:`sf-spin var(--sf-duration-slower) linear infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-aspect`,tier:`PUBLIC`,role:`knob`,namespace:`aspect`,category:`Macro tokens`,group:`Aspect ratio`,description:`Aspect-ratio value for the .aspect-ratio macro.`,note:`Aspect ratio value for the .aspect-ratio macro.`,value:`16 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-cols-default`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Default column count for the bento grid.`,value:`4`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Gap between bento grid cells.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-row-compact`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Row height for compact-variant bento items.`,value:`6rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-row-default`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Default row height for standard bento grid cells.`,value:`10rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-row-tall`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Tall row height for visually prominent or hero bento cells.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-fit`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.`,note:`object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.`,value:`cover`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-inset`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`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.`,note:`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.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-position`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).`,note:`object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).`,value:`50% 50%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-radius`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.`,note:`border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-z`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.`,note:`z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.`,value:`-2`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-blur`,tier:`PUBLIC`,role:`knob`,namespace:`blur`,category:`Core tokens`,group:`Blur & opacity`,description:`Backdrop-filter blur scale and background-opacity tokens.`,note:`Backdrop-filter blur amount for frosted-glass surfaces (navbars, overlays, dialogs). Default 12px. Pair with a semi-transparent background.`,value:`12px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-color`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Text color for body copy. Alias of --sf-color-text. Override here to deviate body text from the global text color.`,value:`var(--sf-color-text)`,aliasOf:`--sf-color-text`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-em-style`,tier:`PUBLIC`,role:`knob`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`font-style for  inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.`,value:`italic`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-font-family`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font family for body text. Alias of --sf-font-body.`,value:`var(--sf-font-body)`,aliasOf:`--sf-font-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-font-size`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Base font size for body paragraphs. Alias of --sf-text-m.`,value:`var(--sf-text-m)`,aliasOf:`--sf-text-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for body text. Alias of --sf-font-weight-body.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for body paragraphs. Alias of --sf-leading-normal.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-strong-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for  inside body text. Override to choose a specific weight instead of inheriting bold.`,value:`var(--sf-font-weight-strong)`,aliasOf:`--sf-font-weight-strong`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-text-wrap`,tier:`PUBLIC`,role:`knob`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`text-wrap mode for body paragraphs. 'pretty' prevents orphaned last words; 'balance' equalises line lengths.`,value:`pretty`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border shorthands`,description:`Ready-to-use border shorthand values (width + style + color) for the three most common border weights.`,note:`Default border shorthand (width + solid + color). Apply directly to border property.`,value:`var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-scale`,tier:`PUBLIC`,role:`knob`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Global border-width multiplier. Set to 0 for borderless UI; 0.5 for hairline-only; 2 to double all border widths across the system.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border shorthands`,description:`Ready-to-use border shorthand values (width + style + color) for the three most common border weights.`,note:`Strong-emphasis border shorthand.`,value:`var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-style`,tier:`PUBLIC`,role:`knob`,namespace:`border`,category:`Core tokens`,group:`Border style`,description:`Global border-style default (solid, dashed, etc.).`,note:`Global border-style default applied across all border tokens.`,value:`solid`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border shorthands`,description:`Ready-to-use border shorthand values (width + style + color) for the three most common border weights.`,note:`Low-contrast subtle border shorthand.`,value:`var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-1`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Standard 1px border width.`,value:`calc(1px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-2`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Medium 2px border width. Common for focus outlines.`,value:`calc(2px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-3`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Thick 3px border width.`,value:`calc(3px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-4`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Extra-thick 4px border width for decorative borders.`,value:`calc(4px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-hairline`,tier:`PUBLIC`,role:`knob`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`1px border width (hairline).`,value:`0.5px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-box-border-color`,tier:`PUBLIC`,role:`consumption`,namespace:`box`,category:`Layout tokens`,group:`Box`,description:`Border, background, and padding tokens for the box layout primitive.`,note:`Border color for the box layout primitive.`,value:`var(--sf-color-border)`,aliasOf:`--sf-color-border`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-box-border-width`,tier:`PUBLIC`,role:`knob`,namespace:`box`,category:`Layout tokens`,group:`Box`,description:`Border, background, and padding tokens for the box layout primitive.`,note:`Border width for the box layout primitive.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-box-padding`,tier:`PUBLIC`,role:`consumption`,namespace:`box`,category:`Layout tokens`,group:`Box`,description:`Border, background, and padding tokens for the box layout primitive.`,note:`Inner padding for the box layout primitive.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-breakout-width`,tier:`PUBLIC`,role:`consumption`,namespace:`breakout`,category:`Layout tokens`,group:`Content grid (breakout pattern)`,description:`Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).`,note:`Width of full-bleed breakout elements inside a content grid.`,value:`var(--sf-container-wide)`,aliasOf:`--sf-container-wide`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-btn-padding-block`,tier:`PUBLIC`,role:`consumption`,namespace:`btn`,category:`Component tokens`,group:`BUTTON TOKENS`,description:`Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.`,note:``,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-btn-padding-inline`,tier:`PUBLIC`,role:`consumption`,namespace:`btn`,category:`Component tokens`,group:`BUTTON TOKENS`,description:`Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.`,note:``,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-btn-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`btn`,category:`Component tokens`,group:`BUTTON TOKENS`,description:`Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.`,note:``,value:`var(--sf-radius-m)`,aliasOf:`--sf-radius-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-caret-color`,tier:`PUBLIC`,role:`consumption`,namespace:`caret`,category:`Core tokens`,group:`Focus / form colors`,description:`Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.`,note:`Cursor caret color inside text inputs and contenteditable elements.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-center-gutter`,tier:`PUBLIC`,role:`consumption`,namespace:`center`,category:`Layout tokens`,group:`Center`,description:`Max-width and gutter for the center layout primitive.`,note:`Minimum side gutter for the center layout.`,value:`var(--sf-gutter)`,aliasOf:`--sf-gutter`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-center-max`,tier:`PUBLIC`,role:`consumption`,namespace:`center`,category:`Layout tokens`,group:`Center`,description:`Max-width and gutter for the center layout primitive.`,note:`Maximum width for the center layout.`,value:`var(--sf-container-default)`,aliasOf:`--sf-container-default`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cluster-align`,tier:`PUBLIC`,role:`knob`,namespace:`cluster`,category:`Layout tokens`,group:`Cluster`,description:`Configuration tokens for the cluster layout (inline wrapped items).`,note:`Vertical alignment of cluster items (align-items value).`,value:`center`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cluster-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`cluster`,category:`Layout tokens`,group:`Cluster`,description:`Configuration tokens for the cluster layout (inline wrapped items).`,note:`Gap between wrapped inline items in the cluster layout.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cluster-justify`,tier:`PUBLIC`,role:`knob`,namespace:`cluster`,category:`Layout tokens`,group:`Cluster`,description:`Configuration tokens for the cluster layout (inline wrapped items).`,note:`Horizontal justification of the cluster (justify-content value).`,value:`flex-start`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-code-font-size`,tier:`PUBLIC`,role:`knob`,namespace:`code`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for inline  and 
. Usually slightly smaller than body text so monospace doesn't feel oversized.`,value:`0.875em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.`,value:`light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Action color at pressed/active brightness.`,value:`var(--sf-color-action-xdark)`,aliasOf:`--sf-color-action-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Action color at hover brightness.`,value:`var(--sf-color-action-darker)`,aliasOf:`--sf-color-action-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Very light action shade. Hover fills on white surfaces, badge backgrounds.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Light action shade. Subtle fills and outlined badge backgrounds.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Light-mid action shade. Borders on light backgrounds, low-emphasis fills.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Mid-light action shade. Disabled state fills, decorative accents.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Lightest action tint. Background fill for subtle action-tinted surfaces.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Mid-dark action shade. Text on light surfaces, icon fills.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Dark action shade. Strong text and icon fills on light backgrounds.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Very dark action shade. High-contrast text on white.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-black action shade. Extreme contrast on white surfaces.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Darkest action tint. Near-black for dark-theme surface accents.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`10% opacity action tint. Subtle hover or selected-row background.`,value:`oklch(from var(--sf-color-action) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`30% opacity action tint.`,value:`oklch(from var(--sf-color-action) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`5% opacity action tint. Barely-there hover highlight.`,value:`oklch(from var(--sf-color-action) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`50% opacity action tint. Mid-transparency badge or overlay.`,value:`oklch(from var(--sf-color-action) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`80% opacity action tint.`,value:`oklch(from var(--sf-color-action) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Deep action shade for high-contrast contexts.`,value:`var(--sf-color-action-600)`,aliasOf:`--sf-color-action-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-transparent action tint for ghost-button hover backgrounds.`,value:`var(--sf-color-action-a5)`,aliasOf:`--sf-color-action-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Light action shade for soft accents.`,value:`var(--sf-color-action-400)`,aliasOf:`--sf-color-action-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Medium action fill — outlined button hover backgrounds.`,value:`var(--sf-color-action-a30)`,aliasOf:`--sf-color-action-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`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%.`,value:`oklch(0.70 0.198 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.`,note:`OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.`,value:`oklch(0.50 0.22 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Lightest action tint — selected rows, active nav, chips.`,value:`var(--sf-color-action-a10)`,aliasOf:`--sf-color-action-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-black action shade for maximum contrast on light surfaces.`,value:`var(--sf-color-action-950)`,aliasOf:`--sf-color-action-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-white action shade for maximum contrast on dark surfaces.`,value:`var(--sf-color-action-50)`,aliasOf:`--sf-color-action-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Extra-dark action shade.`,value:`var(--sf-color-action-800)`,aliasOf:`--sf-color-action-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Extra-light action shade.`,value:`var(--sf-color-action-200)`,aliasOf:`--sf-color-action-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role.`,value:`light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Pressed/active surface derived from --sf-color-base for subtle background interactions.`,value:`oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Hover-state surface derived from --sf-color-base for subtle background interactions.`,value:`oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Very light base-surface level.`,value:`oklch(from var(--sf-color-base) 0.94 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Light base-surface level.`,value:`oklch(from var(--sf-color-base) 0.88 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Light-mid base-surface level.`,value:`oklch(from var(--sf-color-base) 0.78 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Mid-light base-surface level.`,value:`oklch(from var(--sf-color-base) 0.65 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Lightest base-surface level.`,value:`oklch(from var(--sf-color-base) 0.97 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Mid base-surface level.`,value:`oklch(from var(--sf-color-base) 0.50 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Mid-dark base-surface level.`,value:`oklch(from var(--sf-color-base) 0.37 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Dark base-surface level.`,value:`oklch(from var(--sf-color-base) 0.27 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Very dark base-surface level.`,value:`oklch(from var(--sf-color-base) 0.17 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Near-black base-surface level.`,value:`oklch(from var(--sf-color-base) 0.11 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Darkest base-surface level.`,value:`oklch(from var(--sf-color-base) 0.06 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`10% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`30% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`5% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`50% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`80% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Near-transparent base-surface tint for ghost backgrounds.`,value:`var(--sf-color-base-a5)`,aliasOf:`--sf-color-base-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Medium base-surface fill for muted containers or overlays.`,value:`var(--sf-color-base-a30)`,aliasOf:`--sf-color-base-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets.`,value:`oklch(0.22 0.003 250)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`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.`,note:`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.`,value:`oklch(0.96 0.006 250)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Subtle base-surface tint for low-emphasis backgrounds.`,value:`var(--sf-color-base-a10)`,aliasOf:`--sf-color-base-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Base page / component background. The canvas all other surfaces layer on top of.`,value:`oklch(from var(--sf-color-base) calc(l + 0.02) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background tint for pressed/active interactive elements.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.12)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background for disabled interactive elements.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--focus`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background tint for focused interactive elements.`,value:`oklch(from var(--sf-color-action) l c h / 0.06)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background tint for hovered interactive elements (rows, list items, etc.).`,value:`oklch(from var(--sf-color-neutral) l c h / 0.08)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--selected`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background for selected items (checked rows, active nav links).`,value:`oklch(from var(--sf-color-action) l c h / 0.1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-black`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Absolute black reference value.`,value:`oklch(0% 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Default border for dividers and component edges.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Border alpha tokens`,description:`Semi-transparent border variants for overlays and glass-morphism effects.`,note:`Semi-transparent border for disabled element edges.`,value:`oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--focus`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Focus indicator border, used alongside --sf-focus-ring-color.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Stronger border for visually prominent edges and active outlines.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Low-contrast border for subtle separation without strong visual weight.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--translucent`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Border alpha tokens`,description:`Semi-transparent border variants for overlays and glass-morphism effects.`,note:`Translucent border for glass-morphism and frosted surfaces.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.15)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-code-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background for inline  elements. Usually a subtle tint of the inset surface.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-code-text`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Text color for inline code and monospace preformatted text.`,value:`oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.`,value:`light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium danger fill for icon backgrounds and badge fills.`,value:`oklch(from var(--sf-color-danger) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-danger.`,value:`oklch(0.71 0.198 12)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).`,note:`OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).`,value:`oklch(0.48 0.22 12)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast danger color for alert body text and icons.`,value:`light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light danger tint for error row backgrounds and alert container fills.`,value:`oklch(from var(--sf-color-danger) l c h / 0.1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-dim`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Backdrop overlay color for modals, drawers, and lightboxes.`,value:`oklch(0 0 0 / 0.5)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-heading`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Heading text color. Slightly stronger contrast than body text for visual hierarchy.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Informational color for neutral tips, hints, and non-urgent notices.`,value:`light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium info fill for info icons and hint chips.`,value:`oklch(from var(--sf-color-info) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-info.`,value:`oklch(0.71 0.162 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the info status color.`,note:`OKLCH lightness source for the info status color.`,value:`oklch(0.48 0.18 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast info color for hint body text.`,value:`light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light info tint for informational note backgrounds.`,value:`oklch(from var(--sf-color-info) l c h / 0.1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-inset`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.`,value:`oklch(from var(--sf-color-base) calc(l - 0.02) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-inverse`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.`,value:`oklch(from var(--sf-color-base) calc(1 - l) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Default hyperlink color.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Link color when actively pressed.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Disabled link color (low contrast, no interaction).`,value:`var(--sf-color-text--disabled)`,aliasOf:`--sf-color-text--disabled`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Link color on hover.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--underline`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Link alpha token`,description:`Semi-transparent underline color token used to tint the link underline independently from the link text color.`,note:`Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.`,value:`oklch(from var(--sf-color-action) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--visited`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Visited link color.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-mark-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Selection & mark`,description:`Background and text colors for browser text selections and  highlights. Adapts automatically in dark mode.`,note:`Background color for highlighted  elements.`,value:`oklch(from var(--sf-color-warning) l c h / 0.25)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-mark-text`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Text color inside highlighted  elements.`,value:`inherit`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Neutral interactive color for low-emphasis actions and tertiary buttons.`,value:`light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Neutral color at pressed/active brightness.`,value:`var(--sf-color-neutral-xdark)`,aliasOf:`--sf-color-neutral-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Neutral color at hover brightness.`,value:`var(--sf-color-neutral-darker)`,aliasOf:`--sf-color-neutral-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Very light neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Light neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Light-mid neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Mid-light neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Lightest neutral tint.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Mid neutral shade — the 'pure' hue.`,value:`var(--sf-color-neutral)`,aliasOf:`--sf-color-neutral`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Mid-dark neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Dark neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Very dark neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-black neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Darkest neutral tint.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`10% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`30% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`5% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`50% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`80% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Deep neutral shade for high-contrast contexts.`,value:`var(--sf-color-neutral-600)`,aliasOf:`--sf-color-neutral-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-transparent neutral tint for ghost-button hover backgrounds.`,value:`var(--sf-color-neutral-a5)`,aliasOf:`--sf-color-neutral-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Light neutral shade.`,value:`var(--sf-color-neutral-400)`,aliasOf:`--sf-color-neutral-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Muted neutral fill for low-emphasis contexts.`,value:`var(--sf-color-neutral-a30)`,aliasOf:`--sf-color-neutral-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-neutral.`,value:`oklch(0.69 0.0225 260)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the neutral color.`,note:`OKLCH lightness source for the neutral color.`,value:`oklch(0.52 0.025 260)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Lightest neutral semantic tint.`,value:`var(--sf-color-neutral-a10)`,aliasOf:`--sf-color-neutral-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-black neutral shade.`,value:`var(--sf-color-neutral-950)`,aliasOf:`--sf-color-neutral-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-white neutral shade.`,value:`var(--sf-color-neutral-50)`,aliasOf:`--sf-color-neutral-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Extra-dark neutral shade.`,value:`var(--sf-color-neutral-800)`,aliasOf:`--sf-color-neutral-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Extra-light neutral shade.`,value:`var(--sf-color-neutral-200)`,aliasOf:`--sf-color-neutral-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-overlay`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Overlay surface for floating panels, sheets, and modals.`,value:`oklch(from var(--sf-color-base) l c h / 0.9)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles.`,value:`light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Primary color at pressed/active brightness.`,value:`var(--sf-color-primary-xdark)`,aliasOf:`--sf-color-primary-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Primary color at hover brightness.`,value:`var(--sf-color-primary-darker)`,aliasOf:`--sf-color-primary-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Very light primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Light primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Light-mid primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Mid-light primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Lightest primary tint.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Mid primary shade — the 'pure' hue.`,value:`var(--sf-color-primary)`,aliasOf:`--sf-color-primary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Mid-dark primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Dark primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Very dark primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-black primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Darkest primary tint.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`10% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`30% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`5% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`50% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`80% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Deep primary shade.`,value:`var(--sf-color-primary-600)`,aliasOf:`--sf-color-primary-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-transparent primary tint for ghost-button hover backgrounds.`,value:`var(--sf-color-primary-a5)`,aliasOf:`--sf-color-primary-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Light primary shade.`,value:`var(--sf-color-primary-400)`,aliasOf:`--sf-color-primary-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Muted primary fill.`,value:`var(--sf-color-primary-a30)`,aliasOf:`--sf-color-primary-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-primary.`,value:`oklch(0.715 0.243 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the primary color.`,note:`OKLCH lightness source for the primary color.`,value:`oklch(0.47 0.27 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Lightest primary semantic tint.`,value:`var(--sf-color-primary-a10)`,aliasOf:`--sf-color-primary-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-black primary shade.`,value:`var(--sf-color-primary-950)`,aliasOf:`--sf-color-primary-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-white primary shade.`,value:`var(--sf-color-primary-50)`,aliasOf:`--sf-color-primary-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Extra-dark primary shade.`,value:`var(--sf-color-primary-800)`,aliasOf:`--sf-color-primary-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Extra-light primary shade.`,value:`var(--sf-color-primary-200)`,aliasOf:`--sf-color-primary-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-raised`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Elevated card surface that floats above the page background.`,value:`oklch(from var(--sf-color-base) calc(l + 0.04) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-scheme`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Color scheme`,description:`Preferred color-scheme hint sent to the browser (light / dark / normal).`,note:`Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling.`,value:`light dark`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Raw secondary palette token for the secondary brand color.`,value:`light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Secondary color at pressed/active brightness.`,value:`var(--sf-color-secondary-xdark)`,aliasOf:`--sf-color-secondary-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Secondary color at hover brightness.`,value:`var(--sf-color-secondary-darker)`,aliasOf:`--sf-color-secondary-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Very light secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Light secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Light-mid secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Mid-light secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Lightest secondary tint.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Mid secondary shade — the 'pure' hue.`,value:`var(--sf-color-secondary)`,aliasOf:`--sf-color-secondary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Mid-dark secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Dark secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Very dark secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-black secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Darkest secondary tint.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`10% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`30% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`5% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`50% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`80% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Deep secondary shade.`,value:`var(--sf-color-secondary-600)`,aliasOf:`--sf-color-secondary-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-transparent secondary tint for ghost-button hover backgrounds.`,value:`var(--sf-color-secondary-a5)`,aliasOf:`--sf-color-secondary-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Light secondary shade.`,value:`var(--sf-color-secondary-400)`,aliasOf:`--sf-color-secondary-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Muted secondary fill.`,value:`var(--sf-color-secondary-a30)`,aliasOf:`--sf-color-secondary-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-secondary.`,value:`oklch(0.84 0.036 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the secondary color.`,note:`OKLCH lightness source for the secondary color.`,value:`oklch(0.22 0.04 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Lightest secondary semantic tint.`,value:`var(--sf-color-secondary-a10)`,aliasOf:`--sf-color-secondary-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-black secondary shade.`,value:`var(--sf-color-secondary-950)`,aliasOf:`--sf-color-secondary-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-white secondary shade.`,value:`var(--sf-color-secondary-50)`,aliasOf:`--sf-color-secondary-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Extra-dark secondary shade.`,value:`var(--sf-color-secondary-800)`,aliasOf:`--sf-color-secondary-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Extra-light secondary shade.`,value:`var(--sf-color-secondary-200)`,aliasOf:`--sf-color-secondary-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-selection-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Selection`,description:`Text-selection background color.`,note:`Background color applied to browser text selections.`,value:`light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-selection-text`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Text color inside browser text selections.`,value:`inherit`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Positive / success color for confirmation messages and completed-state indicators.`,value:`light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium success fill for success icons and status chips.`,value:`oklch(from var(--sf-color-success) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-success.`,value:`oklch(0.70 0.144 145)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the success status color.`,note:`OKLCH lightness source for the success status color.`,value:`oklch(0.50 0.16 145)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast success color for confirmation message text.`,value:`light-dark( oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light success tint for confirmation backgrounds.`,value:`oklch(from var(--sf-color-success) l c h / 0.12)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-surface`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Resolved color tokens`,description:`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.`,note:`Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.`,value:`var(--sf-color-base)`,aliasOf:`--sf-color-base`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Raw tertiary palette token for the third brand color.`,value:`light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Tertiary color at pressed/active brightness.`,value:`var(--sf-color-tertiary-xdark)`,aliasOf:`--sf-color-tertiary-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Tertiary color at hover brightness.`,value:`var(--sf-color-tertiary-darker)`,aliasOf:`--sf-color-tertiary-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Very light tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Light tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Light-mid tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Mid-light tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Lightest tertiary tint.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Mid tertiary shade — the 'pure' hue.`,value:`var(--sf-color-tertiary)`,aliasOf:`--sf-color-tertiary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Mid-dark tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Dark tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Very dark tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-black tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Darkest tertiary tint.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`10% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`30% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`5% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`50% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`80% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Deep tertiary shade.`,value:`var(--sf-color-tertiary-600)`,aliasOf:`--sf-color-tertiary-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-transparent tertiary tint for ghost-button hover backgrounds.`,value:`var(--sf-color-tertiary-a5)`,aliasOf:`--sf-color-tertiary-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Light tertiary shade.`,value:`var(--sf-color-tertiary-400)`,aliasOf:`--sf-color-tertiary-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Muted tertiary fill.`,value:`var(--sf-color-tertiary-a30)`,aliasOf:`--sf-color-tertiary-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-tertiary.`,value:`oklch(0.74 0.198 295)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the tertiary color.`,note:`OKLCH lightness source for the tertiary color.`,value:`oklch(0.42 0.22 295)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Lightest tertiary semantic tint.`,value:`var(--sf-color-tertiary-a10)`,aliasOf:`--sf-color-tertiary-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-black tertiary shade.`,value:`var(--sf-color-tertiary-950)`,aliasOf:`--sf-color-tertiary-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-white tertiary shade.`,value:`var(--sf-color-tertiary-50)`,aliasOf:`--sf-color-tertiary-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Extra-dark tertiary shade.`,value:`var(--sf-color-tertiary-800)`,aliasOf:`--sf-color-tertiary-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Extra-light tertiary shade.`,value:`var(--sf-color-tertiary-200)`,aliasOf:`--sf-color-tertiary-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Primary text color. Contrasts against --sf-color-bg for body copy.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Text color for disabled UI elements. Intentionally low contrast.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--inverse`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Text color for use on dark/inverted backgrounds.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Muted text for metadata, timestamps, and low-priority annotations.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h), oklch(from var(--sf-color-neutral) clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-action`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground color for text on action-colored backgrounds.`,value:`oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-base`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on base-colored backgrounds.`,value:`var(--sf-color-text)`,aliasOf:`--sf-color-text`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-danger`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on danger-colored backgrounds.`,value:`oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-info`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on info-colored backgrounds.`,value:`oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-inverse`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds.`,value:`oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-neutral`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on neutral-colored backgrounds.`,value:`oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-primary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on primary-colored backgrounds.`,value:`oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on secondary-colored backgrounds.`,value:`oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-success`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on success-colored backgrounds.`,value:`oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-tertiary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on tertiary-colored backgrounds.`,value:`oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-warning`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on warning-colored backgrounds.`,value:`oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--placeholder`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Placeholder text color for inputs and textareas.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`De-emphasised secondary text (captions, labels, supporting copy).`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Warning / caution color for non-critical alerts and degraded-state indicators.`,value:`light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium warning fill for icons and caution chips.`,value:`oklch(from var(--sf-color-warning) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-warning.`,value:`oklch(0.65 0.153 80)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the warning status color.`,note:`OKLCH lightness source for the warning status color.`,value:`oklch(0.75 0.17 80)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast warning color for caution text.`,value:`light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light warning tint for warning notification backgrounds.`,value:`oklch(from var(--sf-color-warning) l c h / 0.12)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-white`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Absolute white reference value.`,value:`oklch(100% 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-component-pad`,tier:`PUBLIC`,role:`consumption`,namespace:`component`,category:`Core tokens`,group:`Output token @property registrations`,description:`Standard inner padding for interactive components (buttons, form inputs, chips).`,note:`Standard inner padding for interactive components (buttons, form inputs, chips).`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-default`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Default content container max-width (~1200px).`,value:`75rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-full`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Full-width container — removes the max-width constraint.`,value:`100%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-narrow`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Narrow content max-width — ideal for article body and blog posts (~65ch).`,value:`38rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-prose`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Prose max-width — optimised for readability (~75ch).`,value:`65ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-wide`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Wide container for marketing / dashboard layouts (~1440px).`,value:`90rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-content-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`content`,category:`Core tokens`,group:`Output token @property registrations`,description:`Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.`,note:`Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.`,value:`var(--sf-space-s)`,aliasOf:`--sf-space-s`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-content-intrinsic-size`,tier:`PUBLIC`,role:`knob`,namespace:`content`,category:`Macro tokens`,group:`Content visibility`,description:`intrinsic-size hint for content-visibility: auto (lazy off-screen rendering).`,note:`Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal).`,value:`500px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-content-width`,tier:`PUBLIC`,role:`consumption`,namespace:`content`,category:`Layout tokens`,group:`Content grid (breakout pattern)`,description:`Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).`,note:`Max-width of the main content column in a content grid.`,value:`var(--sf-container-default)`,aliasOf:`--sf-container-default`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-contrast-bias`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`contrast`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral).`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-contrast-threshold`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`contrast`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.`,value:`0.6`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cover-min-height`,tier:`PUBLIC`,role:`knob`,namespace:`cover`,category:`Layout tokens`,group:`Cover`,description:`Min-height and padding for the full-viewport cover layout.`,note:`Minimum height of the cover layout (typically 100svh).`,value:`100dvh`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cover-padding`,tier:`PUBLIC`,role:`consumption`,namespace:`cover`,category:`Layout tokens`,group:`Cover`,description:`Min-height and padding for the full-viewport cover layout.`,note:`Inner padding for the cover layout.`,value:`var(--sf-section-pad)`,aliasOf:`--sf-section-pad`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-current-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`current`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Inherits the current font-weight from context. Useful as a reset.`,value:`var(--sf-font-weight-bold)`,aliasOf:`--sf-font-weight-bold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-display-l-line-height`,tier:`PUBLIC`,role:`knob`,namespace:`display`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-display-m-line-height`,tier:`PUBLIC`,role:`knob`,namespace:`display`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Line height for medium display text (--sf-text-display-m).`,value:`1.05`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-display-s-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`display`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Line height for small display text (--sf-text-display-s).`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-color`,tier:`PUBLIC`,role:`consumption`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Color of horizontal/vertical divider rules.`,value:`var(--sf-color-border)`,aliasOf:`--sf-color-border`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Spacing (margin) around divider elements.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-style`,tier:`PUBLIC`,role:`knob`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Border style of dividers.`,value:`solid`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-width`,tier:`PUBLIC`,role:`consumption`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Stroke width of horizontal and vertical divider rules.`,value:`var(--sf-border-width-1)`,aliasOf:`--sf-border-width-1`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-drop-shadow-l`,tier:`PUBLIC`,role:`consumption`,namespace:`drop`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.`,note:`Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.`,value:`drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-drop-shadow-m`,tier:`PUBLIC`,role:`consumption`,namespace:`drop`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium CSS filter: drop-shadow for elevated icons and card thumbnails.`,note:`Medium CSS filter: drop-shadow for elevated icons and card thumbnails.`,value:`drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-drop-shadow-s`,tier:`PUBLIC`,role:`consumption`,namespace:`drop`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.`,note:`Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.`,value:`drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-fast`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Fast duration (~100ms). Hover transitions, tooltip appear.`,value:`calc(150ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-instant`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Near-instant duration (~50ms). Micro-interactions and cursor-follow effects.`,value:`calc(100ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-none`,tier:`PUBLIC`,role:`knob`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`0ms duration. Disables transitions (respects prefers-reduced-motion).`,value:`0ms`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-normal`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Normal duration (~200ms). Default for most transitions.`,value:`calc(250ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-slow`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Slow duration (~350ms). Emphasis transitions, drawers.`,value:`calc(400ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-slower`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Extra-slow duration (~600ms). Page-level enter/exit transitions.`,value:`calc(600ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-bounce`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Bounce easing. Playful overshooting effect.`,value:`linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-elastic`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Elastic easing. Spring-like overshooting effect.`,value:`linear(0, 0.3, 1.2, 0.9, 1.05, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-in`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Accelerating easing. Use for elements leaving the viewport.`,value:`cubic-bezier(0.5, 0, 0.75, 0.25)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-in-out`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Symmetric easing. Use for elements that move within the viewport.`,value:`cubic-bezier(0.4, 0, 0.2, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-linear`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Linear easing. Use for progress indicators and spinner rotations.`,value:`linear`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-out`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Decelerating easing. Use for elements entering the viewport.`,value:`cubic-bezier(0.25, 0, 0.15, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-overshoot`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Subtle overshoot easing. Softer spring effect.`,value:`linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-spring`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Spring easing. Natural physics-based motion.`,value:`linear(0, 0.5, 1.1, 0.95, 1.02, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Gap between equal columns.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the default auto-fill equal-columns layout. Columns fill the row until this width is reached, then wrap to the next line.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-2`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 2-column equal preset.`,value:`28rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-3`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 3-column equal preset.`,value:`15rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-4`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 4-column equal preset.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-6`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 6-column equal preset.`,value:`10rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-field-block`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Core tokens`,group:`Output token @property registrations`,description:`Vertical (block) padding inside form fields.`,note:`Vertical (block) padding inside form fields.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-field-padding-block`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Component tokens`,group:`FIELD TOKENS`,description:`Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.`,note:`Vertical (block) inner padding for form field inputs.`,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-field-padding-inline`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Component tokens`,group:`FIELD TOKENS`,description:`Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.`,note:`Horizontal (inline) inner padding for form field inputs.`,value:`var(--sf-space-s)`,aliasOf:`--sf-space-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-field-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Component tokens`,group:`FIELD TOKENS`,description:`Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.`,note:`Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once.`,value:`var(--sf-radius-m)`,aliasOf:`--sf-radius-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-field-required-marker`,tier:`PUBLIC`,role:`knob`,namespace:`field`,category:`Core tokens`,group:`Semantic gap tokens`,description:`CSS content value for required-field markers (e.g. " *"). Used by pseudo-elements in the .required utility pattern.`,note:`CSS content value for required-field markers (e.g. " *"). Used by pseudo-elements in the .required utility pattern.`,value:`" *"`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-flow-space`,tier:`PUBLIC`,role:`consumption`,namespace:`flow`,category:`Macro tokens`,group:`Flow`,description:`Vertical rhythm gap between flow children (margin-block-start on all but the first child).`,note:`Margin-block-start applied to all flow children except the first.`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-fluid-max-vw`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`fluid`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Maximum viewport width (in rem) at which the fluid scale clamps to its largest values. Default 90rem (~1440px). Part of the fluid scale engine.`,value:`90`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-fluid-min-vw`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`fluid`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`22.5`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-color`,tier:`PUBLIC`,role:`consumption`,namespace:`focus`,category:`Core tokens`,group:`Focus / form colors`,description:`Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.`,note:`Color of the keyboard focus ring. Ensure sufficient contrast against all background surfaces.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-offset`,tier:`PUBLIC`,role:`knob`,namespace:`focus`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Gap between the element edge and the focus ring.`,value:`2px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-shadow`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`focus`,category:`Core tokens`,group:`Focus / form colors`,description:`Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.`,note:`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.`,value:`0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-style`,tier:`PUBLIC`,role:`knob`,namespace:`focus`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Border style of the focus ring (solid, dashed, dotted).`,value:`solid`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-width`,tier:`PUBLIC`,role:`knob`,namespace:`focus`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Stroke width of the focus ring outline.`,value:`2px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-body`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Font family stack for body text. Override to set your primary typeface.`,value:`system-ui, -apple-system, sans-serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-display`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Font family for display/marketing text. Override for large headline typefaces.`,value:`var(--sf-font-heading)`,aliasOf:`--sf-font-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-features`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`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.`,value:`normal`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-geometric`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Geometric sans-serif slot — circular letterforms for brand alternates.`,value:`"Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-heading`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Font family for headings. Defaults to display if not overridden separately.`,value:`var(--sf-font-body)`,aliasOf:`--sf-font-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-humanist`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Humanist sans-serif slot — warm, readable alternate typeface.`,value:`"Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-mono`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Monospace font family for code, pre, and kbd elements.`,value:`ui-monospace, monospace`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-numeric`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`font-variant-numeric shorthand (e.g. tabular-nums) for aligned numeric data.`,value:`tabular-nums`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-slab`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Slab-serif slot for editorial or display headings.`,value:`"Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-variation`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Variable-font axis settings for body text (e.g. "wght" 450). Default 'normal'. Override on :root or a subtree to activate variable-font axes.`,value:`normal`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-body`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for body text (typically 400 / normal).`,value:`var(--sf-font-weight-normal)`,aliasOf:`--sf-font-weight-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-bold`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Strong emphasis weight (700).`,value:`700`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-display`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for display-size text.`,value:`var(--sf-font-weight-bold)`,aliasOf:`--sf-font-weight-bold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-heading`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for headings (typically 600–700).`,value:`var(--sf-font-weight-semibold)`,aliasOf:`--sf-font-weight-semibold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-interactive`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold.`,value:`var(--sf-font-weight-semibold)`,aliasOf:`--sf-font-weight-semibold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-light`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Light weight (300). Use sparingly — check contrast at small sizes.`,value:`300`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-medium`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Medium weight (500). Subtle emphasis without full bold.`,value:`500`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-normal`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Normal / regular weight (400).`,value:`400`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-semibold`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Semibold weight (600). Common for labels and subheadings.`,value:`600`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for strong/emphasis inline role. Defaults to bold.`,value:`var(--sf-font-weight-bold)`,aliasOf:`--sf-font-weight-bold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-frame-ratio`,tier:`PUBLIC`,role:`knob`,namespace:`frame`,category:`Layout tokens`,group:`Frame`,description:`Aspect ratio for the frame layout primitive (media container).`,note:`Aspect ratio for the frame (media container) layout.`,value:`16 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`gap`,category:`Core tokens`,group:`Output token @property registrations`,description:`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.`,note:`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.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-brand`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents.`,value:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--b`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-bottom gradient (transparent → surface). Use to fade content into a background below (infinite scroll fade, content cutoff).`,value:`linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--l`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-left gradient. Use to indicate left-side scrollable overflow.`,value:`linear-gradient(in oklch to left, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--r`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-right gradient. Use to indicate right-side scrollable overflow.`,value:`linear-gradient(in oklch to right, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--t`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-top gradient (transparent → surface). Use to fade content into a background above.`,value:`linear-gradient(in oklch to top, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-primary`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Gradient using primary palette colors (light to saturated).`,value:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Gradient using secondary palette colors.`,value:`linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-surface`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Subtle surface-color gradient for depth layering and glass effects.`,value:`linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-tertiary`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Gradient using tertiary palette colors.`,value:`linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Gap between auto-fill grid cells.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Minimum column width for the auto-fill grid.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-2xl`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Minimum column width at the 2× breakpoint.`,value:`28rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-l`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Large minimum column width for the auto-fill grid.`,value:`20rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-m`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Medium minimum column width for the auto-fill grid.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-s`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Small minimum column width for the auto-fill grid.`,value:`13rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-xl`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Extra-large minimum column width for the auto-fill grid. Use for wide content cards.`,value:`24rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-xs`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Extra-small minimum column width for the auto-fill grid. Use for very compact tile layouts (icon grids).`,value:`10rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gutter`,tier:`PUBLIC`,role:`consumption`,namespace:`gutter`,category:`Core tokens`,group:`Output token @property registrations`,description:`Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.`,note:`Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
. Typically slightly negative at large sizes.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
. Tighter than body to avoid excessive whitespace at large sizes.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h1`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`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.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-4xl)`,aliasOf:`--sf-text-4xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h2`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-3xl)`,aliasOf:`--sf-text-3xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h3`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-2xl)`,aliasOf:`--sf-text-2xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h4`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-xl)`,aliasOf:`--sf-text-xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h5`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-l)`,aliasOf:`--sf-text-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-wide)`,aliasOf:`--sf-tracking-wide`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h6`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-m)`,aliasOf:`--sf-text-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-header-height`,tier:`PUBLIC`,role:`consumption`,namespace:`header`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Total height of the sticky page header. Used by --sf-sticky-offset to prevent content from hiding under it.`,value:`clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-header-height-desktop`,tier:`PUBLIC`,role:`knob`,namespace:`header`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Header height at desktop breakpoints.`,value:`5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-header-height-mobile`,tier:`PUBLIC`,role:`knob`,namespace:`header`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Header height at mobile breakpoints.`,value:`3.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-heading-color`,tier:`PUBLIC`,role:`consumption`,namespace:`heading`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Text color for all headings (h1–h6). Alias of --sf-color-heading.`,value:`var(--sf-color-heading)`,aliasOf:`--sf-color-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-heading-font-family`,tier:`PUBLIC`,role:`consumption`,namespace:`heading`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font family for all headings. Alias of --sf-font-heading.`,value:`var(--sf-font-heading)`,aliasOf:`--sf-font-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-heading-text-wrap`,tier:`PUBLIC`,role:`knob`,namespace:`heading`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`text-wrap for headings. 'balance' prevents orphaned short last lines in multi-line headings.`,value:`balance`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-2xl`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`2× large icon size (~40px+). Hero or onboarding icons.`,value:`4em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Background color for boxed icon containers.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-border`,tier:`PUBLIC`,role:`consumption`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Border for boxed icon containers.`,value:`var(--sf-border-width-1) solid var(--sf-color-border)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-pad`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Padding inside boxed icon containers.`,value:`0.5em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Border radius for boxed icon containers.`,value:`var(--sf-radius-s)`,aliasOf:`--sf-radius-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-l`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Large icon size (~24px). Standalone icon buttons.`,value:`2em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-m`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Medium icon size (~20px). Default for inline and button icons.`,value:`1.5em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-s`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Small icon size (~16px). Dense UI chrome.`,value:`1em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-xl`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Extra-large icon size (~32px). Feature icons.`,value:`3em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-xs`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Extra-small icon size (~12px). Inline indicators.`,value:`0.875em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-imposter-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`imposter`,category:`Layout tokens`,group:`Imposter (centered absolute/fixed overlay)`,description:`Margin for the imposter layout (centered fixed/absolute overlay).`,note:`Margin between the imposter overlay and the viewport edges.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-active`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the active state. Set to 1 (via JS or .is-active) to drive branching calc() expressions. 0 = default (inactive).`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-current`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the current/selected state. Set to 1 (via .is-current) to drive branching calc() expressions. 0 = default.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-dark`,tier:`INTERNAL`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`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().`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-open`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the open/expanded state. Set to 1 (via .is-open) to drive branching calc() expressions. 0 = default (closed).`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-pressed`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the pressed state. Set to 1 (via .is-pressed) to drive branching calc() expressions. 0 = default.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-normal`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Normal line height (~1.5). Default for body text.`,value:`1.5`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-relaxed`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Relaxed line height (~1.65). Long-form reading text.`,value:`1.625`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-snug`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Snug line height (~1.35). Use for sub-headings.`,value:`1.3`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-taper`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`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.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-tight`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Tight line height (~1.2). Use for large display headings.`,value:`1.1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-line-clamp`,tier:`PUBLIC`,role:`knob`,namespace:`line`,category:`Macro tokens`,group:`Line clamp`,description:`Number of lines before text truncates with an ellipsis.`,note:`Number of visible lines before text is clipped with an ellipsis.`,value:`3`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-link-external-marker`,tier:`PUBLIC`,role:`knob`,namespace:`link`,category:`Core tokens`,group:`Semantic gap tokens`,description:`CSS content value appended to external links (e.g. " ↗"). Used by the .external-link pseudo-element pattern.`,note:`CSS content value appended to external links (e.g. " ↗"). Used by the .external-link pseudo-element pattern.`,value:`" \\2197"`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-link-underline-offset`,tier:`PUBLIC`,role:`knob`,namespace:`link`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Vertical offset of the link underline from the text baseline.`,value:`0.15em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-link-underline-thickness`,tier:`PUBLIC`,role:`knob`,namespace:`link`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Stroke width of the link underline.`,value:`auto`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-lumlocker`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`lumlocker`,category:`Core tokens`,group:`LumLocker`,description:`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.`,note:`OKLCH lightness lock value. When :root has [data-lumlocker], brand colors (primary, secondary, action, base) are remapped to this L so their contrast remains constant as hues shift.`,value:`0.65`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-mask-scrim-end`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`mask`,category:`Core tokens`,group:`Mask scrim`,description:`Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.`,note:`End stop for edge-fade mask gradients. Mirrors --sf-mask-scrim-start for the trailing edge of a scroll container.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-mask-scrim-start`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`mask`,category:`Core tokens`,group:`Mask scrim`,description:`Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.`,note:`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.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-motion-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`motion`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`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.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-object-fit`,tier:`PUBLIC`,role:`knob`,namespace:`object`,category:`Core tokens`,group:`Object fit / position`,description:`Defaults for object-fit and object-position on replaced elements (img, video).`,note:`Default object-fit value for replaced elements (img, video).`,value:`cover`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-object-position`,tier:`PUBLIC`,role:`knob`,namespace:`object`,category:`Core tokens`,group:`Object fit / position`,description:`Defaults for object-fit and object-position on replaced elements (img, video).`,note:`Default object-position for replaced elements.`,value:`50% 50%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-opacity-disabled`,tier:`PUBLIC`,role:`knob`,namespace:`opacity`,category:`Core tokens`,group:`Opacity`,description:`Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.`,note:`Opacity for disabled UI elements (typically 0.4–0.5).`,value:`0.45`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-opacity-muted`,tier:`PUBLIC`,role:`knob`,namespace:`opacity`,category:`Core tokens`,group:`Blur & opacity`,description:`Backdrop-filter blur scale and background-opacity tokens.`,note:`General de-emphasis opacity for secondary content, ghost elements, or non-primary layers. Default 0.5.`,value:`0.5`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-optical-sizing`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`optical`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.`,value:`auto`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-100`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.`,note:`Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.`,value:`8%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-200`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.`,note:`Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.`,value:`20%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-300`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.`,note:`Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.`,value:`40%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-400`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.`,note:`Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.`,value:`65%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-50`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.`,note:`Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.`,value:`4%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-600`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.`,note:`Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.`,value:`82%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-700`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.`,note:`Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.`,value:`62%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-800`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.`,note:`Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.`,value:`38%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-900`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.`,note:`Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.`,value:`18%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-950`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.`,note:`Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.`,value:`8%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-print-base-size`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`print`,category:`Core tokens`,group:`Print`,description:`Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.`,note:`Base font size for @media print stylesheets. Default 11pt. Override on :root to adjust printed body text size.`,value:`11pt`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-print-page-margin`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`print`,category:`Core tokens`,group:`Print`,description:`Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.`,note:`Page margin for printed output. Default 2cm. Maps to @page margin.`,value:`2cm`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-print-page-size`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`print`,category:`Core tokens`,group:`Print`,description:`Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.`,note:`Target paper size for printing. Default 'a4'. Maps to @page size. Common values: a4, letter, legal.`,value:`a4`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-block-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin between prose elements (h2, p, ul, etc.).`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-blockquote-border`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Left border style for blockquotes inside prose.`,value:`var(--sf-border-width-2) solid var(--sf-color-border--subtle)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-blockquote-padding`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Inner padding for blockquotes inside prose.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-figcaption-size`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Font size for figure captions inside .prose. Typically smaller than body text.`,value:`var(--sf-text-s)`,aliasOf:`--sf-text-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-figure-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin around 
 elements inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-heading-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Space between a heading and the content that follows it inside .prose.`,value:`var(--sf-space-s)`,aliasOf:`--sf-space-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-hr-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin around 
 rules inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-list-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Gap between list items inside .prose.`,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-marker-color`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Color of list bullets and ordered-list numbers inside .prose.`,value:`var(--sf-color-primary)`,aliasOf:`--sf-color-primary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-media-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin around images, video, and figures inside .prose.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-media-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Border radius applied to images and media inside .prose.`,value:`var(--sf-radius-m)`,aliasOf:`--sf-radius-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-nested-list-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Gap between items in nested lists inside .prose.`,value:`var(--sf-space-2xs)`,aliasOf:`--sf-space-2xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-paragraph`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Layout tokens`,group:`Prose`,description:`Max-width for the prose layout primitive (long-form reading column).`,note:`Max width of prose paragraphs (layout token for the prose layout).`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-table-pad`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Cell padding for tables inside .prose.`,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`2× large radius (~20px). Rounded card variants.`,note:`2× large radius (~20px). Rounded card variants.`,value:`calc(24px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-2xs`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.`,note:`Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.`,value:`calc(1px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-3xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`3× large radius (~24px). Large rounded surfaces.`,note:`3× large radius (~24px). Large rounded surfaces.`,value:`calc(32px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-4xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`4× large radius (~32px). Near-pill rounding.`,note:`4× large radius (~32px). Near-pill rounding.`,value:`calc(48px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-full`,tier:`PUBLIC`,role:`knob`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Full rounding (50%). For circular elements like avatars.`,note:`Full rounding (50%). For circular elements like avatars.`,value:`9999px`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-l`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large radius (~12px). Modals, popovers, panels.`,note:`Large radius (~12px). Modals, popovers, panels.`,value:`calc(12px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-m`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium radius (~6–8px). Default — inputs, standard buttons, cards.`,note:`Medium radius (~6–8px). Default — inputs, standard buttons, cards.`,value:`calc(8px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-none`,tier:`PUBLIC`,role:`knob`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Zero border radius — square corners.`,note:`Zero border radius — square corners.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-outer`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`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.`,note:`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.`,value:`calc(var(--sf-radius-m) + var(--sf-component-pad))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-pill`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Pill rounding (9999px). Tags, toggle pills, status badges.`,note:`Pill rounding (9999px). Tags, toggle pills, status badges.`,value:`var(--sf-radius-full)`,aliasOf:`--sf-radius-full`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-s`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small radius (~4px). Badges, chips, small buttons.`,note:`Small radius (~4px). Badges, chips, small buttons.`,value:`calc(4px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`radius`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-large radius (~16px). Prominent cards and feature blocks.`,note:`Extra-large radius (~16px). Prominent cards and feature blocks.`,value:`calc(16px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Hairline radius (~2px). Subtle rounding for tight components.`,note:`Hairline radius (~2px). Subtle rounding for tight components.`,value:`calc(2px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-3-2`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`3:2 aspect ratio. Common for landscape photography.`,value:`3 / 2`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-4-3`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`4:3 aspect ratio. Classic screen ratio.`,value:`4 / 3`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-cinema`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`2.39:1 cinematic widescreen aspect ratio.`,value:`21 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-golden`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`1.618:1 golden ratio. Harmonious proportions.`,value:`1.618 / 1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-portrait`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`2:3 portrait aspect ratio.`,value:`3 / 4`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-square`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`1:1 square aspect ratio. Use for avatars, icon containers, and square thumbnails.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-video`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`16:9 widescreen video aspect ratio. Use for video embeds and video-thumbnail containers.`,value:`16 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-reel-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`reel`,category:`Layout tokens`,group:`Reel`,description:`Configuration tokens for the reel layout (horizontal scroll container).`,note:`Gap between items in the horizontal reel.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-reel-height`,tier:`PUBLIC`,role:`knob`,namespace:`reel`,category:`Layout tokens`,group:`Reel`,description:`Configuration tokens for the reel layout (horizontal scroll container).`,note:`Fixed height of the reel container.`,value:`auto`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-reel-item-width`,tier:`PUBLIC`,role:`knob`,namespace:`reel`,category:`Layout tokens`,group:`Reel`,description:`Configuration tokens for the reel layout (horizontal scroll container).`,note:`Width of each item in the reel.`,value:`max-content`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-bottom`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Device safe-area inset at the bottom edge (home indicator, gesture bar). Resolves to env(safe-area-inset-bottom, 0px). Use for fixed footers.`,value:`env(safe-area-inset-bottom, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-left`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Device safe-area inset at the left edge. Resolves to env(safe-area-inset-left, 0px).`,value:`env(safe-area-inset-left, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-right`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Device safe-area inset at the right edge (rounded corners, home indicator). Resolves to env(safe-area-inset-right, 0px).`,value:`env(safe-area-inset-right, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-top`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`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.`,value:`env(safe-area-inset-top, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-color`,tier:`PUBLIC`,role:`knob`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Base color of the gradient scrim overlay.`,value:`oklch(0 0 0 / 0.55)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-direction`,tier:`PUBLIC`,role:`knob`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Direction of the scrim gradient (to bottom, to top, etc.).`,value:`to top`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-gradient`,tier:`PUBLIC`,role:`consumption`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Full gradient shorthand for the scrim. Override to customise the fade.`,value:`linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-text-shadow`,tier:`PUBLIC`,role:`knob`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Text-shadow layered over the scrim gradient to ensure legibility for text placed directly on image backgrounds.`,value:`0 1px 3px oklch(0 0 0 / 0.6)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scroll-shadow-size`,tier:`PUBLIC`,role:`knob`,namespace:`scroll`,category:`Macro tokens`,group:`Scroll shadow / overflow fade`,description:`Size of the scroll-shadow fade effect on overflowing containers.`,note:`Size of the scroll-shadow fade effect on overflowing containers.`,value:`2rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scroll-timeline-range-end`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`scroll`,category:`Core tokens`,group:`Scroll-driven animation range`,description:`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.`,note:`animation-range end value for scroll-driven entrance effects. Default 'cover 30%'. Override on an element to control when its entrance animation finishes.`,value:`cover 30%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scroll-timeline-range-start`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`scroll`,category:`Core tokens`,group:`Scroll-driven animation range`,description:`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.`,note:`animation-range start value for scroll-driven entrance effects. Default 'entry 0%'. Override on an element to control when its entrance animation begins.`,value:`entry 0%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrollbar-thumb`,tier:`PUBLIC`,role:`consumption`,namespace:`scrollbar`,category:`Core tokens`,group:`Scrollbar`,description:`Custom scrollbar thumb and track colors.`,note:`Color of the custom scrollbar thumb.`,value:`var(--sf-color-neutral)`,aliasOf:`--sf-color-neutral`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrollbar-track`,tier:`PUBLIC`,role:`knob`,namespace:`scrollbar`,category:`Core tokens`,group:`Scrollbar`,description:`Custom scrollbar thumb and track colors.`,note:`Color of the custom scrollbar track.`,value:`transparent`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Section padding`,description:`Vertical padding for full-width page sections at each responsive tier.`,note:`Default vertical padding for full-width page sections.`,value:`var(--sf-section-pad--m)`,aliasOf:`--sf-section-pad--m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`2× large section vertical padding for hero areas.`,note:`2× large section vertical padding for hero areas.`,value:`calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--l`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large section vertical padding.`,note:`Large section vertical padding.`,value:`calc(var(--sf-space-4xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--m`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium section vertical padding.`,note:`Medium section vertical padding.`,value:`calc(var(--sf-space-3xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--s`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small section vertical padding.`,note:`Small section vertical padding.`,value:`calc(var(--sf-space-2xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--xl`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-large vertical section padding for hero and feature sections.`,note:`Extra-large vertical section padding for hero and feature sections.`,value:`calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--xs`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-small vertical section padding for compact in-page modules.`,note:`Extra-small vertical section padding for compact in-page modules.`,value:`calc(var(--sf-space-xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`section`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global multiplier applied to every --sf-section-pad--* size — one dial re-rhythms all section padding (default 1).`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Largest shadow for hero cards, feature highlights, and marketing surfaces.`,note:`Largest shadow for hero cards, feature highlights, and marketing surfaces.`,value:`0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-color`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Shadow ramp (box-shadow, text-shadow, drop-shadow)`,description:`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.`,note:`Near-black shadow tint derived from the neutral palette. Inherits the neutral's chroma and hue so colorless neutrals produce colorless shadows.`,value:`oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-glow`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Glow box-shadow shorthand for decorative glow effects.`,note:`Glow box-shadow shorthand for decorative glow effects.`,value:`0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-glow-color`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Shadow glow color`,description:`Tint color used by --sf-shadow-glow. Override to retint glows; opacity and dark-mode adaptation are handled automatically.`,note:`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.`,value:`var(--sf-color-primary)`,aliasOf:`--sf-color-primary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-inner`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Inset shadow for pressed states, inset inputs, and recessed surfaces.`,note:`Inset shadow for pressed states, inset inputs, and recessed surfaces.`,value:`inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-l`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large shadow for drawers, sidebars, and prominent elevated surfaces.`,note:`Large shadow for drawers, sidebars, and prominent elevated surfaces.`,value:`0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-lightness`,tier:`PUBLIC`,role:`knob`,namespace:`shadow`,category:`Core tokens`,group:`Shadow strength`,description:`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.`,note:`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.`,value:`0.15`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-m`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium shadow for cards and content panels.`,note:`Medium shadow for cards and content panels.`,value:`0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-none`,tier:`PUBLIC`,role:`knob`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`No box-shadow (resets inherited shadows). Use to explicitly remove elevation.`,note:`No box-shadow (resets inherited shadows). Use to explicitly remove elevation.`,value:`none`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-s`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small shadow for chips, tags, and inline elevated surfaces.`,note:`Small shadow for chips, tags, and inline elevated surfaces.`,value:`0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-strength`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`shadow`,category:`Core tokens`,group:`Shadow strength`,description:`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.`,note:`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).`,value:`calc(0.08 + var(--sf-is-dark) * 0.17)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-large shadow for modals, dialogs, and high-elevation sheets.`,note:`Extra-large shadow for modals, dialogs, and high-elevation sheets.`,value:`0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-small shadow for barely-elevated elements (focused inputs, small chips).`,note:`Extra-small shadow for barely-elevated elements (focused inputs, small chips).`,value:`0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sidebar-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`sidebar`,category:`Layout tokens`,group:`Sidebar`,description:`Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).`,note:`Gap between sidebar and main content column.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sidebar-min-width`,tier:`PUBLIC`,role:`knob`,namespace:`sidebar`,category:`Layout tokens`,group:`Sidebar`,description:`Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).`,note:`Minimum sidebar width before the layout collapses to stacking.`,value:`50%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sidebar-width`,tier:`PUBLIC`,role:`knob`,namespace:`sidebar`,category:`Layout tokens`,group:`Sidebar`,description:`Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).`,note:`Preferred width of the sidebar column.`,value:`18rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-l`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Large UI component height (~44px). Touch-friendly interactive elements.`,value:`2.75rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-m`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Medium UI component height (~36px). Default size for buttons and inputs.`,value:`2.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-s`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Small UI component height (~28px). Compact buttons and input variants.`,value:`2rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-xl`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Extra-large interactive component height (~52px). For oversized or prominently touch-friendly controls.`,value:`3.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-xs`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.`,value:`1.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`48px-equivalent spacing. Large section spacing.`,note:`48px-equivalent spacing. Large section spacing.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-2xs`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`4px-equivalent spacing. Tight inline gaps, icon-to-text padding.`,note:`4px-equivalent spacing. Tight inline gaps, icon-to-text padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-3xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`64px-equivalent spacing. Extra-large layout gaps.`,note:`64px-equivalent spacing. Extra-large layout gaps.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-4xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`96px-equivalent spacing. Hero / page-level section padding.`,note:`96px-equivalent spacing. Hero / page-level section padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-base-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Maximum base spacing unit (rem) at the widest viewport. Drives the top of the fluid spacing ramp. Part of the fluid scale engine.`,value:`2`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-base-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Minimum base spacing unit (rem) at the narrowest viewport. Drives the bottom of the fluid spacing ramp. Part of the fluid scale engine.`,value:`1`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-l`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`24px-equivalent spacing. Card padding, section dividers.`,note:`24px-equivalent spacing. Card padding, section dividers.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-m`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`16px-equivalent spacing. Default unit, widely applicable.`,note:`16px-equivalent spacing. Default unit, widely applicable.`,value:`calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-none`,tier:`PUBLIC`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`Zero spacing. Explicit alias for clarity in utility classes.`,note:`Zero spacing. Explicit alias for clarity in utility classes.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-px`,tier:`PUBLIC`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`1px spacing. Hairline offset for fine adjustments.`,note:`1px spacing. Hairline offset for fine adjustments.`,value:`1px`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-ratio-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.333`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-ratio-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.25`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-s`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`12px-equivalent spacing. Form field inner padding, narrow gaps.`,note:`12px-equivalent spacing. Form field inner padding, narrow gaps.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`32px-equivalent spacing. Feature row gaps, generous section padding.`,note:`32px-equivalent spacing. Feature row gaps, generous section padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`8px-equivalent spacing. Compact list rows, tab padding.`,note:`8px-equivalent spacing. Compact list rows, tab padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-stack-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`stack`,category:`Layout tokens`,group:`Stack`,description:`Gap for the stack layout primitive (vertically stacked blocks).`,note:`Vertical gap between stacked block-level elements in the stack layout.`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-state-pending-opacity`,tier:`PUBLIC`,role:`knob`,namespace:`state`,category:`Core tokens`,group:`Opacity`,description:`Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.`,note:`Opacity for pending / loading state elements.`,value:`0.7`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sticky-offset`,tier:`PUBLIC`,role:`consumption`,namespace:`sticky`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`top offset for position: sticky elements, accounting for the header height.`,value:`clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sticky-offset-desktop`,tier:`PUBLIC`,role:`consumption`,namespace:`sticky`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Sticky offset at desktop breakpoints.`,value:`var(--sf-header-height-desktop)`,aliasOf:`--sf-header-height-desktop`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sticky-offset-mobile`,tier:`PUBLIC`,role:`consumption`,namespace:`sticky`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Sticky offset at mobile breakpoints.`,value:`var(--sf-header-height-mobile)`,aliasOf:`--sf-header-height-mobile`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-surface-color`,tier:`PUBLIC`,role:`consumption`,namespace:`surface`,category:`Macro tokens`,group:`Surface color`,description:`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.`,note:`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.`,value:`var(--sf-color-base)`,aliasOf:`--sf-color-base`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-switcher-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`switcher`,category:`Layout tokens`,group:`Switcher`,description:`Configuration tokens for the switcher layout (horizontal → vertical breakpoint).`,note:`Gap between switcher columns / rows.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-switcher-threshold`,tier:`PUBLIC`,role:`knob`,namespace:`switcher`,category:`Layout tokens`,group:`Switcher`,description:`Configuration tokens for the switcher layout (horizontal → vertical breakpoint).`,note:`Inline-size threshold below which the switcher flips from horizontal to vertical.`,value:`30rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`2× large font size (~24px). Section headings.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 2×-large text.`,note:`Font weight for 2×-large text.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 2×-large text.`,note:`Letter-spacing for 2×-large text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 2×-large text.`,note:`Line height for 2×-large text.`,value:`calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for 2×-large text.`,note:`Optimal line length for 2×-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Extra-extra-small font size (~11px). Fine print, badges.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.`,note:`Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 2×-extra-small text.`,note:`Letter-spacing for 2×-extra-small text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 2×-extra-small text.`,note:`Line height for 2×-extra-small text.`,value:`var(--sf-leading-relaxed)`,aliasOf:`--sf-leading-relaxed`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length (max-width in ch) for 2×-extra-small text.`,note:`Optimal line length (max-width in ch) for 2×-extra-small text.`,value:`55ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`3× large font size (~30px). Major headings.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 3×-large text.`,note:`Font weight for 3×-large text.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 3×-large text. Typically negative to tighten large headings.`,note:`Letter-spacing for 3×-large text. Typically negative to tighten large headings.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 3×-large text.`,note:`Line height for 3×-large text.`,value:`calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for 3×-large text.`,note:`Optimal line length for 3×-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`4× large font size (~36px). Display-level headings.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 4×-large text.`,note:`Font weight for 4×-large text.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 4×-large text.`,note:`Letter-spacing for 4×-large text.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 4×-large text.`,note:`Line height for 4×-large text.`,value:`calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for 4×-large text.`,note:`Optimal line length for 4×-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-base-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.25`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-base-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-base-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`3`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-base-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`2.4`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-l`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Large display font size (~68px+). Oversized hero text.`,value:`calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-m`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Medium display font size (~54px). Hero headings.`,value:`calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-s`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Small display font size (~42px). Hero sub-headings.`,value:`calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Large font size (~18px). Lead paragraphs, prominent labels.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for large text.`,note:`Font weight for large text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for large text.`,note:`Letter-spacing for large text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for large text.`,note:`Line height for large text.`,value:`calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for large text.`,note:`Optimal line length for large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Medium / base font size (~16px). Typical body text.`,value:`calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for medium (body) text.`,note:`Font weight for medium (body) text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for medium text.`,note:`Letter-spacing for medium text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for medium text.`,note:`Line height for medium text.`,value:`calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal reading line length for medium text (~65–75ch).`,note:`Optimal reading line length for medium text (~65–75ch).`,value:`65ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-ratio-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Modular type scale ratio at the widest viewport. Controls step-to-step size growth. Default 1.333. Part of the fluid scale engine.`,value:`1.333`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-ratio-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.25`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Small font size (~14px). Secondary content, UI annotations.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for small text.`,note:`Font weight for small text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for small text.`,note:`Letter-spacing for small text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for small text.`,note:`Line height for small text.`,value:`calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for small text.`,note:`Optimal line length for small text.`,value:`65ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-l`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large text-shadow for high-contrast text over busy or dark image backgrounds.`,note:`Large text-shadow for high-contrast text over busy or dark image backgrounds.`,value:`0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-m`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium text-shadow. Use for text overlaid on images to improve legibility.`,note:`Medium text-shadow. Use for text overlaid on images to improve legibility.`,value:`0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-none`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Removes text-shadow (use to explicitly reset inherited shadows).`,note:`Removes text-shadow (use to explicitly reset inherited shadows).`,value:`none`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-s`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small text-shadow for subtle depth on display headings.`,note:`Small text-shadow for subtle depth on display headings.`,value:`0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Extra-large font size (~20px). Sub-headings, callout text.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for extra-large text.`,note:`Font weight for extra-large text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for extra-large text.`,note:`Letter-spacing for extra-large text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for extra-large text.`,note:`Line height for extra-large text.`,value:`calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for extra-large text.`,note:`Optimal line length for extra-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Extra-small font size (~12px). Labels, captions, metadata.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for extra-small text.`,note:`Font weight for extra-small text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for extra-small text.`,note:`Letter-spacing for extra-small text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for extra-small text.`,note:`Line height for extra-small text.`,value:`calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for extra-small text.`,note:`Optimal line length for extra-small text.`,value:`60ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-theme-transition-duration`,tier:`PUBLIC`,role:`consumption`,namespace:`theme`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Duration of the .sf-theme-transition animated color-scheme crossfade. Scales with --sf-motion-scale so reduced-motion preferences are respected. Default 300ms.`,value:`calc(300ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-touch-target`,tier:`PUBLIC`,role:`consumption`,namespace:`touch`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Minimum touch-target size for interactive elements per WCAG 2.5.5.`,value:`var(--sf-size-l)`,aliasOf:`--sf-size-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-normal`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Normal letter-spacing (0). Default for body text.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-tight`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Tight letter-spacing (slightly negative). Suitable for large headings.`,value:`-0.025em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-wide`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Wide letter-spacing. Use for small-caps labels.`,value:`0.025em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-wider`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Wider letter-spacing for strongly spaced labels.`,value:`0.05em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-widest`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Widest letter-spacing for all-caps microcopy.`,value:`0.1em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-colors`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for color-related properties (color, background, border-color).`,value:`color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-enter`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Enter-phase transition (ease-out). Use on elements appearing in the viewport.`,value:`color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-exit`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Exit-phase transition (ease-in). Use on elements leaving the viewport.`,value:`color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-fast`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Fast-duration transition shorthand.`,value:`color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-form-field`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`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.`,value:`color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-opacity`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for opacity.`,value:`opacity var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-overlay`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for overlay fades (opacity + visibility).`,value:`overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-shadow`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for box-shadow.`,value:`box-shadow var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-slow`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Slow-duration transition shorthand.`,value:`color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-transform`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for transform.`,value:`transform var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-base`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Base stacking level (1). Establishes a stacking context without elevation.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-below`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index below stacking context base. For decorative pseudo-elements.`,value:`-1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-dropdown`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for dropdown menus and select popups.`,value:`1020`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-fixed`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for position: fixed elements.`,value:`1010`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-modal`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for modal dialogs and their non-top-layer backdrop scrims. Sits above overlays and dropdowns. Default 1040.`,value:`1040`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-overlay`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for modal / dialog backdrops.`,value:`1030`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-raised`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Raised elevation (50). Cards, sticky headers.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-sticky`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for position: sticky elements (navbars, table headers).`,value:`1000`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-toast`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for toast / snackbar notifications.`,value:`1050`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-tooltip`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for tooltips and transient floating notifications. Highest named layer in the z-index stack. Default 1060.`,value:`1060`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]}]},sm=G(`
 
`),cm=G(`
 
`),lm=G(` `),um=G(`optional`),dm=G(`
 
`),fm=G(`
   
 
 
`),pm=G(` 
`,1),mm=G(`
 
 `,1),hm=G(`knob`),gm=G(`advanced`),_m=G(`
 
`),vm=G(`
   
  
 
`),ym=G(`
Classes & Variables
  
 
 
`);function bm(e,t){Ue(t,!0);let n=am.classes,r=om.tokens.filter(e=>e.tier===`PUBLIC`||e.tier===`PUBLIC-ADVANCED`),i=L(``),a=L(`classes`),o=L(``),s=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?n.filter(t=>t.name.toLowerCase().includes(e)||t.selector?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)):n}),c=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?r.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)||t.value?.toLowerCase().includes(e)):r});function l(e){let t=new Map;for(let n of e){let e=n.category||`Other`,r=n.group||``;t.has(e)||t.set(e,new Map);let i=t.get(e);i.has(r)||i.set(r,[]),i.get(r).push(n)}return t}let u=I(()=>l(U(s)())),d=I(()=>l(U(c)())),f=null;async function p(e){try{await navigator.clipboard.writeText(e),R(o,e,!0),f&&clearTimeout(f),f=setTimeout(()=>{U(o)===e&&R(o,``),f=null},1500)}catch{}}let m={layout:`text-violet-400`,macro:`text-sky-400`,state:`text-amber-400`,accessibility:`text-emerald-400`,motion:`text-pink-400`,print:`text-slate-400`,form:`text-orange-400`,component:`text-indigo-400`,theme:`text-teal-400`};var g=ym(),_=z(g),v=V(z(_),2);zi(v);var y=V(v,2),b=z(y),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),F(y),F(_);var w=V(_,2),T=z(w),E=e=>{var t=Xr(),n=B(t),r=e=>{var t=sm(),n=z(t);F(t),H(()=>q(n,`No classes match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(s)().length===0),c=e=>{var t=Xr();Y(B(t),17,()=>[...U(u).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=mm(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=pm(),s=B(a),c=e=>{var t=cm(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=fm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{var n=lm(),r=z(n,!0);F(n),H(()=>{X(n,1,`text-[8px] font-bold uppercase ${m[U(t).kind]??`text-slate-500`}`),q(r,U(t).kind)}),K(e,n)};J(c,e=>{U(t).kind&&e(l)});var u=V(c,2),d=e=>{K(e,um())};J(u,e=>{U(t).optional&&e(d)}),F(i);var f=V(i,2),h=e=>{var n=dm(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(f,e=>{U(t).description&&e(h)}),F(r);var g=V(r,2),_=z(g),v=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},y=e=>{Ca(e,{class:`w-3 h-3 text-slate-500`})};J(_,e=>{U(o)===U(t).selector?e(v):e(y,-1)}),F(g),F(n),H(()=>q(s,U(t).selector)),W(`click`,g,()=>p(U(t).selector)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(c,-1)}),K(e,t)},D=e=>{var t=Xr(),n=B(t),r=e=>{var t=sm(),n=z(t);F(t),H(()=>q(n,`No tokens match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(c)().length===0),s=e=>{var t=Xr();Y(B(t),17,()=>[...U(d).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=mm(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=pm(),s=B(a),c=e=>{var t=cm(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=vm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{K(e,hm())};J(c,e=>{U(t).role===`knob`&&e(l)});var u=V(c,2),d=e=>{K(e,gm())};J(u,e=>{U(t).tier===`PUBLIC-ADVANCED`&&e(d)}),F(i);var f=V(i,2),m=e=>{var n=_m(),r=z(n,!0);F(n),H(()=>q(r,U(t).value)),K(e,n)};J(f,e=>{U(t).value&&e(m)});var h=V(f,2),g=e=>{var n=dm(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(h,e=>{U(t).description&&e(g)}),F(r);var _=V(r,2),v=z(_),y=e=>{_a(e,{class:`w-3 h-3 text-emerald-400`})},b=e=>{Ca(e,{class:`w-3 h-3 text-slate-500`})};J(v,e=>{U(o)===`var(${U(t).name})`?e(y):e(b,-1)}),F(_),F(n),H(()=>q(s,U(t).name)),W(`click`,_,()=>p(`var(${U(t).name})`)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(s,-1)}),K(e,t)};J(T,e=>{U(a)===`classes`?e(E):e(D,-1)}),F(w),F(g),H((e,t)=>{X(b,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`classes`?`bg-indigo-600/30 text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-300`}`),q(x,`CSS classes (${e??``})`),X(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`tokens`?`bg-indigo-600/30 text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-300`}`),q(C,`CSS vars (${t??``})`)},[()=>U(s)().length,()=>U(c)().length]),qi(v,()=>U(i),e=>R(i,e)),W(`click`,b,()=>{R(a,`classes`)}),W(`click`,S,()=>{R(a,`tokens`)}),K(e,g),We()}Br([`click`]);var xm=G(`
`),Sm=G(`
`),Cm=G(`
 
`),wm=G(``),Tm=G(` `),Em=G(``),Dm=G(``),Om=G(`
  
 
 
  
`);function km(e,t){Ue(t,!0);let n=L(!1);function r(e){let t=e.name;if(t.includes(`color`)||t.includes(`source`)||t.includes(`-bg`)||t.includes(`-border`))return`color`;if(t.includes(`font`)||t.includes(`family`))return`font`;let n=e.syntax?.toLowerCase()??``;return n.includes(`number`)||n.includes(`length`)||n.includes(`integer`)?`number`:`text`}let i=I(()=>t.overrideValue??t.token.value),a=I(()=>t.overrideValue!==void 0),o=I(()=>r(t.token)),s=I(()=>t.token.name.replace(`--sf-`,``));function c(e){return Xc.value,nl(e)||nl(`var(${t.token.name})`)||e}let l=I(()=>U(o)===`color`?c(U(i)):``);var u=Om(),d=z(u),f=V(d,2),p=e=>{var t=xm();let n;H(()=>n=Z(t,``,n,{background:U(l)})),K(e,t)},m=e=>{K(e,Sm())};J(f,e=>{U(o)===`color`?e(p):e(m,-1)});var h=V(f,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=e=>{var n=Cm(),r=z(n,!0);F(n),H(()=>q(r,t.token.description)),K(e,n)};J(v,e=>{t.token.description&&e(y)}),F(h);var b=V(h,2),x=e=>{var r=wm();zi(r),H(()=>Bi(r,U(i))),zr(`blur`,r,e=>{let r=e.target.value.trim();r&&r!==t.token.value?t.onSet(r):(!r||r===t.token.value)&&t.onReset(),R(n,!1)}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&R(n,!1)}),K(e,r)},S=e=>{var t=Em(),r=z(t),o=e=>{var t=Tm(),n=z(t,!0);F(t),H(()=>q(n,U(i))),K(e,t)},s=e=>{var t=Yr();H(()=>q(t,U(i))),K(e,t)};J(r,e=>{U(a)?e(o):e(s,-1)}),F(t),H(()=>Q(t,`title`,U(i))),W(`click`,t,()=>{R(n,!0)}),K(e,t)};J(b,e=>{U(n)?e(x):e(S,-1)});var C=V(b,2),w=e=>{var n=Dm();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{U(a)&&e(w)}),F(u),H(()=>{X(u,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${U(a)?`bg-indigo-500/8 border border-indigo-500/15`:`hover:bg-white/4`}`),X(d,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(a)?`bg-indigo-500`:`bg-transparent`}`),Q(g,`title`,t.token.name),q(_,U(s))}),K(e,u),We()}Br([`keydown`,`click`]);var Am=G(` `),jm=G(`
No tokens found
`),Mm=G(`
 
`),Nm=G(`
 
`),Pm=G(`
 
 
  
`);function Fm(e,t){Ue(t,!0);let n=L(``),r=I(()=>()=>{let e=t.patterns??[t.domain];return t.tokens.filter(t=>e.some(e=>t.name.includes(e))&&t.tier!==`INTERNAL`)}),i=I(()=>()=>{if(!U(n))return U(r)();let e=U(n).toLowerCase();return U(r)().filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))}),a=I(()=>U(i)().filter(e=>e.name in t.overrides).length);var o=Pm(),s=z(o),c=z(s),l=z(c);F(c);var u=V(c,2),d=e=>{var t=Am(),n=z(t);F(t),H(()=>q(n,`${U(a)??``} modified`)),K(e,t)};J(u,e=>{U(a)>0&&e(d)}),F(s);var f=V(s,2);zi(f);var p=V(f,2),m=e=>{K(e,jm())},h=I(()=>U(i)().length===0),g=e=>{var n=Nm(),r=z(n);Y(r,17,()=>U(i)().slice(0,60),e=>e.name,(e,n)=>{km(e,{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)})});var a=V(r,2),o=e=>{var t=Mm(),n=z(t);F(t),H(e=>q(n,`${e??``} more — refine your search`),[()=>U(i)().length-60]),K(e,t)},s=I(()=>U(i)().length>60);J(a,e=>{U(s)&&e(o)}),F(n),K(e,n)};J(p,e=>{U(h)?e(m):e(g,-1)}),F(o),H(()=>{q(l,`${t.domain??``} tokens`),Q(f,`placeholder`,`Search ${t.domain} tokens…`),Bi(f,U(n))}),W(`input`,f,e=>{R(n,e.target.value,!0)}),K(e,o),We()}Br([`input`]);var Im=G(`
`),Lm=G(`
  
`),Rm=G(`
 
`),zm=G(`
`),Bm=G(`
`),Vm=G(`
  
`),Hm=G(`
`),Um=G(`
 
   
 
  
 
  
 
 
 
`);function Wm(e,t){Ue(t,!0);let n={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2},r=L(``),i=L(!1),a=L(!1),o=I(()=>t.tokens.filter(e=>t.patterns.some(t=>e.name.includes(t))).sort((e,t)=>{let r=n[e.tier??`INTERNAL`]??2,i=n[t.tier??`INTERNAL`]??2;return r===i?e.name.localeCompare(t.name):r-i})),s=I(()=>()=>{let e=U(o);if(U(i)||(e=e.filter(e=>e.tier!==`INTERNAL`)),U(a)&&(e=e.filter(e=>e.name in t.overrides)),U(r)){let t=U(r).toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description?.toLowerCase().includes(t))}return e}),c=I(()=>U(o).filter(e=>e.name in t.overrides).length),l=I(()=>U(o).filter(e=>e.tier===`PUBLIC`).length),u=I(()=>U(o).filter(e=>e.tier===`PUBLIC-ADVANCED`).length),d=I(()=>U(o).filter(e=>e.tier===`INTERNAL`).length);var f=Um(),p=z(f),m=z(p);zi(m);var h=V(m,2),g=z(h),_=z(g),v=z(_),y=e=>{K(e,Im())};J(v,e=>{U(a)&&e(y)}),F(_);var b=V(_);F(g);var x=V(g,2),S=z(x),C=z(S),w=e=>{K(e,Im())};J(C,e=>{U(i)&&e(w)}),F(S);var T=V(S);F(x);var E=V(x,2),D=z(E);F(E),F(h);var O=V(h,2),k=z(O),ee=V(z(k),2),te=z(ee);F(ee),F(k);var ne=V(k,2),A=V(z(ne),2),j=z(A);F(A),F(ne);var M=V(ne,2),re=e=>{var t=Lm(),n=V(z(t),2),r=z(n);F(n),F(t),H(()=>q(r,`Internal (${U(d)??``})`)),K(e,t)};J(M,e=>{U(i)&&e(re)}),F(O),F(p);var ie=V(p,4),ae=z(ie),oe=e=>{var t=Rm(),n=z(t,!0);F(t),H(()=>q(n,U(a)?`No modified tokens in this domain`:`No tokens found`)),K(e,t)},se=I(()=>U(s)().length===0),N=e=>{var n=Hm();Y(n,21,()=>U(s)(),e=>e.name,(e,n)=>{var r=Vm(),i=z(r),a=e=>{K(e,zm())};J(i,e=>{U(n).tier===`PUBLIC-ADVANCED`&&e(a)});var o=V(i,2),s=e=>{K(e,Bm())};J(o,e=>{U(n).tier===`INTERNAL`&&e(s)}),km(V(o,2),{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)}),F(r),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(se)?e(oe):e(N,-1)}),F(ie),F(f),H(e=>{Bi(m,U(r)),X(g,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(a)?`text-indigo-400`:`text-slate-600 hover:text-slate-400`}`),X(_,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(a)?`bg-indigo-600 border-indigo-500`:`border-white/20`}`),q(b,` Modified only ${U(c)>0?`(${U(c)})`:``}`),Q(x,`aria-expanded`,U(i)),X(x,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(i)?`text-amber-400`:`text-slate-600 hover:text-slate-400`}`),X(S,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(i)?`bg-amber-600 border-amber-500`:`border-white/20`}`),q(T,` Internal (${U(d)??``})`),q(D,`${e??``}/${U(o).length??``}`),q(te,`Public (${U(l)??``})`),q(j,`Advanced (${U(u)??``})`)},[()=>U(s)().length]),W(`input`,m,e=>{R(r,e.target.value,!0)}),W(`click`,g,()=>{R(a,!U(a))}),W(`click`,x,()=>{R(i,!U(i))}),K(e,f),We()}Br([`input`,`click`]);var Gm=G(``),Km=G(`
    
 
       
`),qm=G(`
Waiting for live preview…
`),Jm=G(``),Ym=G(`
Pick an editable brand/status (base) color as the foreground to enable auto-fix.
`),Xm=G(`
 
`),Zm=G(`
 
 
 
 
 
`),Qm=G(`
 
`),$m=G(`
Foreground
 
  
Background
 
 
Aa Bb Cc
 
 
Auto-fix to pass   
 
`,1),eh=G(`
`),th=G(``),nh=G(``),rh=G(``),ih=G(`
Foreground (rows) × background (cols). Click a cell to load it above.
 

         
                   
··
 ·
 
`,1),ah=G(`
Contrast checker
 
Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
 
 
 
 
 
`);function oh(e,t){Ue(t,!0);let n=[{label:`Text`,expr:`var(--sf-color-text)`},{label:`Text secondary`,expr:`var(--sf-color-text--secondary)`},{label:`Text muted`,expr:`var(--sf-color-text--muted)`},{label:`White`,expr:`#ffffff`},{label:`Black`,expr:`#000000`}],r=[{label:`Surface`,expr:`var(--sf-color-surface)`},{label:`Bg`,expr:`var(--sf-color-bg)`},{label:`Border`,expr:`var(--sf-color-border)`}],i=[{key:`primary`,srcLight:`--sf-color-primary-source-light`,defLight:`oklch(0.47 0.27 264)`,srcDark:`--sf-color-primary-source-dark`,defDark:`oklch(0.715 0.243 264)`},{key:`secondary`,srcLight:`--sf-color-secondary-source-light`,defLight:`oklch(0.22 0.04 264)`,srcDark:`--sf-color-secondary-source-dark`,defDark:`oklch(0.84 0.036 264)`},{key:`tertiary`,srcLight:`--sf-color-tertiary-source-light`,defLight:`oklch(0.42 0.22 295)`,srcDark:`--sf-color-tertiary-source-dark`,defDark:`oklch(0.74 0.198 295)`},{key:`action`,srcLight:`--sf-color-action-source-light`,defLight:`oklch(0.50 0.22 235)`,srcDark:`--sf-color-action-source-dark`,defDark:`oklch(0.70 0.198 235)`},{key:`neutral`,srcLight:`--sf-color-neutral-source-light`,defLight:`oklch(0.52 0.025 260)`,srcDark:`--sf-color-neutral-source-dark`,defDark:`oklch(0.69 0.0225 260)`},{key:`success`,srcLight:`--sf-color-success-source-light`,defLight:`oklch(0.50 0.16 145)`,srcDark:`--sf-color-success-source-dark`,defDark:`oklch(0.70 0.144 145)`},{key:`warning`,srcLight:`--sf-color-warning-source-light`,defLight:`oklch(0.75 0.17 80)`,srcDark:`--sf-color-warning-source-dark`,defDark:`oklch(0.65 0.153 80)`},{key:`danger`,srcLight:`--sf-color-danger-source-light`,defLight:`oklch(0.48 0.22 12)`,srcDark:`--sf-color-danger-source-dark`,defDark:`oklch(0.71 0.198 12)`},{key:`info`,srcLight:`--sf-color-info-source-light`,defLight:`oklch(0.48 0.18 235)`,srcDark:`--sf-color-info-source-dark`,defDark:`oklch(0.71 0.162 235)`}],a=i.flatMap(e=>[{label:`${e.key} (base)`,expr:`var(--sf-color-${e.key})`,editKey:e.key},{label:`${e.key}-100`,expr:`var(--sf-color-${e.key}-100)`},{label:`${e.key}-600`,expr:`var(--sf-color-${e.key}-600)`},{label:`${e.key}-900`,expr:`var(--sf-color-${e.key}-900)`}]),o=[...n,...r,...a],s=Object.fromEntries(i.map(e=>[e.key,e])),c=[{label:`text`,expr:`var(--sf-color-text)`},{label:`white`,expr:`#ffffff`},{label:`black`,expr:`#000000`},{label:`primary`,expr:`var(--sf-color-primary)`,editKey:`primary`}],l=[{label:`surface`,expr:`var(--sf-color-surface)`},{label:`primary`,expr:`var(--sf-color-primary)`},{label:`neutral-100`,expr:`var(--sf-color-neutral-100)`},{label:`success`,expr:`var(--sf-color-success)`},{label:`warning`,expr:`var(--sf-color-warning)`},{label:`danger`,expr:`var(--sf-color-danger)`}],u=L(`White`),d=L(`primary (base)`),f=L(`AA`),p=I(()=>o.find(e=>e.label===U(u))??o[0]),m=I(()=>o.find(e=>e.label===U(d))??o[0]);function h(e,t){Xc.value;let n=ol(e),r=ol(t);return!n||!r?null:Pl(Nl(...n),Nl(...r))}function g(e){return e>=7?{tag:`AAA`,cls:`bg-emerald-500/25 text-emerald-200`}:e>=4.5?{tag:`AA`,cls:`bg-emerald-500/15 text-emerald-300`}:e>=3?{tag:`AA-L`,cls:`bg-amber-500/20 text-amber-300`}:{tag:`Fail`,cls:`bg-rose-500/20 text-rose-300`}}let _=I(()=>h(U(p).expr,U(m).expr));function v(){let e=U(u);R(u,U(d),!0),R(d,e,!0)}function y(e,t){let n=o.find(t=>t.expr===e),r=o.find(e=>e.expr===t);n&&R(u,n.label,!0),r&&R(d,r.label,!0)}function b(e){return Xc.value,nl(e)||e}let x=L(!1),S=L(!1),C=L(null);function w(){R(C,null);let e=U(p).editKey?s[U(p).editKey]:null;if(!e)return;let n=$c()===`dark`,r=n?e.srcDark:e.srcLight,i=n?e.defDark:e.defLight,{c:a,h:o,l:c,valid:l}=Fl(t.overrides[r]??i);if(!l)return;let u=ol(U(m).expr);if(!u)return;let d=Nl(...u),h=U(f)===`AAA`?7:4.5,g=null;for(let e=0;e<=1.0001;e+=.005){let[t,n,r]=Ml(e,a,o);Pl(Nl(t,n,r),d)>=h&&(g===null||Math.abs(e-c){if(!U(x)){R(C,null);return}Xc.value,U(u),U(d),U(f),U(p).editKey&&U(_)!==null&&U(_)<(U(f)===`AAA`?7:4.5)?w():R(C,null)});var E=ah(),D=V(z(E),2),O=z(D),k=V(z(O),2),ee=z(k,!0);F(k),F(O);var te=V(O,2),ne=e=>{var t=$m(),n=B(t),r=z(n),i=V(z(r),2);Y(i,21,()=>o,e=>e.label,(e,t)=>{var n=Gm(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(i),F(r);var a=V(r,2),s=V(a,2),c=V(z(s),2);Y(c,21,()=>o,e=>e.label,(e,t)=>{var n=Gm(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(c),F(s),F(n);var l=V(n,2),h=z(l),y=z(h);F(h);var x=V(h,2),S=e=>{let t=I(()=>g(U(_)));var n=Km(),r=z(n),i=z(r);F(r);var a=V(r,2),o=z(a,!0);F(a);var s=V(a,4),c=z(s),l=z(c);F(c);var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=z(f);F(f);var m=V(f,2),h=z(m);F(m),F(s),F(n),H(e=>{q(i,`${e??``}:1`),X(a,1,`text-[10px] font-bold px-2 py-0.5 rounded ${U(t).cls}`),q(o,U(t).tag),X(c,1,yi(U(_)>=4.5?`text-emerald-300`:`text-rose-300`)),q(l,`${U(_)>=4.5?`✓`:`✗`} AA normal`),X(u,1,yi(U(_)>=3?`text-emerald-300`:`text-rose-300`)),q(d,`${U(_)>=3?`✓`:`✗`} AA large`),X(f,1,yi(U(_)>=7?`text-emerald-300`:`text-rose-300`)),q(p,`${U(_)>=7?`✓`:`✗`} AAA normal`),X(m,1,yi(U(_)>=4.5?`text-emerald-300`:`text-rose-300`)),q(h,`${U(_)>=4.5?`✓`:`✗`} AAA large`)},[()=>U(_).toFixed(2)]),K(e,n)},w=e=>{K(e,qm())};J(x,e=>{U(_)===null?e(w,-1):e(S)}),F(l);var E=V(l,2),D=z(E),O=z(D),k=V(z(O)),ee=z(k);F(k),F(O);var te=V(O,2);Y(te,20,()=>[`AA`,`AAA`],e=>e,(e,t)=>{var n=Jm(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${U(f)===t?`bg-white/12 text-white`:`text-slate-500 hover:text-slate-300`}`),q(r,t)}),W(`click`,n,()=>{R(f,t,!0)}),K(e,n)}),F(te),F(D);var ne=V(D,2),A=e=>{K(e,Ym())},j=e=>{var t=Xm(),n=z(t);F(t),H(()=>q(n,`Already passes ${U(f)??``}. 🎉`)),K(e,t)},M=e=>{var t=Zm(),n=z(t),r=V(n,2),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o),F(r);var c=V(r,2);F(t),H((e,t)=>{Z(n,e),q(a,U(C).value),q(s,`→ ${t??``}:1 (${U(f)??``} ✓)`)},[()=>`background:${b(U(C).value)}`,()=>U(C).ratio.toFixed(2)]),W(`click`,c,T),K(e,t)},re=e=>{var t=Qm(),n=z(t);F(t),H(()=>q(n,`No lightness of this hue reaches ${U(f)??``} on this background — try a different background or hue.`)),K(e,t)};J(ne,e=>{U(p).editKey?U(_)!==null&&U(_)>=(U(f)===`AAA`?7:4.5)?e(j,1):U(C)?e(M,2):e(re,-1):e(A)}),F(E),H((e,t,n)=>{Z(h,e),Z(y,t),q(ee,`(for ${n??``} mode)`)},[()=>`background:${b(U(m).expr)}`,()=>`color:${b(U(p).expr)}`,()=>$c()]),Oi(i,()=>U(u),e=>R(u,e)),W(`click`,a,v),Oi(c,()=>U(d),e=>R(d,e)),K(e,t)};J(te,e=>{U(x)&&e(ne)}),F(D);var A=V(D,4),j=z(A),M=V(z(j),2),re=z(M,!0);F(M),F(j);var ie=V(j,2),ae=e=>{var t=ih(),n=V(B(t),2),r=z(n),i=z(r),a=z(i);Y(V(z(a)),17,()=>l,e=>e.label,(e,t)=>{var n=eh(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(a),F(i);var o=V(i);Y(o,21,()=>c,e=>e.label,(e,t)=>{var n=rh(),r=z(n),i=z(r,!0);F(r),Y(V(r),17,()=>l,e=>e.label,(e,n)=>{let r=I(()=>h(U(t).expr,U(n).expr));var i=Xr(),a=B(i),o=e=>{let i=I(()=>g(U(r)));var a=th(),o=z(a),s=z(o,!0);F(o),F(a),H((e,t)=>{Q(o,`title`,e),X(o,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${U(i).cls}`),q(s,t)},[()=>`${U(t).label} on ${U(n).label} — ${U(r).toFixed(2)}:1`,()=>U(r).toFixed(1)]),W(`click`,o,()=>y(U(t).expr,U(n).expr)),K(e,a)},s=e=>{K(e,nh())};J(a,e=>{U(r)===null?e(s,-1):e(o)}),K(e,i)}),F(n),H(()=>q(i,U(t).label)),K(e,n)}),F(o),F(r),F(n),K(e,t)};J(ie,e=>{U(S)&&e(ae)}),F(A),F(E),H(()=>{Q(O,`aria-expanded`,U(x)),q(ee,U(x)?`▲`:`▼`),Q(j,`aria-expanded`,U(S)),q(re,U(S)?`▲`:`▼`)}),W(`click`,O,()=>{R(x,!U(x))}),W(`click`,j,()=>{R(S,!U(S))}),K(e,E),We()}Br([`click`]);var sh=G(`
`),ch=G(` `),lh=G(`
 
 
 
`);function uh(e,t){Ue(t,!0);let n=new Set([`home`,`themes`,`wcag`,`setup`,`cheatsheet`]),r=L(`controls`);On(()=>{t.domain,R(r,`controls`)});let i=I(()=>yl[t.domain]??[t.domain]),a=I(()=>t.tokens.filter(e=>bl(e.name)===t.domain&&e.name in t.overrides).length);var o=Xr(),s=B(o),c=e=>{var n=Xr(),r=B(n),i=e=>{Al(e,{get overrides(){return t.overrides},get onSelect(){return t.onSelectDomain},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},a=e=>{em(e,{get overrides(){return t.overrides},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},o=e=>{oh(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onBulkChange(){return t.onBulkChange}})},s=e=>{im(e,{get overrides(){return t.overrides}})},c=e=>{bm(e,{})};J(r,e=>{t.domain===`home`?e(i):t.domain===`themes`?e(a,1):t.domain===`wcag`?e(o,2):t.domain===`setup`?e(s,3):t.domain===`cheatsheet`&&e(c,4)}),K(e,n)},l=I(()=>n.has(t.domain)),u=e=>{var n=lh(),o=z(n),s=z(o),c=e=>{var n=sh(),r=z(n),i=e=>{Xu(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange},get onSelectDomain(){return t.onSelectDomain}})},a=e=>{zd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},o=e=>{Gd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},s=e=>{ff(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},c=e=>{Df(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},l=e=>{Ff(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},u=e=>{Zf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},d=e=>{up(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},f=e=>{Sp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},p=e=>{Gp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},m=e=>{Fm(e,{get domain(){return t.domain},get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(r,e=>{t.domain===`colors`?e(i):t.domain===`typography`?e(a,1):t.domain===`spacing`?e(o,2):t.domain===`layout`?e(s,3):t.domain===`borders`?e(c,4):t.domain===`shadows`?e(l,5):t.domain===`motion`?e(u,6):t.domain===`effects`?e(d,7):t.domain===`macros`?e(f,8):t.domain===`misc`?e(p,9):e(m,-1)}),F(n),K(e,n)},l=e=>{Wm(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get patterns(){return U(i)},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(s,e=>{U(r)===`controls`?e(c):e(l,-1)}),F(o);var u=V(o,2),d=z(u);lo(z(d),{class:`w-3 h-3`}),Me(),F(d);var f=V(d,4),p=z(f);La(p,{class:`w-3 h-3`});var m=V(p,2),h=e=>{var t=ch(),n=z(t,!0);F(t),H(()=>q(n,U(a))),K(e,t)};J(m,e=>{U(a)>0&&e(h)}),F(f),F(u),F(n),H(()=>{X(d,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`controls`?`text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-300`}`),X(f,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`tokens`?`text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-300`}`)}),W(`click`,d,()=>{R(r,`controls`)}),W(`click`,f,()=>{R(r,`tokens`)}),K(e,n)};J(s,e=>{U(l)?e(c):e(u,-1)}),K(e,o),We()}Br([`click`]);var dh=G(`
 
`),fh=G(`
Type to search tokens by name or description
`),ph=G(`overridden`),mh=G(`
 
`),hh=G(``),gh=G(`
↑↓ navigate ↵ open panel Esc close
`),_h=G(``);function vh(e,t){Ue(t,!0);let n=L(``),r=L(0),i=L(null),a={colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`},o=I(()=>(()=>{let e=U(n).trim().toLowerCase();if(!e)return[];let r=[];for(let n of t.tokens){if(n.tier===`INTERNAL`)continue;let i=n.name.toLowerCase().includes(e),a=n.description?.toLowerCase().includes(e)??!1;if((i||a)&&(r.push({token:n,domain:bl(n.name),overridden:n.name in t.overrides}),r.length>=40))break}return r})());On(()=>{U(n),R(r,0)}),On(()=>{U(i)&&U(i).focus()});function s(e){t.onNavigate(e),t.onClose()}function c(e){if(e.key===`Escape`){e.preventDefault(),t.onClose();return}if(U(o).length===0&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),R(r,0);return}if(e.key===`ArrowDown`){e.preventDefault(),R(r,Math.min(U(r)+1,U(o).length-1),!0);return}if(e.key===`ArrowUp`){e.preventDefault(),R(r,Math.max(U(r)-1,0),!0);return}e.key===`Enter`&&U(o)[U(r)]&&(e.preventDefault(),s(U(o)[U(r)].domain))}var l=_h(),u=z(l),d=z(u),f=V(z(d),2);zi(f),Zi(f,e=>R(i,e),()=>U(i)),Me(2),F(d);var p=V(d,2),m=z(p),h=e=>{var t=dh(),r=z(t);F(t),H(()=>q(r,`No tokens matching "${U(n)??``}"`)),K(e,t)},g=I(()=>U(n).trim()&&U(o).length===0),_=e=>{K(e,fh())},v=I(()=>!U(n).trim()),y=e=>{var n=Xr();Y(B(n),19,()=>U(o),e=>e.token.name,(e,n,i)=>{var o=hh(),c=z(o),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{K(e,ph())};J(f,e=>{U(n).overridden&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=mh(),r=z(t,!0);F(t),H(()=>q(r,U(n).token.description)),K(e,t)};J(m,e=>{U(n).token.description&&e(h)}),F(c);var g=V(c,2),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=z(y,!0);F(y),F(g),F(o),H(()=>{X(o,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${U(r)===U(i)?`bg-indigo-500/15`:`hover:bg-white/4`}`),q(d,U(n).token.name),q(v,U(n).overridden?t.overrides[U(n).token.name]:U(n).token.value),q(b,a[U(n).domain]??U(n).domain)}),zr(`mouseenter`,o,()=>{R(r,U(i),!0)}),W(`click`,o,()=>s(U(n).domain)),K(e,o)}),K(e,n)};J(m,e=>{U(g)?e(h):U(v)?e(_,1):e(y,-1)}),F(p);var b=V(p,2),x=e=>{K(e,gh())};J(b,e=>{U(o).length>0&&e(x)}),F(u),F(l),W(`mousedown`,l,e=>{e.target===e.currentTarget&&t.onClose()}),W(`keydown`,f,c),qi(f,()=>U(n),e=>R(n,e)),K(e,l),We()}Br([`mousedown`,`keydown`,`click`]);var yh=G(` `),bh=G(``),xh=G(``),Sh=G(`
 
 
 
 
  
 
 
  
`);function Ch(e,t){Ue(t,!0);let n=(e,t=f,n=f,r=f)=>{var i=bh(),a=z(i);mi(a,n,(e,t)=>{t(e,{class:`w-3.5 h-3.5`})});var o=V(a),s=V(o),c=e=>{var t=yh(),n=z(t,!0);F(t),H(()=>q(n,U(v)>9?`9+`:U(v))),K(e,t)};J(s,e=>{t()===`preview`&&U(v)>0&&e(c)}),F(i),H(()=>{Q(i,`aria-pressed`,U(p)===t()),X(i,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${U(p)===t()?`text-indigo-300 bg-indigo-500/10`:`text-slate-500 hover:text-slate-300`}`),q(o,` ${r()??``} `)}),W(`click`,i,()=>{R(p,t(),!0)}),K(e,i)},r=om.tokens??om,i={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function a(e){let t={};for(let n of Object.keys(e)){let e=bl(n);t[e]=(t[e]??0)+1}return t}let o=Ic(),s=L(nn(Lc())),c=L(nn([])),l=L(nn([])),u=L(`home`),d=L(!1),p=L(`controls`),m=L(`light`),h=L(`fluid`),g=L(`normal`),_=L(`marketing`),v=I(()=>Object.keys(U(s)).length),y=I(()=>a(U(s))),b=I(()=>Object.keys(U(s)).filter(e=>bl(e)===U(u))),x=I(()=>U(b).length),S=I(()=>U(c).length>0),C=I(()=>U(l).length>0);function w(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let T=L(nn(Cr(()=>({...U(s)})))),E=L(`idle`),D=I(()=>!w(U(s),U(T))),O=null;On(()=>{Rc(U(s))});function k(e){let t=U(s),n=typeof e==`function`?e(t):e;w(t,n)||(R(c,[...U(c).slice(-49),t],!0),R(l,[],!0),(U(E)===`saved`||U(E)===`error`)&&R(E,`idle`)),R(s,n,!0)}async function ee(){if(!U(D)||U(E)===`saving`)return;let e={...U(s)};R(E,`saving`);try{await Vc(U(s)),w(U(s),e)?(R(T,e,!0),R(E,`saved`),O&&clearTimeout(O),O=setTimeout(()=>{U(E)===`saved`&&R(E,`idle`),O=null},2e3)):R(E,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(E,`error`)}}function te(e,t){k(n=>({...n,[e]:t}))}function ne(e){k(t=>{let n={...t};return delete n[e],n})}function A(e){k(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function j(e){k({...e})}function M(){k({})}function re(){let e={};for(let t of U(b))e[t]=null;A(e)}function ie(){if(U(c).length===0)return;let e=U(c)[U(c).length-1],t=U(s);R(c,U(c).slice(0,-1),!0),R(l,[t,...U(l)],!0),R(s,e,!0)}function ae(){if(U(l).length===0)return;let e=U(l)[0],t=U(s);R(l,U(l).slice(1),!0),R(c,[...U(c),t],!0),R(s,e,!0)}function oe(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);if(typeof e==`object`&&e&&!Array.isArray(e)){let t=Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e)));Object.keys(t).length>0&&k(t)}}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length>0&&k(t=>({...t,...e}))}},n.readAsText(t)},e.click()}function se(){let e=cc(U(s),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}ra(()=>{let e=e=>{(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key===`z`&&(e.preventDefault(),ie()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&e.key===`z`||e.key===`y`)&&(e.preventDefault(),ae()),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key.toLowerCase()===`s`&&(e.preventDefault(),ee()),(e.ctrlKey||e.metaKey)&&!e.repeat&&e.key.toLowerCase()===`k`&&(e.preventDefault(),R(d,!U(d)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e),O&&clearTimeout(O)}});var N=Sh(),ce=z(N);Ko(ce,{get overridesCount(){return U(v)},get canUndo(){return U(S)},get canRedo(){return U(C)},get hasPendingChanges(){return U(D)},get saveState(){return U(E)},onUndo:ie,onRedo:ae,onResetAll:M,onImport:oe,onExport:se,onSave:ee});var le=V(ce,2),ue=z(le);n(ue,()=>`controls`,()=>lo,()=>`Controls`),n(V(ue,2),()=>`preview`,()=>ka,()=>`Preview`),F(le);var de=V(le,2),fe=z(de);Xo(z(fe),{get activeId(){return U(u)},onSelect:e=>{R(u,e,!0)},get overridesByDomain(){return U(y)}}),F(fe);var pe=V(fe,2),me=z(pe),he=z(me),ge=z(he,!0);F(he);var _e=V(he,2),ve=e=>{var t=xh(),n=z(t);$a(n,{class:`w-3 h-3`});var r=V(n);F(t),H(()=>{Q(t,`title`,`Reset ${U(x)} override${U(x)===1?``:`s`} in ${i[U(u)]??U(u)}`),q(r,` Reset ${U(x)??``}`)}),W(`click`,t,re),K(e,t)};J(_e,e=>{U(x)>0&&e(ve)}),F(me);var ye=V(me,2);uh(z(ye),{get domain(){return U(u)},get tokens(){return r},get overrides(){return U(s)},onSet:te,onReset:ne,onBulkChange:A,onApplyTheme:j,onSelectDomain:e=>{R(u,e,!0)},onResetAll:M}),F(ye),F(pe);var be=V(pe,2);vl(z(be),{get overrides(){return U(s)},get previewTheme(){return U(m)},get previewWidth(){return U(h)},get previewMotion(){return U(g)},get previewTemplate(){return U(_)},onThemeChange:e=>{R(m,e,!0)},onWidthChange:e=>{R(h,e,!0)},onMotionChange:e=>{R(g,e,!0)},onTemplateChange:e=>{R(_,e,!0)}}),F(be),F(de);var xe=V(de,2);{let e=I(()=>i[U(u)]??U(u));$o(xe,{get overridesCount(){return U(v)},get domain(){return U(e)}})}var Se=V(xe,2),Ce=e=>{vh(e,{get tokens(){return r},get overrides(){return U(s)},onNavigate:e=>{R(u,e,!0)},onClose:()=>{R(d,!1)}})};J(Se,e=>{U(d)&&e(Ce)}),F(N),H(()=>{X(N,1,`${o?`w-full h-full`:`w-screen h-screen`} flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans`),X(fe,1,`shrink-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),X(pe,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),q(ge,i[U(u)]??U(u)),X(be,1,`flex-1 flex-col min-h-0 min-w-0 ${U(p)===`controls`?`hidden md:flex`:`flex`}`)}),K(e,N),We()}Br([`click`]);var wh=document.getElementById(`app`)??document.getElementById(`slashed-admin-app`);wh&&(wh.innerHTML=``,Zr(Ch,{target:wh}));var Th=G(``),Eh=G(` `),Dh=G(``),Oh=G(` 
/
 SLASHED    
    
    
 
 
 
 
 
  
`,1);function kh(e,t){Ue(t,!0);let n=om.tokens??om,r=`slashed-overlay/open`,i=`slashed-overlay/domain`,a={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function o(e){let t={};for(let n of Object.keys(e)){let e=bl(n);t[e]=(t[e]??0)+1}return t}function s(e,t){try{let n=localStorage.getItem(e);return n===null?t:n!==`false`}catch{return t}}function c(e,t){try{return localStorage.getItem(e)??t}catch{return t}}let l=L(nn(s(r,!0))),u=L(nn(typeof window<`u`?window.matchMedia(`(max-width: 768px)`).matches:!1)),d=L(nn(Lc())),f=L(nn([])),p=L(nn([])),m=L(nn(c(i,`home`))),h=L(!1),g=L(!1),_=L(null),v=L(null);On(()=>{U(g)&&br().then(()=>U(_)?.focus())});let y=I(()=>Object.keys(U(d)).length),b=I(()=>o(U(d))),x=I(()=>U(f).length>0),S=I(()=>U(p).length>0);function C(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let w=L(nn(Cr(()=>({...U(d)})))),T=L(`idle`),E=I(()=>!C(U(d),U(w))),D=null;function O(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e)return;let t=`var(--wp-admin--admin-bar--height, 32px)`;e.style.position=`fixed`,e.style.right=`0`,e.style.zIndex=`99998`,e.style.pointerEvents=`auto`,U(l)?(e.style.top=t,e.style.width=U(u)?`100vw`:`420px`,e.style.height=`calc(100vh - ${t})`):(e.style.top=`calc(${t} + 16px)`,e.style.width=`40px`,e.style.height=`64px`)}On(()=>{let e=U(d),t=requestAnimationFrame(()=>{Rc(e),Qc(document)});return()=>cancelAnimationFrame(t)}),On(()=>{!U(u)&&U(l)?document.documentElement.classList.add(`sf-panel-active`):document.documentElement.classList.remove(`sf-panel-active`)}),On(()=>{O()}),On(()=>{try{localStorage.setItem(r,String(U(l)))}catch{}}),On(()=>{try{localStorage.setItem(i,U(m))}catch{}});function k(){R(l,!U(l))}function ee(e){let t=U(d),n=typeof e==`function`?e(t):e;C(t,n)||(R(f,[...U(f).slice(-49),t],!0),R(p,[],!0),(U(T)===`saved`||U(T)===`error`)&&R(T,`idle`)),R(d,n,!0)}async function te(){if(!U(E)||U(T)===`saving`)return;let e={...U(d)};R(T,`saving`);try{await Vc(U(d)),C(U(d),e)?(R(w,e,!0),R(T,`saved`),D&&clearTimeout(D),D=setTimeout(()=>{U(T)===`saved`&&R(T,`idle`),D=null},2e3)):R(T,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(T,`error`)}}function ne(e,t){ee(n=>({...n,[e]:t}))}function A(e){ee(t=>{let n={...t};return delete n[e],n})}function j(e){ee(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function M(e){ee({...e})}function re(){R(g,!0)}function ie(){R(g,!1),ee({})}function ae(){R(g,!1)}function oe(){if(!U(f).length)return;let e=U(f)[U(f).length-1];R(p,[U(d),...U(p)],!0),R(f,U(f).slice(0,-1),!0),R(d,e,!0)}function se(){if(!U(p).length)return;let e=U(p)[0];R(f,[...U(f),U(d)],!0),R(p,U(p).slice(1),!0),R(d,e,!0)}function N(){let e=cc(U(d),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}function ce(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);typeof e==`object`&&e&&!Array.isArray(e)&&ee(Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e))))}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length&&ee(t=>({...t,...e}))}},n.readAsText(t)},e.click()}ra(()=>{let e=document.createElement(`style`);e.id=`sf-panel-push`,e.textContent=[`html { transition: padding-right 200ms ease-in-out; }`,`html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }`].join(`
-`),document.head.appendChild(e);let t=window.matchMedia(`(max-width: 768px)`),n=e=>{R(u,e.matches,!0)};t.addEventListener(`change`,n);let r=e=>{let t=e.key.toLowerCase();U(l)&&((e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`z`&&(e.preventDefault(),oe()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&t===`z`||t===`y`)&&(e.preventDefault(),se()),(e.ctrlKey||e.metaKey)&&!e.repeat&&t===`k`&&(e.preventDefault(),R(h,!U(h))),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`s`&&(e.preventDefault(),te()))},i=()=>k();return window.addEventListener(`keydown`,r),document.addEventListener(`slashed:toggle-overlay`,i),()=>{e.remove(),document.documentElement.classList.remove(`sf-panel-active`),t.removeEventListener(`change`,n),window.removeEventListener(`keydown`,r),document.removeEventListener(`slashed:toggle-overlay`,i),D&&clearTimeout(D)}});var le=Oh(),ue=B(le),de=e=>{var t=Th();ya(V(z(t),2),{class:`w-3 h-3 opacity-70 rotate-180`}),F(t),W(`click`,t,k),K(e,t)};J(ue,e=>{U(l)||e(de)});var fe=V(ue,2);let pe,me;var he=z(fe),ge=V(z(he),4),_e=z(ge,!0);F(ge);var ve=V(ge,2),ye=e=>{var t=Eh(),n=z(t,!0);F(t),H(()=>q(n,U(y))),K(e,t)};J(ve,e=>{U(y)>0&&e(ye)});var be=V(ve,4),xe=z(be),Se=e=>{Po(e,{class:`w-3 h-3 animate-spin`})},Ce=e=>{_a(e,{class:`w-3 h-3`})},we=e=>{Ro(e,{class:`w-3 h-3`})},Te=e=>{ro(e,{class:`w-3 h-3`})};J(xe,e=>{U(T)===`saving`?e(Se):U(T)===`saved`?e(Ce,1):U(T)===`error`?e(we,2):e(Te,-1)}),F(be);var Ee=V(be,2);Oo(z(Ee),{class:`w-3 h-3`}),F(Ee);var De=V(Ee,2);Ya(z(De),{class:`w-3 h-3`}),F(De);var P=V(De,4);ja(z(P),{class:`w-3 h-3`}),F(P);var Oe=V(P,2);Ta(z(Oe),{class:`w-3 h-3`}),F(Oe);var ke=V(Oe,2);wo(z(ke),{class:`w-3 h-3`}),F(ke);var Ae=V(ke,4);ya(z(Ae),{class:`w-3 h-3`}),F(Ae),F(he);var je=V(he,2),Me=z(je);Xo(Me,{get activeId(){return U(m)},onSelect:e=>{R(m,e,!0)},get overridesByDomain(){return U(b)}});var Ne=V(Me,2),Pe=z(Ne),Fe=z(Pe),Ie=z(Fe,!0);F(Fe),F(Pe);var Le=V(Pe,2);uh(z(Le),{get domain(){return U(m)},get tokens(){return n},get overrides(){return U(d)},onSet:ne,onReset:A,onBulkChange:j,onApplyTheme:M,onSelectDomain:e=>{R(m,e,!0)},onResetAll:re}),F(Le),F(Ne),F(je);var Re=V(je,2),ze=e=>{vh(e,{get tokens(){return n},get overrides(){return U(d)},onNavigate:e=>{R(m,e,!0)},onClose:()=>{R(h,!1)}})};J(Re,e=>{U(h)&&e(ze)});var Be=V(Re,2),Ve=e=>{var t=Dh(),n=z(t),r=V(z(n),2),i=z(r);F(r);var a=V(r,2),o=z(a);Zi(o,e=>R(_,e),()=>U(_));var s=V(o,2);Zi(s,e=>R(v,e),()=>U(v)),F(a),F(n),F(t),H(()=>q(i,`This will clear all ${U(y)??``} customisation${U(y)===1?``:`s`}.
-          You can still undo this before saving.`)),W(`keydown`,t,e=>{e.key===`Escape`&&(e.stopPropagation(),ae()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(_)?U(v)?.focus():U(_)?.focus())}),W(`click`,o,ae),W(`click`,s,ie),K(e,t)};J(Be,e=>{U(g)&&e(Ve)}),F(fe),H(e=>{pe=X(fe,1,`fixed right-0 z-[99998] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out`,null,pe,{"translate-x-full":!U(l),"translate-x-0":U(l),"pointer-events-none":!U(l)}),me=Z(fe,`top: var(--wp-admin--admin-bar--height, 32px); width: ${U(u)?`100vw`:`420px`}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,me,{visibility:U(l)?void 0:`hidden`}),Q(fe,`aria-hidden`,!U(l)),fe.inert=!U(l)||void 0,q(_e,a[U(m)]??U(m)),be.disabled=!U(E)||U(T)===`saving`,Q(be,`title`,U(T)===`error`?`Save failed — click to retry`:U(E)?`Save changes (Ctrl+S)`:`No unsaved changes`),Q(be,`aria-label`,U(T)===`saving`?`Saving changes`:U(T)===`error`?`Save failed`:U(E)?`Save changes`:`No unsaved changes`),X(be,1,e),Ee.disabled=!U(x),De.disabled=!U(S),Oe.disabled=U(y)===0,ke.disabled=U(y)===0,q(Ie,a[U(m)]??U(m))},[()=>yi([`p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none`,U(T)===`error`?`text-red-400`:U(T)===`saved`?`text-emerald-300`:U(E)?`text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10`:`text-slate-500 opacity-40`].join(` `))]),W(`click`,be,te),W(`click`,Ee,oe),W(`click`,De,se),W(`click`,P,ce),W(`click`,Oe,N),W(`click`,ke,re),W(`click`,Ae,k),K(e,le),We()}Br([`click`,`keydown`]);function Ah(){return window.slashedApp?.cssUrl}function jh(e){try{return new URL(e,location.href).origin===location.origin}catch{return!1}}function Mh(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e||e.shadowRoot)return;let t=e.attachShadow({mode:`open`}),n=document.createElement(`div`);t.appendChild(n);let r=!1,i=()=>{r||(Zr(kh,{target:n}),r=!0,e.setAttribute(`data-slashed-ready`,``))},a=Ah();if(a&&jh(a)){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=a;let n=setTimeout(i,5e3),r=()=>{clearTimeout(n),i()};e.addEventListener(`load`,r),e.addEventListener(`error`,r),t.appendChild(e)}else i()}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,Mh):Mh();
+          Extra filler text keeps the block taller than the clamp at every setting.
`,1),Tp=G(``),Ep=G(`
--sf-aspect — default ratio for .sf-aspect / .sf-frame
 
 
 
`,1),Dp=G(` 
`,1),Op=G(``),kp=G(`
--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim
 
Color
  
 
Direction
 
 
 Caption over scrim
 
Text shadow
  
`,1),Ap=G(`
Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.
 
  
Marker color
  
`,1),jp=G(`
--sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.
 
Intrinsic size
  
`,1),Mp=G(`
Tokens for the framework's utility macros — .sf-prose, .sf-flow, .sf-line-clamp, .sf-aspect, .sf-scroll-shadow and .sf-scrim.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
All tokens tab — edit every prose, scrim and surface token directly.
`);function Np(e,t){Ue(t,!0);function n(e,n,r){let i=t.overrides[e];if(!i)return n;let a=parseFloat(r?i.replace(r,``):i);return isNaN(a)?n:a}let r=[{label:`16 / 9`,value:`16 / 9`},{label:`4 / 3`,value:`4 / 3`},{label:`3 / 2`,value:`3 / 2`},{label:`1 / 1`,value:`1 / 1`},{label:`21 / 9`,value:`21 / 9`},{label:`9 / 16`,value:`9 / 16`}],i=[{label:`↑ top`,value:`to top`},{label:`↓ bottom`,value:`to bottom`},{label:`← left`,value:`to left`},{label:`→ right`,value:`to right`},{label:`↗ top-right`,value:`to top right`},{label:`↖ top-left`,value:`to top left`}],a=[{label:`Heading gap`,token:`--sf-prose-heading-gap`,def:.75,max:3,raw:`var(--sf-space-s)`},{label:`List gap`,token:`--sf-prose-list-gap`,def:.5,max:2,raw:`var(--sf-space-xs)`},{label:`Block margin`,token:`--sf-prose-block-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Media margin`,token:`--sf-prose-media-margin`,def:1,max:4,raw:`var(--sf-space-m)`},{label:`Figure margin`,token:`--sf-prose-figure-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`},{label:`Blockquote padding`,token:`--sf-prose-blockquote-padding`,def:1,max:3,raw:`var(--sf-space-m)`},{label:`HR margin`,token:`--sf-prose-hr-margin`,def:1.5,max:4,raw:`var(--sf-space-l)`}],o=L(!1),s=L(!1),c=L(!1),l=L(!1),u=L(!1),d=L(!1),f=L(!1),p=I(()=>n(`--sf-line-clamp`,3)),m=I(()=>n(`--sf-flow-space`,.5,`rem`)),h=I(()=>n(`--sf-scroll-shadow-size`,2,`rem`)),g=I(()=>t.overrides[`--sf-aspect`]??`16 / 9`),_=I(()=>t.overrides[`--sf-scrim-color`]??`oklch(0 0 0 / 0.55)`),v=I(()=>t.overrides[`--sf-scrim-direction`]??`to top`),y=I(()=>n(`--sf-prose-media-radius`,6,`px`));function b(e){let n=t.overrides[e.token];if(!n)return e.def;let r=parseFloat(n);return isNaN(r)?e.def:r}var x=Mp(),S=V(z(x),2),C=z(S),w=V(z(C),2),T=z(w,!0);F(w),F(C);var E=V(C,2),D=e=>{var n=Cp(),r=B(n);{let e=I(()=>`--sf-flow-space`in t.overrides);$(r,{label:`Flow space`,get value(){return U(m)},min:0,max:4,step:.0625,unit:`rem`,help:`--sf-flow-space — vertical gap between adjacent children of .sf-flow`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-flow-space`,`${e}rem`),onReset:()=>t.onReset(`--sf-flow-space`),rawDefault:`var(--sf-content-gap)`,get currentRaw(){return t.overrides[`--sf-flow-space`]},onRawSet:e=>t.onSet(`--sf-flow-space`,e)})}var i=V(r,2);Y(i,20,()=>[0,1,2],e=>e,(e,t)=>{var n=Sp();H(()=>Z(n,`width:${90-t*12}%`)),K(e,n)}),F(i),H(()=>Z(i,`display:flex;flex-direction:column;gap:${U(m)}rem`)),K(e,n)};J(E,e=>{U(o)&&e(D)}),F(S);var O=V(S,4),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var n=wp(),r=B(n);{let e=I(()=>`--sf-line-clamp`in t.overrides);$(r,{label:`Default lines`,get value(){return U(p)},min:1,max:8,step:1,help:`--sf-line-clamp — default line count for .sf-line-clamp (override per element)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-line-clamp`,String(e)),onReset:()=>t.onReset(`--sf-line-clamp`)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${U(p)};overflow:hidden`)),K(e,n)};J(ne,e=>{U(s)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Ep(),i=V(B(n),2);Y(i,21,()=>r,e=>e.value,(e,n)=>{var r=Tp(),i=z(r,!0);F(r),H(e=>{X(r,1,e),q(i,U(n).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${U(g).replace(/\s/g,``)===U(n).value.replace(/\s/g,``)?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`]),W(`click`,r,()=>U(n).value===`16 / 9`?t.onReset(`--sf-aspect`):t.onSet(`--sf-aspect`,U(n).value)),K(e,r)}),F(i);var a=V(i,2),o=z(a),s=z(o,!0);F(o),F(a),H(()=>{Z(o,`aspect-ratio:${U(g)};max-height:120px;max-width:100%;width:auto;height:120px`),q(s,U(g))}),K(e,n)};J(ae,e=>{U(c)&&e(oe)}),F(j);var se=V(j,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var n=Dp(),r=B(n);{let e=I(()=>`--sf-scroll-shadow-size`in t.overrides);$(r,{label:`Fade size`,get value(){return U(h)},min:0,max:6,step:.25,unit:`rem`,help:`--sf-scroll-shadow-size — size of the edge fade mask on .sf-scroll-shadow / .sf-overflow-fade`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-scroll-shadow-size`,`${e}rem`),onReset:()=>t.onReset(`--sf-scroll-shadow-size`),rawDefault:`2rem`,get currentRaw(){return t.overrides[`--sf-scroll-shadow-size`]},onRawSet:e=>t.onSet(`--sf-scroll-shadow-size`,e)})}var i=V(r,2),a=z(i);F(i),H(()=>Z(a,`mask:linear-gradient(to right, transparent, #000 ${U(h)}rem, #000 calc(100% - ${U(h)}rem), transparent)`)),K(e,n)};J(ue,e=>{U(l)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=kp(),r=V(B(n),2),a=V(z(r),2);zi(a);var o=V(a,2),s=e=>{var n=Op();W(`click`,n,()=>t.onReset(`--sf-scrim-color`)),K(e,n)};J(o,e=>{`--sf-scrim-color`in t.overrides&&e(s)}),F(r);var c=V(r,2),l=V(z(c),2);Y(l,21,()=>i,e=>e.value,(e,n)=>{var r=Tp(),i=z(r,!0);F(r),H(()=>{X(r,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${U(v)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`to top`?t.onReset(`--sf-scrim-direction`):t.onSet(`--sf-scrim-direction`,U(n).value)),K(e,r)}),F(l),F(c);var u=V(c,2),d=z(u);Me(2),F(u);var f=V(u,2),p=V(z(f),2);zi(p);var m=V(p,2),h=e=>{var n=Op();W(`click`,n,()=>t.onReset(`--sf-scrim-text-shadow`)),K(e,n)};J(m,e=>{`--sf-scrim-text-shadow`in t.overrides&&e(h)}),F(f),H(()=>{Bi(a,t.overrides[`--sf-scrim-color`]??``),Z(d,`background:linear-gradient(${U(v)}, ${U(_)}, transparent)`),Bi(p,t.overrides[`--sf-scrim-text-shadow`]??``)}),W(`input`,a,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-color`,n):t.onReset(`--sf-scrim-color`)}),W(`input`,p,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-scrim-text-shadow`,n):t.onReset(`--sf-scrim-text-shadow`)}),K(e,n)};J(ge,e=>{U(u)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Ap(),r=V(B(n),2),i=z(r);Y(i,17,()=>a,e=>e.token,(e,n)=>{{let r=I(()=>b(U(n))),i=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:0,get max(){return U(n).max},step:.0625,unit:`rem`,get help(){return U(n).token},get overridden(){return U(i)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token),get rawDefault(){return U(n).raw},get currentRaw(){return t.overrides[U(n).token]},onRawSet:e=>t.onSet(U(n).token,e)})}});var o=V(i,2);{let e=I(()=>`--sf-prose-media-radius`in t.overrides);$(o,{label:`Media radius`,get value(){return U(y)},min:0,max:32,step:1,unit:`px`,help:`--sf-prose-media-radius — corner radius on prose images/video`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-prose-media-radius`,`${e}px`),onReset:()=>t.onReset(`--sf-prose-media-radius`),rawDefault:`var(--sf-radius-m)`,get currentRaw(){return t.overrides[`--sf-prose-media-radius`]},onRawSet:e=>t.onSet(`--sf-prose-media-radius`,e)})}var s=V(o,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=Op();W(`click`,n,()=>t.onReset(`--sf-prose-marker-color`)),K(e,n)};J(l,e=>{`--sf-prose-marker-color`in t.overrides&&e(u)}),F(s),F(r),H(()=>Bi(c,t.overrides[`--sf-prose-marker-color`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-prose-marker-color`,n):t.onReset(`--sf-prose-marker-color`)}),K(e,n)};J(Se,e=>{U(d)&&e(Ce)}),F(ve);var we=V(ve,2),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=jp(),r=V(B(n),2),i=V(z(r),2);zi(i);var a=V(i,2),o=e=>{var n=Op();W(`click`,n,()=>t.onReset(`--sf-content-intrinsic-size`)),K(e,n)};J(a,e=>{`--sf-content-intrinsic-size`in t.overrides&&e(o)}),F(r),H(()=>Bi(i,t.overrides[`--sf-content-intrinsic-size`]??``)),W(`input`,i,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-content-intrinsic-size`,n):t.onReset(`--sf-content-intrinsic-size`)}),K(e,n)};J(P,e=>{U(f)&&e(Oe)}),F(we),Me(2),F(x),H(()=>{Q(C,`aria-expanded`,U(o)),q(T,U(o)?`▲`:`▼`),Q(k,`aria-expanded`,U(s)),q(te,U(s)?`▲`:`▼`),Q(M,`aria-expanded`,U(c)),q(ie,U(c)?`▲`:`▼`),Q(N,`aria-expanded`,U(l)),q(le,U(l)?`▲`:`▼`),Q(pe,`aria-expanded`,U(u)),q(he,U(u)?`▲`:`▼`),Q(ye,`aria-expanded`,U(d)),q(xe,U(d)?`▲`:`▼`),Q(Te,`aria-expanded`,U(f)),q(De,U(f)?`▲`:`▼`)}),W(`click`,C,()=>{R(o,!U(o))}),W(`click`,k,()=>{R(s,!U(s))}),W(`click`,M,()=>{R(c,!U(c))}),W(`click`,N,()=>{R(l,!U(l))}),W(`click`,pe,()=>{R(u,!U(u))}),W(`click`,ye,()=>{R(d,!U(d))}),W(`click`,Te,()=>{R(f,!U(f))}),K(e,x),We()}Br([`click`,`input`]);var Pp=G(` 
 
 
Minimum interactive area — ensures accessibility on touch devices.
`,1),Fp=G(``),Ip=G(`
`),Lp=G(`
      
`),Rp=G(` 
 
Override individual z-index tokens in the "All tokens" tab.
`,1),zp=G(`
Selection background
 
 
Selection text color
 
 
Select this text to preview the selection color.
`),Bp=G(`
 
 
`,1),Vp=G(`
  
`),Hp=G(`
Controls the height / tap-target of all sized components (buttons, inputs, badges).
 
 
`,1),Up=G(``),Wp=G(`
Caret color
 
  
Underline thickness 
 
 
 
A sample link with the current underline settings.
`,1),Gp=G(`
Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.
 
 `,1),Kp=G(``),qp=G(``),Jp=G(`
Default values for .sf-media images and replaced elements.
 
Fit 
 
 
Position  
`,1),Yp=G(`
   
`),Xp=G(`
Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.
 
`,1),Zp=G(`
   
`),Qp=G(`
Applied inside @media print via optional/print.css.
 
Page size 
 `,1),$p=G(`
     
`),em=G(`
Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles.
+        Overriding globally forces all matching elements into that state — useful for testing and demos.
 
 
Required marker  
`,1),tm=G(`
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Selection colors, caret, links, focus ring, borders and sizes all render in the
+      live preview (try the Components template). Scroll behavior applies to the page
+      itself and can't be shown in the static canvas.
`);function nm(e,t){Ue(t,!0);let n=[{label:`Below`,token:`--sf-z-below`,note:`Behind content (e.g. decorative BG)`},{label:`Raised`,token:`--sf-z-raised`,note:`Slightly above flow`},{label:`Dropdown`,token:`--sf-z-dropdown`,note:`Dropdowns, popovers`},{label:`Sticky`,token:`--sf-z-sticky`,note:`Sticky headers, toolbars`},{label:`Fixed`,token:`--sf-z-fixed`,note:`Fixed UI chrome`},{label:`Overlay`,token:`--sf-z-overlay`,note:`Modals, drawers backdrop`},{label:`Modal`,token:`--sf-z-modal`,note:`Modal dialogs`},{label:`Popover`,token:`--sf-z-popover`,note:`Tooltips, menus`},{label:`Tooltip`,token:`--sf-z-tooltip`,note:`Inline tooltips`},{label:`Toast`,token:`--sf-z-toast`,note:`Notifications`}],r=[{label:`Smooth`,value:`smooth`},{label:`Auto`,value:`auto`}],i=[{label:`XS`,token:`--sf-size-xs`,default:1.5},{label:`S`,token:`--sf-size-s`,default:2},{label:`M`,token:`--sf-size-m`,default:2.5},{label:`L`,token:`--sf-size-l`,default:2.75},{label:`XL`,token:`--sf-size-xl`,default:3.5}];function a(e,t,n){if(!e)return t;let r=parseFloat(n?e.replace(n,``):e);return isNaN(r)?t:r}let o=I(()=>a(t.overrides[`--sf-touch-target`],44,`px`)),s=I(()=>t.overrides[`--sf-scroll-behavior`]??`smooth`),c=I(()=>a(t.overrides[`--sf-z-base`],0)),l=I(()=>t.overrides[`--sf-caret-color`]??``),u=I(()=>a(t.overrides[`--sf-link-underline-offset`]?.replace(`em`,``),.15)),d=I(()=>t.overrides[`--sf-link-underline-thickness`]??`auto`),f=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`),p=L(!1),m=L(!1),g=L(!1),_=L(!1),v=L(!1),y=L(!1),b=L(!1),x=L(!1),S=L(!1),C=L(!1),w=L(!1),T=L(!1);function E(e){return a(t.overrides[e.token]?.replace(`rem`,``),e.default)}var D=tm(),O=z(D),k=z(O),ee=V(z(k),2),te=z(ee,!0);F(ee),F(k);var ne=V(k,2),A=e=>{var n=Pp(),r=B(n);{let e=I(()=>`--sf-touch-target`in t.overrides);$(r,{label:`Min touch size`,get value(){return U(o)},min:32,max:64,step:1,unit:`px`,help:`--sf-touch-target — minimum tappable area for interactive elements (WCAG 2.5.5)`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-touch-target`,`${e}px`),onReset:()=>t.onReset(`--sf-touch-target`)})}var i=V(r,2),a=z(i),s=z(a);F(a),Me(2),F(i),H(()=>{Z(a,`width: ${U(o)}px; height: ${U(o)}px`),q(s,`${U(o)??``}px`)}),K(e,n)};J(ne,e=>{U(p)&&e(A)}),F(O);var j=V(O,4),M=z(j),re=V(z(M),2),ie=z(re,!0);F(re),F(M);var ae=V(M,2),oe=e=>{var n=Ip();Y(n,21,()=>r,e=>e.value,(e,n)=>{var r=Fp(),i=z(r,!0);F(r),H(()=>{X(r,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${U(s)===U(n).value?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(i,U(n).label)}),W(`click`,r,()=>U(n).value===`smooth`?t.onReset(`--sf-scroll-behavior`):t.onSet(`--sf-scroll-behavior`,U(n).value)),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(m)&&e(oe)}),F(j);var se=V(j,4),N=z(se),ce=V(z(N),2),le=z(ce,!0);F(ce),F(N);var ue=V(N,2),de=e=>{var r=Rp(),i=B(r);{let e=I(()=>`--sf-z-base`in t.overrides);$(i,{label:`Base offset`,get value(){return U(c)},min:0,max:1e3,step:10,help:`--sf-z-base — added to all z-index tokens to avoid conflicts with existing stacking contexts`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-z-base`,String(e)),onReset:()=>t.onReset(`--sf-z-base`)})}var a=V(i,2);Y(a,21,()=>n,e=>e.token,(e,n)=>{let r=I(()=>U(n).token in t.overrides);var i=Lp(),a=z(i),o=V(a,2),s=z(o,!0);F(o);var c=V(o,2),l=z(c,!0);F(c);var u=V(c,2),d=z(u,!0);F(u),F(i),H(e=>{X(a,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(r)?`bg-amber-400`:`bg-black/20 dark:bg-white/20`}`),q(s,U(n).label),q(l,U(n).note),q(d,e)},[()=>U(n).token.replace(`--sf-z-`,``)]),K(e,i)}),F(a),Me(2),K(e,r)};J(ue,e=>{U(g)&&e(de)}),F(se);var fe=V(se,4),pe=z(fe),me=V(z(pe),2),he=z(me,!0);F(me),F(pe);var ge=V(pe,2),_e=e=>{var n=zp(),r=z(n),i=V(z(r),2);{let e=I(()=>t.overrides[`--sf-color-selection-bg`]??``),n=I(()=>`--sf-color-selection-bg`in t.overrides);Su(i,{token:`--sf-color-selection-bg`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-bg`,e),onReset:()=>t.onReset(`--sf-color-selection-bg`)})}F(r);var a=V(r,2),o=V(z(a),2);{let e=I(()=>t.overrides[`--sf-color-selection-text`]??``),n=I(()=>`--sf-color-selection-text`in t.overrides);Su(o,{token:`--sf-color-selection-text`,get value(){return U(e)},placeholder:`default`,get isOverridden(){return U(n)},onSet:e=>t.onSet(`--sf-color-selection-text`,e),onReset:()=>t.onReset(`--sf-color-selection-text`)})}F(a);var s=V(a,2),c=z(s);F(s),F(n),H(()=>Z(c,`--sf-color-selection-bg: ${t.overrides[`--sf-color-selection-bg`]??`#6366f1`}; --sf-color-selection-text: ${t.overrides[`--sf-color-selection-text`]??`#ffffff`}`)),K(e,n)};J(ge,e=>{U(_)&&e(_e)}),F(fe);var ve=V(fe,4),ye=z(ve),be=V(z(ye),2),xe=z(be,!0);F(be),F(ye);var Se=V(ye,2),Ce=e=>{var n=Bp(),r=B(n);Y(r,20,()=>[`solid`,`dashed`,`dotted`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-focus-ring-style`]??`solid`);var i=Fp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(a,n)}),W(`click`,i,()=>n===`solid`?t.onReset(`--sf-focus-ring-style`):t.onSet(`--sf-focus-ring-style`,n)),K(e,i)}),F(r);var i=V(r,2),a=z(i),o=z(a);F(a),F(i),H(()=>{Z(a,`outline: 2px ${U(f)} ${t.overrides[`--sf-focus-ring-color`]||`oklch(0.7 0.2 235)`}; outline-offset: 2px`),q(o,`Focus ring · ${U(f)??``}`)}),K(e,n)};J(Se,e=>{U(v)&&e(Ce)}),F(ve);var we=V(ve,4),Te=z(we),Ee=V(z(Te),2),De=z(Ee,!0);F(Ee),F(Te);var P=V(Te,2),Oe=e=>{var n=Hp(),r=V(B(n),2);Y(r,21,()=>i,e=>e.token,(e,n)=>{let r=I(()=>E(U(n)));{let i=I(()=>`${U(n).token} — component size step ${U(n).label}`),a=I(()=>U(n).token in t.overrides);$(e,{get label(){return U(n).label},get value(){return U(r)},min:1,max:5,step:.05,unit:`rem`,get help(){return U(i)},get overridden(){return U(a)},onChange:e=>t.onSet(U(n).token,`${e}rem`),onReset:()=>t.onReset(U(n).token)})}}),F(r);var a=V(r,2);Y(a,21,()=>i,e=>e.token,(e,t)=>{let n=I(()=>E(U(t)));var r=Vp(),i=z(r),a=V(i,2),o=z(a,!0);F(a),F(r),H(e=>{Z(i,e),q(o,U(t).label)},[()=>`height: ${Math.min(U(n)*14,64)}px`]),K(e,r)}),F(a),K(e,n)};J(P,e=>{U(y)&&e(Oe)}),F(we);var ke=V(we,4),Ae=z(ke),je=V(z(Ae),2),Ne=z(je,!0);F(je),F(Ae);var Pe=V(Ae,2),Fe=e=>{var n=Wp(),r=B(n),i=V(z(r),2);{let e=I(()=>`--sf-caret-color`in t.overrides);Su(i,{token:`--sf-caret-color`,get value(){return U(l)},placeholder:`default (action color)`,get isOverridden(){return U(e)},onSet:e=>t.onSet(`--sf-caret-color`,e),onReset:()=>t.onReset(`--sf-caret-color`)})}F(r);var a=V(r,2);{let e=I(()=>`--sf-link-underline-offset`in t.overrides);$(a,{label:`Underline offset`,get value(){return U(u)},min:0,max:.5,step:.01,unit:`em`,help:`--sf-link-underline-offset — gap between text baseline and underline`,get overridden(){return U(e)},onChange:e=>t.onSet(`--sf-link-underline-offset`,`${e}em`),onReset:()=>t.onReset(`--sf-link-underline-offset`)})}var o=V(a,2),s=z(o),c=V(z(s),2),f=e=>{var n=Up();W(`click`,n,()=>t.onReset(`--sf-link-underline-thickness`)),K(e,n)};J(c,e=>{`--sf-link-underline-thickness`in t.overrides&&e(f)}),F(s);var p=V(s,2);Y(p,20,()=>[[`auto`,`auto`],[`1px`,`1px`],[`2px`,`2px`],[`3px`,`3px`]],([e,t])=>t,(e,n)=>{var r=I(()=>h(n,2));let i=()=>U(r)[0],a=()=>U(r)[1];var o=Fp(),s=z(o,!0);F(o),H(()=>{X(o,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${U(d)===a()?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200`}`),q(s,i())}),W(`click`,o,()=>a()===`auto`?t.onReset(`--sf-link-underline-thickness`):t.onSet(`--sf-link-underline-thickness`,a())),K(e,o)}),F(p),F(o);var m=V(o,2),g=z(m),_=V(g,2),v=V(z(_));Me(),F(_),F(m),H(()=>{Z(g,`caret-color:${U(l)||`#6366f1`}`),Z(v,`text-decoration:underline;text-underline-offset:${U(u)}em;text-decoration-thickness:${U(d)}`)}),W(`click`,v,e=>e.preventDefault()),K(e,n)};J(Pe,e=>{U(b)&&e(Fe)}),F(ke);var Ie=V(ke,4),Le=z(Ie),Re=V(z(Le),2),ze=z(Re,!0);F(Re),F(Le);var Be=V(Le,2),Ve=e=>{var n=Gp(),r=V(B(n),2);Y(r,20,()=>[{label:`xs`,token:`--sf-icon-xs`,def:.875},{label:`s`,token:`--sf-icon-s`,def:1},{label:`m`,token:`--sf-icon-m`,def:1.5},{label:`l`,token:`--sf-icon-l`,def:2},{label:`xl`,token:`--sf-icon-xl`,def:3},{label:`2xl`,token:`--sf-icon-2xl`,def:4}],e=>e.token,(e,n)=>{{let r=I(()=>a(t.overrides[n.token]?.replace(`em`,``),n.def)),i=I(()=>n.token in t.overrides);$(e,{get label(){return n.label},get value(){return U(r)},min:.5,max:6,step:.125,unit:`em`,get overridden(){return U(i)},onChange:e=>t.onSet(n.token,`${e}em`),onReset:()=>t.onReset(n.token)})}}),F(r);var i=V(r,2);{let e=I(()=>a(t.overrides[`--sf-icon-box-pad`]?.replace(`em`,``),.5)),n=I(()=>`--sf-icon-box-pad`in t.overrides);$(i,{label:`Box padding`,get value(){return U(e)},min:0,max:2,step:.125,unit:`em`,help:`--sf-icon-box-pad — padding around icon when using .sf-icon-box`,get overridden(){return U(n)},onChange:e=>t.onSet(`--sf-icon-box-pad`,`${e}em`),onReset:()=>t.onReset(`--sf-icon-box-pad`)})}K(e,n)};J(Be,e=>{U(x)&&e(Ve)}),F(Ie);var He=V(Ie,4),Ge=z(He),Ke=V(z(Ge),2),qe=z(Ke,!0);F(Ke),F(Ge);var Je=V(Ge,2),Ye=e=>{var n=Jp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`cover`,`contain`,`fill`,`none`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-object-fit`]??`cover`);var i=Fp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`cover`?t.onReset(`--sf-object-fit`):t.onSet(`--sf-object-fit`,n)),K(e,i)}),F(i);var a=V(i,2),o=e=>{var n=Kp();W(`click`,n,()=>t.onReset(`--sf-object-fit`)),K(e,n)};J(a,e=>{`--sf-object-fit`in t.overrides&&e(o)}),F(r);var s=V(r,2),c=V(z(s),2);zi(c);var l=V(c,2),u=e=>{var n=qp();W(`click`,n,()=>t.onReset(`--sf-object-position`)),K(e,n)};J(l,e=>{`--sf-object-position`in t.overrides&&e(u)}),F(s),H(()=>Bi(c,t.overrides[`--sf-object-position`]??``)),W(`input`,c,e=>{let n=e.target.value.trim();n?t.onSet(`--sf-object-position`,n):t.onReset(`--sf-object-position`)}),K(e,n)};J(Je,e=>{U(S)&&e(Ye)}),F(He);var Xe=V(He,4),Ze=z(Xe),Qe=V(z(Ze),2),$e=z(Qe,!0);F(Qe),F(Ze);var et=V(Ze,2),tt=e=>{var n=Xp(),r=V(B(n),2);Y(r,20,()=>[{label:`Top`,token:`--sf-safe-top`,placeholder:`env(safe-area-inset-top, 0px)`},{label:`Right`,token:`--sf-safe-right`,placeholder:`env(safe-area-inset-right, 0px)`},{label:`Bottom`,token:`--sf-safe-bottom`,placeholder:`env(safe-area-inset-bottom, 0px)`},{label:`Left`,token:`--sf-safe-left`,placeholder:`env(safe-area-inset-left, 0px)`}],e=>e.token,(e,n)=>{var r=Yp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=qp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),F(r),K(e,n)};J(et,e=>{U(w)&&e(tt)}),F(Xe);var nt=V(Xe,4),rt=z(nt),it=V(z(rt),2),at=z(it,!0);F(it),F(rt);var ot=V(rt,2),st=e=>{var n=Qp(),r=V(B(n),2),i=V(z(r),2);Y(i,20,()=>[`a4`,`letter`,`legal`,`a3`],e=>e,(e,n)=>{let r=I(()=>t.overrides[`--sf-print-page-size`]??`a4`);var i=Fp(),a=z(i,!0);F(i),H(()=>{X(i,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${U(r)===n?`bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200`:`border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5`}`),q(a,n)}),W(`click`,i,()=>n===`a4`?t.onReset(`--sf-print-page-size`):t.onSet(`--sf-print-page-size`,n)),K(e,i)}),F(i),F(r),Y(V(r,2),16,()=>[{label:`Base size`,token:`--sf-print-base-size`,placeholder:`11pt`},{label:`Page margin`,token:`--sf-print-page-margin`,placeholder:`2cm`}],e=>e.token,(e,n)=>{var r=Zp(),i=z(r),a=z(i,!0);F(i);var o=V(i,2);zi(o);var s=V(o,2),c=e=>{var r=qp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(s,e=>{n.token in t.overrides&&e(c)}),F(r),H(()=>{q(a,n.label),Bi(o,t.overrides[n.token]??``),Q(o,`placeholder`,n.placeholder)}),W(`input`,o,e=>{let r=e.target.value.trim();r?t.onSet(n.token,r):t.onReset(n.token)}),K(e,r)}),K(e,n)};J(ot,e=>{U(C)&&e(st)}),F(nt);var ct=V(nt,4),lt=z(ct),ut=V(z(lt),2),dt=z(ut,!0);F(ut),F(lt);var ft=V(lt,2),pt=e=>{var n=em(),r=V(B(n),2);Y(r,20,()=>[{label:`is-active`,token:`--sf-is-active`,note:`Active/selected state`},{label:`is-current`,token:`--sf-is-current`,note:`Current page/item`},{label:`is-open`,token:`--sf-is-open`,note:`Open/expanded state`},{label:`is-pressed`,token:`--sf-is-pressed`,note:`Pressed/depressed state`}],e=>e.token,(e,n)=>{let r=I(()=>t.overrides[n.token]??`0`);var i=$p(),a=z(i),o=z(a);F(a);var s=V(a,2),c=z(s,!0);F(s);var l=V(s,2),u=z(l,!0);F(l);var d=V(l,2),f=e=>{var r=qp();W(`click`,r,()=>t.onReset(n.token)),K(e,r)};J(d,e=>{n.token in t.overrides&&e(f)}),F(i),H(()=>{Q(a,`aria-label`,n.label),Q(a,`aria-pressed`,U(r)===`1`),X(a,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${U(r)===`1`?`bg-indigo-600`:`bg-black/10 dark:bg-white/10`}`),X(o,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${U(r)===`1`?`translate-x-4`:`translate-x-0.5`}`),q(c,n.label),q(u,n.note)}),W(`click`,a,()=>U(r)===`1`?t.onReset(n.token):t.onSet(n.token,`1`)),K(e,i)}),F(r);var i=V(r,2),a=V(z(i),2);zi(a);var o=V(a,2),s=e=>{var n=qp();W(`click`,n,()=>t.onReset(`--sf-field-required-marker`)),K(e,n)};J(o,e=>{`--sf-field-required-marker`in t.overrides&&e(s)}),F(i),H(()=>Bi(a,t.overrides[`--sf-field-required-marker`]??``)),W(`input`,a,e=>{let n=e.target.value;n?t.onSet(`--sf-field-required-marker`,n):t.onReset(`--sf-field-required-marker`)}),K(e,n)};J(ft,e=>{U(T)&&e(pt)}),F(ct),Me(4),F(D),H(()=>{Q(k,`aria-expanded`,U(p)),q(te,U(p)?`▲`:`▼`),Q(M,`aria-expanded`,U(m)),q(ie,U(m)?`▲`:`▼`),Q(N,`aria-expanded`,U(g)),q(le,U(g)?`▲`:`▼`),Q(pe,`aria-expanded`,U(_)),q(he,U(_)?`▲`:`▼`),Q(ye,`aria-expanded`,U(v)),q(xe,U(v)?`▲`:`▼`),Q(Te,`aria-expanded`,U(y)),q(De,U(y)?`▲`:`▼`),Q(Ae,`aria-expanded`,U(b)),q(Ne,U(b)?`▲`:`▼`),Q(Le,`aria-expanded`,U(x)),q(ze,U(x)?`▲`:`▼`),Q(Ge,`aria-expanded`,U(S)),q(qe,U(S)?`▲`:`▼`),Q(Ze,`aria-expanded`,U(w)),q($e,U(w)?`▲`:`▼`),Q(rt,`aria-expanded`,U(C)),q(at,U(C)?`▲`:`▼`),Q(lt,`aria-expanded`,U(T)),q(dt,U(T)?`▲`:`▼`)}),W(`click`,k,()=>{R(p,!U(p))}),W(`click`,M,()=>{R(m,!U(m))}),W(`click`,N,()=>{R(g,!U(g))}),W(`click`,pe,()=>{R(_,!U(_))}),W(`click`,ye,()=>{R(v,!U(v))}),W(`click`,Te,()=>{R(y,!U(y))}),W(`click`,Ae,()=>{R(b,!U(b))}),W(`click`,Le,()=>{R(x,!U(x))}),W(`click`,Ge,()=>{R(S,!U(S))}),W(`click`,Ze,()=>{R(w,!U(w))}),W(`click`,rt,()=>{R(C,!U(C))}),W(`click`,lt,()=>{R(T,!U(T))}),K(e,D),We()}Br([`click`,`input`]);var rm=G(`
No saved themes yet.
 
Configure your tokens, then save them above.
`),im=G(`
`),am=G(`
  
`),om=G(` `),sm=G(`
 
`),cm=G(`
  
 
 
 
 
 
 
`),lm=G(``),um=G(`
Themes
 
Save your current configuration as a named theme, then re-apply it any time.
+    Themes are stored in this browser.
 
Save current
 
 
 
 
 
`);function dm(e,t){Ue(t,!0);let n=L(nn(Ac())),r=L(``),i=I(()=>Object.keys(t.overrides).length);function a(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let o=I(()=>U(n).find(e=>a(e.overrides,t.overrides))?.id??``);function s(){U(i)!==0&&(R(n,jc(U(r),t.overrides),!0),R(r,``))}function c(e){R(n,Mc(e),!0)}var l=um(),u=V(z(l),4),d=V(z(u),2),f=z(d);zi(f);var p=V(f,2);ro(z(p),{class:`w-3 h-3`}),Me(),F(p),F(d);var m=V(d,2),g=z(m),_=e=>{K(e,Yr(`No active overrides yet — adjust some tokens first.`))},v=e=>{var t=Yr();H(()=>q(t,`Captures all ${U(i)??``} active override${U(i)===1?``:`s`}.`)),K(e,t)};J(g,e=>{U(i)===0?e(_):e(v,-1)}),F(m),F(u);var y=V(u,2),b=z(y),x=e=>{K(e,rm())},S=e=>{var r=Xr();Y(B(r),17,()=>U(n),e=>e.id,(e,n)=>{let r=I(()=>Object.keys(U(n).overrides).length);var i=cm(),a=z(i),s=z(a),l=z(s,!0);F(s);var u=V(s,2),d=z(u),f=z(d),p=V(f),m=e=>{_a(e,{class:`w-3 h-3 text-indigo-600 dark:text-indigo-400`})};J(p,e=>{U(o)===U(n).id&&e(m)}),F(d);var g=V(d,2),_=z(g);F(g),F(u);var v=V(u,2),y=z(v),b=V(y,2);wo(z(b),{class:`w-3.5 h-3.5`}),F(b),F(v),F(a);var x=V(a,2),S=e=>{var t=sm(),i=z(t);Y(i,17,()=>Object.entries(U(n).overrides).slice(0,5),([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=am(),o=z(a),s=e=>{var t=im();let n;H(()=>n=Z(t,``,n,{background:i()})),K(e,t)},c=I(()=>r().includes(`color`)||r().includes(`source`));J(o,e=>{U(c)&&e(s)});var l=V(o,2),u=z(l,!0);F(l),F(a),H(e=>q(u,e),[()=>r().replace(`--sf-`,``)]),K(e,a)});var a=V(i,2),o=e=>{var t=om(),n=z(t);F(t),H(()=>q(n,`+${U(r)-5} more`)),K(e,t)};J(a,e=>{U(r)>5&&e(o)}),F(t),K(e,t)};J(x,e=>{U(r)>0&&e(S)}),F(i),H(()=>{X(i,1,`group rounded-xl border transition-all overflow-hidden ${U(o)===U(n).id?`border-indigo-500/40 bg-indigo-500/10`:`border-black/8 dark:border-white/8 bg-black/4 dark:bg-white/4 hover:bg-black/6 dark:hover:bg-white/6 hover:border-black/14 dark:hover:border-white/14`}`),q(l,U(n).icon),q(f,`${U(n).name??``} `),q(_,`${U(r)??``} override${U(r)===1?``:`s`}`)}),W(`click`,y,()=>t.onApplyTheme(U(n).overrides)),W(`click`,b,()=>c(U(n).id)),K(e,i)}),K(e,r)};J(b,e=>{U(n).length===0?e(x):e(S,-1)}),F(y);var C=V(y,2),w=e=>{var n=lm();W(`click`,n,function(...e){t.onResetAll?.apply(this,e)}),K(e,n)};J(C,e=>{U(i)>0&&e(w)}),F(l),H(()=>p.disabled=U(i)===0),W(`keydown`,f,e=>{e.key===`Enter`&&s()}),qi(f,()=>U(r),e=>R(r,e)),W(`click`,p,s),K(e,l),We()}Br([`keydown`,`click`]);var fm=G(` Link copied!`,1),pm=G(` Copy shareable link`,1),mm=G(`
Export
 
 
  
CSS output
 
 
 
 
 
 
  
Usage
 
Paste this CSS into your project after the SLASHED import.
 
`);function hm(e,t){Ue(t,!0);let n=L(`layer`),r=L(!1),i=L(!1),a=I(()=>yc(t.overrides,{mode:U(n),banner:!0})),o=I(()=>Object.keys(t.overrides).length);async function s(){try{await navigator.clipboard.writeText(U(a)),R(r,!0),setTimeout(()=>{R(r,!1)},2e3)}catch{}}async function c(){try{let e=Cc(t.overrides);await navigator.clipboard.writeText(e),R(i,!0),setTimeout(()=>{R(i,!1)},2e3)}catch{}}function l(){let e=new Blob([U(a)],{type:`text/css`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`slashed-overrides.css`,n.click(),URL.revokeObjectURL(t)}function u(e){return e.includes(`color`)||e.includes(`scrim-color`)||e.includes(`shadow-color`)?`color`:e.includes(`duration`)||e.includes(`delay`)||e.includes(`transition-duration`)?`duration`:e.includes(`radius`)||e.includes(`space`)||e.includes(`size`)||e.includes(`width`)||e.includes(`height`)||e.includes(`gap`)||e.includes(`blur`)||e.includes(`text-`)||e.includes(`leading`)||e.includes(`tracking`)?`dimension`:e.includes(`font-family`)||e.includes(`font-mono`)||e.includes(`font-body`)||e.includes(`font-heading`)||e.includes(`font-code`)?`fontFamily`:e.includes(`font-weight`)||e.includes(`weight`)?`fontWeight`:`string`}function d(){let e={};for(let[n,r]of Object.entries(t.overrides)){let t=n.replace(/^--sf-/,``).replace(/-/g,`.`);e[t]={$value:r,$type:u(n)}}let n=JSON.stringify({$schema:`https://design-tokens.github.io/community-group/format/`,...e},null,2),r=new Blob([n],{type:`application/json`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`slashed-tokens.w3c.json`,a.click(),URL.revokeObjectURL(i)}var f=mm(),p=z(f),m=V(z(p),2),h=z(m,!0);F(m),F(p);var g=V(p,2),_=z(g),v=e=>{var t=fm();_a(B(t),{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`}),Me(2),K(e,t)},y=e=>{var t=pm();Fa(B(t),{class:`w-3 h-3`}),Me(),K(e,t)};J(_,e=>{U(i)?e(v):e(y,-1)}),F(g);var b=V(g,2),x=V(z(b),2),S=z(x),C=V(S,2);F(x),F(b);var w=V(b,2),T=z(w),E=z(T,!0);F(T);var D=V(T,2),O=z(D),k=z(O),ee=e=>{_a(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},te=e=>{Ca(e,{class:`w-3 h-3`})};J(k,e=>{U(r)?e(ee):e(te,-1)}),F(O);var ne=V(O,2);Ta(z(ne),{class:`w-3 h-3`}),F(ne),F(D),F(w);var A=V(w,2);Ta(z(A),{class:`w-3 h-3`}),Me(),F(A);var j=V(A,2),M=V(z(j),4);M.textContent=`@import 'slashed/slashed.full.css';
+@import './slashed-overrides.css';`,F(j),F(f),H(()=>{q(h,U(o)>0?`${U(o)} override${U(o)===1?``:`s`} ready to export.`:`No overrides yet. Customise tokens, then export.`),g.disabled=U(o)===0,X(S,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`layer`?`bg-indigo-600 text-white`:`text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200`}`),X(C,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${U(n)===`root`?`bg-indigo-600 text-white`:`text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200`}`),q(E,U(a)||`/* No overrides */`),A.disabled=U(o)===0}),W(`click`,g,c),W(`click`,S,()=>{R(n,`layer`)}),W(`click`,C,()=>{R(n,`root`)}),W(`click`,O,s),W(`click`,ne,l),W(`click`,A,d),K(e,f),We()}Br([`click`]);var gm={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`},classes:[{name:`is-active`,selector:`.is-active`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Active state — applied to the currently interacted-with element (e.g. pressed button, active menu item). Sets --sf-is-active to 1 for calc() branching.`,optional:!1,layer:`slashed.states`},{name:`is-busy`,selector:`.is-busy`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Busy state — shows a progress cursor to indicate background processing. Does not mask content; use is-loading when content should be hidden during loading.`,optional:!1,layer:`slashed.states`},{name:`is-clickable`,selector:`.is-clickable`,kind:`state`,category:`State classes`,group:`FOCUS / INTERACTION MODIFIERS`,description:`Makes the element appear interactive (pointer cursor). Use when an element has a click handler but no native button or link role.`,optional:!1,layer:`slashed.states`},{name:`is-clipped`,selector:`.is-clipped`,kind:`state`,category:`State classes`,group:`OVERFLOW / CLIPPING`,description:`Clips overflowing content (overflow: hidden). Use to constrain media or tooltips within a container boundary.`,optional:!1,layer:`slashed.states`},{name:`is-collapsed`,selector:`.is-collapsed`,kind:`state`,category:`State classes`,group:`OPEN / CLOSED`,description:`Collapsed state for disclosure widgets — hides the expandable region. Pair with is-expanded or is-open. Components add transitions.`,optional:!1,layer:`slashed.states`},{name:`is-current`,selector:`.is-current`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Current/selected state — marks the active page in navigation or the selected item in a list. Sets --sf-is-current to 1 for calc() branching.`,optional:!1,layer:`slashed.states`},{name:`is-danger`,selector:`.is-danger`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Danger status state — applies danger color tokens for destructive actions (e.g. a delete confirmation dialog) and form validation errors.`,optional:!1,layer:`slashed.states`},{name:`is-disabled`,selector:`.is-disabled`,kind:`state`,category:`State classes`,group:`INTERACTIVITY`,description:`Disabled state — dims the element (--sf-opacity-disabled), removes pointer events, and sets cursor: not-allowed. Inherited by child elements that re-enable pointer events.`,optional:!1,layer:`slashed.states`},{name:`is-draggable`,selector:`.is-draggable`,kind:`state`,category:`State classes`,group:`DRAG & DROP`,description:`Draggable state — shows a grab cursor to indicate the element can be dragged. Apply before a drag interaction begins.`,optional:!1,layer:`slashed.states`},{name:`is-dragging`,selector:`.is-dragging`,kind:`state`,category:`State classes`,group:`DRAG & DROP`,description:`Active drag state — shows a grabbing cursor while the element is being dragged. Apply during the drag event.`,optional:!1,layer:`slashed.states`},{name:`is-drop-target`,selector:`.is-drop-target`,kind:`state`,category:`State classes`,group:`DRAG & DROP`,description:`Drop-target state — applies a visual highlight to indicate a valid drag-and-drop destination. Toggle on drag-over events.`,optional:!1,layer:`slashed.states`},{name:`is-empty`,selector:`.is-empty`,kind:`state`,category:`State classes`,group:`EMPTY STATE`,description:`Empty state — hides the element when it has no child nodes (:empty). Used for dynamic lists or containers that may render empty.`,optional:!1,layer:`slashed.states`},{name:`is-error`,selector:`.is-error`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Error state — alias for is-danger. Applies danger color tokens to indicate a validation failure or system error. Visual styling is identical to is-invalid.`,optional:!1,layer:`slashed.states`},{name:`is-expanded`,selector:`.is-expanded`,kind:`state`,category:`State classes`,group:`OPEN / CLOSED`,description:`Expanded state for disclosure widgets — shows the expandable region. Inverse of is-collapsed. Components add transitions.`,optional:!1,layer:`slashed.states`},{name:`is-fixed`,selector:`.is-fixed`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Fixed positioning state — removes the element from the document flow and positions it relative to the viewport. Respects writing-mode (logical variant of fixed positioning).`,optional:!1,layer:`slashed.states`},{name:`is-focused`,selector:`.is-focused`,kind:`state`,category:`State classes`,group:`FOCUS / INTERACTION MODIFIERS`,description:`Programmatic focus state — applies the focus ring to an element that should appear focused. Use when :focus-visible alone is insufficient (e.g. custom select).`,optional:!1,layer:`slashed.states`},{name:`is-fullscreen`,selector:`.is-fullscreen`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Fullscreen positioning state — stretches the element to cover the viewport. Bare positioning only; consumers supply inset values.`,optional:!1,layer:`slashed.states`},{name:`is-hidden`,selector:`.is-hidden`,kind:`state`,category:`State classes`,group:`VISIBILITY`,description:`Hidden state — removes the element from layout and accessibility tree (display: none !important).`,optional:!1,layer:`slashed.states`},{name:`is-highlighted`,selector:`.is-highlighted`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Highlighted state — applies a highlight background. Useful for search result highlighting and keyboard-navigated lists.`,optional:!1,layer:`slashed.states`},{name:`is-info`,selector:`.is-info`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Info status state — applies info color tokens. Use for neutral informational messages and hints.`,optional:!1,layer:`slashed.states`},{name:`is-invalid`,selector:`.is-invalid`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Invalid state — applies danger color tokens to form fields with validation failures. Identical visual output to is-error; the name signals form-field context.`,optional:!1,layer:`slashed.states`},{name:`is-invisible`,selector:`.is-invisible`,kind:`state`,category:`State classes`,group:`VISIBILITY`,description:`Invisible state — hides the element visually but keeps it in the layout and accessibility tree (visibility: hidden).`,optional:!1,layer:`slashed.states`},{name:`is-loading`,selector:`.is-loading`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Loading state — hides the element's text (color: transparent), removes pointer events, and renders a spinner via ::after. Use for buttons and containers awaiting async results.`,optional:!1,layer:`slashed.states`},{name:`is-open`,selector:`.is-open`,kind:`state`,category:`State classes`,group:`OPEN / CLOSED`,description:`Open/shown state for modals, dropdowns, and drawers — counterpart to is-collapsed/is-hidden. Sets --sf-is-open to 1 for calc() branching.`,optional:!1,layer:`slashed.states`},{name:`is-overlay`,selector:`.is-overlay`,kind:`state`,category:`State classes`,group:`OVERLAY / BACKDROP`,description:`Overlay positioning state — renders the element as a full-screen fixed overlay with a backdrop scrim. Use for modal backgrounds.`,optional:!1,layer:`slashed.states`},{name:`is-pending`,selector:`.is-pending`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Pending state for optimistic UI — content remains visible but dimmed while an async request is in flight. Differs from is-loading (which hides content entirely).`,optional:!1,layer:`slashed.states`},{name:`is-pinned`,selector:`.is-pinned`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Pinned / sticky state — applies a visual affordance (e.g. border or shadow) to indicate the element is in its stuck (sticky) position. Toggle via IntersectionObserver.`,optional:!1,layer:`slashed.states`},{name:`is-pressed`,selector:`.is-pressed`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Pressed/toggled-on state for toggle buttons. Sets --sf-is-pressed to 1 for calc() branching and signals the selected state to components.`,optional:!1,layer:`slashed.states`},{name:`is-readonly`,selector:`.is-readonly`,kind:`state`,category:`State classes`,group:`INTERACTIVITY`,description:`Readonly state — removes pointer events and text selection. Use for fields that display data but cannot be edited.`,optional:!1,layer:`slashed.states`},{name:`is-resizable`,selector:`.is-resizable`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Resizable state — enables user resize handle on the element (resize: both). Typically applied to textareas or panels.`,optional:!1,layer:`slashed.states`},{name:`is-scrollable`,selector:`.is-scrollable`,kind:`state`,category:`State classes`,group:`OVERFLOW / CLIPPING`,description:`Makes the element scrollable (overflow: auto) when its content overflows. Applies to both axes.`,optional:!1,layer:`slashed.states`},{name:`is-selected`,selector:`.is-selected`,kind:`state`,category:`State classes`,group:`ACTIVE / SELECTED / CURRENT`,description:`Selected state — marks an item as selected in a list, table row, or grid cell. Visual specifics (background, border) are applied by component styles.`,optional:!1,layer:`slashed.states`},{name:`is-skeleton`,selector:`.is-skeleton`,kind:`state`,category:`State classes`,group:`LOADING / ASYNC FEEDBACK`,description:`Skeleton loading placeholder state. Applies a shimmer animation over the element to indicate that content is loading. Works on both img and non-media elements.`,optional:!1,layer:`slashed.states`},{name:`is-sticky`,selector:`.is-sticky`,kind:`state`,category:`State classes`,group:`POSITION / STICKINESS`,description:`Sticky positioning state — sets position: sticky with a top offset from --sf-sticky-offset. Useful for sticky headers and sidebar sub-menus.`,optional:!1,layer:`slashed.states`},{name:`is-success`,selector:`.is-success`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Success status state — applies success color tokens. Use for confirmation messages, completed form steps, and positive feedback.`,optional:!1,layer:`slashed.states`},{name:`is-truncated`,selector:`.is-truncated`,kind:`state`,category:`State classes`,group:`OVERFLOW / CLIPPING`,description:`Single-line truncation state — clips overflowing text with an ellipsis (overflow: hidden, text-overflow: ellipsis, white-space: nowrap).`,optional:!1,layer:`slashed.states`},{name:`is-unselectable`,selector:`.is-unselectable`,kind:`state`,category:`State classes`,group:`FOCUS / INTERACTION MODIFIERS`,description:`Prevents text selection (user-select: none) on the element. Use on interactive drag handles, labels, and UI chrome that shouldn't be selected.`,optional:!1,layer:`slashed.states`},{name:`is-valid`,selector:`.is-valid`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Valid state — applies success color tokens to form fields that have passed validation. Visual styling is identical to is-success; the name signals form-field context.`,optional:!1,layer:`slashed.states`},{name:`is-visible`,selector:`.is-visible`,kind:`state`,category:`State classes`,group:`VISIBILITY`,description:`Visible state — forces the element to be visible (visibility: visible). Use to un-hide an element that inherited visibility: hidden from a parent.`,optional:!1,layer:`slashed.states`},{name:`is-warning`,selector:`.is-warning`,kind:`state`,category:`State classes`,group:`VALIDATION / FEEDBACK`,description:`Warning status state — applies warning color tokens. Use for cautionary messages and non-critical alerts.`,optional:!1,layer:`slashed.states`},{name:`no-motion`,selector:`.no-motion`,kind:`accessibility`,category:`Accessibility`,group:`Reduced motion. Token override helps components that read`,description:`Suppresses all animations and transitions within the subtree. Apply to a container to create a reduced-motion zone without relying on the system preference.`,optional:!1,layer:`slashed.accessibility`},{name:`no-print`,selector:`.no-print`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element in @media print. Use on sidebars, navigation bars, and decorative elements that should not appear on paper.`,optional:!1,layer:`slashed.print`},{name:`print-color-exact`,selector:`.print-color-exact`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Forces exact color rendering in print (print-color-adjust: exact). Use on charts and colored badges that must preserve their fill colors in print.`,optional:!1,layer:`slashed.print`},{name:`print-no-color`,selector:`.print-no-color`,kind:`print`,category:`Print`,group:`Opt-in colour treatment`,description:`Strips color information in print (print-color-adjust: economy). Defers to the printer's ink-saving mode for backgrounds and non-critical color fills.`,optional:!1,layer:`slashed.print`},{name:`print-only`,selector:`.print-only`,kind:`print`,category:`Print`,group:`Print visibility utilities`,description:`Hides the element on screen (display: none) but shows it in @media print. Use for print-only headers, footers, and supplementary content not needed on screen.`,optional:!1,layer:`slashed.print`},{name:`sf-alternate`,selector:`.sf-alternate`,kind:`layout`,category:`Layout primitives`,group:`Alternate (zigzag / media-object)`,description:`Zigzag / alternating two-column layout. Even children align image-left/text-right; odd children flip. Collapses to a single column below the breakpoint.`,optional:!1,layer:`slashed.layout`},{name:`sf-aspect`,selector:`.sf-aspect`,kind:`macro`,category:`Macro classes`,group:`Aspect`,description:`Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class.`,optional:!1,layer:`slashed.macros`},{name:`sf-bento`,selector:`.sf-bento`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Auto-fill bento grid for card dashboards. Children span 1 column by default; use span modifiers (sf-bento-wide, sf-bento-tall, sf-bento-full, sf-bento-featured) to break the grid.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--2`,selector:`.sf-bento--2`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 2-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--3`,selector:`.sf-bento--3`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 3-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--6`,selector:`.sf-bento--6`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with a 6-column base layout.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--compact`,selector:`.sf-bento--compact`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with shorter default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento--tall`,selector:`.sf-bento--tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Bento grid variant with taller default row height.`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-featured`,selector:`.sf-bento-featured`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: takes up 2×2 cells (featured hero placement).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-full`,selector:`.sf-bento-full`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: stretches across all columns (full-width banner).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-tall`,selector:`.sf-bento-tall`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: doubles the row height (tall card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bento-wide`,selector:`.sf-bento-wide`,kind:`layout`,category:`Layout primitives`,group:`Bento grid`,description:`Span modifier for a bento item: spans 2 columns (wide card).`,optional:!1,layer:`slashed.layout`},{name:`sf-bg`,selector:`.sf-bg`,kind:`layout`,category:`Layout primitives`,group:`Background`,description:`Background layer — absolutely-positioned cover media that sits behind a parent's content. The parent is auto-promoted to a positioned, isolated stacking context via :has(), so .sf-bg composes natively under .sf-scrim (background → scrim gradient → content). Works as a bare  or as a wrapper with a nested > img / > video / > picture.`,optional:!1,layer:`slashed.layout`},{name:`sf-box`,selector:`.sf-box`,kind:`layout`,category:`Layout primitives`,group:`Box`,description:`Minimal padding container that applies --sf-component-pad on all sides. The simplest layout primitive for adding breathing room.`,optional:!1,layer:`slashed.layout`},{name:`sf-breakout`,selector:`.sf-breakout`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Breaks a child element out of a parent sf-content-grid, spanning full bleed (or a named grid area) regardless of the parent column. Useful for full-width sections inside constrained prose.`,optional:!1,layer:`slashed.layout`},{name:`sf-center`,selector:`.sf-center`,kind:`layout`,category:`Layout primitives`,group:`Center`,description:`Centers children both horizontally and vertically using flexbox. Optionally add sf-center--intrinsic to size the container to its content.`,optional:!1,layer:`slashed.layout`},{name:`sf-center--intrinsic`,selector:`.sf-center--intrinsic`,kind:`layout`,category:`Layout primitives`,group:`Center`,description:`Modifier for sf-center: constrains the container to the natural width of its children (no stretching to fill available space).`,optional:!1,layer:`slashed.layout`},{name:`sf-clickable-parent`,selector:`.sf-clickable-parent`,kind:`accessibility`,category:`Accessibility`,group:`Clickable-parent`,description:`Makes the entire card or list-item clickable via an absolutely-positioned child overlay link. Apply to the container; place sf-clickable-parent__overlay on the .`,optional:!1,layer:`slashed.accessibility`},{name:`sf-clickable-parent__overlay`,selector:`.sf-clickable-parent__overlay`,kind:`accessibility`,category:`Accessibility`,group:`Clickable-parent`,description:`The full-bleed overlay link inside an sf-clickable-parent. Stretches to cover the parent and uses pointer-events to let interactive children keep their own clicks.`,optional:!1,layer:`slashed.accessibility`},{name:`sf-cluster`,selector:`.sf-cluster`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Flex-wrap row of variable-width items with automatic gap. Children wrap when the container is too narrow. Use for tag lists, button groups, and icon rows.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--2xl`,selector:`.sf-cluster--2xl`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with 2xl gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--between`,selector:`.sf-cluster--between`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that distributes items with space-between alignment.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--center`,selector:`.sf-cluster--center`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that centers the item row horizontally.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--end`,selector:`.sf-cluster--end`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that aligns items to the inline end (right in LTR).`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--l`,selector:`.sf-cluster--l`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with large (l) gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--m`,selector:`.sf-cluster--m`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with medium (m) gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--no-wrap`,selector:`.sf-cluster--no-wrap`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant that prevents item wrapping (single-line row).`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--s`,selector:`.sf-cluster--s`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with small (s) gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--xl`,selector:`.sf-cluster--xl`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with xl gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-cluster--xs`,selector:`.sf-cluster--xs`,kind:`layout`,category:`Layout primitives`,group:`Cluster`,description:`Cluster variant with xs gap between items.`,optional:!1,layer:`slashed.layout`},{name:`sf-color-pulse`,selector:`.sf-color-pulse`,kind:`motion`,category:`Motion / animation`,group:`@property color animation`,description:`Applies a gentle color-pulse animation to draw attention to a dynamic value change (e.g. a counter updating). Scoped to users who have not requested reduced motion.`,optional:!1,layer:`slashed.motion`},{name:`sf-container`,selector:`.sf-container`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Max-width page container, centered with auto side gutters. Establishes a named inline-size container (cq-container) for container queries. Default width is --sf-container-m.`,optional:!1,layer:`slashed.layout`},{name:`sf-container--full`,selector:`.sf-container--full`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant that spans the full viewport width (no max-width cap).`,optional:!1,layer:`slashed.layout`},{name:`sf-container--narrow`,selector:`.sf-container--narrow`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant with a narrower max-width (--sf-container-s). Use for single-column prose and forms.`,optional:!1,layer:`slashed.layout`},{name:`sf-container--prose`,selector:`.sf-container--prose`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant with a prose-optimised max-width (--sf-container-prose). Ideal for long-form reading content.`,optional:!1,layer:`slashed.layout`},{name:`sf-container--wide`,selector:`.sf-container--wide`,kind:`layout`,category:`Layout primitives`,group:`Container`,description:`Container variant with a wider max-width (--sf-container-l). Use for dashboards and wide media.`,optional:!1,layer:`slashed.layout`},{name:`sf-content-auto`,selector:`.sf-content-auto`,kind:`macro`,category:`Macro classes`,group:`Content visibility`,description:`Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages.`,optional:!1,layer:`slashed.macros`},{name:`sf-content-grid`,selector:`.sf-content-grid`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Holy-grail content grid with named areas: full-bleed, popout, and content columns. Use sf-breakout on children to escape the content column.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover`,selector:`.sf-cover`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Vertically stretches to at least a viewport height with a centered element (sf-cover__center). Typical use: hero sections.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover__center`,selector:`.sf-cover__center`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`The centered focal element inside an sf-cover. Stays vertically centered even when the cover content is shorter than the viewport.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--max`,selector:`.sf-cover--max`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant that uses a max-height instead of min-height for the viewport constraint.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--min`,selector:`.sf-cover--min`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant that reduces the minimum height to half a viewport.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--padding-l`,selector:`.sf-cover--padding-l`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant with large vertical padding above and below the centered content.`,optional:!1,layer:`slashed.layout`},{name:`sf-cover--padding-s`,selector:`.sf-cover--padding-s`,kind:`layout`,category:`Layout primitives`,group:`Cover`,description:`Cover variant with small vertical padding above and below the centered content.`,optional:!1,layer:`slashed.layout`},{name:`sf-cq`,selector:`.sf-cq`,kind:`layout`,category:`Layout primitives`,group:`Container query context`,description:`Assigns an inline-size container context to any element. Children can then use @container rules or container-query-aware tokens.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider`,selector:`.sf-divider`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Horizontal rule (divider line). Uses --sf-divider-* tokens for color, width, and style. Modifiers change dash style or orientation.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--dashed`,selector:`.sf-divider--dashed`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with a dashed stroke.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--dotted`,selector:`.sf-divider--dotted`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with a dotted stroke.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--gradient`,selector:`.sf-divider--gradient`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant rendered as a gradient that fades to transparent at both ends.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--soft`,selector:`.sf-divider--soft`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with reduced opacity (subtle separator).`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--strong`,selector:`.sf-divider--strong`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant with stronger/darker color for a more prominent separator.`,optional:!1,layer:`slashed.layout`},{name:`sf-divider--vertical`,selector:`.sf-divider--vertical`,kind:`layout`,category:`Layout primitives`,group:`Divider`,description:`Divider variant rendered as a vertical line. Use inside flex or grid containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-entrance--fade`,selector:`.sf-entrance--fade`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in as it enters the viewport. Animation tied to scroll progress via animation-timeline.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-down`,selector:`.sf-entrance--fade-down`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving downward into position.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-left`,selector:`.sf-entrance--fade-left`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving from the right toward the left.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-right`,selector:`.sf-entrance--fade-right`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving from the left toward the right.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--fade-up`,selector:`.sf-entrance--fade-up`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while moving upward into position.`,optional:!1,layer:`slashed.motion`},{name:`sf-entrance--scale-up`,selector:`.sf-entrance--scale-up`,kind:`motion`,category:`Motion / animation`,group:`Scroll-driven entrances`,description:`Scroll-driven entrance: element fades in while scaling up from a slightly smaller size.`,optional:!1,layer:`slashed.motion`},{name:`sf-equal`,selector:`.sf-equal`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Auto-fill equal-columns grid. Columns fill the row and wrap when they hit --sf-equal-min-col. No breakpoints needed.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--2`,selector:`.sf-equal--2`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 2 columns using --sf-equal-min-col-2.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--3`,selector:`.sf-equal--3`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 3 columns using --sf-equal-min-col-3.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--4`,selector:`.sf-equal--4`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 4 columns using --sf-equal-min-col-4.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal--6`,selector:`.sf-equal--6`,kind:`layout`,category:`Layout primitives`,group:`Equal columns (intrinsically responsive)`,description:`Equal-columns variant locked to 6 columns using --sf-equal-min-col-6.`,optional:!1,layer:`slashed.layout`},{name:`sf-equal-height`,selector:`.sf-equal-height`,kind:`macro`,category:`Macro classes`,group:`Equal height`,description:`Forces all flex children to equal height (align-items: stretch). Use on a flex row to make cards in a grid share the tallest card's height.`,optional:!1,layer:`slashed.macros`},{name:`sf-fade-in`,selector:`.sf-fade-in`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot fade-in animation (opacity 0 → 1). Scoped to no-preference so it stops automatically for reduced-motion users.`,optional:!1,layer:`slashed.motion`},{name:`sf-fade-out`,selector:`.sf-fade-out`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot fade-out animation (opacity 1 → 0). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-flow`,selector:`.sf-flow`,kind:`macro`,category:`Macro classes`,group:`Flow`,description:`Applies --sf-flow-space as margin-block-start to all direct children except the first. Establishes consistent vertical rhythm in prose-like containers.`,optional:!1,layer:`slashed.macros`},{name:`sf-focus-parent`,selector:`.sf-focus-parent`,kind:`accessibility`,category:`Accessibility`,group:`Focus-parent`,description:`Forwards focus-visible styling to this container when any descendant is keyboard-focused. Useful for custom controls that wrap a visually-hidden .`,optional:!1,layer:`slashed.accessibility`},{name:`sf-focus-shadow`,selector:`.sf-focus-shadow`,kind:`accessibility`,category:`Accessibility`,group:`Focus-shadow opt-in`,description:`Applies the standard focus ring as a box-shadow to any element. Use on custom controls where the native :focus-visible ring doesn't render correctly.`,optional:!1,layer:`slashed.accessibility`},{name:`sf-frame`,selector:`.sf-frame`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Aspect-ratio container for media (images, video, maps). Children fill and cover the fixed-ratio box. Default ratio is 16:9.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--3-2`,selector:`.sf-frame--3-2`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a 3:2 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--4-3`,selector:`.sf-frame--4-3`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a 4:3 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--cinema`,selector:`.sf-frame--cinema`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a cinematic 21:9 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--golden`,selector:`.sf-frame--golden`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to the golden ratio (1.618:1).`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--portrait`,selector:`.sf-frame--portrait`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a portrait 2:3 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--square`,selector:`.sf-frame--square`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to a square 1:1 aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-frame--video`,selector:`.sf-frame--video`,kind:`layout`,category:`Layout primitives`,group:`Frame`,description:`Frame variant locked to the standard 16:9 video aspect ratio.`,optional:!1,layer:`slashed.layout`},{name:`sf-full-bleed`,selector:`.sf-full-bleed`,kind:`layout`,category:`Layout primitives`,group:`Content grid (breakout pattern)`,description:`Forces an element to span the full viewport width, breaking out of any centered container. Use for full-bleed images and section backgrounds.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap`,selector:`.sf-gap`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Injects the default --sf-gap into an existing flex or grid container without imposing display:flex itself. Use when the parent is already a flex or grid.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--2xl`,selector:`.sf-gap--2xl`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with 2xl gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--l`,selector:`.sf-gap--l`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with large (l) gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--m`,selector:`.sf-gap--m`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with medium (m) gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--s`,selector:`.sf-gap--s`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with small (s) gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--xl`,selector:`.sf-gap--xl`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with xl gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-gap--xs`,selector:`.sf-gap--xs`,kind:`layout`,category:`Layout primitives`,group:`Gap`,description:`Gap injection variant with xs gap value.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid`,selector:`.sf-grid`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Auto-fill CSS grid. Columns are sized with RAM pattern (Repeat, Auto-fill, Minmax) and wrap automatically. Default column min-width is --sf-grid-min-col.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--2xl`,selector:`.sf-grid--2xl`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a 2xl minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--dense`,selector:`.sf-grid--dense`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with grid-auto-flow: dense, allowing the grid to fill holes created by span modifiers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--fit`,selector:`.sf-grid--fit`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant that switches from auto-fill to auto-fit, collapsing empty columns.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--l`,selector:`.sf-grid--l`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a large (l) minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--m`,selector:`.sf-grid--m`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a medium (m) minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--s`,selector:`.sf-grid--s`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with a small (s) minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--xl`,selector:`.sf-grid--xl`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with an xl minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid--xs`,selector:`.sf-grid--xs`,kind:`layout`,category:`Layout primitives`,group:`Grid (auto)`,description:`Grid variant with an xs minimum column width.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-1`,selector:`.sf-grid-cols-1`,kind:`layout`,category:`Layout primitives`,group:`Single-column grid`,description:`Single-column layout (forces all children to one column).`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-1-2`,selector:`.sf-grid-cols-1-2`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 1fr, second takes 2fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-1-3`,selector:`.sf-grid-cols-1-3`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 1fr, second takes 3fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-2`,selector:`.sf-grid-cols-2`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 2-column fixed grid. Uses container queries to collapse to one column on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-2-1`,selector:`.sf-grid-cols-2-1`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 2fr, second takes 1fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-3`,selector:`.sf-grid-cols-3`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 3-column fixed grid. Collapses progressively on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-3-1`,selector:`.sf-grid-cols-3-1`,kind:`layout`,category:`Layout primitives`,group:`Ratio grids`,description:`Two-column ratio grid: first child takes 3fr, second takes 1fr. Container-query responsive.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-4`,selector:`.sf-grid-cols-4`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 4-column fixed grid. Collapses progressively on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-grid-cols-6`,selector:`.sf-grid-cols-6`,kind:`layout`,category:`Layout primitives`,group:`Fixed column grids (container-query responsive)`,description:`Responsive 6-column fixed grid. Collapses progressively on narrow containers.`,optional:!1,layer:`slashed.layout`},{name:`sf-icon`,selector:`.sf-icon`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Inline icon sizing primitive. Sets width and height to --sf-icon-m via em-based tokens so the icon scales with the surrounding text.`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--2xl`,selector:`.sf-icon--2xl`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-2xl (extra-extra-large).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--boxed`,selector:`.sf-icon--boxed`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant with a square bordered box background. Useful for standalone icon buttons and feature icons.`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--l`,selector:`.sf-icon--l`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-l (large).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--m`,selector:`.sf-icon--m`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-m (medium, same as base sf-icon).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--s`,selector:`.sf-icon--s`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-s (small).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--xl`,selector:`.sf-icon--xl`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-xl (extra-large).`,optional:!1,layer:`slashed.layout`},{name:`sf-icon--xs`,selector:`.sf-icon--xs`,kind:`layout`,category:`Layout primitives`,group:`Icon`,description:`Icon variant sized to --sf-icon-xs (extra-small).`,optional:!1,layer:`slashed.layout`},{name:`sf-imposter`,selector:`.sf-imposter`,kind:`layout`,category:`Layout primitives`,group:`Imposter`,description:`Absolutely positions an element at the center of its nearest positioned ancestor. Use for overlays, badges, and floating labels.`,optional:!1,layer:`slashed.layout`},{name:`sf-imposter--contain`,selector:`.sf-imposter--contain`,kind:`layout`,category:`Layout primitives`,group:`Imposter`,description:`Imposter variant that clamps the element within the bounds of its parent using overflow:hidden on the parent.`,optional:!1,layer:`slashed.layout`},{name:`sf-imposter--fixed`,selector:`.sf-imposter--fixed`,kind:`layout`,category:`Layout primitives`,group:`Imposter`,description:`Imposter variant that uses position:fixed instead of absolute. Use for viewport-level overlays and modals.`,optional:!1,layer:`slashed.layout`},{name:`sf-line-clamp-2`,selector:`.sf-line-clamp-2`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Clamps text to 2 lines with an ellipsis. Applies -webkit-line-clamp: 2.`,optional:!1,layer:`slashed.macros`},{name:`sf-line-clamp-3`,selector:`.sf-line-clamp-3`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Clamps text to 3 lines with an ellipsis. Applies -webkit-line-clamp: 3.`,optional:!1,layer:`slashed.macros`},{name:`sf-line-clamp-N`,selector:`.sf-line-clamp-N`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Clamps text to a custom N lines. Set --sf-line-clamp on the element to control the number of visible lines.`,optional:!1,layer:`slashed.macros`},{name:`sf-link--reverse`,selector:`.sf-link--reverse`,kind:`macro`,category:`Macro classes`,group:`Link variants`,description:`Link color modifier: reverses the default link color to work on dark/inverted backgrounds. Sets color to --sf-color-text--inverse.`,optional:!1,layer:`slashed.macros`},{name:`sf-link--subtle`,selector:`.sf-link--subtle`,kind:`macro`,category:`Macro classes`,group:`Link variants`,description:`Link color modifier: renders the link in the body text color instead of the default action color. Underline still indicates the link on hover.`,optional:!1,layer:`slashed.macros`},{name:`sf-link-external`,selector:`.sf-link-external`,kind:`macro`,category:`Macro classes`,group:`External link indication`,description:`Automatically appends an external-link icon (via ::after content) to indicate the link opens in a new tab or goes to an external domain.`,optional:!1,layer:`slashed.macros`},{name:`sf-no-tap-highlight`,selector:`.sf-no-tap-highlight`,kind:`macro`,category:`Macro classes`,group:`No tap highlight`,description:`Removes the mobile tap highlight color (-webkit-tap-highlight-color: transparent). Use on interactive elements with a custom active state.`,optional:!1,layer:`slashed.macros`},{name:`sf-not-prose`,selector:`.sf-not-prose`,kind:`macro`,category:`Macro classes`,group:`Prose`,description:`Opt-out of sf-prose typography styles within a prose block. Apply to an element that should keep default browser or component styles.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade`,selector:`.sf-overflow-fade`,kind:`macro`,category:`Macro classes`,group:`Overflow fade`,description:`Adds a gradient fade at the inline-end of an overflowing element to hint at hidden content. Use inside sf-reel or any scroll container.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--block`,selector:`.sf-overflow-fade--block`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades both the top and bottom edges simultaneously (block axis).`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--bottom`,selector:`.sf-overflow-fade--bottom`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the bottom (block-end) edge.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--inline`,selector:`.sf-overflow-fade--inline`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades both the left and right edges simultaneously (inline axis).`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--left`,selector:`.sf-overflow-fade--left`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the left (inline-start) edge.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--right`,selector:`.sf-overflow-fade--right`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the right (inline-end) edge. Explicit alias for the default sf-overflow-fade behaviour.`,optional:!1,layer:`slashed.macros`},{name:`sf-overflow-fade--top`,selector:`.sf-overflow-fade--top`,kind:`macro`,category:`Macro classes`,group:``,description:`Overflow fade variant: fades the top (block-start) edge.`,optional:!1,layer:`slashed.macros`},{name:`sf-pancake`,selector:`.sf-pancake`,kind:`layout`,category:`Layout primitives`,group:`Pancake (sticky footer)`,description:`Three-row layout (header, main, footer) where main takes all remaining vertical space via flex-grow. The footer always sticks to the bottom on tall viewports.`,optional:!1,layer:`slashed.layout`},{name:`sf-prose`,selector:`.sf-prose`,kind:`macro`,category:`Macro classes`,group:`Prose`,description:`Opinionated typographic defaults for long-form content: heading hierarchy, paragraph spacing, blockquote, code, and list styling. Override with sf-not-prose.`,optional:!1,layer:`slashed.macros`},{name:`sf-reel`,selector:`.sf-reel`,kind:`layout`,category:`Layout primitives`,group:`Reel`,description:`Horizontally scrollable row of fixed-height items with snap scrolling. Children don't shrink below their intrinsic width, creating a card carousel effect.`,optional:!1,layer:`slashed.layout`},{name:`sf-scale-down`,selector:`.sf-scale-down`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot scale-down animation (element shrinks from full size). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-scale-up`,selector:`.sf-scale-up`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot scale-up animation (element grows from smaller size). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-scrim`,selector:`.sf-scrim`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Overlay container with a gradient darkening scrim behind text placed on an image or colored background.`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim__content`,selector:`.sf-scrim__content`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Content area inside an sf-scrim. Positioned above the gradient overlay layer.`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim--bottom`,selector:`.sf-scrim--bottom`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Scrim variant with the gradient emanating from the bottom edge (bottom-to-top fade).`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim--full`,selector:`.sf-scrim--full`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Scrim variant that covers the entire surface with a uniform translucent overlay.`,optional:!1,layer:`slashed.macros`},{name:`sf-scrim--top`,selector:`.sf-scrim--top`,kind:`macro`,category:`Macro classes`,group:`Scrim`,description:`Scrim variant with the gradient emanating from the top edge (top-to-bottom fade).`,optional:!1,layer:`slashed.macros`},{name:`sf-scroll-shadow`,selector:`.sf-scroll-shadow`,kind:`macro`,category:`Macro classes`,group:`Scroll shadow`,description:`Adds inset box-shadows at the top and bottom of a scrollable container to indicate hidden overflow above or below.`,optional:!1,layer:`slashed.macros`},{name:`sf-scroll-snap`,selector:`.sf-scroll-snap`,kind:`macro`,category:`Macro classes`,group:`Scroll snap`,description:`Enables CSS scroll-snap-type: x mandatory on a horizontal scroll container. Children should have scroll-snap-align.`,optional:!1,layer:`slashed.macros`},{name:`sf-section`,selector:`.sf-section`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Full-width page section with vertical padding (--sf-section-pad-default). Use to create visually distinct content bands.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--2xl`,selector:`.sf-section--2xl`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with 2xl vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--collapse`,selector:`.sf-section--collapse`,kind:`layout`,category:`Layout primitives`,group:`Collapse modifier`,description:`Section variant that removes vertical padding (zero-padding section for adjacent same-color blocks).`,optional:!1,layer:`slashed.layout`},{name:`sf-section--guttered`,selector:`.sf-section--guttered`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Adds horizontal page gutters directly to a section — use when you want to skip a separate .sf-container wrapper (gutterless layout inside section). Neutralises container gutter to prevent double padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--l`,selector:`.sf-section--l`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with large (l) vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--m`,selector:`.sf-section--m`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with medium (m) vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--s`,selector:`.sf-section--s`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with small (s) vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--xl`,selector:`.sf-section--xl`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with xl vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section--xs`,selector:`.sf-section--xs`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Section variant with xs vertical padding.`,optional:!1,layer:`slashed.layout`},{name:`sf-section-group`,selector:`.sf-section-group`,kind:`layout`,category:`Layout primitives`,group:`Section`,description:`Groups adjacent sf-section elements so their combined padding collapses correctly at the top and bottom edges.`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar`,selector:`.sf-sidebar`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Two-column sidebar layout: first child is the sidebar, second child is main content. The sidebar collapses below the breakpoint (--sf-sidebar-min-width). Default sidebar on the left.`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar--narrow`,selector:`.sf-sidebar--narrow`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Sidebar variant with a narrower sidebar column.`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar--right`,selector:`.sf-sidebar--right`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Sidebar variant with the sidebar on the right (second child becomes the sidebar).`,optional:!1,layer:`slashed.layout`},{name:`sf-sidebar--wide`,selector:`.sf-sidebar--wide`,kind:`layout`,category:`Layout primitives`,group:`Sidebar`,description:`Sidebar variant with a wider sidebar column.`,optional:!1,layer:`slashed.layout`},{name:`sf-slide-in-down`,selector:`.sf-slide-in-down`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-above animation. Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-slide-in-left`,selector:`.sf-slide-in-left`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-right animation (slides to the left). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-slide-in-right`,selector:`.sf-slide-in-right`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-left animation (slides to the right). Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-slide-in-up`,selector:`.sf-slide-in-up`,kind:`motion`,category:`Motion / animation`,group:`Animation presets`,description:`One-shot slide-in-from-below animation. Scoped to no-preference.`,optional:!1,layer:`slashed.motion`},{name:`sf-stack`,selector:`.sf-stack`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Flex column with even vertical spacing between children (--sf-stack-gap). Stacking context for vertical rhythm.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--2xl`,selector:`.sf-stack--2xl`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with 2xl gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--center`,selector:`.sf-stack--center`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant that centers children on the cross axis.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--end`,selector:`.sf-stack--end`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant that aligns children to the cross-axis end (right in LTR).`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--l`,selector:`.sf-stack--l`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with large (l) gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--m`,selector:`.sf-stack--m`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with medium (m) gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--s`,selector:`.sf-stack--s`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with small (s) gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--stretch`,selector:`.sf-stack--stretch`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant that stretches children to fill the full available width.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--xl`,selector:`.sf-stack--xl`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with xl gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-stack--xs`,selector:`.sf-stack--xs`,kind:`layout`,category:`Layout primitives`,group:`Stack`,description:`Stack variant with xs gap between children.`,optional:!1,layer:`slashed.layout`},{name:`sf-subgrid`,selector:`.sf-subgrid`,kind:`layout`,category:`Layout primitives`,group:`Subgrid`,description:`Passes the parent grid columns through to children via subgrid. Place on a grid item that should align its own children to the outer grid columns.`,optional:!1,layer:`slashed.layout`},{name:`sf-subgrid-rows`,selector:`.sf-subgrid-rows`,kind:`layout`,category:`Layout primitives`,group:`Subgrid`,description:`Passes the parent grid rows through to children via subgrid. Place on a grid item that should align its own children to the outer grid rows.`,optional:!1,layer:`slashed.layout`},{name:`sf-surface`,selector:`.sf-surface`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Generic semantic surface: applies --sf-surface-color as the background and automatically sets a contrasting text color. Tone variants (--primary, --action, etc.) activate preset palettes.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--action`,selector:`.sf-surface--action`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the action color palette (button/CTA primary color).`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--danger`,selector:`.sf-surface--danger`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the danger status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--info`,selector:`.sf-surface--info`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the info status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--inverse`,selector:`.sf-surface--inverse`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant that inverts light/dark, creating an always-dark surface in light mode and always-light in dark mode.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--neutral`,selector:`.sf-surface--neutral`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the neutral palette (muted/gray).`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--primary`,selector:`.sf-surface--primary`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the primary brand color palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--secondary`,selector:`.sf-surface--secondary`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the secondary brand color palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--success`,selector:`.sf-surface--success`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the success status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--tertiary`,selector:`.sf-surface--tertiary`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the tertiary brand color palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-surface--warning`,selector:`.sf-surface--warning`,kind:`macro`,category:`Macro classes`,group:`Surface`,description:`Surface variant using the warning status palette.`,optional:!1,layer:`slashed.macros`},{name:`sf-switcher`,selector:`.sf-switcher`,kind:`layout`,category:`Layout primitives`,group:`Switcher`,description:`Flex layout that switches from a horizontal row to a vertical column when the container is narrower than --sf-switcher-threshold.`,optional:!1,layer:`slashed.layout`},{name:`sf-switcher--no-wrap`,selector:`.sf-switcher--no-wrap`,kind:`layout`,category:`Layout primitives`,group:`Switcher`,description:`Switcher variant that stays horizontal and never wraps (single-line regardless of container width).`,optional:!1,layer:`slashed.layout`},{name:`sf-switcher--vertical`,selector:`.sf-switcher--vertical`,kind:`layout`,category:`Layout primitives`,group:`Switcher`,description:`Switcher variant that starts in the vertical (stacked) direction on all sizes.`,optional:!1,layer:`slashed.layout`},{name:`sf-tabular-nums`,selector:`.sf-tabular-nums`,kind:`macro`,category:`Macro classes`,group:`Tabular figures`,description:`Forces tabular (monospaced) number rendering. Use on price tables, counters, and anywhere numbers need to align vertically across rows.`,optional:!1,layer:`slashed.macros`},{name:`sf-text-gradient`,selector:`.sf-text-gradient`,kind:`macro`,category:`Macro classes`,group:`Text gradient`,description:`Applies a brand gradient to inline text. Sets the background to the gradient, clips it to the text, and makes the text color transparent.`,optional:!1,layer:`slashed.macros`},{name:`sf-text-protect`,selector:`.sf-text-protect`,kind:`macro`,category:`Macro classes`,group:`Text protect`,description:`Wraps text in a translucent dark gradient overlay to ensure legibility when placed over a light or variable background image.`,optional:!1,layer:`slashed.macros`},{name:`sf-theme-transition`,selector:`.sf-theme-transition`,kind:`theme`,category:`Theme utilities`,group:`OPT-IN THEME CROSS-FADE`,description:`Opt-in animated light/dark theme crossfade. Apply to  (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.`,optional:!1,layer:`slashed.themes`},{name:`sf-truncate`,selector:`.sf-truncate`,kind:`macro`,category:`Macro classes`,group:`Truncate / line-clamp`,description:`Single-line text overflow with ellipsis. Equivalent to the classic text-overflow: ellipsis trio (white-space nowrap, overflow hidden, text-overflow ellipsis).`,optional:!1,layer:`slashed.macros`},{name:`skip-link`,selector:`.skip-link`,kind:`accessibility`,category:`Accessibility`,group:`Skip link`,description:`Accessible skip-navigation link. Hidden until focused; jumps keyboard users past repeated navigation blocks. Place as the very first element in .`,optional:!1,layer:`slashed.accessibility`},{name:`sr-only`,selector:`.sr-only`,kind:`accessibility`,category:`Accessibility`,group:`Screen-reader-only. Atomic contract: a partial override`,description:`Visually hides content while keeping it accessible to screen readers. Use for labels, descriptions, and off-screen text that assistive technology needs.`,optional:!1,layer:`slashed.accessibility`},{name:`sr-only-focusable`,selector:`.sr-only-focusable`,kind:`accessibility`,category:`Accessibility`,group:`Screen-reader-only. Atomic contract: a partial override`,description:`Extends sr-only — also reveals the element when it receives keyboard focus. Typical use: skip links and visually-hidden focus targets.`,optional:!1,layer:`slashed.accessibility`},{name:`theme-transition`,selector:`.theme-transition`,kind:`theme`,category:`Theme example`,group:`5. SMOOTH THEME-TRANSITION HELPER`,description:`Internal helper class used by the sf-theme-transition macro. Applies per-property transitions to registered color tokens during light/dark mode switches.`,optional:!0,layer:`slashed.themes`}]},_m={_sync:{generatedBy:`configurator/scripts/sync-api.mjs`,source:`docs/api-index.json`,tokensHash:`29dec6de6d0c`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`],counts:{tokens:685,byTier:{PUBLIC:629,"PUBLIC-ADVANCED":55,INTERNAL:1},byCategory:{"Layout tokens":54,"Core tokens":602,"Macro tokens":23,"Component tokens":6}}},tokens:[{name:`--sf-alternate-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`alternate`,category:`Layout tokens`,group:`Alternate (zigzag)`,description:`Gap tokens for the alternating content/media (zigzag) layout.`,note:`Gap between items in the alternating zigzag layout.`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-alternate-inner-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`alternate`,category:`Layout tokens`,group:`Alternate (zigzag)`,description:`Gap tokens for the alternating content/media (zigzag) layout.`,note:`Gap between content and media within each zigzag item.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-blink`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Blinking visibility loop. Use for cursor indicators or critical attention cues. Respect prefers-reduced-motion.`,value:`sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-color-pulse`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Pulsing color loop. Use for live-status badges (recording, live). Respect prefers-reduced-motion.`,value:`sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-1`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Shortest stagger delay. Apply to the first element in a sequentially animated group.`,value:`calc(75ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-2`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Second stagger delay step.`,value:`calc(150ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-3`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Third stagger delay step.`,value:`calc(225ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-4`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Fourth stagger delay step.`,value:`calc(300ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-delay-5`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Longest stagger delay. Apply to the last element in a sequentially animated group.`,value:`calc(375ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-fade-in`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Fade-in entrance animation shorthand. Use directly as animation property value.`,value:`sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-fade-out`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Fade-out exit animation shorthand.`,value:`sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-float`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Gentle floating / levitating loop. Use for hero illustrations or floating UI elements. Decorative — disable for prefers-reduced-motion.`,value:`sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-ping`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Expanding ping / ripple loop. Use for notification badges and live-indicator dots.`,value:`sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-scale-down`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Scale-down exit animation. Pairs with --sf-animation-scale-up for enter/leave transitions.`,value:`sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-scale-up`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Scale-up entrance animation. Use for modals, popovers, and tooltips appearing.`,value:`sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-shimmer`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Shimmer / skeleton-loading sweep. Apply on placeholder elements while content loads.`,value:`sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-down`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from above. Use for dropdown menus and top-attached sheets.`,value:`sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-left`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from the left. Use for left-side drawers and navigation panels.`,value:`sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-right`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from the right. Use for right-side drawers and detail panels.`,value:`sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-slide-in-up`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Slide-in from below. Use for bottom sheets, toasts, and floating action buttons.`,value:`sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-animation-spin`,tier:`PUBLIC`,role:`consumption`,namespace:`animation`,category:`Core tokens`,group:`Animation presets`,description:`Complete animation shorthand values — pair named @keyframes with duration and easing. Use directly as animation property values.`,note:`Continuous rotation loop. Use for loading spinners and progress indicators.`,value:`sf-spin var(--sf-duration-slower) linear infinite`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-aspect`,tier:`PUBLIC`,role:`knob`,namespace:`aspect`,category:`Macro tokens`,group:`Aspect ratio`,description:`Aspect-ratio value for the .aspect-ratio macro.`,note:`Aspect ratio value for the .aspect-ratio macro.`,value:`16 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-cols-default`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Default column count for the bento grid.`,value:`4`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Gap between bento grid cells.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-row-compact`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Row height for compact-variant bento items.`,value:`6rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-row-default`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Default row height for standard bento grid cells.`,value:`10rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bento-row-tall`,tier:`PUBLIC`,role:`knob`,namespace:`bento`,category:`Layout tokens`,group:`Bento grid`,description:`Configuration tokens for the bento-grid layout primitive.`,note:`Tall row height for visually prominent or hero bento cells.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-fit`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.`,note:`object-fit applied to .sf-bg when used as a bare media element, and to .sf-bg > img / video / picture children. Defaults to cover.`,value:`cover`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-inset`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`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.`,note:`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.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-position`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).`,note:`object-position controlling where the media is anchored within the layer. Defaults to center (50% 50%).`,value:`50% 50%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-radius`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.`,note:`border-radius applied to the .sf-bg layer and its img/video/picture children. Defaults to 0; set to match the parent's radius when clipping is needed.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-bg-z`,tier:`PUBLIC`,role:`knob`,namespace:`bg`,category:`Layout tokens`,group:`Background layer (.sf-bg)`,description:`z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.`,note:`z-index of the background layer. Defaults to -2 so it sits behind sibling content but above the parent's own background.`,value:`-2`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-blur`,tier:`PUBLIC`,role:`knob`,namespace:`blur`,category:`Core tokens`,group:`Blur & opacity`,description:`Backdrop-filter blur scale and background-opacity tokens.`,note:`Backdrop-filter blur amount for frosted-glass surfaces (navbars, overlays, dialogs). Default 12px. Pair with a semi-transparent background.`,value:`12px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-color`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Text color for body copy. Alias of --sf-color-text. Override here to deviate body text from the global text color.`,value:`var(--sf-color-text)`,aliasOf:`--sf-color-text`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-em-style`,tier:`PUBLIC`,role:`knob`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`font-style for  inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.`,value:`italic`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-font-family`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font family for body text. Alias of --sf-font-body.`,value:`var(--sf-font-body)`,aliasOf:`--sf-font-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-font-size`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Base font size for body paragraphs. Alias of --sf-text-m.`,value:`var(--sf-text-m)`,aliasOf:`--sf-text-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for body text. Alias of --sf-font-weight-body.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for body paragraphs. Alias of --sf-leading-normal.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-strong-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for  inside body text. Override to choose a specific weight instead of inheriting bold.`,value:`var(--sf-font-weight-strong)`,aliasOf:`--sf-font-weight-strong`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-body-text-wrap`,tier:`PUBLIC`,role:`knob`,namespace:`body`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`text-wrap mode for body paragraphs. 'pretty' prevents orphaned last words; 'balance' equalises line lengths.`,value:`pretty`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border shorthands`,description:`Ready-to-use border shorthand values (width + style + color) for the three most common border weights.`,note:`Default border shorthand (width + solid + color). Apply directly to border property.`,value:`var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-scale`,tier:`PUBLIC`,role:`knob`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Global border-width multiplier. Set to 0 for borderless UI; 0.5 for hairline-only; 2 to double all border widths across the system.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border shorthands`,description:`Ready-to-use border shorthand values (width + style + color) for the three most common border weights.`,note:`Strong-emphasis border shorthand.`,value:`var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-style`,tier:`PUBLIC`,role:`knob`,namespace:`border`,category:`Core tokens`,group:`Border style`,description:`Global border-style default (solid, dashed, etc.).`,note:`Global border-style default applied across all border tokens.`,value:`solid`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border shorthands`,description:`Ready-to-use border shorthand values (width + style + color) for the three most common border weights.`,note:`Low-contrast subtle border shorthand.`,value:`var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-1`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Standard 1px border width.`,value:`calc(1px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-2`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Medium 2px border width. Common for focus outlines.`,value:`calc(2px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-3`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Thick 3px border width.`,value:`calc(3px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-4`,tier:`PUBLIC`,role:`consumption`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`Extra-thick 4px border width for decorative borders.`,value:`calc(4px * var(--sf-border-scale, 1))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-border-width-hairline`,tier:`PUBLIC`,role:`knob`,namespace:`border`,category:`Core tokens`,group:`Border widths`,description:`Raw border-width values. Use the shorthands above unless you need to override just the width.`,note:`1px border width (hairline).`,value:`0.5px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-box-border-color`,tier:`PUBLIC`,role:`consumption`,namespace:`box`,category:`Layout tokens`,group:`Box`,description:`Border, background, and padding tokens for the box layout primitive.`,note:`Border color for the box layout primitive.`,value:`var(--sf-color-border)`,aliasOf:`--sf-color-border`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-box-border-width`,tier:`PUBLIC`,role:`knob`,namespace:`box`,category:`Layout tokens`,group:`Box`,description:`Border, background, and padding tokens for the box layout primitive.`,note:`Border width for the box layout primitive.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-box-padding`,tier:`PUBLIC`,role:`consumption`,namespace:`box`,category:`Layout tokens`,group:`Box`,description:`Border, background, and padding tokens for the box layout primitive.`,note:`Inner padding for the box layout primitive.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-breakout-width`,tier:`PUBLIC`,role:`consumption`,namespace:`breakout`,category:`Layout tokens`,group:`Content grid (breakout pattern)`,description:`Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).`,note:`Width of full-bleed breakout elements inside a content grid.`,value:`var(--sf-container-wide)`,aliasOf:`--sf-container-wide`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-btn-padding-block`,tier:`PUBLIC`,role:`consumption`,namespace:`btn`,category:`Component tokens`,group:`BUTTON TOKENS`,description:`Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.`,note:``,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-btn-padding-inline`,tier:`PUBLIC`,role:`consumption`,namespace:`btn`,category:`Component tokens`,group:`BUTTON TOKENS`,description:`Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.`,note:``,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-btn-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`btn`,category:`Component tokens`,group:`BUTTON TOKENS`,description:`Padding and radius tokens that control button geometry. Override these to give buttons a distinct visual language from form fields.`,note:``,value:`var(--sf-radius-m)`,aliasOf:`--sf-radius-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-caret-color`,tier:`PUBLIC`,role:`consumption`,namespace:`caret`,category:`Core tokens`,group:`Focus / form colors`,description:`Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.`,note:`Cursor caret color inside text inputs and contenteditable elements.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-center-gutter`,tier:`PUBLIC`,role:`consumption`,namespace:`center`,category:`Layout tokens`,group:`Center`,description:`Max-width and gutter for the center layout primitive.`,note:`Minimum side gutter for the center layout.`,value:`var(--sf-gutter)`,aliasOf:`--sf-gutter`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-center-max`,tier:`PUBLIC`,role:`consumption`,namespace:`center`,category:`Layout tokens`,group:`Center`,description:`Max-width and gutter for the center layout primitive.`,note:`Maximum width for the center layout.`,value:`var(--sf-container-default)`,aliasOf:`--sf-container-default`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cluster-align`,tier:`PUBLIC`,role:`knob`,namespace:`cluster`,category:`Layout tokens`,group:`Cluster`,description:`Configuration tokens for the cluster layout (inline wrapped items).`,note:`Vertical alignment of cluster items (align-items value).`,value:`center`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cluster-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`cluster`,category:`Layout tokens`,group:`Cluster`,description:`Configuration tokens for the cluster layout (inline wrapped items).`,note:`Gap between wrapped inline items in the cluster layout.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cluster-justify`,tier:`PUBLIC`,role:`knob`,namespace:`cluster`,category:`Layout tokens`,group:`Cluster`,description:`Configuration tokens for the cluster layout (inline wrapped items).`,note:`Horizontal justification of the cluster (justify-content value).`,value:`flex-start`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-code-font-size`,tier:`PUBLIC`,role:`knob`,namespace:`code`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for inline  and 
. Usually slightly smaller than body text so monospace doesn't feel oversized.`,value:`0.875em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Primary interactive color. Applied to filled buttons, active indicators, and brand accent surfaces.`,value:`light-dark(var(--sf-color-action-source-light), var(--sf-color-action-source-dark, oklch(from var(--sf-color-action-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Action color at pressed/active brightness.`,value:`var(--sf-color-action-xdark)`,aliasOf:`--sf-color-action-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Action color at hover brightness.`,value:`var(--sf-color-action-darker)`,aliasOf:`--sf-color-action-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Very light action shade. Hover fills on white surfaces, badge backgrounds.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Light action shade. Subtle fills and outlined badge backgrounds.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Light-mid action shade. Borders on light backgrounds, low-emphasis fills.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Mid-light action shade. Disabled state fills, decorative accents.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Lightest action tint. Background fill for subtle action-tinted surfaces.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Mid action shade — the 'pure' hue. Accessible on both light and dark backgrounds.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Mid-dark action shade. Text on light surfaces, icon fills.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Dark action shade. Strong text and icon fills on light backgrounds.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Very dark action shade. High-contrast text on white.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-black action shade. Extreme contrast on white surfaces.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Darkest action tint. Near-black for dark-theme surface accents.`,value:`color-mix(in oklab, var(--sf-color-action) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`10% opacity action tint. Subtle hover or selected-row background.`,value:`oklch(from var(--sf-color-action) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`30% opacity action tint.`,value:`oklch(from var(--sf-color-action) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`5% opacity action tint. Barely-there hover highlight.`,value:`oklch(from var(--sf-color-action) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`50% opacity action tint. Mid-transparency badge or overlay.`,value:`oklch(from var(--sf-color-action) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`80% opacity action tint.`,value:`oklch(from var(--sf-color-action) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Deep action shade for high-contrast contexts.`,value:`var(--sf-color-action-600)`,aliasOf:`--sf-color-action-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-transparent action tint for ghost-button hover backgrounds.`,value:`var(--sf-color-action-a5)`,aliasOf:`--sf-color-action-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Light action shade for soft accents.`,value:`var(--sf-color-action-400)`,aliasOf:`--sf-color-action-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Medium action fill — outlined button hover backgrounds.`,value:`var(--sf-color-action-a30)`,aliasOf:`--sf-color-action-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`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%.`,value:`oklch(0.70 0.198 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.`,note:`OKLCH lightness source for the action color. Animate this to smoothly transition between light and dark brand themes.`,value:`oklch(0.50 0.22 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Lightest action tint — selected rows, active nav, chips.`,value:`var(--sf-color-action-a10)`,aliasOf:`--sf-color-action-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-black action shade for maximum contrast on light surfaces.`,value:`var(--sf-color-action-950)`,aliasOf:`--sf-color-action-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Near-white action shade for maximum contrast on dark surfaces.`,value:`var(--sf-color-action-50)`,aliasOf:`--sf-color-action-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Extra-dark action shade.`,value:`var(--sf-color-action-800)`,aliasOf:`--sf-color-action-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-action-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`action`,description:`Semantic action-color scale derived from --sf-color-action. Covers fills, hover/active states, and ghost variants for primary interactive elements.`,note:`Extra-light action shade.`,value:`var(--sf-color-action-200)`,aliasOf:`--sf-color-action-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Mode-adaptive base surface color. Drives the page canvas and the surface elevation family; not an interactive/brand role.`,value:`light-dark(var(--sf-color-base-source-light), var(--sf-color-base-source-dark, oklch(from var(--sf-color-base-source-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Pressed/active surface derived from --sf-color-base for subtle background interactions.`,value:`oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.08 + var(--sf-is-dark) * 0.16), 0.99) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Hover-state surface derived from --sf-color-base for subtle background interactions.`,value:`oklch(from var(--sf-color-base) clamp(0.01, calc(l - 0.04 + var(--sf-is-dark) * 0.08), 0.99) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Very light base-surface level.`,value:`oklch(from var(--sf-color-base) 0.94 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Light base-surface level.`,value:`oklch(from var(--sf-color-base) 0.88 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Light-mid base-surface level.`,value:`oklch(from var(--sf-color-base) 0.78 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Mid-light base-surface level.`,value:`oklch(from var(--sf-color-base) 0.65 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Lightest base-surface level.`,value:`oklch(from var(--sf-color-base) 0.97 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Mid base-surface level.`,value:`oklch(from var(--sf-color-base) 0.50 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Mid-dark base-surface level.`,value:`oklch(from var(--sf-color-base) 0.37 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Dark base-surface level.`,value:`oklch(from var(--sf-color-base) 0.27 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Very dark base-surface level.`,value:`oklch(from var(--sf-color-base) 0.17 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Near-black base-surface level.`,value:`oklch(from var(--sf-color-base) 0.11 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Darkest base-surface level.`,value:`oklch(from var(--sf-color-base) 0.06 c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`10% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`30% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`5% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`50% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`80% opacity base-surface tint.`,value:`oklch(from var(--sf-color-base) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Near-transparent base-surface tint for ghost backgrounds.`,value:`var(--sf-color-base-a5)`,aliasOf:`--sf-color-base-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Medium base-surface fill for muted containers or overlays.`,value:`var(--sf-color-base-a30)`,aliasOf:`--sf-color-base-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-base. Keep near-black for dark-mode surfaces and elevation offsets.`,value:`oklch(0.22 0.003 250)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`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.`,note:`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.`,value:`oklch(0.96 0.006 250)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-base-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`base`,description:`Semantic base-color scale derived from --sf-color-base. Covers fills, hover/active states, and ghost variants for secondary interactive elements.`,note:`Subtle base-surface tint for low-emphasis backgrounds.`,value:`var(--sf-color-base-a10)`,aliasOf:`--sf-color-base-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Base page / component background. The canvas all other surfaces layer on top of.`,value:`oklch(from var(--sf-color-base) calc(l + 0.02) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background tint for pressed/active interactive elements.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.12)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background for disabled interactive elements.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--focus`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background tint for focused interactive elements.`,value:`oklch(from var(--sf-color-action) l c h / 0.06)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background tint for hovered interactive elements (rows, list items, etc.).`,value:`oklch(from var(--sf-color-neutral) l c h / 0.08)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-bg--selected`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background for selected items (checked rows, active nav links).`,value:`oklch(from var(--sf-color-action) l c h / 0.1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-black`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Absolute black reference value.`,value:`oklch(0% 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Default border for dividers and component edges.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Border alpha tokens`,description:`Semi-transparent border variants for overlays and glass-morphism effects.`,note:`Semi-transparent border for disabled element edges.`,value:`oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--focus`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Focus indicator border, used alongside --sf-focus-ring-color.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Stronger border for visually prominent edges and active outlines.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Borders`,description:`Semantic border colors for dividers, component edges, and focus indicators.`,note:`Low-contrast border for subtle separation without strong visual weight.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-border--translucent`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Border alpha tokens`,description:`Semi-transparent border variants for overlays and glass-morphism effects.`,note:`Translucent border for glass-morphism and frosted surfaces.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.15)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-code-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Interactive states`,description:`Background fills for generic interactive states (hover, focus, active, selected, disabled). Apply to any element that needs state feedback.`,note:`Background for inline  elements. Usually a subtle tint of the inset surface.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-code-text`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Text color for inline code and monospace preformatted text.`,value:`oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Destructive / danger state color. Used for delete actions, error alerts, and critical warnings.`,value:`light-dark(var(--sf-color-danger-source-light), var(--sf-color-danger-source-dark, oklch(from var(--sf-color-danger-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium danger fill for icon backgrounds and badge fills.`,value:`oklch(from var(--sf-color-danger) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-danger.`,value:`oklch(0.71 0.198 12)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).`,note:`OKLCH lightness source for the danger status color (covers destructive actions and form validation errors).`,value:`oklch(0.48 0.22 12)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast danger color for alert body text and icons.`,value:`light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-danger-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light danger tint for error row backgrounds and alert container fills.`,value:`oklch(from var(--sf-color-danger) l c h / 0.1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-dim`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Backdrop overlay color for modals, drawers, and lightboxes.`,value:`oklch(0 0 0 / 0.5)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-heading`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Heading text color. Slightly stronger contrast than body text for visual hierarchy.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Informational color for neutral tips, hints, and non-urgent notices.`,value:`light-dark(var(--sf-color-info-source-light), var(--sf-color-info-source-dark, oklch(from var(--sf-color-info-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium info fill for info icons and hint chips.`,value:`oklch(from var(--sf-color-info) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-info.`,value:`oklch(0.71 0.162 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the info status color.`,note:`OKLCH lightness source for the info status color.`,value:`oklch(0.48 0.18 235)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast info color for hint body text.`,value:`light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-info-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light info tint for informational note backgrounds.`,value:`oklch(from var(--sf-color-info) l c h / 0.1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-inset`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Slightly inset surface for nested areas — inputs, code blocks, sidebar panels.`,value:`oklch(from var(--sf-color-base) calc(l - 0.02) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-inverse`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips.`,value:`oklch(from var(--sf-color-base) calc(1 - l) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Default hyperlink color.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Link color when actively pressed.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Disabled link color (low contrast, no interaction).`,value:`var(--sf-color-text--disabled)`,aliasOf:`--sf-color-text--disabled`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Link color on hover.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--underline`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Link alpha token`,description:`Semi-transparent underline color token used to tint the link underline independently from the link text color.`,note:`Color of the link underline decoration. Defaults to a semi-transparent variant of the link color.`,value:`oklch(from var(--sf-color-action) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-link--visited`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Visited link color.`,value:`light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-mark-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Selection & mark`,description:`Background and text colors for browser text selections and  highlights. Adapts automatically in dark mode.`,note:`Background color for highlighted  elements.`,value:`oklch(from var(--sf-color-warning) l c h / 0.25)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-mark-text`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Text color inside highlighted  elements.`,value:`inherit`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Neutral interactive color for low-emphasis actions and tertiary buttons.`,value:`light-dark(var(--sf-color-neutral-source-light), var(--sf-color-neutral-source-dark, oklch(from var(--sf-color-neutral-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Neutral color at pressed/active brightness.`,value:`var(--sf-color-neutral-xdark)`,aliasOf:`--sf-color-neutral-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Neutral color at hover brightness.`,value:`var(--sf-color-neutral-darker)`,aliasOf:`--sf-color-neutral-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Very light neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Light neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Light-mid neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Mid-light neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Lightest neutral tint.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Mid neutral shade — the 'pure' hue.`,value:`var(--sf-color-neutral)`,aliasOf:`--sf-color-neutral`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Mid-dark neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Dark neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Very dark neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-black neutral shade.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Darkest neutral tint.`,value:`color-mix(in oklab, var(--sf-color-neutral) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`10% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`30% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`5% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`50% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`80% opacity neutral tint.`,value:`oklch(from var(--sf-color-neutral) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Deep neutral shade for high-contrast contexts.`,value:`var(--sf-color-neutral-600)`,aliasOf:`--sf-color-neutral-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-transparent neutral tint for ghost-button hover backgrounds.`,value:`var(--sf-color-neutral-a5)`,aliasOf:`--sf-color-neutral-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Light neutral shade.`,value:`var(--sf-color-neutral-400)`,aliasOf:`--sf-color-neutral-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Muted neutral fill for low-emphasis contexts.`,value:`var(--sf-color-neutral-a30)`,aliasOf:`--sf-color-neutral-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-neutral.`,value:`oklch(0.69 0.0225 260)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the neutral color.`,note:`OKLCH lightness source for the neutral color.`,value:`oklch(0.52 0.025 260)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Lightest neutral semantic tint.`,value:`var(--sf-color-neutral-a10)`,aliasOf:`--sf-color-neutral-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-black neutral shade.`,value:`var(--sf-color-neutral-950)`,aliasOf:`--sf-color-neutral-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Near-white neutral shade.`,value:`var(--sf-color-neutral-50)`,aliasOf:`--sf-color-neutral-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Extra-dark neutral shade.`,value:`var(--sf-color-neutral-800)`,aliasOf:`--sf-color-neutral-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-neutral-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`neutral`,description:`Semantic neutral-color scale derived from --sf-color-neutral. Useful for muted UI chrome.`,note:`Extra-light neutral shade.`,value:`var(--sf-color-neutral-200)`,aliasOf:`--sf-color-neutral-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-overlay`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Overlay surface for floating panels, sheets, and modals.`,value:`oklch(from var(--sf-color-base) l c h / 0.9)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Primary brand palette color. Independent from --sf-color-action by default; override either source token to couple or separate brand and action roles.`,value:`light-dark(var(--sf-color-primary-source-light), var(--sf-color-primary-source-dark, oklch(from var(--sf-color-primary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Primary color at pressed/active brightness.`,value:`var(--sf-color-primary-xdark)`,aliasOf:`--sf-color-primary-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Primary color at hover brightness.`,value:`var(--sf-color-primary-darker)`,aliasOf:`--sf-color-primary-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Very light primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Light primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Light-mid primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Mid-light primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Lightest primary tint.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Mid primary shade — the 'pure' hue.`,value:`var(--sf-color-primary)`,aliasOf:`--sf-color-primary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Mid-dark primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Dark primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Very dark primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-black primary shade.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Darkest primary tint.`,value:`color-mix(in oklab, var(--sf-color-primary) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`10% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`30% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`5% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`50% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`80% opacity primary tint.`,value:`oklch(from var(--sf-color-primary) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Deep primary shade.`,value:`var(--sf-color-primary-600)`,aliasOf:`--sf-color-primary-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-transparent primary tint for ghost-button hover backgrounds.`,value:`var(--sf-color-primary-a5)`,aliasOf:`--sf-color-primary-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Light primary shade.`,value:`var(--sf-color-primary-400)`,aliasOf:`--sf-color-primary-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Muted primary fill.`,value:`var(--sf-color-primary-a30)`,aliasOf:`--sf-color-primary-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-primary.`,value:`oklch(0.715 0.243 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the primary color.`,note:`OKLCH lightness source for the primary color.`,value:`oklch(0.47 0.27 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Lightest primary semantic tint.`,value:`var(--sf-color-primary-a10)`,aliasOf:`--sf-color-primary-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-black primary shade.`,value:`var(--sf-color-primary-950)`,aliasOf:`--sf-color-primary-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Near-white primary shade.`,value:`var(--sf-color-primary-50)`,aliasOf:`--sf-color-primary-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Extra-dark primary shade.`,value:`var(--sf-color-primary-800)`,aliasOf:`--sf-color-primary-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-primary-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`primary`,description:`Semantic primary-color scale derived from --sf-color-primary. Covers fills, hover/active states, and ghost variants for the primary palette role.`,note:`Extra-light primary shade.`,value:`var(--sf-color-primary-200)`,aliasOf:`--sf-color-primary-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-raised`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Surfaces`,description:`Background surface tokens from page-level to raised cards. Layer these to communicate visual depth.`,note:`Elevated card surface that floats above the page background.`,value:`oklch(from var(--sf-color-base) calc(l + 0.04) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-scheme`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Color scheme`,description:`Preferred color-scheme hint sent to the browser (light / dark / normal).`,note:`Preferred color scheme hint (light / dark / normal). Sent to the browser to influence UA chrome styling.`,value:`light dark`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Raw secondary palette token for the secondary brand color.`,value:`light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Secondary color at pressed/active brightness.`,value:`var(--sf-color-secondary-xdark)`,aliasOf:`--sf-color-secondary-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Secondary color at hover brightness.`,value:`var(--sf-color-secondary-darker)`,aliasOf:`--sf-color-secondary-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Very light secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Light secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Light-mid secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Mid-light secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Lightest secondary tint.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Mid secondary shade — the 'pure' hue.`,value:`var(--sf-color-secondary)`,aliasOf:`--sf-color-secondary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Mid-dark secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Dark secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Very dark secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-black secondary shade.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Darkest secondary tint.`,value:`color-mix(in oklab, var(--sf-color-secondary) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`10% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`30% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`5% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`50% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`80% opacity secondary tint.`,value:`oklch(from var(--sf-color-secondary) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Deep secondary shade.`,value:`var(--sf-color-secondary-600)`,aliasOf:`--sf-color-secondary-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-transparent secondary tint for ghost-button hover backgrounds.`,value:`var(--sf-color-secondary-a5)`,aliasOf:`--sf-color-secondary-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Light secondary shade.`,value:`var(--sf-color-secondary-400)`,aliasOf:`--sf-color-secondary-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Muted secondary fill.`,value:`var(--sf-color-secondary-a30)`,aliasOf:`--sf-color-secondary-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-secondary.`,value:`oklch(0.84 0.036 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the secondary color.`,note:`OKLCH lightness source for the secondary color.`,value:`oklch(0.22 0.04 264)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Lightest secondary semantic tint.`,value:`var(--sf-color-secondary-a10)`,aliasOf:`--sf-color-secondary-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-black secondary shade.`,value:`var(--sf-color-secondary-950)`,aliasOf:`--sf-color-secondary-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Near-white secondary shade.`,value:`var(--sf-color-secondary-50)`,aliasOf:`--sf-color-secondary-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Extra-dark secondary shade.`,value:`var(--sf-color-secondary-800)`,aliasOf:`--sf-color-secondary-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-secondary-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`secondary`,description:`Semantic secondary-color scale derived from --sf-color-secondary.`,note:`Extra-light secondary shade.`,value:`var(--sf-color-secondary-200)`,aliasOf:`--sf-color-secondary-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-selection-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Selection`,description:`Text-selection background color.`,note:`Background color applied to browser text selections.`,value:`light-dark( oklch(from var(--sf-color-action-source-light) l c h / 0.28), oklch(from var(--sf-color-action-source-dark) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-selection-text`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Text color inside browser text selections.`,value:`inherit`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Positive / success color for confirmation messages and completed-state indicators.`,value:`light-dark(var(--sf-color-success-source-light), var(--sf-color-success-source-dark, oklch(from var(--sf-color-success-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium success fill for success icons and status chips.`,value:`oklch(from var(--sf-color-success) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-success.`,value:`oklch(0.70 0.144 145)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the success status color.`,note:`OKLCH lightness source for the success status color.`,value:`oklch(0.50 0.16 145)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast success color for confirmation message text.`,value:`light-dark( oklch(from var(--sf-color-success-source-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-success-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light success tint for confirmation backgrounds.`,value:`oklch(from var(--sf-color-success) l c h / 0.12)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-surface`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Resolved color tokens`,description:`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.`,note:`Default component surface color. Alias of --sf-color-base; use --sf-color-raised for an elevated card/background level.`,value:`var(--sf-color-base)`,aliasOf:`--sf-color-base`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Raw tertiary palette token for the third brand color.`,value:`light-dark(var(--sf-color-tertiary-source-light), var(--sf-color-tertiary-source-dark, oklch(from var(--sf-color-tertiary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary--active`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Tertiary color at pressed/active brightness.`,value:`var(--sf-color-tertiary-xdark)`,aliasOf:`--sf-color-tertiary-xdark`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary--hover`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Tertiary color at hover brightness.`,value:`var(--sf-color-tertiary-darker)`,aliasOf:`--sf-color-tertiary-darker`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-100`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Very light tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-100), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-200`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Light tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-200), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-300`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Light-mid tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-300), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-400`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Mid-light tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-400), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Lightest tertiary tint.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-50), var(--sf-color-surface))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-500`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Mid tertiary shade — the 'pure' hue.`,value:`var(--sf-color-tertiary)`,aliasOf:`--sf-color-tertiary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-600`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Mid-dark tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-600), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-700`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Dark tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-700), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-800`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Very dark tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-800), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-900`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-black tertiary shade.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-900), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-950`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Darkest tertiary tint.`,value:`color-mix(in oklab, var(--sf-color-tertiary) var(--sf-palette-mix-950), var(--sf-color-text))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a10`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`10% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.10)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a30`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`30% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.30)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a5`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`5% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.05)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a50`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`50% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.50)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-a80`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`80% opacity tertiary tint.`,value:`oklch(from var(--sf-color-tertiary) l c h / 0.80)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-darker`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Deep tertiary shade.`,value:`var(--sf-color-tertiary-600)`,aliasOf:`--sf-color-tertiary-600`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-ghost`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-transparent tertiary tint for ghost-button hover backgrounds.`,value:`var(--sf-color-tertiary-a5)`,aliasOf:`--sf-color-tertiary-a5`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-lighter`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Light tertiary shade.`,value:`var(--sf-color-tertiary-400)`,aliasOf:`--sf-color-tertiary-400`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Muted tertiary fill.`,value:`var(--sf-color-tertiary-a30)`,aliasOf:`--sf-color-tertiary-a30`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-tertiary.`,value:`oklch(0.74 0.198 295)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`BRAND COLORS (-source-light source tokens, animatable)`,description:`OKLCH lightness source for the tertiary color.`,note:`OKLCH lightness source for the tertiary color.`,value:`oklch(0.42 0.22 295)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Lightest tertiary semantic tint.`,value:`var(--sf-color-tertiary-a10)`,aliasOf:`--sf-color-tertiary-a10`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-superdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-black tertiary shade.`,value:`var(--sf-color-tertiary-950)`,aliasOf:`--sf-color-tertiary-950`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-superlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Near-white tertiary shade.`,value:`var(--sf-color-tertiary-50)`,aliasOf:`--sf-color-tertiary-50`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-xdark`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Extra-dark tertiary shade.`,value:`var(--sf-color-tertiary-800)`,aliasOf:`--sf-color-tertiary-800`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-tertiary-xlight`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`tertiary`,description:`Semantic tertiary-color scale derived from --sf-color-tertiary.`,note:`Extra-light tertiary shade.`,value:`var(--sf-color-tertiary-200)`,aliasOf:`--sf-color-tertiary-200`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Primary text color. Contrasts against --sf-color-bg for body copy.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--disabled`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Text color for disabled UI elements. Intentionally low contrast.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--inverse`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Text color for use on dark/inverted backgrounds.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Muted text for metadata, timestamps, and low-priority annotations.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.35, calc(l - var(--sf-contrast-bias)), 0.62) c h), oklch(from var(--sf-color-neutral) clamp(0.48, calc(l + var(--sf-contrast-bias)), 0.74) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-action`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground color for text on action-colored backgrounds.`,value:`oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-base`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on base-colored backgrounds.`,value:`var(--sf-color-text)`,aliasOf:`--sf-color-text`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-danger`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on danger-colored backgrounds.`,value:`oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-info`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on info-colored backgrounds.`,value:`oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-inverse`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on inverted (dark-on-light / light-on-dark) backgrounds.`,value:`oklch(from var(--sf-color-inverse) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-neutral`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on neutral-colored backgrounds.`,value:`oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-primary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on primary-colored backgrounds.`,value:`oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on secondary-colored backgrounds.`,value:`oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-success`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on success-colored backgrounds.`,value:`oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-tertiary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text placed on tertiary-colored backgrounds.`,value:`oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--on-warning`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text-on-color`,description:`Accessible foreground colors guaranteed to pass WCAG contrast on each colored background surface.`,note:`Accessible foreground for text on warning-colored backgrounds.`,value:`oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--placeholder`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`Placeholder text color for inputs and textareas.`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-text--secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Text`,description:`Semantic text colors for every content role. All tokens adapt to light and dark mode automatically.`,note:`De-emphasised secondary text (captions, labels, supporting copy).`,value:`light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Warning / caution color for non-critical alerts and degraded-state indicators.`,value:`light-dark(var(--sf-color-warning-source-light), var(--sf-color-warning-source-dark, oklch(from var(--sf-color-warning-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-muted`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Medium warning fill for icons and caution chips.`,value:`oklch(from var(--sf-color-warning) l c h / 0.3)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-source-dark`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`Registered  dark counterpart of --sf-color-warning.`,value:`oklch(0.65 0.153 80)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-source-light`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`STATUS COLORS (-source-light source tokens)`,description:`OKLCH lightness source for the warning status color.`,note:`OKLCH lightness source for the warning status color.`,value:`oklch(0.75 0.17 80)`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`High-contrast warning color for caution text.`,value:`light-dark( oklch(from var(--sf-color-warning-source-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-warning-subtle`,tier:`PUBLIC`,role:`consumption`,namespace:`color`,category:`Core tokens`,group:`Status triplets`,description:`Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.`,note:`Light warning tint for warning notification backgrounds.`,value:`oklch(from var(--sf-color-warning) l c h / 0.12)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-color-white`,tier:`PUBLIC`,role:`knob`,namespace:`color`,category:`Core tokens`,group:`Selection & backdrop`,description:`Absolute reference colors and overlay tints for selections, marks, and backdrops.`,note:`Absolute white reference value.`,value:`oklch(100% 0 0)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-component-pad`,tier:`PUBLIC`,role:`consumption`,namespace:`component`,category:`Core tokens`,group:`Output token @property registrations`,description:`Standard inner padding for interactive components (buttons, form inputs, chips).`,note:`Standard inner padding for interactive components (buttons, form inputs, chips).`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-default`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Default content container max-width (~1200px).`,value:`75rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-full`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Full-width container — removes the max-width constraint.`,value:`100%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-narrow`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Narrow content max-width — ideal for article body and blog posts (~65ch).`,value:`38rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-prose`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Prose max-width — optimised for readability (~75ch).`,value:`65ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-container-wide`,tier:`PUBLIC`,role:`knob`,namespace:`container`,category:`Core tokens`,group:`Containers`,description:`Max-width container tokens for page-level layout.`,note:`Wide container for marketing / dashboard layouts (~1440px).`,value:`90rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-content-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`content`,category:`Core tokens`,group:`Output token @property registrations`,description:`Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.`,note:`Tight gap within related content (stack, flow, prose). Override globally to retune all tight primitives at once.`,value:`var(--sf-space-s)`,aliasOf:`--sf-space-s`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-content-intrinsic-size`,tier:`PUBLIC`,role:`knob`,namespace:`content`,category:`Macro tokens`,group:`Content visibility`,description:`intrinsic-size hint for content-visibility: auto (lazy off-screen rendering).`,note:`Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal).`,value:`500px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-content-width`,tier:`PUBLIC`,role:`consumption`,namespace:`content`,category:`Layout tokens`,group:`Content grid (breakout pattern)`,description:`Breakout width and content width for the content-grid pattern (full-bleed breakouts inside a constrained column).`,note:`Max-width of the main content column in a content grid.`,value:`var(--sf-container-default)`,aliasOf:`--sf-container-default`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-contrast-bias`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`contrast`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral).`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-contrast-threshold`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`contrast`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.`,value:`0.6`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cover-min-height`,tier:`PUBLIC`,role:`knob`,namespace:`cover`,category:`Layout tokens`,group:`Cover`,description:`Min-height and padding for the full-viewport cover layout.`,note:`Minimum height of the cover layout (typically 100svh).`,value:`100dvh`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-cover-padding`,tier:`PUBLIC`,role:`consumption`,namespace:`cover`,category:`Layout tokens`,group:`Cover`,description:`Min-height and padding for the full-viewport cover layout.`,note:`Inner padding for the cover layout.`,value:`var(--sf-section-pad)`,aliasOf:`--sf-section-pad`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-current-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`current`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Inherits the current font-weight from context. Useful as a reset.`,value:`var(--sf-font-weight-bold)`,aliasOf:`--sf-font-weight-bold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-display-l-line-height`,tier:`PUBLIC`,role:`knob`,namespace:`display`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-display-m-line-height`,tier:`PUBLIC`,role:`knob`,namespace:`display`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Line height for medium display text (--sf-text-display-m).`,value:`1.05`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-display-s-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`display`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Line height for small display text (--sf-text-display-s).`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-color`,tier:`PUBLIC`,role:`consumption`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Color of horizontal/vertical divider rules.`,value:`var(--sf-color-border)`,aliasOf:`--sf-color-border`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Spacing (margin) around divider elements.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-style`,tier:`PUBLIC`,role:`knob`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Border style of dividers.`,value:`solid`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-divider-width`,tier:`PUBLIC`,role:`consumption`,namespace:`divider`,category:`Core tokens`,group:`Divider`,description:`Horizontal/vertical rule (divider) properties.`,note:`Stroke width of horizontal and vertical divider rules.`,value:`var(--sf-border-width-1)`,aliasOf:`--sf-border-width-1`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-drop-shadow-l`,tier:`PUBLIC`,role:`consumption`,namespace:`drop`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.`,note:`Large CSS filter: drop-shadow for prominent illustrated or cut-out elements.`,value:`drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-drop-shadow-m`,tier:`PUBLIC`,role:`consumption`,namespace:`drop`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium CSS filter: drop-shadow for elevated icons and card thumbnails.`,note:`Medium CSS filter: drop-shadow for elevated icons and card thumbnails.`,value:`drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-drop-shadow-s`,tier:`PUBLIC`,role:`consumption`,namespace:`drop`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.`,note:`Small CSS filter: drop-shadow. Use filter (not box-shadow) for elements with transparent areas — SVGs, PNGs, cutout images.`,value:`drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-fast`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Fast duration (~100ms). Hover transitions, tooltip appear.`,value:`calc(150ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-instant`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Near-instant duration (~50ms). Micro-interactions and cursor-follow effects.`,value:`calc(100ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-none`,tier:`PUBLIC`,role:`knob`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`0ms duration. Disables transitions (respects prefers-reduced-motion).`,value:`0ms`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-normal`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Normal duration (~200ms). Default for most transitions.`,value:`calc(250ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-slow`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Slow duration (~350ms). Emphasis transitions, drawers.`,value:`calc(400ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-duration-slower`,tier:`PUBLIC`,role:`consumption`,namespace:`duration`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Extra-slow duration (~600ms). Page-level enter/exit transitions.`,value:`calc(600ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-bounce`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Bounce easing. Playful overshooting effect.`,value:`linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-elastic`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Elastic easing. Spring-like overshooting effect.`,value:`linear(0, 0.3, 1.2, 0.9, 1.05, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-in`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Accelerating easing. Use for elements leaving the viewport.`,value:`cubic-bezier(0.5, 0, 0.75, 0.25)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-in-out`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Symmetric easing. Use for elements that move within the viewport.`,value:`cubic-bezier(0.4, 0, 0.2, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-linear`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Linear easing. Use for progress indicators and spinner rotations.`,value:`linear`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-out`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Decelerating easing. Use for elements entering the viewport.`,value:`cubic-bezier(0.25, 0, 0.15, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-overshoot`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Subtle overshoot easing. Softer spring effect.`,value:`linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ease-spring`,tier:`PUBLIC`,role:`knob`,namespace:`ease`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Spring easing. Natural physics-based motion.`,value:`linear(0, 0.5, 1.1, 0.95, 1.02, 1)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Gap between equal columns.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the default auto-fill equal-columns layout. Columns fill the row until this width is reached, then wrap to the next line.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-2`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 2-column equal preset.`,value:`28rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-3`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 3-column equal preset.`,value:`15rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-4`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 4-column equal preset.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-equal-min-col-6`,tier:`PUBLIC`,role:`knob`,namespace:`equal`,category:`Layout tokens`,group:`Equal columns (intrinsically responsive RAM)`,description:`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.`,note:`Minimum column width for the 6-column equal preset.`,value:`10rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-field-block`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Core tokens`,group:`Output token @property registrations`,description:`Vertical (block) padding inside form fields.`,note:`Vertical (block) padding inside form fields.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-field-padding-block`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Component tokens`,group:`FIELD TOKENS`,description:`Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.`,note:`Vertical (block) inner padding for form field inputs.`,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-field-padding-inline`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Component tokens`,group:`FIELD TOKENS`,description:`Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.`,note:`Horizontal (inline) inner padding for form field inputs.`,value:`var(--sf-space-s)`,aliasOf:`--sf-space-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-field-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`field`,category:`Component tokens`,group:`FIELD TOKENS`,description:`Padding and radius tokens that control form field geometry. Override these to give inputs a distinct visual language from buttons.`,note:`Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once.`,value:`var(--sf-radius-m)`,aliasOf:`--sf-radius-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!0,layer:`slashed.tokens`,bundles:[`full`,`optimal-components`]},{name:`--sf-field-required-marker`,tier:`PUBLIC`,role:`knob`,namespace:`field`,category:`Core tokens`,group:`Semantic gap tokens`,description:`CSS content value for required-field markers (e.g. " *"). Used by pseudo-elements in the .required utility pattern.`,note:`CSS content value for required-field markers (e.g. " *"). Used by pseudo-elements in the .required utility pattern.`,value:`" *"`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-flow-space`,tier:`PUBLIC`,role:`consumption`,namespace:`flow`,category:`Macro tokens`,group:`Flow`,description:`Vertical rhythm gap between flow children (margin-block-start on all but the first child).`,note:`Margin-block-start applied to all flow children except the first.`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-fluid-max-vw`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`fluid`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Maximum viewport width (in rem) at which the fluid scale clamps to its largest values. Default 90rem (~1440px). Part of the fluid scale engine.`,value:`90`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-fluid-min-vw`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`fluid`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`22.5`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-color`,tier:`PUBLIC`,role:`consumption`,namespace:`focus`,category:`Core tokens`,group:`Focus / form colors`,description:`Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.`,note:`Color of the keyboard focus ring. Ensure sufficient contrast against all background surfaces.`,value:`var(--sf-color-action)`,aliasOf:`--sf-color-action`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-offset`,tier:`PUBLIC`,role:`knob`,namespace:`focus`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Gap between the element edge and the focus ring.`,value:`2px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-shadow`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`focus`,category:`Core tokens`,group:`Focus / form colors`,description:`Focus ring and form caret colors. Centralised here so keyboard navigation is consistently styled.`,note:`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.`,value:`0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg, var(--sf-color-base-source-light, #fff)), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-style`,tier:`PUBLIC`,role:`knob`,namespace:`focus`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Border style of the focus ring (solid, dashed, dotted).`,value:`solid`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-focus-ring-width`,tier:`PUBLIC`,role:`knob`,namespace:`focus`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Stroke width of the focus ring outline.`,value:`2px`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-body`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Font family stack for body text. Override to set your primary typeface.`,value:`system-ui, -apple-system, sans-serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-display`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Font family for display/marketing text. Override for large headline typefaces.`,value:`var(--sf-font-heading)`,aliasOf:`--sf-font-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-features`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`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.`,value:`normal`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-geometric`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Geometric sans-serif slot — circular letterforms for brand alternates.`,value:`"Avenir", "Montserrat", "Corbel", "URW Gothic", source-sans-pro, sans-serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-heading`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Font family for headings. Defaults to display if not overridden separately.`,value:`var(--sf-font-body)`,aliasOf:`--sf-font-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-humanist`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Humanist sans-serif slot — warm, readable alternate typeface.`,value:`"Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-mono`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Monospace font family for code, pre, and kbd elements.`,value:`ui-monospace, monospace`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-numeric`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`font-variant-numeric shorthand (e.g. tabular-nums) for aligned numeric data.`,value:`tabular-nums`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-slab`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Slab-serif slot for editorial or display headings.`,value:`"Rockwell", "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-variation`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`Variable-font axis settings for body text (e.g. "wght" 450). Default 'normal'. Override on :root or a subtree to activate variable-font axes.`,value:`normal`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-body`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for body text (typically 400 / normal).`,value:`var(--sf-font-weight-normal)`,aliasOf:`--sf-font-weight-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-bold`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Strong emphasis weight (700).`,value:`700`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-display`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for display-size text.`,value:`var(--sf-font-weight-bold)`,aliasOf:`--sf-font-weight-bold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-heading`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for headings (typically 600–700).`,value:`var(--sf-font-weight-semibold)`,aliasOf:`--sf-font-weight-semibold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-interactive`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for interactive role text — buttons, badges, and navigation labels. Defaults to semibold.`,value:`var(--sf-font-weight-semibold)`,aliasOf:`--sf-font-weight-semibold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-light`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Light weight (300). Use sparingly — check contrast at small sizes.`,value:`300`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-medium`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Medium weight (500). Subtle emphasis without full bold.`,value:`500`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-normal`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Normal / regular weight (400).`,value:`400`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-semibold`,tier:`PUBLIC`,role:`knob`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Semibold weight (600). Common for labels and subheadings.`,value:`600`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-font-weight-strong`,tier:`PUBLIC`,role:`consumption`,namespace:`font`,category:`Core tokens`,group:`Font weights`,description:`Numeric font-weight scale plus named aliases for common roles.`,note:`Font weight for strong/emphasis inline role. Defaults to bold.`,value:`var(--sf-font-weight-bold)`,aliasOf:`--sf-font-weight-bold`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-frame-ratio`,tier:`PUBLIC`,role:`knob`,namespace:`frame`,category:`Layout tokens`,group:`Frame`,description:`Aspect ratio for the frame layout primitive (media container).`,note:`Aspect ratio for the frame (media container) layout.`,value:`16 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`gap`,category:`Core tokens`,group:`Output token @property registrations`,description:`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.`,note:`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.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-brand`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Multi-stop brand gradient spanning primary and secondary palette colors. Use for hero backgrounds and brand accents.`,value:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--b`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-bottom gradient (transparent → surface). Use to fade content into a background below (infinite scroll fade, content cutoff).`,value:`linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--l`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-left gradient. Use to indicate left-side scrollable overflow.`,value:`linear-gradient(in oklch to left, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--r`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-right gradient. Use to indicate right-side scrollable overflow.`,value:`linear-gradient(in oklch to right, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-fade--t`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Fade-to-top gradient (transparent → surface). Use to fade content into a background above.`,value:`linear-gradient(in oklch to top, transparent, var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-primary`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Gradient using primary palette colors (light to saturated).`,value:`linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-secondary`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Gradient using secondary palette colors.`,value:`linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-surface`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Subtle surface-color gradient for depth layering and glass effects.`,value:`linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gradient-tertiary`,tier:`PUBLIC`,role:`consumption`,namespace:`gradient`,category:`Core tokens`,group:`Gradients`,description:`Pre-built gradient shorthands for brand fills and directional fade effects.`,note:`Gradient using tertiary palette colors.`,value:`linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Gap between auto-fill grid cells.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Minimum column width for the auto-fill grid.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-2xl`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Minimum column width at the 2× breakpoint.`,value:`28rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-l`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Large minimum column width for the auto-fill grid.`,value:`20rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-m`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Medium minimum column width for the auto-fill grid.`,value:`16rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-s`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Small minimum column width for the auto-fill grid.`,value:`13rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-xl`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Extra-large minimum column width for the auto-fill grid. Use for wide content cards.`,value:`24rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-grid-min-xs`,tier:`PUBLIC`,role:`knob`,namespace:`grid`,category:`Layout tokens`,group:`Grid (auto-fill, breakpoint-free)`,description:`Configuration tokens for the responsive auto-fill grid. Set --sf-grid-min to control the minimum column width.`,note:`Extra-small minimum column width for the auto-fill grid. Use for very compact tile layouts (icon grids).`,value:`10rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-gutter`,tier:`PUBLIC`,role:`consumption`,namespace:`gutter`,category:`Core tokens`,group:`Output token @property registrations`,description:`Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.`,note:`Wide page/section-edge gutter (used by center/container). Override to set the page-edge breathing room across breakpoints.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
. Typically slightly negative at large sizes.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
. Tighter than body to avoid excessive whitespace at large sizes.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h1`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`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.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h1-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h1`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-4xl)`,aliasOf:`--sf-text-4xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-tight)`,aliasOf:`--sf-leading-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h2`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h2-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h2`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-3xl)`,aliasOf:`--sf-text-3xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h3`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h3-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h3`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-2xl)`,aliasOf:`--sf-text-2xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-snug)`,aliasOf:`--sf-leading-snug`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h4`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h4-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h4`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-xl)`,aliasOf:`--sf-text-xl`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h5`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h5-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h5`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-l)`,aliasOf:`--sf-text-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font weight for 
.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Letter-spacing for 
.`,value:`var(--sf-tracking-wide)`,aliasOf:`--sf-tracking-wide`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Line height for 
.`,value:`var(--sf-leading-normal)`,aliasOf:`--sf-leading-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`h6`,category:`Core tokens`,group:`Heading line-length constraints`,description:`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.`,note:`Max-inline-size cap for 
. Default none.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-h6-size`,tier:`PUBLIC`,role:`consumption`,namespace:`h6`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font size for 
.`,value:`var(--sf-text-m)`,aliasOf:`--sf-text-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-header-height`,tier:`PUBLIC`,role:`consumption`,namespace:`header`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Total height of the sticky page header. Used by --sf-sticky-offset to prevent content from hiding under it.`,value:`clamp( var(--sf-header-height-mobile), calc((var(--sf-header-height-desktop) - var(--sf-header-height-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-header-height-desktop`,tier:`PUBLIC`,role:`knob`,namespace:`header`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Header height at desktop breakpoints.`,value:`5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-header-height-mobile`,tier:`PUBLIC`,role:`knob`,namespace:`header`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Header height at mobile breakpoints.`,value:`3.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-heading-color`,tier:`PUBLIC`,role:`consumption`,namespace:`heading`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Text color for all headings (h1–h6). Alias of --sf-color-heading.`,value:`var(--sf-color-heading)`,aliasOf:`--sf-color-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-heading-font-family`,tier:`PUBLIC`,role:`consumption`,namespace:`heading`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`Font family for all headings. Alias of --sf-font-heading.`,value:`var(--sf-font-heading)`,aliasOf:`--sf-font-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-heading-text-wrap`,tier:`PUBLIC`,role:`knob`,namespace:`heading`,category:`Core tokens`,group:`TYPOGRAPHY ALIASES`,description:`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.`,note:`text-wrap for headings. 'balance' prevents orphaned short last lines in multi-line headings.`,value:`balance`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-2xl`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`2× large icon size (~40px+). Hero or onboarding icons.`,value:`4em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-bg`,tier:`PUBLIC`,role:`consumption`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Background color for boxed icon containers.`,value:`var(--sf-color-inset)`,aliasOf:`--sf-color-inset`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-border`,tier:`PUBLIC`,role:`consumption`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Border for boxed icon containers.`,value:`var(--sf-border-width-1) solid var(--sf-color-border)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-pad`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Padding inside boxed icon containers.`,value:`0.5em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-box-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`icon`,category:`Layout tokens`,group:`Icon (boxed variant)`,description:`Background, border, and padding for boxed icon containers.`,note:`Border radius for boxed icon containers.`,value:`var(--sf-radius-s)`,aliasOf:`--sf-radius-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-l`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Large icon size (~24px). Standalone icon buttons.`,value:`2em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-m`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Medium icon size (~20px). Default for inline and button icons.`,value:`1.5em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-s`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Small icon size (~16px). Dense UI chrome.`,value:`1em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-xl`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Extra-large icon size (~32px). Feature icons.`,value:`3em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-icon-xs`,tier:`PUBLIC`,role:`knob`,namespace:`icon`,category:`Core tokens`,group:`Icon sizes`,description:`Standard icon sizes tied to the type scale.`,note:`Extra-small icon size (~12px). Inline indicators.`,value:`0.875em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-imposter-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`imposter`,category:`Layout tokens`,group:`Imposter (centered absolute/fixed overlay)`,description:`Margin for the imposter layout (centered fixed/absolute overlay).`,note:`Margin between the imposter overlay and the viewport edges.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-active`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the active state. Set to 1 (via JS or .is-active) to drive branching calc() expressions. 0 = default (inactive).`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-current`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the current/selected state. Set to 1 (via .is-current) to drive branching calc() expressions. 0 = default.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-dark`,tier:`INTERNAL`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`DARK SOURCE TOKENS (-dark, animatable)`,description:`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.`,note:`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().`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-open`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the open/expanded state. Set to 1 (via .is-open) to drive branching calc() expressions. 0 = default (closed).`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-is-pressed`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`is`,category:`Core tokens`,group:`INTERACTION STATE FLAGS`,description:`Integer flags toggled by JS or CSS :has() to drive numeric branching in calc() expressions. Set to 1 to activate the state; 0 is the default off state.`,note:`Integer state flag for the pressed state. Set to 1 (via .is-pressed) to drive branching calc() expressions. 0 = default.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-normal`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Normal line height (~1.5). Default for body text.`,value:`1.5`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-relaxed`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Relaxed line height (~1.65). Long-form reading text.`,value:`1.625`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-snug`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Snug line height (~1.35). Use for sub-headings.`,value:`1.3`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-taper`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`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.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-leading-tight`,tier:`PUBLIC`,role:`knob`,namespace:`leading`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Tight line height (~1.2). Use for large display headings.`,value:`1.1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-line-clamp`,tier:`PUBLIC`,role:`knob`,namespace:`line`,category:`Macro tokens`,group:`Line clamp`,description:`Number of lines before text truncates with an ellipsis.`,note:`Number of visible lines before text is clipped with an ellipsis.`,value:`3`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-link-external-marker`,tier:`PUBLIC`,role:`knob`,namespace:`link`,category:`Core tokens`,group:`Semantic gap tokens`,description:`CSS content value appended to external links (e.g. " ↗"). Used by the .external-link pseudo-element pattern.`,note:`CSS content value appended to external links (e.g. " ↗"). Used by the .external-link pseudo-element pattern.`,value:`" \\2197"`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-link-underline-offset`,tier:`PUBLIC`,role:`knob`,namespace:`link`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Vertical offset of the link underline from the text baseline.`,value:`0.15em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-link-underline-thickness`,tier:`PUBLIC`,role:`knob`,namespace:`link`,category:`Core tokens`,group:`Links`,description:`Colors and text-decoration properties for hyperlinks in every interactive state.`,note:`Stroke width of the link underline.`,value:`auto`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-lumlocker`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`lumlocker`,category:`Core tokens`,group:`LumLocker`,description:`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.`,note:`OKLCH lightness lock value. When :root has [data-lumlocker], brand colors (primary, secondary, action, base) are remapped to this L so their contrast remains constant as hues shift.`,value:`0.65`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-mask-scrim-end`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`mask`,category:`Core tokens`,group:`Mask scrim`,description:`Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.`,note:`End stop for edge-fade mask gradients. Mirrors --sf-mask-scrim-start for the trailing edge of a scroll container.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-mask-scrim-start`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`mask`,category:`Core tokens`,group:`Mask scrim`,description:`Edge-fade stop positions for the scroll-shadow mask effect on overflowing containers. Expressed as percentages or lengths; consumed by mask-image gradients.`,note:`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.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-motion-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`motion`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`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.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-object-fit`,tier:`PUBLIC`,role:`knob`,namespace:`object`,category:`Core tokens`,group:`Object fit / position`,description:`Defaults for object-fit and object-position on replaced elements (img, video).`,note:`Default object-fit value for replaced elements (img, video).`,value:`cover`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-object-position`,tier:`PUBLIC`,role:`knob`,namespace:`object`,category:`Core tokens`,group:`Object fit / position`,description:`Defaults for object-fit and object-position on replaced elements (img, video).`,note:`Default object-position for replaced elements.`,value:`50% 50%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-opacity-disabled`,tier:`PUBLIC`,role:`knob`,namespace:`opacity`,category:`Core tokens`,group:`Opacity`,description:`Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.`,note:`Opacity for disabled UI elements (typically 0.4–0.5).`,value:`0.45`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-opacity-muted`,tier:`PUBLIC`,role:`knob`,namespace:`opacity`,category:`Core tokens`,group:`Blur & opacity`,description:`Backdrop-filter blur scale and background-opacity tokens.`,note:`General de-emphasis opacity for secondary content, ghost elements, or non-primary layers. Default 0.5.`,value:`0.5`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-optical-sizing`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`optical`,category:`Core tokens`,group:`Font families`,description:`Font family stacks for every typographic role. Override these to swap typefaces without touching individual text styles.`,note:`CSS font-optical-sizing value. 'auto' lets the browser optimize letterforms for the rendered size. Set 'none' to disable optical sizing.`,value:`auto`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-100`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.`,note:`Color-mix percentage for palette step 100. Controls blend depth toward the surface. Default 8%.`,value:`8%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-200`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.`,note:`Color-mix percentage for palette step 200. Controls blend depth toward the surface. Default 20%.`,value:`20%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-300`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.`,note:`Color-mix percentage for palette step 300. Controls blend depth toward the surface. Default 40%.`,value:`40%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-400`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.`,note:`Color-mix percentage for palette step 400 (near-mid tint). Controls blend depth. Default 65%.`,value:`65%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-50`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.`,note:`Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.`,value:`4%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-600`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.`,note:`Color-mix percentage for palette step 600 (near-mid shade). Controls blend depth toward the text color. Default 82%.`,value:`82%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-700`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.`,note:`Color-mix percentage for palette step 700. Controls blend depth toward the text color. Default 62%.`,value:`62%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-800`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.`,note:`Color-mix percentage for palette step 800 (dark shade). Controls blend depth toward text. Default 38%.`,value:`38%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-900`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.`,note:`Color-mix percentage for palette step 900 (very dark shade). Controls blend depth toward text. Default 18%.`,value:`18%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-palette-mix-950`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`palette`,category:`Core tokens`,group:`Palette shade mix percentages`,description:`Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.`,note:`Color-mix percentage for the darkest palette step (950). Controls how far step 950 blends toward the text color. Default 8%.`,value:`8%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-print-base-size`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`print`,category:`Core tokens`,group:`Print`,description:`Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.`,note:`Base font size for @media print stylesheets. Default 11pt. Override on :root to adjust printed body text size.`,value:`11pt`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-print-page-margin`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`print`,category:`Core tokens`,group:`Print`,description:`Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.`,note:`Page margin for printed output. Default 2cm. Maps to @page margin.`,value:`2cm`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-print-page-size`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`print`,category:`Core tokens`,group:`Print`,description:`Page-layout tokens for printed output: paper size, margins, and base font size. These correspond to the @page values in core/print.css.`,note:`Target paper size for printing. Default 'a4'. Maps to @page size. Common values: a4, letter, legal.`,value:`a4`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-block-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin between prose elements (h2, p, ul, etc.).`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-blockquote-border`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Left border style for blockquotes inside prose.`,value:`var(--sf-border-width-2) solid var(--sf-color-border--subtle)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-blockquote-padding`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Inner padding for blockquotes inside prose.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-figcaption-size`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Font size for figure captions inside .prose. Typically smaller than body text.`,value:`var(--sf-text-s)`,aliasOf:`--sf-text-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-figure-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin around 
 elements inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-heading-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Space between a heading and the content that follows it inside .prose.`,value:`var(--sf-space-s)`,aliasOf:`--sf-space-s`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-hr-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin around 
 rules inside .prose.`,value:`var(--sf-space-l)`,aliasOf:`--sf-space-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-list-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Gap between list items inside .prose.`,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-marker-color`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Color of list bullets and ordered-list numbers inside .prose.`,value:`var(--sf-color-primary)`,aliasOf:`--sf-color-primary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-media-margin`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Block margin around images, video, and figures inside .prose.`,value:`var(--sf-space-m)`,aliasOf:`--sf-space-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-media-radius`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Border radius applied to images and media inside .prose.`,value:`var(--sf-radius-m)`,aliasOf:`--sf-radius-m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-nested-list-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Gap between items in nested lists inside .prose.`,value:`var(--sf-space-2xs)`,aliasOf:`--sf-space-2xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-paragraph`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Layout tokens`,group:`Prose`,description:`Max-width for the prose layout primitive (long-form reading column).`,note:`Max width of prose paragraphs (layout token for the prose layout).`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-prose-table-pad`,tier:`PUBLIC`,role:`consumption`,namespace:`prose`,category:`Macro tokens`,group:`Prose`,description:`Fine-grained typography controls for the .prose macro (margins, blockquote style, link decoration, etc.).`,note:`Cell padding for tables inside .prose.`,value:`var(--sf-space-xs)`,aliasOf:`--sf-space-xs`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`2× large radius (~20px). Rounded card variants.`,note:`2× large radius (~20px). Rounded card variants.`,value:`calc(24px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-2xs`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.`,note:`Extra-extra-small radius (~1px). Minimal rounding for very tight UI elements.`,value:`calc(1px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-3xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`3× large radius (~24px). Large rounded surfaces.`,note:`3× large radius (~24px). Large rounded surfaces.`,value:`calc(32px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-4xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`4× large radius (~32px). Near-pill rounding.`,note:`4× large radius (~32px). Near-pill rounding.`,value:`calc(48px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-full`,tier:`PUBLIC`,role:`knob`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Full rounding (50%). For circular elements like avatars.`,note:`Full rounding (50%). For circular elements like avatars.`,value:`9999px`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-l`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large radius (~12px). Modals, popovers, panels.`,note:`Large radius (~12px). Modals, popovers, panels.`,value:`calc(12px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-m`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium radius (~6–8px). Default — inputs, standard buttons, cards.`,note:`Medium radius (~6–8px). Default — inputs, standard buttons, cards.`,value:`calc(8px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-none`,tier:`PUBLIC`,role:`knob`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Zero border radius — square corners.`,note:`Zero border radius — square corners.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-outer`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`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.`,note:`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.`,value:`calc(var(--sf-radius-m) + var(--sf-component-pad))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-pill`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Pill rounding (9999px). Tags, toggle pills, status badges.`,note:`Pill rounding (9999px). Tags, toggle pills, status badges.`,value:`var(--sf-radius-full)`,aliasOf:`--sf-radius-full`,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-s`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small radius (~4px). Badges, chips, small buttons.`,note:`Small radius (~4px). Badges, chips, small buttons.`,value:`calc(4px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`radius`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-large radius (~16px). Prominent cards and feature blocks.`,note:`Extra-large radius (~16px). Prominent cards and feature blocks.`,value:`calc(16px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-radius-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`radius`,category:`Core tokens`,group:`Output token @property registrations`,description:`Hairline radius (~2px). Subtle rounding for tight components.`,note:`Hairline radius (~2px). Subtle rounding for tight components.`,value:`calc(2px * var(--sf-radius-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-3-2`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`3:2 aspect ratio. Common for landscape photography.`,value:`3 / 2`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-4-3`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`4:3 aspect ratio. Classic screen ratio.`,value:`4 / 3`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-cinema`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`2.39:1 cinematic widescreen aspect ratio.`,value:`21 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-golden`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`1.618:1 golden ratio. Harmonious proportions.`,value:`1.618 / 1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-portrait`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`2:3 portrait aspect ratio.`,value:`3 / 4`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-square`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`1:1 square aspect ratio. Use for avatars, icon containers, and square thumbnails.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-ratio-video`,tier:`PUBLIC`,role:`knob`,namespace:`ratio`,category:`Core tokens`,group:`Aspect ratios`,description:`Named aspect-ratio values for images, video embeds, and card thumbnails.`,note:`16:9 widescreen video aspect ratio. Use for video embeds and video-thumbnail containers.`,value:`16 / 9`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-reel-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`reel`,category:`Layout tokens`,group:`Reel`,description:`Configuration tokens for the reel layout (horizontal scroll container).`,note:`Gap between items in the horizontal reel.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-reel-height`,tier:`PUBLIC`,role:`knob`,namespace:`reel`,category:`Layout tokens`,group:`Reel`,description:`Configuration tokens for the reel layout (horizontal scroll container).`,note:`Fixed height of the reel container.`,value:`auto`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-reel-item-width`,tier:`PUBLIC`,role:`knob`,namespace:`reel`,category:`Layout tokens`,group:`Reel`,description:`Configuration tokens for the reel layout (horizontal scroll container).`,note:`Width of each item in the reel.`,value:`max-content`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-bottom`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Device safe-area inset at the bottom edge (home indicator, gesture bar). Resolves to env(safe-area-inset-bottom, 0px). Use for fixed footers.`,value:`env(safe-area-inset-bottom, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-left`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Device safe-area inset at the left edge. Resolves to env(safe-area-inset-left, 0px).`,value:`env(safe-area-inset-left, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-right`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Device safe-area inset at the right edge (rounded corners, home indicator). Resolves to env(safe-area-inset-right, 0px).`,value:`env(safe-area-inset-right, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-safe-top`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`safe`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`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.`,value:`env(safe-area-inset-top, 0px)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-color`,tier:`PUBLIC`,role:`knob`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Base color of the gradient scrim overlay.`,value:`oklch(0 0 0 / 0.55)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-direction`,tier:`PUBLIC`,role:`knob`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Direction of the scrim gradient (to bottom, to top, etc.).`,value:`to top`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-gradient`,tier:`PUBLIC`,role:`consumption`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Full gradient shorthand for the scrim. Override to customise the fade.`,value:`linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrim-text-shadow`,tier:`PUBLIC`,role:`knob`,namespace:`scrim`,category:`Macro tokens`,group:`Scrim`,description:`Gradient scrim configuration (direction, size, color) for overlaying images with readable text.`,note:`Text-shadow layered over the scrim gradient to ensure legibility for text placed directly on image backgrounds.`,value:`0 1px 3px oklch(0 0 0 / 0.6)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scroll-shadow-size`,tier:`PUBLIC`,role:`knob`,namespace:`scroll`,category:`Macro tokens`,group:`Scroll shadow / overflow fade`,description:`Size of the scroll-shadow fade effect on overflowing containers.`,note:`Size of the scroll-shadow fade effect on overflowing containers.`,value:`2rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scroll-timeline-range-end`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`scroll`,category:`Core tokens`,group:`Scroll-driven animation range`,description:`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.`,note:`animation-range end value for scroll-driven entrance effects. Default 'cover 30%'. Override on an element to control when its entrance animation finishes.`,value:`cover 30%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scroll-timeline-range-start`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`scroll`,category:`Core tokens`,group:`Scroll-driven animation range`,description:`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.`,note:`animation-range start value for scroll-driven entrance effects. Default 'entry 0%'. Override on an element to control when its entrance animation begins.`,value:`entry 0%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrollbar-thumb`,tier:`PUBLIC`,role:`consumption`,namespace:`scrollbar`,category:`Core tokens`,group:`Scrollbar`,description:`Custom scrollbar thumb and track colors.`,note:`Color of the custom scrollbar thumb.`,value:`var(--sf-color-neutral)`,aliasOf:`--sf-color-neutral`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-scrollbar-track`,tier:`PUBLIC`,role:`knob`,namespace:`scrollbar`,category:`Core tokens`,group:`Scrollbar`,description:`Custom scrollbar thumb and track colors.`,note:`Color of the custom scrollbar track.`,value:`transparent`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Section padding`,description:`Vertical padding for full-width page sections at each responsive tier.`,note:`Default vertical padding for full-width page sections.`,value:`var(--sf-section-pad--m)`,aliasOf:`--sf-section-pad--m`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`2× large section vertical padding for hero areas.`,note:`2× large section vertical padding for hero areas.`,value:`calc(var(--sf-space-4xl) * 2 * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--l`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large section vertical padding.`,note:`Large section vertical padding.`,value:`calc(var(--sf-space-4xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--m`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium section vertical padding.`,note:`Medium section vertical padding.`,value:`calc(var(--sf-space-3xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--s`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small section vertical padding.`,note:`Small section vertical padding.`,value:`calc(var(--sf-space-2xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--xl`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-large vertical section padding for hero and feature sections.`,note:`Extra-large vertical section padding for hero and feature sections.`,value:`calc(var(--sf-space-4xl) * 1.5 * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-pad--xs`,tier:`PUBLIC`,role:`consumption`,namespace:`section`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-small vertical section padding for compact in-page modules.`,note:`Extra-small vertical section padding for compact in-page modules.`,value:`calc(var(--sf-space-xl) * var(--sf-section-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-section-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`section`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global multiplier applied to every --sf-section-pad--* size — one dial re-rhythms all section padding (default 1).`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Largest shadow for hero cards, feature highlights, and marketing surfaces.`,note:`Largest shadow for hero cards, feature highlights, and marketing surfaces.`,value:`0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-color`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Shadow ramp (box-shadow, text-shadow, drop-shadow)`,description:`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.`,note:`Near-black shadow tint derived from the neutral palette. Inherits the neutral's chroma and hue so colorless neutrals produce colorless shadows.`,value:`oklch(from var(--sf-color-neutral) var(--sf-shadow-lightness) c h)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-glow`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Glow box-shadow shorthand for decorative glow effects.`,note:`Glow box-shadow shorthand for decorative glow effects.`,value:`0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-glow-color`,tier:`PUBLIC-ADVANCED`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Shadow glow color`,description:`Tint color used by --sf-shadow-glow. Override to retint glows; opacity and dark-mode adaptation are handled automatically.`,note:`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.`,value:`var(--sf-color-primary)`,aliasOf:`--sf-color-primary`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-inner`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Inset shadow for pressed states, inset inputs, and recessed surfaces.`,note:`Inset shadow for pressed states, inset inputs, and recessed surfaces.`,value:`inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-l`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large shadow for drawers, sidebars, and prominent elevated surfaces.`,note:`Large shadow for drawers, sidebars, and prominent elevated surfaces.`,value:`0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-lightness`,tier:`PUBLIC`,role:`knob`,namespace:`shadow`,category:`Core tokens`,group:`Shadow strength`,description:`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.`,note:`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.`,value:`0.15`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-m`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium shadow for cards and content panels.`,note:`Medium shadow for cards and content panels.`,value:`0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-none`,tier:`PUBLIC`,role:`knob`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`No box-shadow (resets inherited shadows). Use to explicitly remove elevation.`,note:`No box-shadow (resets inherited shadows). Use to explicitly remove elevation.`,value:`none`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-s`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small shadow for chips, tags, and inline elevated surfaces.`,note:`Small shadow for chips, tags, and inline elevated surfaces.`,value:`0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-strength`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`shadow`,category:`Core tokens`,group:`Shadow strength`,description:`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.`,note:`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).`,value:`calc(0.08 + var(--sf-is-dark) * 0.17)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-large shadow for modals, dialogs, and high-elevation sheets.`,note:`Extra-large shadow for modals, dialogs, and high-elevation sheets.`,value:`0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-shadow-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`shadow`,category:`Core tokens`,group:`Output token @property registrations`,description:`Extra-small shadow for barely-elevated elements (focused inputs, small chips).`,note:`Extra-small shadow for barely-elevated elements (focused inputs, small chips).`,value:`0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sidebar-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`sidebar`,category:`Layout tokens`,group:`Sidebar`,description:`Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).`,note:`Gap between sidebar and main content column.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sidebar-min-width`,tier:`PUBLIC`,role:`knob`,namespace:`sidebar`,category:`Layout tokens`,group:`Sidebar`,description:`Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).`,note:`Minimum sidebar width before the layout collapses to stacking.`,value:`50%`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sidebar-width`,tier:`PUBLIC`,role:`knob`,namespace:`sidebar`,category:`Layout tokens`,group:`Sidebar`,description:`Configuration tokens for the sidebar layout pattern (main content + fixed-width aside).`,note:`Preferred width of the sidebar column.`,value:`18rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-l`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Large UI component height (~44px). Touch-friendly interactive elements.`,value:`2.75rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-m`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Medium UI component height (~36px). Default size for buttons and inputs.`,value:`2.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-s`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Small UI component height (~28px). Compact buttons and input variants.`,value:`2rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-xl`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Extra-large interactive component height (~52px). For oversized or prominently touch-friendly controls.`,value:`3.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-size-xs`,tier:`PUBLIC`,role:`knob`,namespace:`size`,category:`Core tokens`,group:`UI sizes`,description:`Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.`,note:`Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.`,value:`1.5rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`48px-equivalent spacing. Large section spacing.`,note:`48px-equivalent spacing. Large section spacing.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-2xs`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`4px-equivalent spacing. Tight inline gaps, icon-to-text padding.`,note:`4px-equivalent spacing. Tight inline gaps, icon-to-text padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-3xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`64px-equivalent spacing. Extra-large layout gaps.`,note:`64px-equivalent spacing. Extra-large layout gaps.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-4xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`96px-equivalent spacing. Hero / page-level section padding.`,note:`96px-equivalent spacing. Hero / page-level section padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-base-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Maximum base spacing unit (rem) at the widest viewport. Drives the top of the fluid spacing ramp. Part of the fluid scale engine.`,value:`2`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-base-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Minimum base spacing unit (rem) at the narrowest viewport. Drives the bottom of the fluid spacing ramp. Part of the fluid scale engine.`,value:`1`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-l`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`24px-equivalent spacing. Card padding, section dividers.`,note:`24px-equivalent spacing. Card padding, section dividers.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 1) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-m`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`16px-equivalent spacing. Default unit, widely applicable.`,note:`16px-equivalent spacing. Default unit, widely applicable.`,value:`calc(clamp(calc(var(--sf-space-base-min) * 1rem), calc((var(--sf-space-base-max) - var(--sf-space-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * 1rem), calc(var(--sf-space-base-max) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-none`,tier:`PUBLIC`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`Zero spacing. Explicit alias for clarity in utility classes.`,note:`Zero spacing. Explicit alias for clarity in utility classes.`,value:`0`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-px`,tier:`PUBLIC`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`1px spacing. Hairline offset for fine adjustments.`,note:`1px spacing. Hairline offset for fine adjustments.`,value:`1px`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-ratio-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.333`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-ratio-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.25`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-s`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`12px-equivalent spacing. Form field inner padding, narrow gaps.`,note:`12px-equivalent spacing. Form field inner padding, narrow gaps.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -1) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -1) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`space`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`32px-equivalent spacing. Feature row gaps, generous section padding.`,note:`32px-equivalent spacing. Feature row gaps, generous section padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 2) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-space-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`space`,category:`Core tokens`,group:`Output token @property registrations`,description:`8px-equivalent spacing. Compact list rows, tab padding.`,note:`8px-equivalent spacing. Compact list rows, tab padding.`,value:`calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -2) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -2) * 1rem)) * var(--sf-space-scale))`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-stack-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`stack`,category:`Layout tokens`,group:`Stack`,description:`Gap for the stack layout primitive (vertically stacked blocks).`,note:`Vertical gap between stacked block-level elements in the stack layout.`,value:`var(--sf-content-gap)`,aliasOf:`--sf-content-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-state-pending-opacity`,tier:`PUBLIC`,role:`knob`,namespace:`state`,category:`Core tokens`,group:`Opacity`,description:`Opacity tokens for specific UI states: --sf-opacity-disabled dims non-interactive elements; --sf-state-pending-opacity dims elements in an async/loading state.`,note:`Opacity for pending / loading state elements.`,value:`0.7`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sticky-offset`,tier:`PUBLIC`,role:`consumption`,namespace:`sticky`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`top offset for position: sticky elements, accounting for the header height.`,value:`clamp( var(--sf-sticky-offset-mobile), calc((var(--sf-sticky-offset-desktop) - var(--sf-sticky-offset-mobile)) / ((var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * 1rem) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sticky-offset-desktop`,tier:`PUBLIC`,role:`consumption`,namespace:`sticky`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Sticky offset at desktop breakpoints.`,value:`var(--sf-header-height-desktop)`,aliasOf:`--sf-header-height-desktop`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-sticky-offset-mobile`,tier:`PUBLIC`,role:`consumption`,namespace:`sticky`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Sticky offset at mobile breakpoints.`,value:`var(--sf-header-height-mobile)`,aliasOf:`--sf-header-height-mobile`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-surface-color`,tier:`PUBLIC`,role:`consumption`,namespace:`surface`,category:`Macro tokens`,group:`Surface color`,description:`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.`,note:`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.`,value:`var(--sf-color-base)`,aliasOf:`--sf-color-base`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-switcher-gap`,tier:`PUBLIC`,role:`consumption`,namespace:`switcher`,category:`Layout tokens`,group:`Switcher`,description:`Configuration tokens for the switcher layout (horizontal → vertical breakpoint).`,note:`Gap between switcher columns / rows.`,value:`var(--sf-gap)`,aliasOf:`--sf-gap`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-switcher-threshold`,tier:`PUBLIC`,role:`knob`,namespace:`switcher`,category:`Layout tokens`,group:`Switcher`,description:`Configuration tokens for the switcher layout (horizontal → vertical breakpoint).`,note:`Inline-size threshold below which the switcher flips from horizontal to vertical.`,value:`30rem`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`2× large font size (~24px). Section headings.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 3) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 2×-large text.`,note:`Font weight for 2×-large text.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 2×-large text.`,note:`Letter-spacing for 2×-large text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 2×-large text.`,note:`Line height for 2×-large text.`,value:`calc(var(--sf-leading-snug) - 6 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for 2×-large text.`,note:`Optimal line length for 2×-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Extra-extra-small font size (~11px). Fine print, badges.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -3) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -3) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.`,note:`Font weight for 2×-extra-small text. Override to deviate from the global weight at this size.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 2×-extra-small text.`,note:`Letter-spacing for 2×-extra-small text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 2×-extra-small text.`,note:`Line height for 2×-extra-small text.`,value:`var(--sf-leading-relaxed)`,aliasOf:`--sf-leading-relaxed`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-2xs-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length (max-width in ch) for 2×-extra-small text.`,note:`Optimal line length (max-width in ch) for 2×-extra-small text.`,value:`55ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`3× large font size (~30px). Major headings.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 4) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 4) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 3×-large text.`,note:`Font weight for 3×-large text.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 3×-large text. Typically negative to tighten large headings.`,note:`Letter-spacing for 3×-large text. Typically negative to tighten large headings.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 3×-large text.`,note:`Line height for 3×-large text.`,value:`calc(var(--sf-leading-tight) - 7 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-3xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for 3×-large text.`,note:`Optimal line length for 3×-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`4× large font size (~36px). Display-level headings.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 5) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 5) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for 4×-large text.`,note:`Font weight for 4×-large text.`,value:`var(--sf-font-weight-heading)`,aliasOf:`--sf-font-weight-heading`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for 4×-large text.`,note:`Letter-spacing for 4×-large text.`,value:`var(--sf-tracking-tight)`,aliasOf:`--sf-tracking-tight`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for 4×-large text.`,note:`Line height for 4×-large text.`,value:`calc(var(--sf-leading-tight) - 8 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-4xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for 4×-large text.`,note:`Optimal line length for 4×-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-base-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.25`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-base-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-base-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`3`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-base-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`2.4`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-l`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Large display font size (~68px+). Oversized hero text.`,value:`calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-display-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-m`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Medium display font size (~54px). Hero headings.`,value:`calc(clamp(calc(var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-display-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-display-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-s`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Small display font size (~42px). Hero sub-headings.`,value:`calc(clamp(calc(var(--sf-text-display-base-min) * 1rem), calc((var(--sf-text-display-base-max) - var(--sf-text-display-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-display-base-min) * 1rem), calc(var(--sf-text-display-base-max) * 1rem)) * var(--sf-text-display-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-display-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Large font size (~18px). Lead paragraphs, prominent labels.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 1) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for large text.`,note:`Font weight for large text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for large text.`,note:`Letter-spacing for large text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for large text.`,note:`Line height for large text.`,value:`calc(var(--sf-leading-normal) - 4 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-l-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for large text.`,note:`Optimal line length for large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Medium / base font size (~16px). Typical body text.`,value:`calc(clamp(calc(var(--sf-text-base-min) * 1rem), calc((var(--sf-text-base-max) - var(--sf-text-base-min)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * 1rem), calc(var(--sf-text-base-max) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for medium (body) text.`,note:`Font weight for medium (body) text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for medium text.`,note:`Letter-spacing for medium text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for medium text.`,note:`Line height for medium text.`,value:`calc(var(--sf-leading-normal) - 3 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-m-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal reading line length for medium text (~65–75ch).`,note:`Optimal reading line length for medium text (~65–75ch).`,value:`65ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-ratio-max`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`Modular type scale ratio at the widest viewport. Controls step-to-step size growth. Default 1.333. Part of the fluid scale engine.`,value:`1.333`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-ratio-min`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`FLUID SCALE ENGINE`,description:`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.`,note:`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.`,value:`1.25`,aliasOf:null,registered:!0,syntax:``,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Small font size (~14px). Secondary content, UI annotations.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -1) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -1) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for small text.`,note:`Font weight for small text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for small text.`,note:`Letter-spacing for small text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for small text.`,note:`Line height for small text.`,value:`calc(var(--sf-leading-relaxed) - 2 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-s-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for small text.`,note:`Optimal line length for small text.`,value:`65ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-scale`,tier:`PUBLIC-ADVANCED`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Scale multipliers`,description:`Global proportional multipliers for the four main design axes (type, space, radius, motion). Adjusting one multiplier uniformly scales every clamp() value in that dimension.`,note:`Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-l`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Large text-shadow for high-contrast text over busy or dark image backgrounds.`,note:`Large text-shadow for high-contrast text over busy or dark image backgrounds.`,value:`0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-m`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Medium text-shadow. Use for text overlaid on images to improve legibility.`,note:`Medium text-shadow. Use for text overlaid on images to improve legibility.`,value:`0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-none`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Removes text-shadow (use to explicitly reset inherited shadows).`,note:`Removes text-shadow (use to explicitly reset inherited shadows).`,value:`none`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-shadow-s`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Output token @property registrations`,description:`Small text-shadow for subtle depth on display headings.`,note:`Small text-shadow for subtle depth on display headings.`,value:`0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))`,aliasOf:null,registered:!0,syntax:`*`,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Extra-large font size (~20px). Sub-headings, callout text.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), 2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), 2) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for extra-large text.`,note:`Font weight for extra-large text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for extra-large text.`,note:`Letter-spacing for extra-large text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for extra-large text.`,note:`Line height for extra-large text.`,value:`calc(var(--sf-leading-snug) - 5 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xl-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for extra-large text.`,note:`Optimal line length for extra-large text.`,value:`none`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Font sizes`,description:`Fluid font-size scale. Values interpolate between mobile and desktop sizes, so prefer these over fixed rem values.`,note:`Extra-small font size (~12px). Labels, captions, metadata.`,value:`calc(clamp(calc(var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc((var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) - var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (100vw - var(--sf-fluid-min-vw) * 1rem) + var(--sf-text-base-min) * pow(var(--sf-text-ratio-min), -2) * 1rem), calc(var(--sf-text-base-max) * pow(var(--sf-text-ratio-max), -2) * 1rem)) * var(--sf-text-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-font-weight`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Font weight for extra-small text.`,note:`Font weight for extra-small text.`,value:`var(--sf-font-weight-body)`,aliasOf:`--sf-font-weight-body`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-letter-spacing`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Letter-spacing for extra-small text.`,note:`Letter-spacing for extra-small text.`,value:`var(--sf-tracking-normal)`,aliasOf:`--sf-tracking-normal`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-line-height`,tier:`PUBLIC`,role:`consumption`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Line height for extra-small text.`,note:`Line height for extra-small text.`,value:`calc(var(--sf-leading-relaxed) - 1 * var(--sf-leading-taper))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-text-xs-max-width`,tier:`PUBLIC`,role:`knob`,namespace:`text`,category:`Core tokens`,group:`Per-size typography sub-properties`,description:`Optimal line length for extra-small text.`,note:`Optimal line length for extra-small text.`,value:`60ch`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-theme-transition-duration`,tier:`PUBLIC`,role:`consumption`,namespace:`theme`,category:`Core tokens`,group:`Motion & easing`,description:`Duration and easing tokens. Build all transitions and animations from these to ensure consistent motion across the system.`,note:`Duration of the .sf-theme-transition animated color-scheme crossfade. Scales with --sf-motion-scale so reduced-motion preferences are respected. Default 300ms.`,value:`calc(300ms * var(--sf-motion-scale))`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-touch-target`,tier:`PUBLIC`,role:`consumption`,namespace:`touch`,category:`Core tokens`,group:`Layout & a11y`,description:`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.`,note:`Minimum touch-target size for interactive elements per WCAG 2.5.5.`,value:`var(--sf-size-l)`,aliasOf:`--sf-size-l`,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-normal`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Normal letter-spacing (0). Default for body text.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-tight`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Tight letter-spacing (slightly negative). Suitable for large headings.`,value:`-0.025em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-wide`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Wide letter-spacing. Use for small-caps labels.`,value:`0.025em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-wider`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Wider letter-spacing for strongly spaced labels.`,value:`0.05em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-tracking-widest`,tier:`PUBLIC`,role:`knob`,namespace:`tracking`,category:`Core tokens`,group:`Line heights & letter spacing`,description:`Typographic fine-tuning tokens: leading (line-height) and tracking (letter-spacing) for every weight class.`,note:`Widest letter-spacing for all-caps microcopy.`,value:`0.1em`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-colors`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for color-related properties (color, background, border-color).`,value:`color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-enter`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Enter-phase transition (ease-out). Use on elements appearing in the viewport.`,value:`color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-exit`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Exit-phase transition (ease-in). Use on elements leaving the viewport.`,value:`color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-fast`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Fast-duration transition shorthand.`,value:`color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-form-field`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`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.`,value:`color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-opacity`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for opacity.`,value:`opacity var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-overlay`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for overlay fades (opacity + visibility).`,value:`overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-shadow`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for box-shadow.`,value:`box-shadow var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-slow`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Slow-duration transition shorthand.`,value:`color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-transition-transform`,tier:`PUBLIC`,role:`consumption`,namespace:`transition`,category:`Core tokens`,group:`Transition shorthands`,description:`Pre-built transition shorthand values for the most common animated properties.`,note:`Transition shorthand for transform.`,value:`transform var(--sf-duration-normal) var(--sf-ease-out)`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-base`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Base stacking level (1). Establishes a stacking context without elevation.`,value:`0`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-below`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index below stacking context base. For decorative pseudo-elements.`,value:`-1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-dropdown`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for dropdown menus and select popups.`,value:`1020`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-fixed`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for position: fixed elements.`,value:`1010`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-modal`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for modal dialogs and their non-top-layer backdrop scrims. Sits above overlays and dropdowns. Default 1040.`,value:`1040`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-overlay`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for modal / dialog backdrops.`,value:`1030`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-raised`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Raised elevation (50). Cards, sticky headers.`,value:`1`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-sticky`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for position: sticky elements (navbars, table headers).`,value:`1000`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-toast`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for toast / snackbar notifications.`,value:`1050`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]},{name:`--sf-z-tooltip`,tier:`PUBLIC`,role:`knob`,namespace:`z`,category:`Core tokens`,group:`Z-index`,description:`Z-index scale using named layers. Never use raw numbers — always reference a token from this scale.`,note:`Z-index for tooltips and transient floating notifications. Highest named layer in the z-index stack. Default 1060.`,value:`1060`,aliasOf:null,registered:!1,syntax:null,fallbackOnly:!1,optional:!1,layer:`slashed.tokens`,bundles:[`full`,`optimal`,`optimal-components`,`optimal-utilities`]}]},vm=G(`
 
`),ym=G(`
 
`),bm=G(` `),xm=G(`optional`),Sm=G(`
 
`),Cm=G(`
   
 
 
`),wm=G(` 
`,1),Tm=G(`
 
 `,1),Em=G(`knob`),Dm=G(`advanced`),Om=G(`
 
`),km=G(`
   
  
 
`),Am=G(`
Classes & Variables
  
 
 
`);function jm(e,t){Ue(t,!0);let n=gm.classes,r=_m.tokens.filter(e=>e.tier===`PUBLIC`||e.tier===`PUBLIC-ADVANCED`),i=L(``),a=L(`classes`),o=L(``),s=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?n.filter(t=>t.name.toLowerCase().includes(e)||t.selector?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)):n}),c=I(()=>()=>{let e=U(i).trim().toLowerCase();return e?r.filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e)||t.group?.toLowerCase().includes(e)||t.value?.toLowerCase().includes(e)):r});function l(e){let t=new Map;for(let n of e){let e=n.category||`Other`,r=n.group||``;t.has(e)||t.set(e,new Map);let i=t.get(e);i.has(r)||i.set(r,[]),i.get(r).push(n)}return t}let u=I(()=>l(U(s)())),d=I(()=>l(U(c)())),f=null;async function p(e){try{await navigator.clipboard.writeText(e),R(o,e,!0),f&&clearTimeout(f),f=setTimeout(()=>{U(o)===e&&R(o,``),f=null},1500)}catch{}}let m={layout:`text-violet-600 dark:text-violet-400`,macro:`text-sky-600 dark:text-sky-400`,state:`text-amber-600 dark:text-amber-400`,accessibility:`text-emerald-600 dark:text-emerald-400`,motion:`text-pink-400`,print:`text-slate-600 dark:text-slate-400`,form:`text-orange-400`,component:`text-indigo-600 dark:text-indigo-400`,theme:`text-teal-600 dark:text-teal-400`};var g=Am(),_=z(g),v=V(z(_),2);zi(v);var y=V(v,2),b=z(y),x=z(b);F(b);var S=V(b,2),C=z(S);F(S),F(y),F(_);var w=V(_,2),T=z(w),E=e=>{var t=Xr(),n=B(t),r=e=>{var t=vm(),n=z(t);F(t),H(()=>q(n,`No classes match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(s)().length===0),c=e=>{var t=Xr();Y(B(t),17,()=>[...U(u).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Tm(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=wm(),s=B(a),c=e=>{var t=ym(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=Cm(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{var n=bm(),r=z(n,!0);F(n),H(()=>{X(n,1,`text-[8px] font-bold uppercase ${m[U(t).kind]??`text-slate-500`}`),q(r,U(t).kind)}),K(e,n)};J(c,e=>{U(t).kind&&e(l)});var u=V(c,2),d=e=>{K(e,xm())};J(u,e=>{U(t).optional&&e(d)}),F(i);var f=V(i,2),h=e=>{var n=Sm(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(f,e=>{U(t).description&&e(h)}),F(r);var g=V(r,2),_=z(g),v=e=>{_a(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},y=e=>{Ca(e,{class:`w-3 h-3 text-slate-500`})};J(_,e=>{U(o)===U(t).selector?e(v):e(y,-1)}),F(g),F(n),H(()=>q(s,U(t).selector)),W(`click`,g,()=>p(U(t).selector)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(c,-1)}),K(e,t)},D=e=>{var t=Xr(),n=B(t),r=e=>{var t=vm(),n=z(t);F(t),H(()=>q(n,`No tokens match "${U(i)??``}"`)),K(e,t)},a=I(()=>U(c)().length===0),s=e=>{var t=Xr();Y(B(t),17,()=>[...U(d).entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=Tm(),s=B(a),c=z(s),l=z(c,!0);F(c),F(s),Y(V(s,2),17,()=>[...i().entries()],([e,t])=>e,(e,t)=>{var n=I(()=>h(U(t),2));let r=()=>U(n)[0],i=()=>U(n)[1];var a=wm(),s=B(a),c=e=>{var t=ym(),n=z(t,!0);F(t),H(()=>q(n,r())),K(e,t)};J(s,e=>{r()&&e(c)});var l=V(s,2);Y(l,21,i,e=>e.name,(e,t)=>{var n=km(),r=z(n),i=z(r),a=z(i),s=z(a,!0);F(a);var c=V(a,2),l=e=>{K(e,Em())};J(c,e=>{U(t).role===`knob`&&e(l)});var u=V(c,2),d=e=>{K(e,Dm())};J(u,e=>{U(t).tier===`PUBLIC-ADVANCED`&&e(d)}),F(i);var f=V(i,2),m=e=>{var n=Om(),r=z(n,!0);F(n),H(()=>q(r,U(t).value)),K(e,n)};J(f,e=>{U(t).value&&e(m)});var h=V(f,2),g=e=>{var n=Sm(),r=z(n,!0);F(n),H(()=>q(r,U(t).description)),K(e,n)};J(h,e=>{U(t).description&&e(g)}),F(r);var _=V(r,2),v=z(_),y=e=>{_a(e,{class:`w-3 h-3 text-emerald-600 dark:text-emerald-400`})},b=e=>{Ca(e,{class:`w-3 h-3 text-slate-500`})};J(v,e=>{U(o)===`var(${U(t).name})`?e(y):e(b,-1)}),F(_),F(n),H(()=>q(s,U(t).name)),W(`click`,_,()=>p(`var(${U(t).name})`)),K(e,n)}),F(l),K(e,a)}),H(()=>q(l,r())),K(e,a)}),K(e,t)};J(n,e=>{U(a)?e(r):e(s,-1)}),K(e,t)};J(T,e=>{U(a)===`classes`?e(E):e(D,-1)}),F(w),F(g),H((e,t)=>{X(b,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`classes`?`bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(x,`CSS classes (${e??``})`),X(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${U(a)===`tokens`?`bg-indigo-600/30 text-indigo-800 dark:text-indigo-200 border border-indigo-500/30`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(C,`CSS vars (${t??``})`)},[()=>U(s)().length,()=>U(c)().length]),qi(v,()=>U(i),e=>R(i,e)),W(`click`,b,()=>{R(a,`classes`)}),W(`click`,S,()=>{R(a,`tokens`)}),K(e,g),We()}Br([`click`]);var Mm=G(`
`),Nm=G(`
`),Pm=G(`
 
`),Fm=G(``),Im=G(` `),Lm=G(``),Rm=G(``),zm=G(`
  
 
 
  
`);function Bm(e,t){Ue(t,!0);let n=L(!1);function r(e){let t=e.name;if(t.includes(`color`)||t.includes(`source`)||t.includes(`-bg`)||t.includes(`-border`))return`color`;if(t.includes(`font`)||t.includes(`family`))return`font`;let n=e.syntax?.toLowerCase()??``;return n.includes(`number`)||n.includes(`length`)||n.includes(`integer`)?`number`:`text`}let i=I(()=>t.overrideValue??t.token.value),a=I(()=>t.overrideValue!==void 0),o=I(()=>r(t.token)),s=I(()=>t.token.name.replace(`--sf-`,``));function c(e){return sl.value,pl(e)||pl(`var(${t.token.name})`)||e}let l=I(()=>U(o)===`color`?c(U(i)):``);var u=zm(),d=z(u),f=V(d,2),p=e=>{var t=Mm();let n;H(()=>n=Z(t,``,n,{background:U(l)})),K(e,t)},m=e=>{K(e,Nm())};J(f,e=>{U(o)===`color`?e(p):e(m,-1)});var h=V(f,2),g=z(h),_=z(g,!0);F(g);var v=V(g,2),y=e=>{var n=Pm(),r=z(n,!0);F(n),H(()=>q(r,t.token.description)),K(e,n)};J(v,e=>{t.token.description&&e(y)}),F(h);var b=V(h,2),x=e=>{var r=Fm();zi(r),H(()=>Bi(r,U(i))),zr(`blur`,r,e=>{let r=e.target.value.trim();r&&r!==t.token.value?t.onSet(r):(!r||r===t.token.value)&&t.onReset(),R(n,!1)}),W(`keydown`,r,e=>{e.key===`Enter`&&e.currentTarget.blur(),e.key===`Escape`&&R(n,!1)}),K(e,r)},S=e=>{var t=Lm(),r=z(t),o=e=>{var t=Im(),n=z(t,!0);F(t),H(()=>q(n,U(i))),K(e,t)},s=e=>{var t=Yr();H(()=>q(t,U(i))),K(e,t)};J(r,e=>{U(a)?e(o):e(s,-1)}),F(t),H(()=>Q(t,`title`,U(i))),W(`click`,t,()=>{R(n,!0)}),K(e,t)};J(b,e=>{U(n)?e(x):e(S,-1)});var C=V(b,2),w=e=>{var n=Rm();W(`click`,n,function(...e){t.onReset?.apply(this,e)}),K(e,n)};J(C,e=>{U(a)&&e(w)}),F(u),H(()=>{X(u,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${U(a)?`bg-indigo-500/8 border border-indigo-500/15`:`hover:bg-black/4 dark:hover:bg-white/4`}`),X(d,1,`w-1.5 h-1.5 rounded-full shrink-0 ${U(a)?`bg-indigo-500`:`bg-transparent`}`),Q(g,`title`,t.token.name),q(_,U(s))}),K(e,u),We()}Br([`keydown`,`click`]);var Vm=G(` `),Hm=G(`
No tokens found
`),Um=G(`
 
`),Wm=G(`
 
`),Gm=G(`
 
 
  
`);function Km(e,t){Ue(t,!0);let n=L(``),r=I(()=>()=>{let e=t.patterns??[t.domain];return t.tokens.filter(t=>e.some(e=>t.name.includes(e))&&t.tier!==`INTERNAL`)}),i=I(()=>()=>{if(!U(n))return U(r)();let e=U(n).toLowerCase();return U(r)().filter(t=>t.name.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))}),a=I(()=>U(i)().filter(e=>e.name in t.overrides).length);var o=Gm(),s=z(o),c=z(s),l=z(c);F(c);var u=V(c,2),d=e=>{var t=Vm(),n=z(t);F(t),H(()=>q(n,`${U(a)??``} modified`)),K(e,t)};J(u,e=>{U(a)>0&&e(d)}),F(s);var f=V(s,2);zi(f);var p=V(f,2),m=e=>{K(e,Hm())},h=I(()=>U(i)().length===0),g=e=>{var n=Wm(),r=z(n);Y(r,17,()=>U(i)().slice(0,60),e=>e.name,(e,n)=>{Bm(e,{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)})});var a=V(r,2),o=e=>{var t=Um(),n=z(t);F(t),H(e=>q(n,`${e??``} more — refine your search`),[()=>U(i)().length-60]),K(e,t)},s=I(()=>U(i)().length>60);J(a,e=>{U(s)&&e(o)}),F(n),K(e,n)};J(p,e=>{U(h)?e(m):e(g,-1)}),F(o),H(()=>{q(l,`${t.domain??``} tokens`),Q(f,`placeholder`,`Search ${t.domain} tokens…`),Bi(f,U(n))}),W(`input`,f,e=>{R(n,e.target.value,!0)}),K(e,o),We()}Br([`input`]);var qm=G(`
`),Jm=G(`
  
`),Ym=G(`
 
`),Xm=G(`
`),Zm=G(`
`),Qm=G(`
  
`),$m=G(`
`),eh=G(`
 
   
 
  
 
  
 
 
 
`);function th(e,t){Ue(t,!0);let n={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2},r=L(``),i=L(!1),a=L(!1),o=I(()=>t.tokens.filter(e=>t.patterns.some(t=>e.name.includes(t))).sort((e,t)=>{let r=n[e.tier??`INTERNAL`]??2,i=n[t.tier??`INTERNAL`]??2;return r===i?e.name.localeCompare(t.name):r-i})),s=I(()=>()=>{let e=U(o);if(U(i)||(e=e.filter(e=>e.tier!==`INTERNAL`)),U(a)&&(e=e.filter(e=>e.name in t.overrides)),U(r)){let t=U(r).toLowerCase();e=e.filter(e=>e.name.toLowerCase().includes(t)||e.description?.toLowerCase().includes(t))}return e}),c=I(()=>U(o).filter(e=>e.name in t.overrides).length),l=I(()=>U(o).filter(e=>e.tier===`PUBLIC`).length),u=I(()=>U(o).filter(e=>e.tier===`PUBLIC-ADVANCED`).length),d=I(()=>U(o).filter(e=>e.tier===`INTERNAL`).length);var f=eh(),p=z(f),m=z(p);zi(m);var h=V(m,2),g=z(h),_=z(g),v=z(_),y=e=>{K(e,qm())};J(v,e=>{U(a)&&e(y)}),F(_);var b=V(_);F(g);var x=V(g,2),S=z(x),C=z(S),w=e=>{K(e,qm())};J(C,e=>{U(i)&&e(w)}),F(S);var T=V(S);F(x);var E=V(x,2),D=z(E);F(E),F(h);var O=V(h,2),k=z(O),ee=V(z(k),2),te=z(ee);F(ee),F(k);var ne=V(k,2),A=V(z(ne),2),j=z(A);F(A),F(ne);var M=V(ne,2),re=e=>{var t=Jm(),n=V(z(t),2),r=z(n);F(n),F(t),H(()=>q(r,`Internal (${U(d)??``})`)),K(e,t)};J(M,e=>{U(i)&&e(re)}),F(O),F(p);var ie=V(p,4),ae=z(ie),oe=e=>{var t=Ym(),n=z(t,!0);F(t),H(()=>q(n,U(a)?`No modified tokens in this domain`:`No tokens found`)),K(e,t)},se=I(()=>U(s)().length===0),N=e=>{var n=$m();Y(n,21,()=>U(s)(),e=>e.name,(e,n)=>{var r=Qm(),i=z(r),a=e=>{K(e,Xm())};J(i,e=>{U(n).tier===`PUBLIC-ADVANCED`&&e(a)});var o=V(i,2),s=e=>{K(e,Zm())};J(o,e=>{U(n).tier===`INTERNAL`&&e(s)}),Bm(V(o,2),{get token(){return U(n)},get overrideValue(){return t.overrides[U(n).name]},onSet:e=>t.onSet(U(n).name,e),onReset:()=>t.onReset(U(n).name)}),F(r),K(e,r)}),F(n),K(e,n)};J(ae,e=>{U(se)?e(oe):e(N,-1)}),F(ie),F(f),H(e=>{Bi(m,U(r)),X(g,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(a)?`text-indigo-600 dark:text-indigo-400`:`text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400`}`),X(_,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(a)?`bg-indigo-600 border-indigo-500`:`border-black/20 dark:border-white/20`}`),q(b,` Modified only ${U(c)>0?`(${U(c)})`:``}`),Q(x,`aria-expanded`,U(i)),X(x,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${U(i)?`text-amber-600 dark:text-amber-400`:`text-slate-400 dark:text-slate-600 hover:text-slate-600 dark:hover:text-slate-400`}`),X(S,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${U(i)?`bg-amber-600 border-amber-500`:`border-black/20 dark:border-white/20`}`),q(T,` Internal (${U(d)??``})`),q(D,`${e??``}/${U(o).length??``}`),q(te,`Public (${U(l)??``})`),q(j,`Advanced (${U(u)??``})`)},[()=>U(s)().length]),W(`input`,m,e=>{R(r,e.target.value,!0)}),W(`click`,g,()=>{R(a,!U(a))}),W(`click`,x,()=>{R(i,!U(i))}),K(e,f),We()}Br([`input`,`click`]);var nh=G(``),rh=G(`
    
 
       
`),ih=G(`
Waiting for live preview…
`),ah=G(``),oh=G(`
Pick an editable brand/status (base) color as the foreground to enable auto-fix.
`),sh=G(`
 
`),ch=G(`
 
 
 
 
 
`),lh=G(`
 
`),uh=G(`
Foreground
 
  
Background
 
 
Aa Bb Cc
 
 
Auto-fix to pass   
 
`,1),dh=G(` `),fh=G(``),ph=G(`·`),mh=G(` `),hh=G(`
Foreground (rows) × background (cols). Click a cell to load it above.
 
`,1),gh=G(`
Contrast checker
 
Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.
 
 
 
 
 
`);function _h(e,t){Ue(t,!0);let n=[{label:`Text`,expr:`var(--sf-color-text)`},{label:`Text secondary`,expr:`var(--sf-color-text--secondary)`},{label:`Text muted`,expr:`var(--sf-color-text--muted)`},{label:`White`,expr:`#ffffff`},{label:`Black`,expr:`#000000`}],r=[{label:`Surface`,expr:`var(--sf-color-surface)`},{label:`Bg`,expr:`var(--sf-color-bg)`},{label:`Border`,expr:`var(--sf-color-border)`}],i=[{key:`primary`,srcLight:`--sf-color-primary-source-light`,defLight:`oklch(0.47 0.27 264)`,srcDark:`--sf-color-primary-source-dark`,defDark:`oklch(0.715 0.243 264)`},{key:`secondary`,srcLight:`--sf-color-secondary-source-light`,defLight:`oklch(0.22 0.04 264)`,srcDark:`--sf-color-secondary-source-dark`,defDark:`oklch(0.84 0.036 264)`},{key:`tertiary`,srcLight:`--sf-color-tertiary-source-light`,defLight:`oklch(0.42 0.22 295)`,srcDark:`--sf-color-tertiary-source-dark`,defDark:`oklch(0.74 0.198 295)`},{key:`action`,srcLight:`--sf-color-action-source-light`,defLight:`oklch(0.50 0.22 235)`,srcDark:`--sf-color-action-source-dark`,defDark:`oklch(0.70 0.198 235)`},{key:`neutral`,srcLight:`--sf-color-neutral-source-light`,defLight:`oklch(0.52 0.025 260)`,srcDark:`--sf-color-neutral-source-dark`,defDark:`oklch(0.69 0.0225 260)`},{key:`success`,srcLight:`--sf-color-success-source-light`,defLight:`oklch(0.50 0.16 145)`,srcDark:`--sf-color-success-source-dark`,defDark:`oklch(0.70 0.144 145)`},{key:`warning`,srcLight:`--sf-color-warning-source-light`,defLight:`oklch(0.75 0.17 80)`,srcDark:`--sf-color-warning-source-dark`,defDark:`oklch(0.65 0.153 80)`},{key:`danger`,srcLight:`--sf-color-danger-source-light`,defLight:`oklch(0.48 0.22 12)`,srcDark:`--sf-color-danger-source-dark`,defDark:`oklch(0.71 0.198 12)`},{key:`info`,srcLight:`--sf-color-info-source-light`,defLight:`oklch(0.48 0.18 235)`,srcDark:`--sf-color-info-source-dark`,defDark:`oklch(0.71 0.162 235)`}],a=i.flatMap(e=>[{label:`${e.key} (base)`,expr:`var(--sf-color-${e.key})`,editKey:e.key},{label:`${e.key}-100`,expr:`var(--sf-color-${e.key}-100)`},{label:`${e.key}-600`,expr:`var(--sf-color-${e.key}-600)`},{label:`${e.key}-900`,expr:`var(--sf-color-${e.key}-900)`}]),o=[...n,...r,...a],s=Object.fromEntries(i.map(e=>[e.key,e])),c=[{label:`text`,expr:`var(--sf-color-text)`},{label:`white`,expr:`#ffffff`},{label:`black`,expr:`#000000`},{label:`primary`,expr:`var(--sf-color-primary)`,editKey:`primary`}],l=[{label:`surface`,expr:`var(--sf-color-surface)`},{label:`primary`,expr:`var(--sf-color-primary)`},{label:`neutral-100`,expr:`var(--sf-color-neutral-100)`},{label:`success`,expr:`var(--sf-color-success)`},{label:`warning`,expr:`var(--sf-color-warning)`},{label:`danger`,expr:`var(--sf-color-danger)`}],u=L(`White`),d=L(`primary (base)`),f=L(`AA`),p=I(()=>o.find(e=>e.label===U(u))??o[0]),m=I(()=>o.find(e=>e.label===U(d))??o[0]);function h(e,t){sl.value;let n=_l(e),r=_l(t);return!n||!r?null:Gl(Wl(...n),Wl(...r))}function g(e){return e>=7?{tag:`AAA`,cls:`bg-emerald-500/25 text-emerald-800 dark:text-emerald-200`}:e>=4.5?{tag:`AA`,cls:`bg-emerald-500/15 text-emerald-700 dark:text-emerald-300`}:e>=3?{tag:`AA-L`,cls:`bg-amber-500/20 text-amber-700 dark:text-amber-300`}:{tag:`Fail`,cls:`bg-rose-500/20 text-rose-700 dark:text-rose-300`}}let _=I(()=>h(U(p).expr,U(m).expr));function v(){let e=U(u);R(u,U(d),!0),R(d,e,!0)}function y(e,t){let n=o.find(t=>t.expr===e),r=o.find(e=>e.expr===t);n&&R(u,n.label,!0),r&&R(d,r.label,!0)}function b(e){return sl.value,pl(e)||e}let x=L(!1),S=L(!1),C=L(null);function w(){R(C,null);let e=U(p).editKey?s[U(p).editKey]:null;if(!e)return;let n=ul()===`dark`,r=n?e.srcDark:e.srcLight,i=n?e.defDark:e.defLight,{c:a,h:o,l:c,valid:l}=Kl(t.overrides[r]??i);if(!l)return;let u=_l(U(m).expr);if(!u)return;let d=Wl(...u),h=U(f)===`AAA`?7:4.5,g=null;for(let e=0;e<=1.0001;e+=.005){let[t,n,r]=Ul(e,a,o);Gl(Wl(t,n,r),d)>=h&&(g===null||Math.abs(e-c){if(!U(x)){R(C,null);return}sl.value,U(u),U(d),U(f),U(p).editKey&&U(_)!==null&&U(_)<(U(f)===`AAA`?7:4.5)?w():R(C,null)});var E=gh(),D=V(z(E),2),O=z(D),k=V(z(O),2),ee=z(k,!0);F(k),F(O);var te=V(O,2),ne=e=>{var t=uh(),n=B(t),r=z(n),i=V(z(r),2);Y(i,21,()=>o,e=>e.label,(e,t)=>{var n=nh(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(i),F(r);var a=V(r,2),s=V(a,2),c=V(z(s),2);Y(c,21,()=>o,e=>e.label,(e,t)=>{var n=nh(),r=z(n,!0);F(n);var i={};H(()=>{q(r,U(t).label),i!==(i=U(t).label)&&(n.value=(n.__value=U(t).label)??``)}),K(e,n)}),F(c),F(s),F(n);var l=V(n,2),h=z(l),y=z(h);F(h);var x=V(h,2),S=e=>{let t=I(()=>g(U(_)));var n=rh(),r=z(n),i=z(r);F(r);var a=V(r,2),o=z(a,!0);F(a);var s=V(a,4),c=z(s),l=z(c);F(c);var u=V(c,2),d=z(u);F(u);var f=V(u,2),p=z(f);F(f);var m=V(f,2),h=z(m);F(m),F(s),F(n),H(e=>{q(i,`${e??``}:1`),X(a,1,`text-[10px] font-bold px-2 py-0.5 rounded ${U(t).cls}`),q(o,U(t).tag),X(c,1,yi(U(_)>=4.5?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(l,`${U(_)>=4.5?`✓`:`✗`} AA normal`),X(u,1,yi(U(_)>=3?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(d,`${U(_)>=3?`✓`:`✗`} AA large`),X(f,1,yi(U(_)>=7?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(p,`${U(_)>=7?`✓`:`✗`} AAA normal`),X(m,1,yi(U(_)>=4.5?`text-emerald-700 dark:text-emerald-300`:`text-rose-700 dark:text-rose-300`)),q(h,`${U(_)>=4.5?`✓`:`✗`} AAA large`)},[()=>U(_).toFixed(2)]),K(e,n)},w=e=>{K(e,ih())};J(x,e=>{U(_)===null?e(w,-1):e(S)}),F(l);var E=V(l,2),D=z(E),O=z(D),k=V(z(O)),ee=z(k);F(k),F(O);var te=V(O,2);Y(te,20,()=>[`AA`,`AAA`],e=>e,(e,t)=>{var n=ah(),r=z(n,!0);F(n),H(()=>{X(n,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${U(f)===t?`bg-black/12 dark:bg-white/12 text-slate-900 dark:text-white`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(r,t)}),W(`click`,n,()=>{R(f,t,!0)}),K(e,n)}),F(te),F(D);var ne=V(D,2),A=e=>{K(e,oh())},j=e=>{var t=sh(),n=z(t);F(t),H(()=>q(n,`Already passes ${U(f)??``}. 🎉`)),K(e,t)},M=e=>{var t=ch(),n=z(t),r=V(n,2),i=z(r),a=z(i,!0);F(i);var o=V(i,2),s=z(o);F(o),F(r);var c=V(r,2);F(t),H((e,t)=>{Z(n,e),q(a,U(C).value),q(s,`→ ${t??``}:1 (${U(f)??``} ✓)`)},[()=>`background:${b(U(C).value)}`,()=>U(C).ratio.toFixed(2)]),W(`click`,c,T),K(e,t)},re=e=>{var t=lh(),n=z(t);F(t),H(()=>q(n,`No lightness of this hue reaches ${U(f)??``} on this background — try a different background or hue.`)),K(e,t)};J(ne,e=>{U(p).editKey?U(_)!==null&&U(_)>=(U(f)===`AAA`?7:4.5)?e(j,1):U(C)?e(M,2):e(re,-1):e(A)}),F(E),H((e,t,n)=>{Z(h,e),Z(y,t),q(ee,`(for ${n??``} mode)`)},[()=>`background:${b(U(m).expr)}`,()=>`color:${b(U(p).expr)}`,()=>ul()]),Oi(i,()=>U(u),e=>R(u,e)),W(`click`,a,v),Oi(c,()=>U(d),e=>R(d,e)),K(e,t)};J(te,e=>{U(x)&&e(ne)}),F(D);var A=V(D,4),j=z(A),M=V(z(j),2),re=z(M,!0);F(M),F(j);var ie=V(j,2),ae=e=>{var t=hh(),n=V(B(t),2),r=z(n),i=z(r),a=z(i);Y(V(z(a)),17,()=>l,e=>e.label,(e,t)=>{var n=dh(),r=z(n,!0);F(n),H(()=>q(r,U(t).label)),K(e,n)}),F(a),F(i);var o=V(i);Y(o,21,()=>c,e=>e.label,(e,t)=>{var n=mh(),r=z(n),i=z(r,!0);F(r),Y(V(r),17,()=>l,e=>e.label,(e,n)=>{let r=I(()=>h(U(t).expr,U(n).expr));var i=Xr(),a=B(i),o=e=>{let i=I(()=>g(U(r)));var a=fh(),o=z(a),s=z(o,!0);F(o),F(a),H((e,t)=>{Q(o,`title`,e),X(o,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${U(i).cls}`),q(s,t)},[()=>`${U(t).label} on ${U(n).label} — ${U(r).toFixed(2)}:1`,()=>U(r).toFixed(1)]),W(`click`,o,()=>y(U(t).expr,U(n).expr)),K(e,a)},s=e=>{K(e,ph())};J(a,e=>{U(r)===null?e(s,-1):e(o)}),K(e,i)}),F(n),H(()=>q(i,U(t).label)),K(e,n)}),F(o),F(r),F(n),K(e,t)};J(ie,e=>{U(S)&&e(ae)}),F(A),F(E),H(()=>{Q(O,`aria-expanded`,U(x)),q(ee,U(x)?`▲`:`▼`),Q(j,`aria-expanded`,U(S)),q(re,U(S)?`▲`:`▼`)}),W(`click`,O,()=>{R(x,!U(x))}),W(`click`,j,()=>{R(S,!U(S))}),K(e,E),We()}Br([`click`]);var vh=G(`
`),yh=G(` `),bh=G(`
 
 
 
`);function xh(e,t){Ue(t,!0);let n=new Set([`home`,`themes`,`wcag`,`setup`,`cheatsheet`]),r=L(`controls`);On(()=>{t.domain,R(r,`controls`)});let i=I(()=>Al[t.domain]??[t.domain]),a=I(()=>t.tokens.filter(e=>jl(e.name)===t.domain&&e.name in t.overrides).length);var o=Xr(),s=B(o),c=e=>{var n=Xr(),r=B(n),i=e=>{Vl(e,{get overrides(){return t.overrides},get onSelect(){return t.onSelectDomain},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},a=e=>{dm(e,{get overrides(){return t.overrides},get onApplyTheme(){return t.onApplyTheme},get onResetAll(){return t.onResetAll}})},o=e=>{_h(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onBulkChange(){return t.onBulkChange}})},s=e=>{hm(e,{get overrides(){return t.overrides}})},c=e=>{jm(e,{})};J(r,e=>{t.domain===`home`?e(i):t.domain===`themes`?e(a,1):t.domain===`wcag`?e(o,2):t.domain===`setup`?e(s,3):t.domain===`cheatsheet`&&e(c,4)}),K(e,n)},l=I(()=>n.has(t.domain)),u=e=>{var n=bh(),o=z(n),s=z(o),c=e=>{var n=vh(),r=z(n),i=e=>{sd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange},get onSelectDomain(){return t.onSelectDomain}})},a=e=>{Xd(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},o=e=>{nf(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},s=e=>{Cf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},c=e=>{Rf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},l=e=>{Kf(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},u=e=>{cp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},d=e=>{xp(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},f=e=>{Np(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})},p=e=>{nm(e,{get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset},get onBulkChange(){return t.onBulkChange}})},m=e=>{Km(e,{get domain(){return t.domain},get tokens(){return t.tokens},get overrides(){return t.overrides},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(r,e=>{t.domain===`colors`?e(i):t.domain===`typography`?e(a,1):t.domain===`spacing`?e(o,2):t.domain===`layout`?e(s,3):t.domain===`borders`?e(c,4):t.domain===`shadows`?e(l,5):t.domain===`motion`?e(u,6):t.domain===`effects`?e(d,7):t.domain===`macros`?e(f,8):t.domain===`misc`?e(p,9):e(m,-1)}),F(n),K(e,n)},l=e=>{th(e,{get tokens(){return t.tokens},get overrides(){return t.overrides},get patterns(){return U(i)},get onSet(){return t.onSet},get onReset(){return t.onReset}})};J(s,e=>{U(r)===`controls`?e(c):e(l,-1)}),F(o);var u=V(o,2),d=z(u);lo(z(d),{class:`w-3 h-3`}),Me(),F(d);var f=V(d,4),p=z(f);La(p,{class:`w-3 h-3`});var m=V(p,2),h=e=>{var t=yh(),n=z(t,!0);F(t),H(()=>q(n,U(a))),K(e,t)};J(m,e=>{U(a)>0&&e(h)}),F(f),F(u),F(n),H(()=>{X(d,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`controls`?`text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),X(f,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${U(r)===`tokens`?`text-indigo-700 dark:text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`)}),W(`click`,d,()=>{R(r,`controls`)}),W(`click`,f,()=>{R(r,`tokens`)}),K(e,n)};J(s,e=>{U(l)?e(c):e(u,-1)}),K(e,o),We()}Br([`click`]);var Sh=G(`
 
`),Ch=G(`
Type to search tokens by name or description
`),wh=G(`overridden`),Th=G(`
 
`),Eh=G(``),Dh=G(`
↑↓ navigate ↵ open panel Esc close
`),Oh=G(``);function kh(e,t){Ue(t,!0);let n=L(``),r=L(0),i=L(null),a={colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`},o=I(()=>(()=>{let e=U(n).trim().toLowerCase();if(!e)return[];let r=[];for(let n of t.tokens){if(n.tier===`INTERNAL`)continue;let i=n.name.toLowerCase().includes(e),a=n.description?.toLowerCase().includes(e)??!1;if((i||a)&&(r.push({token:n,domain:jl(n.name),overridden:n.name in t.overrides}),r.length>=40))break}return r})());On(()=>{U(n),R(r,0)}),On(()=>{U(i)&&U(i).focus()});function s(e){t.onNavigate(e),t.onClose()}function c(e){if(e.key===`Escape`){e.preventDefault(),t.onClose();return}if(U(o).length===0&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),R(r,0);return}if(e.key===`ArrowDown`){e.preventDefault(),R(r,Math.min(U(r)+1,U(o).length-1),!0);return}if(e.key===`ArrowUp`){e.preventDefault(),R(r,Math.max(U(r)-1,0),!0);return}e.key===`Enter`&&U(o)[U(r)]&&(e.preventDefault(),s(U(o)[U(r)].domain))}var l=Oh(),u=z(l),d=z(u),f=V(z(d),2);zi(f),Zi(f,e=>R(i,e),()=>U(i)),Me(2),F(d);var p=V(d,2),m=z(p),h=e=>{var t=Sh(),r=z(t);F(t),H(()=>q(r,`No tokens matching "${U(n)??``}"`)),K(e,t)},g=I(()=>U(n).trim()&&U(o).length===0),_=e=>{K(e,Ch())},v=I(()=>!U(n).trim()),y=e=>{var n=Xr();Y(B(n),19,()=>U(o),e=>e.token.name,(e,n,i)=>{var o=Eh(),c=z(o),l=z(c),u=z(l),d=z(u,!0);F(u);var f=V(u,2),p=e=>{K(e,wh())};J(f,e=>{U(n).overridden&&e(p)}),F(l);var m=V(l,2),h=e=>{var t=Th(),r=z(t,!0);F(t),H(()=>q(r,U(n).token.description)),K(e,t)};J(m,e=>{U(n).token.description&&e(h)}),F(c);var g=V(c,2),_=z(g),v=z(_,!0);F(_);var y=V(_,2),b=z(y,!0);F(y),F(g),F(o),H(()=>{X(o,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${U(r)===U(i)?`bg-indigo-500/15`:`hover:bg-black/4 dark:hover:bg-white/4`}`),q(d,U(n).token.name),q(v,U(n).overridden?t.overrides[U(n).token.name]:U(n).token.value),q(b,a[U(n).domain]??U(n).domain)}),zr(`mouseenter`,o,()=>{R(r,U(i),!0)}),W(`click`,o,()=>s(U(n).domain)),K(e,o)}),K(e,n)};J(m,e=>{U(g)?e(h):U(v)?e(_,1):e(y,-1)}),F(p);var b=V(p,2),x=e=>{K(e,Dh())};J(b,e=>{U(o).length>0&&e(x)}),F(u),F(l),W(`mousedown`,l,e=>{e.target===e.currentTarget&&t.onClose()}),W(`keydown`,f,c),qi(f,()=>U(n),e=>R(n,e)),K(e,l),We()}Br([`mousedown`,`keydown`,`click`]);var Ah=G(` `),jh=G(``),Mh=G(``),Nh=G(`
 
 
 
 
  
 
 
  
`);function Ph(e,t){Ue(t,!0);let n=(e,t=f,n=f,r=f)=>{var i=jh(),a=z(i);mi(a,n,(e,t)=>{t(e,{class:`w-3.5 h-3.5`})});var o=V(a),s=V(o),c=e=>{var t=Ah(),n=z(t,!0);F(t),H(()=>q(n,U(v)>9?`9+`:U(v))),K(e,t)};J(s,e=>{t()===`preview`&&U(v)>0&&e(c)}),F(i),H(()=>{Q(i,`aria-pressed`,U(p)===t()),X(i,1,`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${U(p)===t()?`text-indigo-700 dark:text-indigo-300 bg-indigo-500/10`:`text-slate-500 hover:text-slate-700 dark:hover:text-slate-300`}`),q(o,` ${r()??``} `)}),W(`click`,i,()=>{R(p,t(),!0)}),K(e,i)},r=_m.tokens??_m,i={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function a(e){let t={};for(let n of Object.keys(e)){let e=jl(n);t[e]=(t[e]??0)+1}return t}let o=qc(),s=L(nn(Jc())),c=L(nn([])),l=L(nn([])),u=L(`home`),d=L(!1),p=L(`controls`),m=L(`light`),h=L(`fluid`),g=L(`normal`),_=L(`marketing`),v=I(()=>Object.keys(U(s)).length),y=I(()=>a(U(s))),b=I(()=>Object.keys(U(s)).filter(e=>jl(e)===U(u))),x=I(()=>U(b).length),S=I(()=>U(c).length>0),C=I(()=>U(l).length>0);function w(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let T=L(nn(Cr(()=>({...U(s)})))),E=L(`idle`),D=I(()=>!w(U(s),U(T))),O=null;On(()=>{Yc(U(s))});function k(e){let t=U(s),n=typeof e==`function`?e(t):e;w(t,n)||(R(c,[...U(c).slice(-49),t],!0),R(l,[],!0),(U(E)===`saved`||U(E)===`error`)&&R(E,`idle`)),R(s,n,!0)}async function ee(){if(!U(D)||U(E)===`saving`)return;let e={...U(s)};R(E,`saving`);try{await Qc(U(s)),w(U(s),e)?(R(T,e,!0),R(E,`saved`),O&&clearTimeout(O),O=setTimeout(()=>{U(E)===`saved`&&R(E,`idle`),O=null},2e3)):R(E,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(E,`error`)}}function te(e,t){k(n=>({...n,[e]:t}))}function ne(e){k(t=>{let n={...t};return delete n[e],n})}function A(e){k(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function j(e){k({...e})}function M(){k({})}function re(){let e={};for(let t of U(b))e[t]=null;A(e)}function ie(){if(U(c).length===0)return;let e=U(c)[U(c).length-1],t=U(s);R(c,U(c).slice(0,-1),!0),R(l,[t,...U(l)],!0),R(s,e,!0)}function ae(){if(U(l).length===0)return;let e=U(l)[0],t=U(s);R(l,U(l).slice(1),!0),R(c,[...U(c),t],!0),R(s,e,!0)}function oe(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);if(typeof e==`object`&&e&&!Array.isArray(e)){let t=Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e)));Object.keys(t).length>0&&k(t)}}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length>0&&k(t=>({...t,...e}))}},n.readAsText(t)},e.click()}function se(){let e=yc(U(s),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}ra(()=>{let e=e=>{(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key===`z`&&(e.preventDefault(),ie()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&e.key===`z`||e.key===`y`)&&(e.preventDefault(),ae()),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&e.key.toLowerCase()===`s`&&(e.preventDefault(),ee()),(e.ctrlKey||e.metaKey)&&!e.repeat&&e.key.toLowerCase()===`k`&&(e.preventDefault(),R(d,!U(d)))};return window.addEventListener(`keydown`,e),()=>{window.removeEventListener(`keydown`,e),O&&clearTimeout(O)}});var N=Nh(),ce=z(N);rs(ce,{get overridesCount(){return U(v)},get canUndo(){return U(S)},get canRedo(){return U(C)},get hasPendingChanges(){return U(D)},get saveState(){return U(E)},onUndo:ie,onRedo:ae,onResetAll:M,onImport:oe,onExport:se,onSave:ee});var le=V(ce,2),ue=z(le);n(ue,()=>`controls`,()=>lo,()=>`Controls`),n(V(ue,2),()=>`preview`,()=>ka,()=>`Preview`),F(le);var de=V(le,2),fe=z(de);ss(z(fe),{get activeId(){return U(u)},onSelect:e=>{R(u,e,!0)},get overridesByDomain(){return U(y)}}),F(fe);var pe=V(fe,2),me=z(pe),he=z(me),ge=z(he,!0);F(he);var _e=V(he,2),ve=e=>{var t=Mh(),n=z(t);$a(n,{class:`w-3 h-3`});var r=V(n);F(t),H(()=>{Q(t,`title`,`Reset ${U(x)} override${U(x)===1?``:`s`} in ${i[U(u)]??U(u)}`),q(r,` Reset ${U(x)??``}`)}),W(`click`,t,re),K(e,t)};J(_e,e=>{U(x)>0&&e(ve)}),F(me);var ye=V(me,2);xh(z(ye),{get domain(){return U(u)},get tokens(){return r},get overrides(){return U(s)},onSet:te,onReset:ne,onBulkChange:A,onApplyTheme:j,onSelectDomain:e=>{R(u,e,!0)},onResetAll:M}),F(ye),F(pe);var be=V(pe,2);kl(z(be),{get overrides(){return U(s)},get previewTheme(){return U(m)},get previewWidth(){return U(h)},get previewMotion(){return U(g)},get previewTemplate(){return U(_)},onThemeChange:e=>{R(m,e,!0)},onWidthChange:e=>{R(h,e,!0)},onMotionChange:e=>{R(g,e,!0)},onTemplateChange:e=>{R(_,e,!0)}}),F(be),F(de);var xe=V(de,2);{let e=I(()=>i[U(u)]??U(u));us(xe,{get overridesCount(){return U(v)},get domain(){return U(e)}})}var Se=V(xe,2),Ce=e=>{kh(e,{get tokens(){return r},get overrides(){return U(s)},onNavigate:e=>{R(u,e,!0)},onClose:()=>{R(d,!1)}})};J(Se,e=>{U(d)&&e(Ce)}),F(N),H(()=>{X(N,1,`${o?`w-full h-full`:`w-screen h-screen`} flex flex-col overflow-hidden bg-slate-50 dark:bg-[#0a0a0f] text-slate-800 dark:text-slate-200 font-sans`),X(fe,1,`shrink-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),X(pe,1,`flex-1 min-w-0 md:flex-none md:w-[360px] bg-slate-50 dark:bg-[#0c0c15] border-r border-black/8 dark:border-white/8 flex-col min-h-0 ${U(p)===`preview`?`hidden md:flex`:`flex`}`),q(ge,i[U(u)]??U(u)),X(be,1,`flex-1 flex-col min-h-0 min-w-0 ${U(p)===`controls`?`hidden md:flex`:`flex`}`)}),K(e,N),We()}Br([`click`]);var Fh=document.getElementById(`app`)??document.getElementById(`slashed-admin-app`);Fh&&(Fh.innerHTML=``,qo(Fh),Zr(Ph,{target:Fh}));var Ih=G(``),Lh=G(` `),Rh=G(``),zh=G(` 
/
 SLASHED    
    
    
 
 
 
 
 
  
`,1);function Bh(e,t){Ue(t,!0);let n=_m.tokens??_m,r=`slashed-overlay/open`,i=`slashed-overlay/domain`,a={home:`Home`,colors:`Colors`,typography:`Typography`,spacing:`Spacing`,layout:`Layout`,borders:`Borders`,shadows:`Shadows`,motion:`Motion`,effects:`Effects`,macros:`Macros`,misc:`Misc`,themes:`Themes`,wcag:`WCAG`,setup:`Install`,cheatsheet:`Classes`};function o(e){let t={};for(let n of Object.keys(e)){let e=jl(n);t[e]=(t[e]??0)+1}return t}function s(e,t){try{let n=localStorage.getItem(e);return n===null?t:n!==`false`}catch{return t}}function c(e,t){try{return localStorage.getItem(e)??t}catch{return t}}let l=L(nn(s(r,!0))),u=L(nn(typeof window<`u`?window.matchMedia(`(max-width: 768px)`).matches:!1)),d=L(nn(Jc())),f=L(nn([])),p=L(nn([])),m=L(nn(c(i,`home`))),h=L(!1),g=L(!1),_=L(null),v=L(null);On(()=>{U(g)&&br().then(()=>U(_)?.focus())});let y=I(()=>Object.keys(U(d)).length),b=I(()=>o(U(d))),x=I(()=>U(f).length>0),S=I(()=>U(p).length>0);function C(e,t){let n=Object.keys(e);return n.length===Object.keys(t).length?n.every(n=>e[n]===t[n]):!1}let w=L(nn(Cr(()=>({...U(d)})))),T=L(`idle`),E=I(()=>!C(U(d),U(w))),D=null;function O(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e)return;let t=`var(--wp-admin--admin-bar--height, 32px)`;e.style.position=`fixed`,e.style.right=`0`,e.style.zIndex=`99998`,e.style.pointerEvents=`auto`,U(l)?(e.style.top=t,e.style.width=U(u)?`100vw`:`420px`,e.style.height=`calc(100vh - ${t})`):(e.style.top=`calc(${t} + 16px)`,e.style.width=`40px`,e.style.height=`64px`)}On(()=>{let e=U(d),t=requestAnimationFrame(()=>{Yc(e),ll(document)});return()=>cancelAnimationFrame(t)}),On(()=>{!U(u)&&U(l)?document.documentElement.classList.add(`sf-panel-active`):document.documentElement.classList.remove(`sf-panel-active`)}),On(()=>{O()}),On(()=>{try{localStorage.setItem(r,String(U(l)))}catch{}}),On(()=>{try{localStorage.setItem(i,U(m))}catch{}});function k(){R(l,!U(l))}function ee(e){let t=U(d),n=typeof e==`function`?e(t):e;C(t,n)||(R(f,[...U(f).slice(-49),t],!0),R(p,[],!0),(U(T)===`saved`||U(T)===`error`)&&R(T,`idle`)),R(d,n,!0)}async function te(){if(!U(E)||U(T)===`saving`)return;let e={...U(d)};R(T,`saving`);try{await Qc(U(d)),C(U(d),e)?(R(w,e,!0),R(T,`saved`),D&&clearTimeout(D),D=setTimeout(()=>{U(T)===`saved`&&R(T,`idle`),D=null},2e3)):R(T,`idle`)}catch(e){console.warn(`slashed: save failed`,e),R(T,`error`)}}function ne(e,t){ee(n=>({...n,[e]:t}))}function A(e){ee(t=>{let n={...t};return delete n[e],n})}function j(e){ee(t=>{let n={...t};for(let[t,r]of Object.entries(e))r===null?delete n[t]:n[t]=r;return n})}function M(e){ee({...e})}function re(){R(g,!0)}function ie(){R(g,!1),ee({})}function ae(){R(g,!1)}function oe(){if(!U(f).length)return;let e=U(f)[U(f).length-1];R(p,[U(d),...U(p)],!0),R(f,U(f).slice(0,-1),!0),R(d,e,!0)}function se(){if(!U(p).length)return;let e=U(p)[0];R(f,[...U(f),U(d)],!0),R(p,U(p).slice(1),!0),R(d,e,!0)}function N(){let e=yc(U(d),{mode:`layer`,banner:!0}),t=new Blob([e],{type:`text/css`}),n=URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=`slashed-overrides.css`,r.click(),URL.revokeObjectURL(n)}function ce(){let e=document.createElement(`input`);e.type=`file`,e.accept=`.css,.json`,e.onchange=e=>{let t=e.target.files?.[0];if(!t)return;let n=new FileReader;n.onload=e=>{let n=e.target?.result;if(n)if(t.name.endsWith(`.json`))try{let e=JSON.parse(n);typeof e==`object`&&e&&!Array.isArray(e)&&ee(Object.fromEntries(Object.entries(e).filter(([e,t])=>typeof t==`string`&&/^--sf-[\w-]+$/.test(e))))}catch{}else{let e={},t=/(--sf-[\w-]+)\s*:\s*([^;]+);/g,r;for(;(r=t.exec(n))!==null;)e[r[1].trim()]=r[2].trim();Object.keys(e).length&&ee(t=>({...t,...e}))}},n.readAsText(t)},e.click()}ra(()=>{let e=document.createElement(`style`);e.id=`sf-panel-push`,e.textContent=[`html { transition: padding-right 200ms ease-in-out; }`,`html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }`].join(`
+`),document.head.appendChild(e);let t=window.matchMedia(`(max-width: 768px)`),n=e=>{R(u,e.matches,!0)};t.addEventListener(`change`,n);let r=e=>{let t=e.key.toLowerCase();U(l)&&((e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`z`&&(e.preventDefault(),oe()),(e.ctrlKey||e.metaKey)&&(e.shiftKey&&t===`z`||t===`y`)&&(e.preventDefault(),se()),(e.ctrlKey||e.metaKey)&&!e.repeat&&t===`k`&&(e.preventDefault(),R(h,!U(h))),(e.ctrlKey||e.metaKey)&&!e.shiftKey&&t===`s`&&(e.preventDefault(),te()))},i=()=>k();return window.addEventListener(`keydown`,r),document.addEventListener(`slashed:toggle-overlay`,i),()=>{e.remove(),document.documentElement.classList.remove(`sf-panel-active`),t.removeEventListener(`change`,n),window.removeEventListener(`keydown`,r),document.removeEventListener(`slashed:toggle-overlay`,i),D&&clearTimeout(D)}});var le=zh(),ue=B(le),de=e=>{var t=Ih();ya(V(z(t),2),{class:`w-3 h-3 opacity-70 rotate-180`}),F(t),W(`click`,t,k),K(e,t)};J(ue,e=>{U(l)||e(de)});var fe=V(ue,2);let pe,me;var he=z(fe),ge=V(z(he),4),_e=z(ge,!0);F(ge);var ve=V(ge,2),ye=e=>{var t=Lh(),n=z(t,!0);F(t),H(()=>q(n,U(y))),K(e,t)};J(ve,e=>{U(y)>0&&e(ye)});var be=V(ve,4),xe=z(be),Se=e=>{Po(e,{class:`w-3 h-3 animate-spin`})},Ce=e=>{_a(e,{class:`w-3 h-3`})},we=e=>{Ro(e,{class:`w-3 h-3`})},Te=e=>{ro(e,{class:`w-3 h-3`})};J(xe,e=>{U(T)===`saving`?e(Se):U(T)===`saved`?e(Ce,1):U(T)===`error`?e(we,2):e(Te,-1)}),F(be);var Ee=V(be,2);Oo(z(Ee),{class:`w-3 h-3`}),F(Ee);var De=V(Ee,2);Ya(z(De),{class:`w-3 h-3`}),F(De);var P=V(De,4);ja(z(P),{class:`w-3 h-3`}),F(P);var Oe=V(P,2);Ta(z(Oe),{class:`w-3 h-3`}),F(Oe);var ke=V(Oe,2);wo(z(ke),{class:`w-3 h-3`}),F(ke);var Ae=V(ke,4);ya(z(Ae),{class:`w-3 h-3`}),F(Ae),F(he);var je=V(he,2),Me=z(je);ss(Me,{get activeId(){return U(m)},onSelect:e=>{R(m,e,!0)},get overridesByDomain(){return U(b)}});var Ne=V(Me,2),Pe=z(Ne),Fe=z(Pe),Ie=z(Fe,!0);F(Fe),F(Pe);var Le=V(Pe,2);xh(z(Le),{get domain(){return U(m)},get tokens(){return n},get overrides(){return U(d)},onSet:ne,onReset:A,onBulkChange:j,onApplyTheme:M,onSelectDomain:e=>{R(m,e,!0)},onResetAll:re}),F(Le),F(Ne),F(je);var Re=V(je,2),ze=e=>{kh(e,{get tokens(){return n},get overrides(){return U(d)},onNavigate:e=>{R(m,e,!0)},onClose:()=>{R(h,!1)}})};J(Re,e=>{U(h)&&e(ze)});var Be=V(Re,2),Ve=e=>{var t=Rh(),n=z(t),r=V(z(n),2),i=z(r);F(r);var a=V(r,2),o=z(a);Zi(o,e=>R(_,e),()=>U(_));var s=V(o,2);Zi(s,e=>R(v,e),()=>U(v)),F(a),F(n),F(t),H(()=>q(i,`This will clear all ${U(y)??``} customisation${U(y)===1?``:`s`}.
+          You can still undo this before saving.`)),W(`keydown`,t,e=>{e.key===`Escape`&&(e.stopPropagation(),ae()),e.key===`Tab`&&(e.preventDefault(),document.activeElement===U(_)?U(v)?.focus():U(_)?.focus())}),W(`click`,o,ae),W(`click`,s,ie),K(e,t)};J(Be,e=>{U(g)&&e(Ve)}),F(fe),H(e=>{pe=X(fe,1,`dark fixed right-0 z-[99998] pointer-events-auto flex flex-col bg-[#0a0a0f] text-slate-200 font-sans shadow-2xl shadow-black/60 border-l border-white/8 transition-transform duration-200 ease-in-out`,null,pe,{"translate-x-full":!U(l),"translate-x-0":U(l),"pointer-events-none":!U(l)}),me=Z(fe,`top: var(--wp-admin--admin-bar--height, 32px); width: ${U(u)?`100vw`:`420px`}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,me,{visibility:U(l)?void 0:`hidden`}),Q(fe,`aria-hidden`,!U(l)),fe.inert=!U(l)||void 0,q(_e,a[U(m)]??U(m)),be.disabled=!U(E)||U(T)===`saving`,Q(be,`title`,U(T)===`error`?`Save failed — click to retry`:U(E)?`Save changes (Ctrl+S)`:`No unsaved changes`),Q(be,`aria-label`,U(T)===`saving`?`Saving changes`:U(T)===`error`?`Save failed`:U(E)?`Save changes`:`No unsaved changes`),X(be,1,e),Ee.disabled=!U(x),De.disabled=!U(S),Oe.disabled=U(y)===0,ke.disabled=U(y)===0,q(Ie,a[U(m)]??U(m))},[()=>yi([`p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none`,U(T)===`error`?`text-red-400`:U(T)===`saved`?`text-emerald-300`:U(E)?`text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10`:`text-slate-500 opacity-40`].join(` `))]),W(`click`,be,te),W(`click`,Ee,oe),W(`click`,De,se),W(`click`,P,ce),W(`click`,Oe,N),W(`click`,ke,re),W(`click`,Ae,k),K(e,le),We()}Br([`click`,`keydown`]);function Vh(){return window.slashedApp?.cssUrl}function Hh(e){try{return new URL(e,location.href).origin===location.origin}catch{return!1}}function Uh(){let e=document.getElementById(`slashed-frontend-overlay`);if(!e||e.shadowRoot)return;let t=e.attachShadow({mode:`open`}),n=document.createElement(`div`);t.appendChild(n);let r=!1,i=()=>{r||(Zr(Bh,{target:n}),r=!0,e.setAttribute(`data-slashed-ready`,``))},a=Vh();if(a&&Hh(a)){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=a;let n=setTimeout(i,5e3),r=()=>{clearTimeout(n),i()};e.addEventListener(`load`,r),e.addEventListener(`error`,r),t.appendChild(e)}else i()}document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,Uh):Uh();
 //# sourceMappingURL=app.js.map
\ No newline at end of file