diff --git a/SLASHED-for-WP/admin-app/src/AppOverlay.svelte b/SLASHED-for-WP/admin-app/src/AppOverlay.svelte
index 6dafe662..a8101a3e 100644
--- a/SLASHED-for-WP/admin-app/src/AppOverlay.svelte
+++ b/SLASHED-for-WP/admin-app/src/AppOverlay.svelte
@@ -81,6 +81,7 @@
     host.style.position = 'fixed';
     host.style.right = '0';
     host.style.zIndex = '100000';
+    host.style.pointerEvents = 'auto';
 
     if (isOpen) {
       host.style.top = adminBarHeight;
@@ -287,6 +288,7 @@
   class="fixed right-0 z-[100000] 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"
   class:translate-x-full={!isOpen}
   class:translate-x-0={isOpen}
+  style:visibility={isOpen ? undefined : 'hidden'}
   style="top: var(--wp-admin--admin-bar--height, 32px); width: {isMobile ? '100vw' : '420px'}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));"
   aria-hidden={!isOpen}
   inert={!isOpen || undefined}
diff --git a/SLASHED-for-WP/assets/admin-app/app.js b/SLASHED-for-WP/assets/admin-app/app.js
index d7081339..d5d1199f 100644
--- a/SLASHED-for-WP/assets/admin-app/app.js
+++ b/SLASHED-for-WP/assets/admin-app/app.js
@@ -1,195 +1,195 @@
-var Kr=Array.isArray,Ni=Array.prototype.indexOf,Ws=Array.prototype.includes,tr=Array.from,Fi=Object.defineProperty,mo=Object.getOwnPropertyDescriptor,ol=Object.getOwnPropertyDescriptors,ji=Object.prototype,Gi=Array.prototype,Wr=Object.getPrototypeOf,fn=Object.isExtensible;function is(a){return typeof a=="function"}const Hi=()=>{};function qi(a){return a()}function Lr(a){for(var e=0;e<a.length;e++)a[e]()}function sl(){var a,e,o=new Promise((n,l)=>{a=n,e=l});return{promise:o,resolve:a,reject:e}}function Pa(a,e){if(Array.isArray(a))return a;if(e===void 0||!(Symbol.iterator in a))return Array.from(a);const o=[];for(const n of a)if(o.push(n),o.length===e)break;return o}const ya=2,Jo=4,Us=8,Yr=1<<24,ja=16,Va=32,go=64,Pr=128,Ra=512,ma=1024,ga=2048,eo=4096,Oa=8192,za=16384,os=32768,Ir=1<<25,bo=65536,Ys=1<<17,Vi=1<<18,ss=1<<19,rl=1<<20,Za=1<<25,Do=65536,Zs=1<<21,Wo=1<<22,vo=1<<23,Ja=Symbol("$state"),nl=Symbol("legacy props"),Ki=Symbol(""),ll=Symbol("attributes"),Br=Symbol("class"),Ur=Symbol("style"),zr=Symbol("text"),js=Symbol("form reset"),ar=new class extends Error{name="StaleReactionError";message="The reaction that called `getAbortSignal()` was re-run or destroyed"},or=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function Wi(a){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function Yi(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function Zi(a,e,o){throw new Error("https://svelte.dev/e/each_key_duplicate")}function Ji(a){throw new Error("https://svelte.dev/e/effect_in_teardown")}function Xi(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function Qi(a){throw new Error("https://svelte.dev/e/effect_orphan")}function $i(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function ec(a){throw new Error("https://svelte.dev/e/props_invalid_value")}function tc(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function ac(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function oc(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function sc(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const rc=1,nc=2,il=4,lc=8,ic=16,cc=1,dc=2,cl=4,fc=8,uc=16,pc=1,mc=2,ua=Symbol("uninitialized"),dl="http://www.w3.org/1999/xhtml",vc="http://www.w3.org/2000/svg",hc="@attach";function gc(){console.warn("https://svelte.dev/e/derived_inert")}function bc(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function yc(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function fl(a){return a===this.v}function xc(a,e){return a!=a?e==e:a!==e||a!==null&&typeof a=="object"||typeof a=="function"}function ul(a){return!xc(a,this.v)}let rs=!1;function kc(){rs=!0}let na=null;function Xo(a){na=a}function Qt(a,e=!1,o){na={p:na,i:!1,c:null,e:null,s:a,x:null,r:Ft,l:rs&&!e?{s:null,u:null,$:[]}:null}}function $t(a){var e=na,o=e.e;if(o!==null){e.e=null;for(var n of o)El(n)}return e.i=!0,na=e.p,{}}function ns(){return!rs||na!==null&&na.l===null}let Uo=[];function pl(){var a=Uo;Uo=[],Lr(a)}function no(a){if(Uo.length===0&&!ks){var e=Uo;queueMicrotask(()=>{e===Uo&&pl()})}Uo.push(a)}function wc(){for(;Uo.length>0;)pl()}function ml(a){var e=Ft;if(e===null)return Jt.f|=vo,a;if((e.f&os)===0&&(e.f&Jo)===0)throw a;po(a,e)}function po(a,e){if(!(e!==null&&(e.f&za)!==0)){for(;e!==null;){if((e.f&Pr)!==0){if((e.f&os)===0)throw a;try{e.b.error(a);return}catch(o){a=o}}e=e.parent}throw a}}const _c=-7169;function fa(a,e){a.f=a.f&_c|e}function Zr(a){(a.f&Ra)!==0||a.deps===null?fa(a,ma):fa(a,eo)}function vl(a){if(a!==null)for(const e of a)(e.f&ya)===0||(e.f&Do)===0||(e.f^=Do,vl(e.deps))}function hl(a,e,o){(a.f&ga)!==0?e.add(a):(a.f&eo)!==0&&o.add(a),vl(a.deps),fa(a,ma)}let Rs=!1;function Cc(a){var e=Rs;try{return Rs=!1,[a(),Rs]}finally{Rs=e}}function Oc(a){let e=0,o=xo(0),n;return()=>{en()&&(t(o),tn(()=>(e===0&&(n=ko(()=>a(()=>ws(o)))),e+=1,()=>{no(()=>{e-=1,e===0&&(n?.(),n=void 0,ws(o))})})))}}var Sc=bo|ss;function Lc(a,e,o,n){new Pc(a,e,o,n)}class Pc{parent;is_pending=!1;transform_error;#t;#n=null;#e;#i;#o;#r=null;#a=null;#l=null;#s=null;#m=0;#c=0;#d=!1;#u=new Set;#h=new Set;#f=null;#b=Oc(()=>(this.#f=xo(this.#m),()=>{this.#f=null}));constructor(e,o,n,l){this.#t=e,this.#e=o,this.#i=i=>{var c=Ft;c.b=this,c.f|=Pr,n(i)},this.parent=Ft.b,this.transform_error=l??this.parent?.transform_error??(i=>i),this.#o=ls(()=>{this.#y()},Sc)}#g(){try{this.#r=La(()=>this.#i(this.#t))}catch(e){this.error(e)}}#k(e){const o=this.#e.failed;o&&(this.#l=La(()=>{o(this.#t,()=>e,()=>()=>{})}))}#w(){const e=this.#e.pending;e&&(this.is_pending=!0,this.#a=La(()=>e(this.#t)),no(()=>{var o=this.#s=document.createDocumentFragment(),n=Xa();o.append(n),this.#r=this.#x(()=>La(()=>this.#i(n))),this.#c===0&&(this.#t.before(o),this.#s=null,Eo(this.#a,()=>{this.#a=null}),this.#p(Tt))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#c=0,this.#m=0,this.#r=La(()=>{this.#i(this.#t)}),this.#c>0){var e=this.#s=document.createDocumentFragment();on(this.#r,e);const o=this.#e.pending;this.#a=La(()=>o(this.#t))}else this.#p(Tt)}catch(o){this.error(o)}}#p(e){this.is_pending=!1,e.transfer_effects(this.#u,this.#h)}defer_effect(e){hl(e,this.#u,this.#h)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#e.pending}#x(e){var o=Ft,n=Jt,l=na;Da(this.#o),Ta(this.#o),Xo(this.#o.ctx);try{return yo.ensure(),e()}catch(i){return ml(i),null}finally{Da(o),Ta(n),Xo(l)}}#v(e,o){if(!this.has_pending_snippet()){this.parent&&this.parent.#v(e,o);return}this.#c+=e,this.#c===0&&(this.#p(o),this.#a&&Eo(this.#a,()=>{this.#a=null}),this.#s&&(this.#t.before(this.#s),this.#s=null))}update_pending_count(e,o){this.#v(e,o),this.#m+=e,!(!this.#f||this.#d)&&(this.#d=!0,no(()=>{this.#d=!1,this.#f&&$o(this.#f,this.#m)}))}get_effect_pending(){return this.#b(),t(this.#f)}error(e){if(!this.#e.onerror&&!this.#e.failed)throw e;Tt?.is_fork?(this.#r&&Tt.skip_effect(this.#r),this.#a&&Tt.skip_effect(this.#a),this.#l&&Tt.skip_effect(this.#l),Tt.oncommit(()=>{this.#_(e)})):this.#_(e)}#_(e){this.#r&&(ba(this.#r),this.#r=null),this.#a&&(ba(this.#a),this.#a=null),this.#l&&(ba(this.#l),this.#l=null);var o=this.#e.onerror;let n=this.#e.failed;var l=!1,i=!1;const c=()=>{if(l){yc();return}l=!0,i&&sc(),this.#l!==null&&Eo(this.#l,()=>{this.#l=null}),this.#x(()=>{this.#y()})},d=p=>{try{i=!0,o?.(p,c),i=!1}catch(m){po(m,this.#o&&this.#o.parent)}n&&(this.#l=this.#x(()=>{try{return La(()=>{var m=Ft;m.b=this,m.f|=Pr,n(this.#t,()=>p,()=>c)})}catch(m){return po(m,this.#o.parent),null}}))};no(()=>{var p;try{p=this.transform_error(e)}catch(m){po(m,this.#o&&this.#o.parent);return}p!==null&&typeof p=="object"&&typeof p.then=="function"?p.then(d,m=>po(m,this.#o&&this.#o.parent)):d(p)})}}function gl(a,e,o,n){const l=ns()?Qo:Jr;var i=a.filter(k=>!k.settled),c=e.map(l);if(o.length===0&&i.length===0){n(c);return}var d=Ft,p=Ic(),m=i.length===1?i[0].promise:i.length>1?Promise.all(i.map(k=>k.promise)):null;function h(k){if((d.f&za)===0){p();try{n([...c,...k])}catch(w){po(w,d)}Js()}}var v=bl();if(o.length===0){m.then(()=>h([])).finally(v);return}function y(){Promise.all(o.map(k=>Bc(k))).then(h).catch(k=>po(k,d)).finally(v)}m?m.then(()=>{p(),y(),Js()}):y()}function Ic(){var a=Ft,e=Jt,o=na,n=Tt;return function(i=!0){Da(a),Ta(e),Xo(o),i&&(a.f&za)===0&&(n?.activate(),n?.apply())}}function Js(a=!0){Da(null),Ta(null),Xo(null),a&&Tt?.deactivate()}function bl(){var a=Ft,e=a.b,o=Tt,n=!!e?.is_rendered();return e?.update_pending_count(1,o),o.increment(n,a),()=>{e?.update_pending_count(-1,o),o.decrement(n,a)}}function Qo(a){var e=ya|ga;return Ft!==null&&(Ft.f|=ss),{ctx:na,deps:null,effects:null,equals:fl,f:e,fn:a,reactions:null,rv:0,v:ua,wv:0,parent:Ft,ac:null}}const bs=Symbol("obsolete");function Bc(a,e,o){let n=Ft;n===null&&Yi();var l=void 0,i=xo(ua),c=!Jt,d=new Set;return Vc(()=>{var p=Ft,m=sl();l=m.promise;try{Promise.resolve(a()).then(m.resolve,k=>{k!==ar&&m.reject(k)}).finally(Js)}catch(k){m.reject(k),Js()}var h=Tt;if(c){if((p.f&os)!==0)var v=bl();if(n.b?.is_rendered())h.async_deriveds.get(p)?.reject(bs);else for(const k of d.values())k.reject(bs);d.add(m),h.async_deriveds.set(p,m)}const y=(k,w=void 0)=>{v?.(),d.delete(m),w!==bs&&(h.activate(),w?(i.f|=vo,$o(i,w)):((i.f&vo)!==0&&(i.f^=vo),$o(i,k)),h.deactivate())};m.promise.then(y,k=>y(null,k||"unknown"))}),rr(()=>{for(const p of d)p.reject(bs)}),new Promise(p=>{function m(h){function v(){h===l?p(i):m(l)}h.then(v,v)}m(l)})}function u(a){const e=Qo(a);return Fl(e),e}function Jr(a){const e=Qo(a);return e.equals=ul,e}function Uc(a){var e=a.effects;if(e!==null){a.effects=null;for(var o=0;o<e.length;o+=1)ba(e[o])}}function Xr(a){var e,o=Ft,n=a.parent;if(!io&&n!==null&&a.v!==ua&&(n.f&(za|Oa))!==0)return gc(),a.v;Da(n);try{a.f&=~Do,Uc(a),e=ql(a)}finally{Da(o)}return e}function yl(a){var e=Xr(a);if(!a.equals(e)&&(a.wv=Gl(),(!Tt?.is_fork||a.deps===null)&&(Tt!==null?(Tt.capture(a,e,!0),Ar?.capture(a,e,!0)):a.v=e,a.deps===null))){fa(a,ma);return}io||(Ga!==null?(en()||Tt?.is_fork)&&Ga.set(a,e):Zr(a))}function zc(a){if(a.effects!==null)for(const e of a.effects)(e.teardown||e.ac)&&(e.teardown?.(),e.ac?.abort(ar),e.fn!==null&&(e.teardown=Hi),e.ac=null,Ss(e,0),an(e))}function xl(a){if(a.effects!==null)for(const e of a.effects)e.teardown&&e.fn!==null&&ts(e)}let fr=null,jo=null,Tt=null,Ar=null,Ga=null,Er=null,ks=!1,ur=!1,Vo=null,Gs=null;var un=0;let Ac=1;class yo{id=Ac++;#t=!1;linked=!0;#n=null;#e=null;async_deriveds=new Map;current=new Map;previous=new Map;#i=new Set;#o=new Set;#r=0;#a=new Map;#l=null;#s=[];#m=[];#c=new Set;#d=new Set;#u=new Map;#h=new Set;is_fork=!1;#f=!1;constructor(){jo===null?fr=jo=this:(jo.#e=this,this.#n=jo),jo=this}#b(){if(this.is_fork)return!0;for(const n of this.#a.keys()){for(var e=n,o=!1;e.parent!==null;){if(this.#u.has(e)){o=!0;break}e=e.parent}if(!o)return!0}return!1}skip_effect(e){this.#u.has(e)||this.#u.set(e,{d:[],m:[]}),this.#h.delete(e)}unskip_effect(e,o=n=>this.schedule(n)){var n=this.#u.get(e);if(n){this.#u.delete(e);for(var l of n.d)fa(l,ga),o(l);for(l of n.m)fa(l,eo),o(l)}this.#h.add(e)}#g(){this.#t=!0,un++>1e3&&(this.#v(),Rc());for(const p of this.#c)this.#d.delete(p),fa(p,ga),this.schedule(p);for(const p of this.#d)fa(p,eo),this.schedule(p);const e=this.#s;this.#s=[],this.apply();var o=Vo=[],n=[],l=Gs=[];for(const p of e)try{this.#k(p,o,n)}catch(m){throw _l(p),this.#b()||this.discard(),m}if(Tt=null,l.length>0){var i=yo.ensure();for(const p of l)i.schedule(p)}if(Vo=null,Gs=null,this.#b()){this.#p(n),this.#p(o);for(const[p,m]of this.#u)wl(p,m);l.length>0&&Tt.#g();return}const c=this.#w();if(c){this.#p(n),this.#p(o),c.#y(this);return}this.#c.clear(),this.#d.clear();for(const p of this.#i)p(this);this.#i.clear(),Ar=this,pn(n),pn(o),Ar=null,this.#l?.resolve();var d=Tt;if(this.#r===0&&(this.#s.length===0||d!==null)&&this.#v(),this.#s.length>0)if(d!==null){const p=d;p.#s.push(...this.#s.filter(m=>!p.#s.includes(m)))}else d=this;d!==null&&d.#g()}#k(e,o,n){e.f^=ma;for(var l=e.first;l!==null;){var i=l.f,c=(i&(Va|go))!==0,d=c&&(i&ma)!==0,p=d||(i&Oa)!==0||this.#u.has(l);if(!p&&l.fn!==null){c?l.f^=ma:(i&Jo)!==0?o.push(l):As(l)&&((i&ja)!==0&&this.#d.add(l),ts(l));var m=l.first;if(m!==null){l=m;continue}}for(;l!==null;){var h=l.next;if(h!==null){l=h;break}l=l.parent}}}#w(){for(var e=this.#n;e!==null;){if(!e.is_fork){for(const[o,[,n]]of this.current)if(e.current.has(o)&&!n)return e}e=e.#n}return null}#y(e){for(const[n,l]of e.current)!this.previous.has(n)&&e.previous.has(n)&&this.previous.set(n,e.previous.get(n)),this.current.set(n,l);for(const[n,l]of e.async_deriveds){const i=this.async_deriveds.get(n);i&&l.promise.then(i.resolve).catch(i.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#c,e.#d);const o=n=>{var l=n.reactions;if(l!==null)for(const d of l){var i=d.f;if((i&ya)!==0)o(d);else{var c=d;i&(Wo|ja)&&!this.async_deriveds.has(c)&&(this.#d.delete(c),fa(c,ga),this.schedule(c))}}};for(const n of this.current.keys())o(n);this.oncommit(()=>e.discard()),e.#v(),Tt=this,this.#g()}#p(e){for(var o=0;o<e.length;o+=1)hl(e[o],this.#c,this.#d)}capture(e,o,n=!1){e.v!==ua&&!this.previous.has(e)&&this.previous.set(e,e.v),(e.f&vo)===0&&(this.current.set(e,[o,n]),Ga?.set(e,o)),this.is_fork||(e.v=o)}activate(){Tt=this}deactivate(){Tt=null,Ga=null}flush(){try{ur=!0,Tt=this,this.#g()}finally{un=0,Er=null,Vo=null,Gs=null,ur=!1,Tt=null,Ga=null,Ao.clear()}}discard(){for(const e of this.#o)e(this);this.#o.clear();for(const e of this.async_deriveds.values())e.reject(bs);this.#v(),this.#l?.resolve()}register_created_effect(e){this.#m.push(e)}#x(){for(let v=fr;v!==null;v=v.#e){var e=v.id<this.id,o=[];for(const[y,[k,w]]of this.current){if(v.current.has(y)){var n=v.current.get(y)[0];if(e&&k!==n)v.current.set(y,[k,w]);else continue}o.push(y)}if(e)for(const[y,k]of this.async_deriveds){const w=v.async_deriveds.get(y);w&&k.promise.then(w.resolve).catch(w.reject)}var l=[...v.current.keys()].filter(y=>!v.current.get(y)[1]);if(!(!v.#t||l.length===0)){var i=l.filter(y=>!this.current.has(y));if(i.length===0)e&&v.discard();else if(o.length>0){if(e)for(const y of this.#h)v.unskip_effect(y,k=>{(k.f&(ja|Wo))!==0?v.schedule(k):v.#p([k])});v.activate();var c=new Set,d=new Map;for(var p of o)kl(p,i,c,d);d=new Map;var m=[...v.current].filter(([y,k])=>{const w=this.current.get(y);return w?w[0]!==k[0]||w[1]!==k[1]:!0}).map(([y])=>y);if(m.length>0)for(const y of this.#m)(y.f&(za|Oa|Ys))===0&&Qr(y,m,d)&&((y.f&(Wo|ja))!==0?(fa(y,ga),v.schedule(y)):v.#c.add(y));if(v.#s.length>0&&!v.#f){v.apply();for(var h of v.#s)v.#k(h,[],[]);v.#s=[]}v.deactivate()}}}}increment(e,o){if(this.#r+=1,e){let n=this.#a.get(o)??0;this.#a.set(o,n+1)}}decrement(e,o){if(this.#r-=1,e){let n=this.#a.get(o)??0;n===1?this.#a.delete(o):this.#a.set(o,n-1)}this.#f||(this.#f=!0,no(()=>{this.#f=!1,this.linked&&this.flush()}))}transfer_effects(e,o){for(const n of e)this.#c.add(n);for(const n of o)this.#d.add(n);e.clear(),o.clear()}oncommit(e){this.#i.add(e)}ondiscard(e){this.#o.add(e)}settled(){return(this.#l??=sl()).promise}static ensure(){if(Tt===null){const e=Tt=new yo;!ur&&!ks&&no(()=>{e.#t||e.flush()})}return Tt}apply(){{Ga=null;return}}schedule(e){if(Er=e,e.b?.is_pending&&(e.f&(Jo|Us|Yr))!==0&&(e.f&os)===0){e.b.defer_effect(e);return}for(var o=e;o.parent!==null;){o=o.parent;var n=o.f;if(Vo!==null&&o===Ft&&(Jt===null||(Jt.f&ya)===0))return;if((n&(go|Va))!==0){if((n&ma)===0)return;o.f^=ma}}this.#s.push(o)}#v(){if(this.linked){var e=this.#n,o=this.#e;e===null?fr=o:e.#e=o,o===null?jo=e:o.#n=e,this.linked=!1}}}function Ec(a){var e=ks;ks=!0;try{for(var o;;){if(wc(),Tt===null)return o;Tt.flush()}}finally{ks=e}}function Rc(){try{$i()}catch(a){po(a,Er)}}let so=null;function pn(a){var e=a.length;if(e!==0){for(var o=0;o<e;){var n=a[o++];if((n.f&(za|Oa))===0&&As(n)&&(so=new Set,ts(n),n.deps===null&&n.first===null&&n.nodes===null&&n.teardown===null&&n.ac===null&&Dl(n),so?.size>0)){Ao.clear();for(const l of so){if((l.f&(za|Oa))!==0)continue;const i=[l];let c=l.parent;for(;c!==null;)so.has(c)&&(so.delete(c),i.push(c)),c=c.parent;for(let d=i.length-1;d>=0;d--){const p=i[d];(p.f&(za|Oa))===0&&ts(p)}}so.clear()}}so=null}}function kl(a,e,o,n){if(!o.has(a)&&(o.add(a),a.reactions!==null))for(const l of a.reactions){const i=l.f;(i&ya)!==0?kl(l,e,o,n):(i&(Wo|ja))!==0&&(i&ga)===0&&Qr(l,e,n)&&(fa(l,ga),$r(l))}}function Qr(a,e,o){const n=o.get(a);if(n!==void 0)return n;if(a.deps!==null)for(const l of a.deps){if(Ws.call(e,l))return!0;if((l.f&ya)!==0&&Qr(l,e,o))return o.set(l,!0),!0}return o.set(a,!1),!1}function $r(a){Tt.schedule(a)}function wl(a,e){if(!((a.f&Va)!==0&&(a.f&ma)!==0)){(a.f&ga)!==0?e.d.push(a):(a.f&eo)!==0&&e.m.push(a),fa(a,ma);for(var o=a.first;o!==null;)wl(o,e),o=o.next}}function _l(a){fa(a,ma);for(var e=a.first;e!==null;)_l(e),e=e.next}let Xs=new Set;const Ao=new Map;let Cl=!1;function xo(a,e){var o={f:0,v:a,reactions:null,equals:fl,rv:0,wv:0};return o}function G(a,e){const o=xo(a);return Fl(o),o}function Tc(a,e=!1,o=!0){const n=xo(a);return e||(n.equals=ul),rs&&o&&na!==null&&na.l!==null&&(na.l.s??=[]).push(n),n}function O(a,e,o=!1){Jt!==null&&(!Ha||(Jt.f&Ys)!==0)&&ns()&&(Jt.f&(ya|ja|Wo|Ys))!==0&&(Qa===null||!Qa.has(a))&&oc();let n=o?da(e):e;return $o(a,n,Gs)}function $o(a,e,o=null){if(!a.equals(e)){Ao.set(a,io?e:a.v);var n=yo.ensure();if(n.capture(a,e),(a.f&ya)!==0){const l=a;(a.f&ga)!==0&&Xr(l),Ga===null&&Zr(l)}a.wv=Gl(),Ol(a,ga,o),ns()&&Ft!==null&&(Ft.f&ma)!==0&&(Ft.f&(Va|go))===0&&(Ea===null?Yc([a]):Ea.push(a)),!n.is_fork&&Xs.size>0&&!Cl&&Dc()}return e}function Dc(){Cl=!1;for(const a of Xs){(a.f&ma)!==0&&fa(a,eo);let e;try{e=As(a)}catch{e=!0}e&&ts(a)}Xs.clear()}function mn(a,e=1){var o=t(a),n=e===1?o++:o--;return O(a,o),n}function ws(a){O(a,a.v+1)}function Ol(a,e,o){var n=a.reactions;if(n!==null)for(var l=ns(),i=n.length,c=0;c<i;c++){var d=n[c],p=d.f;if(!(!l&&d===Ft)){var m=(p&ga)===0;if(m&&fa(d,e),(p&Ys)!==0)Xs.add(d);else if((p&ya)!==0){var h=d;Ga?.delete(h),(p&Do)===0&&(p&Ra&&(Ft===null||(Ft.f&Zs)===0)&&(d.f|=Do),Ol(h,eo,o))}else if(m){var v=d;(p&ja)!==0&&so!==null&&so.add(v),o!==null?o.push(v):$r(v)}}}}function da(a){if(typeof a!="object"||a===null||Ja in a)return a;const e=Wr(a);if(e!==ji&&e!==Gi)return a;var o=new Map,n=Kr(a),l=G(0),i=Ro,c=d=>{if(Ro===i)return d();var p=Jt,m=Ro;Ta(null),yn(i);var h=d();return Ta(p),yn(m),h};return n&&o.set("length",G(a.length)),new Proxy(a,{defineProperty(d,p,m){(!("value"in m)||m.configurable===!1||m.enumerable===!1||m.writable===!1)&&tc();var h=o.get(p);return h===void 0?c(()=>{var v=G(m.value);return o.set(p,v),v}):O(h,m.value,!0),!0},deleteProperty(d,p){var m=o.get(p);if(m===void 0){if(p in d){const h=c(()=>G(ua));o.set(p,h),ws(l)}}else O(m,ua),ws(l);return!0},get(d,p,m){if(p===Ja)return a;var h=o.get(p),v=p in d;if(h===void 0&&(!v||mo(d,p)?.writable)&&(h=c(()=>{var k=da(v?d[p]:ua),w=G(k);return w}),o.set(p,h)),h!==void 0){var y=t(h);return y===ua?void 0:y}return Reflect.get(d,p,m)},getOwnPropertyDescriptor(d,p){var m=Reflect.getOwnPropertyDescriptor(d,p);if(m&&"value"in m){var h=o.get(p);h&&(m.value=t(h))}else if(m===void 0){var v=o.get(p),y=v?.v;if(v!==void 0&&y!==ua)return{enumerable:!0,configurable:!0,value:y,writable:!0}}return m},has(d,p){if(p===Ja)return!0;var m=o.get(p),h=m!==void 0&&m.v!==ua||Reflect.has(d,p);if(m!==void 0||Ft!==null&&(!h||mo(d,p)?.writable)){m===void 0&&(m=c(()=>{var y=h?da(d[p]):ua,k=G(y);return k}),o.set(p,m));var v=t(m);if(v===ua)return!1}return h},set(d,p,m,h){var v=o.get(p),y=p in d;if(n&&p==="length")for(var k=m;k<v.v;k+=1){var w=o.get(k+"");w!==void 0?O(w,ua):k in d&&(w=c(()=>G(ua)),o.set(k+"",w))}if(v===void 0)(!y||mo(d,p)?.writable)&&(v=c(()=>G(void 0)),O(v,da(m)),o.set(p,v));else{y=v.v!==ua;var E=c(()=>da(m));O(v,E)}var B=Reflect.getOwnPropertyDescriptor(d,p);if(B?.set&&B.set.call(h,m),!y){if(n&&typeof p=="string"){var U=o.get("length"),P=Number(p);Number.isInteger(P)&&P>=U.v&&O(U,P+1)}ws(l)}return!0},ownKeys(d){t(l);var p=Reflect.ownKeys(d).filter(v=>{var y=o.get(v);return y===void 0||y.v!==ua});for(var[m,h]of o)h.v!==ua&&!(m in d)&&p.push(m);return p},setPrototypeOf(){ac()}})}function vn(a){try{if(a!==null&&typeof a=="object"&&Ja in a)return a[Ja]}catch{}return a}function Mc(a,e){return Object.is(vn(a),vn(e))}var hn,Sl,Ll,Pl;function Nc(){if(hn===void 0){hn=window,Sl=/Firefox/.test(navigator.userAgent);var a=Element.prototype,e=Node.prototype,o=Text.prototype;Ll=mo(e,"firstChild").get,Pl=mo(e,"nextSibling").get,fn(a)&&(a[Br]=void 0,a[ll]=null,a[Ur]=void 0,a.__e=void 0),fn(o)&&(o[zr]=void 0)}}function Xa(a=""){return document.createTextNode(a)}function es(a){return Ll.call(a)}function zs(a){return Pl.call(a)}function s(a,e){return es(a)}function fe(a,e=!1){{var o=es(a);return o instanceof Comment&&o.data===""?zs(o):o}}function r(a,e=1,o=!1){let n=a;for(;e--;)n=zs(n);return n}function Fc(a){a.textContent=""}function Il(){return!1}function Bl(a,e,o){return e==null||e===dl?o?document.createElement(a,{is:o}):document.createElement(a):o?document.createElementNS(e,a,{is:o}):document.createElementNS(e,a)}function Ul(a,e){if(e){const o=document.body;a.autofocus=!0,no(()=>{document.activeElement===o&&a.focus()})}}let gn=!1;function jc(){gn||(gn=!0,document.addEventListener("reset",a=>{Promise.resolve().then(()=>{if(!a.defaultPrevented)for(const e of a.target.elements)e[js]?.()})},{capture:!0}))}function sr(a){var e=Jt,o=Ft;Ta(null),Da(null);try{return a()}finally{Ta(e),Da(o)}}function zl(a,e,o,n=o){a.addEventListener(e,()=>sr(o));const l=a[js];l?a[js]=()=>{l(),n(!0)}:a[js]=()=>n(!0),jc()}function Al(a){Ft===null&&(Jt===null&&Qi(),Xi()),io&&Ji()}function Gc(a,e){var o=e.last;o===null?e.last=e.first=a:(o.next=a,a.prev=o,e.last=a)}function Ka(a,e){var o=Ft;o!==null&&(o.f&Oa)!==0&&(a|=Oa);var n={ctx:na,deps:null,nodes:null,f:a|ga|Ra,first:null,fn:e,last:null,next:null,parent:o,b:o&&o.b,prev:null,teardown:null,wv:0,ac:null};Tt?.register_created_effect(n);var l=n;if((a&Jo)!==0)Vo!==null?Vo.push(n):yo.ensure().schedule(n);else if(e!==null){try{ts(n)}catch(c){throw ba(n),c}l.deps===null&&l.teardown===null&&l.nodes===null&&l.first===l.last&&(l.f&ss)===0&&(l=l.first,(a&ja)!==0&&(a&bo)!==0&&l!==null&&(l.f|=bo))}if(l!==null&&(l.parent=o,o!==null&&Gc(l,o),Jt!==null&&(Jt.f&ya)!==0&&(a&go)===0)){var i=Jt;(i.effects??=[]).push(l)}return n}function en(){return Jt!==null&&!Ha}function rr(a){const e=Ka(Us,null);return fa(e,ma),e.teardown=a,e}function ha(a){Al();var e=Ft.f,o=!Jt&&(e&Va)!==0&&na!==null&&!na.i;if(o){var n=na;(n.e??=[]).push(a)}else return El(a)}function El(a){return Ka(Jo|rl,a)}function Hc(a){return Al(),Ka(Us|rl,a)}function qc(a){yo.ensure();const e=Ka(go|ss,a);return(o={})=>new Promise(n=>{o.outro?Eo(e,()=>{ba(e),n(void 0)}):(ba(e),n(void 0))})}function nr(a){return Ka(Jo,a)}function Vc(a){return Ka(Wo|ss,a)}function tn(a,e=0){return Ka(Us|e,a)}function C(a,e=[],o=[],n=[]){gl(n,e,o,l=>{Ka(Us,()=>{a(...l.map(t))})})}function ls(a,e=0){var o=Ka(ja|e,a);return o}function Rl(a,e=0){var o=Ka(Yr|e,a);return o}function La(a){return Ka(Va|ss,a)}function Tl(a){var e=a.teardown;if(e!==null){const o=io,n=Jt;bn(!0),Ta(null);try{e.call(null)}finally{bn(o),Ta(n)}}}function an(a,e=!1){var o=a.first;for(a.first=a.last=null;o!==null;){const l=o.ac;l!==null&&sr(()=>{l.abort(ar)});var n=o.next;(o.f&go)!==0?o.parent=null:ba(o,e),o=n}}function Kc(a){for(var e=a.first;e!==null;){var o=e.next;(e.f&Va)===0&&ba(e),e=o}}function ba(a,e=!0){var o=!1;(e||(a.f&Vi)!==0)&&a.nodes!==null&&a.nodes.end!==null&&(Wc(a.nodes.start,a.nodes.end),o=!0),a.f|=Ir,an(a,e&&!o),Ss(a,0);var n=a.nodes&&a.nodes.t;if(n!==null)for(const i of n)i.stop();Tl(a),a.f^=Ir,a.f|=za;var l=a.parent;l!==null&&l.first!==null&&Dl(a),a.next=a.prev=a.teardown=a.ctx=a.deps=a.fn=a.nodes=a.ac=a.b=null}function Wc(a,e){for(;a!==null;){var o=a===e?null:zs(a);a.remove(),a=o}}function Dl(a){var e=a.parent,o=a.prev,n=a.next;o!==null&&(o.next=n),n!==null&&(n.prev=o),e!==null&&(e.first===a&&(e.first=n),e.last===a&&(e.last=o))}function Eo(a,e,o=!0){var n=[];Ml(a,n,!0);var l=()=>{o&&ba(a),e&&e()},i=n.length;if(i>0){var c=()=>--i||l();for(var d of n)d.out(c)}else l()}function Ml(a,e,o){if((a.f&Oa)===0){a.f^=Oa;var n=a.nodes&&a.nodes.t;if(n!==null)for(const d of n)(d.is_global||o)&&e.push(d);for(var l=a.first;l!==null;){var i=l.next;if((l.f&go)===0){var c=(l.f&bo)!==0||(l.f&Va)!==0&&(a.f&ja)!==0;Ml(l,e,c?o:!1)}l=i}}}function Qs(a){Nl(a,!0)}function Nl(a,e){if((a.f&Oa)!==0){a.f^=Oa,(a.f&ma)===0&&(fa(a,ga),yo.ensure().schedule(a));for(var o=a.first;o!==null;){var n=o.next,l=(o.f&bo)!==0||(o.f&Va)!==0;Nl(o,l?e:!1),o=n}var i=a.nodes&&a.nodes.t;if(i!==null)for(const c of i)(c.is_global||e)&&c.in()}}function on(a,e){if(a.nodes)for(var o=a.nodes.start,n=a.nodes.end;o!==null;){var l=o===n?null:zs(o);e.append(o),o=l}}let Hs=!1,io=!1;function bn(a){io=a}let Jt=null,Ha=!1;function Ta(a){Jt=a}let Ft=null;function Da(a){Ft=a}let Qa=null;function Fl(a){Jt!==null&&(Qa??=new Set).add(a)}let Sa=null,Ia=0,Ea=null;function Yc(a){Ea=a}let jl=1,zo=0,Ro=zo;function yn(a){Ro=a}function Gl(){return++jl}function As(a){var e=a.f;if((e&ga)!==0)return!0;if(e&ya&&(a.f&=~Do),(e&eo)!==0){for(var o=a.deps,n=o.length,l=0;l<n;l++){var i=o[l];if(As(i)&&yl(i),i.wv>a.wv)return!0}(e&Ra)!==0&&Ga===null&&fa(a,ma)}return!1}function Hl(a,e,o=!0){var n=a.reactions;if(n!==null&&!(Qa!==null&&Qa.has(a)))for(var l=0;l<n.length;l++){var i=n[l];(i.f&ya)!==0?Hl(i,e,!1):e===i&&(o?fa(i,ga):(i.f&ma)!==0&&fa(i,eo),$r(i))}}function ql(a){var e=Sa,o=Ia,n=Ea,l=Jt,i=Qa,c=na,d=Ha,p=Ro,m=a.f;Sa=null,Ia=0,Ea=null,Jt=(m&(Va|go))===0?a:null,Qa=null,Xo(a.ctx),Ha=!1,Ro=++zo,a.ac!==null&&(sr(()=>{a.ac.abort(ar)}),a.ac=null);try{a.f|=Zs;var h=a.fn,v=h();a.f|=os;var y=a.deps,k=Tt?.is_fork;if(Sa!==null){var w;if(k||Ss(a,Ia),y!==null&&Ia>0)for(y.length=Ia+Sa.length,w=0;w<Sa.length;w++)y[Ia+w]=Sa[w];else a.deps=y=Sa;if(en()&&(a.f&Ra)!==0)for(w=Ia;w<y.length;w++)(y[w].reactions??=[]).push(a)}else!k&&y!==null&&Ia<y.length&&(Ss(a,Ia),y.length=Ia);if(ns()&&Ea!==null&&!Ha&&y!==null&&(a.f&(ya|eo|ga))===0)for(w=0;w<Ea.length;w++)Hl(Ea[w],a);if(l!==null&&l!==a){if(zo++,l.deps!==null)for(let E=0;E<o;E+=1)l.deps[E].rv=zo;if(e!==null)for(const E of e)E.rv=zo;Ea!==null&&(n===null?n=Ea:n.push(...Ea))}return(a.f&vo)!==0&&(a.f^=vo),v}catch(E){return ml(E)}finally{a.f^=Zs,Sa=e,Ia=o,Ea=n,Jt=l,Qa=i,Xo(c),Ha=d,Ro=p}}function Zc(a,e){let o=e.reactions;if(o!==null){var n=Ni.call(o,a);if(n!==-1){var l=o.length-1;l===0?o=e.reactions=null:(o[n]=o[l],o.pop())}}if(o===null&&(e.f&ya)!==0&&(Sa===null||!Ws.call(Sa,e))){var i=e;(i.f&Ra)!==0&&(i.f^=Ra,i.f&=~Do),i.v!==ua&&Zr(i),zc(i),Ss(i,0)}}function Ss(a,e){var o=a.deps;if(o!==null)for(var n=e;n<o.length;n++)Zc(a,o[n])}function ts(a){var e=a.f;if((e&za)===0){fa(a,ma);var o=Ft,n=Hs;Ft=a,Hs=!0;try{(e&(ja|Yr))!==0?Kc(a):an(a),Tl(a);var l=ql(a);a.teardown=typeof l=="function"?l:null,a.wv=jl;var i}finally{Hs=n,Ft=o}}}async function Vl(){await Promise.resolve(),Ec()}function t(a){var e=a.f,o=(e&ya)!==0;if(Jt!==null&&!Ha){var n=Ft!==null&&(Ft.f&za)!==0;if(!n&&(Qa===null||!Qa.has(a))){var l=Jt.deps;if((Jt.f&Zs)!==0)a.rv<zo&&(a.rv=zo,Sa===null&&l!==null&&l[Ia]===a?Ia++:Sa===null?Sa=[a]:Sa.push(a));else{Jt.deps??=[],Ws.call(Jt.deps,a)||Jt.deps.push(a);var i=a.reactions;i===null?a.reactions=[Jt]:Ws.call(i,Jt)||i.push(Jt)}}}if(io&&Ao.has(a))return Ao.get(a);if(o){var c=a;if(io){var d=c.v;return((c.f&ma)===0&&c.reactions!==null||Wl(c))&&(d=Xr(c)),Ao.set(c,d),d}var p=(c.f&Ra)===0&&!Ha&&Jt!==null&&(Hs||(Jt.f&Ra)!==0),m=(c.f&os)===0;As(c)&&(p&&(c.f|=Ra),yl(c)),p&&!m&&(xl(c),Kl(c))}if(Ga?.has(a))return Ga.get(a);if((a.f&vo)!==0)throw a.v;return a.v}function Kl(a){if(a.f|=Ra,a.deps!==null)for(const e of a.deps)(e.reactions??=[]).push(a),(e.f&ya)!==0&&(e.f&Ra)===0&&(xl(e),Kl(e))}function Wl(a){if(a.v===ua)return!0;if(a.deps===null)return!1;for(const e of a.deps)if(Ao.has(e)||(e.f&ya)!==0&&Wl(e))return!0;return!1}function ko(a){var e=Ha;try{return Ha=!0,a()}finally{Ha=e}}function Ho(a){if(!(typeof a!="object"||!a||a instanceof EventTarget)){if(Ja in a)Rr(a);else if(!Array.isArray(a))for(let e in a){const o=a[e];typeof o=="object"&&o&&Ja in o&&Rr(o)}}}function Rr(a,e=new Set){if(typeof a=="object"&&a!==null&&!(a instanceof EventTarget)&&!e.has(a)){e.add(a),a instanceof Date&&a.getTime();for(let n in a)try{Rr(a[n],e)}catch{}const o=Wr(a);if(o!==Object.prototype&&o!==Array.prototype&&o!==Map.prototype&&o!==Set.prototype&&o!==Date.prototype){const n=ol(o);for(let l in n){const i=n[l].get;if(i)try{i.call(a)}catch{}}}}}function Jc(a){return a.endsWith("capture")&&a!=="gotpointercapture"&&a!=="lostpointercapture"}const Xc=["beforeinput","click","change","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"];function Qc(a){return Xc.includes(a)}const $c={formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly",defaultvalue:"defaultValue",defaultchecked:"defaultChecked",srcobject:"srcObject",novalidate:"noValidate",allowfullscreen:"allowFullscreen",disablepictureinpicture:"disablePictureInPicture",disableremoteplayback:"disableRemotePlayback"};function ed(a){return a=a.toLowerCase(),$c[a]??a}const td=["touchstart","touchmove"];function ad(a){return td.includes(a)}const ys=Symbol("events"),Yl=new Set,Tr=new Set;function Zl(a,e,o,n={}){function l(i){if(n.capture||Dr.call(e,i),!i.cancelBubble)return sr(()=>o?.call(this,i))}return a.startsWith("pointer")||a.startsWith("touch")||a==="wheel"?no(()=>{e.addEventListener(a,l,n)}):e.addEventListener(a,l,n),l}function lo(a,e,o,n,l){var i={capture:n,passive:l},c=Zl(a,e,o,i);(e===document.body||e===window||e===document||e instanceof HTMLMediaElement)&&rr(()=>{e.removeEventListener(a,c,i)})}function x(a,e,o){(e[ys]??={})[a]=o}function ta(a){for(var e=0;e<a.length;e++)Yl.add(a[e]);for(var o of Tr)o(a)}let xn=null;function Dr(a){var e=this,o=e.ownerDocument,n=a.type,l=a.composedPath?.()||[],i=l[0]||a.target;xn=a;var c=0,d=xn===a&&a[ys];if(d){var p=l.indexOf(d);if(p!==-1&&(e===document||e===window)){a[ys]=e;return}var m=l.indexOf(e);if(m===-1)return;p<=m&&(c=p)}if(i=l[c]||a.target,i!==e){Fi(a,"currentTarget",{configurable:!0,get(){return i||o}});var h=Jt,v=Ft;Ta(null),Da(null);try{for(var y,k=[];i!==null&&i!==e;){try{var w=i[ys]?.[n];w!=null&&(!i.disabled||a.target===i)&&w.call(i,a)}catch(E){y?k.push(E):y=E}if(a.cancelBubble)break;c++,i=c<l.length?l[c]:null}if(y){for(let E of k)queueMicrotask(()=>{throw E});throw y}}finally{a[ys]=e,delete a.currentTarget,Ta(h),Da(v)}}}const od=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:a=>a});function sd(a){return od?.createHTML(a)??a}function Jl(a){var e=Bl("template");return e.innerHTML=sd(a.replaceAll("<!>","<!---->")),e.content}function as(a,e){var o=Ft;o.nodes===null&&(o.nodes={start:a,end:e,a:null,t:null})}function g(a,e){var o=(e&pc)!==0,n=(e&mc)!==0,l,i=!a.startsWith("<!>");return()=>{l===void 0&&(l=Jl(i?a:"<!>"+a),o||(l=es(l)));var c=n||Sl?document.importNode(l,!0):l.cloneNode(!0);if(o){var d=es(c),p=c.lastChild;as(d,p)}else as(c,c);return c}}function rd(a,e,o="svg"){var n=!a.startsWith("<!>"),l=`<${o}>${n?a:"<!>"+a}</${o}>`,i;return()=>{if(!i){var c=Jl(l),d=es(c);i=es(d)}var p=i.cloneNode(!0);return as(p,p),p}}function nd(a,e){return rd(a,e,"svg")}function lr(a=""){{var e=Xa(a+"");return as(e,e),e}}function Bt(){var a=document.createDocumentFragment(),e=document.createComment(""),o=Xa();return a.append(e,o),as(e,o),a}function f(a,e){a!==null&&a.before(e)}function b(a,e){var o=e==null?"":typeof e=="object"?`${e}`:e;o!==(a[zr]??=a.nodeValue)&&(a[zr]=o,a.nodeValue=`${o}`)}function Xl(a,e){return ld(a,e)}const Ts=new Map;function ld(a,{target:e,anchor:o,props:n={},events:l,context:i,intro:c=!0,transformError:d}){Nc();var p=void 0,m=qc(()=>{var h=o??e.appendChild(Xa());Lc(h,{pending:()=>{}},k=>{Qt({});var w=na;i&&(w.c=i),l&&(n.$$events=l),p=a(k,n)||{},$t()},d);var v=new Set,y=k=>{for(var w=0;w<k.length;w++){var E=k[w];if(!v.has(E)){v.add(E);var B=ad(E);for(const S of[e,document]){var U=Ts.get(S);U===void 0&&(U=new Map,Ts.set(S,U));var P=U.get(E);P===void 0?(S.addEventListener(E,Dr,{passive:B}),U.set(E,1)):U.set(E,P+1)}}}};return y(tr(Yl)),Tr.add(y),()=>{for(var k of v)for(const B of[e,document]){var w=Ts.get(B),E=w.get(k);--E==0?(B.removeEventListener(k,Dr),w.delete(k),w.size===0&&Ts.delete(B)):w.set(k,E)}Tr.delete(y),h!==o&&h.parentNode?.removeChild(h)}});return id.set(p,m),p}let id=new WeakMap;class ir{anchor;#t=new Map;#n=new Map;#e=new Map;#i=new Set;#o=!0;constructor(e,o=!0){this.anchor=e,this.#o=o}#r=e=>{if(this.#t.has(e)){var o=this.#t.get(e),n=this.#n.get(o);if(n)Qs(n),this.#i.delete(o);else{var l=this.#e.get(o);l&&(Qs(l.effect),this.#n.set(o,l.effect),this.#e.delete(o),l.fragment.lastChild.remove(),this.anchor.before(l.fragment),n=l.effect)}for(const[i,c]of this.#t){if(this.#t.delete(i),i===e)break;const d=this.#e.get(c);d&&(ba(d.effect),this.#e.delete(c))}for(const[i,c]of this.#n){if(i===o||this.#i.has(i))continue;const d=()=>{if(Array.from(this.#t.values()).includes(i)){var m=document.createDocumentFragment();on(c,m),m.append(Xa()),this.#e.set(i,{effect:c,fragment:m})}else ba(c);this.#i.delete(i),this.#n.delete(i)};this.#o||!n?(this.#i.add(i),Eo(c,d,!1)):d()}}};#a=e=>{this.#t.delete(e);const o=Array.from(this.#t.values());for(const[n,l]of this.#e)o.includes(n)||(ba(l.effect),this.#e.delete(n))};ensure(e,o){var n=Tt,l=Il();if(o&&!this.#n.has(e)&&!this.#e.has(e))if(l){var i=document.createDocumentFragment(),c=Xa();i.append(c),this.#e.set(e,{effect:La(()=>o(c)),fragment:i})}else this.#n.set(e,La(()=>o(this.anchor)));if(this.#t.set(n,e),l){for(const[d,p]of this.#n)d===e?n.unskip_effect(p):n.skip_effect(p);for(const[d,p]of this.#e)d===e?n.unskip_effect(p.effect):n.skip_effect(p.effect);n.oncommit(this.#r),n.ondiscard(this.#a)}else this.#r(n)}}function I(a,e,o=!1){var n=new ir(a),l=o?bo:0;function i(c,d){n.ensure(c,d)}ls(()=>{var c=!1;e((d,p=0)=>{c=!0,i(p,d)}),c||i(-1,null)},l)}const cd=Symbol("NaN");function pr(a,e,o){var n=new ir(a),l=!ns();ls(()=>{var i=e();i!==i&&(i=cd),l&&i!==null&&typeof i=="object"&&(i={}),n.ensure(i,o)})}function sn(a,e){return e}function dd(a,e,o){for(var n=[],l=e.length,i,c=e.length,d=0;d<l;d++){let v=e[d];Eo(v,()=>{if(i){if(i.pending.delete(v),i.done.add(v),i.pending.size===0){var y=a.outrogroups;Mr(a,tr(i.done)),y.delete(i),y.size===0&&(a.outrogroups=null)}}else c-=1},!1)}if(c===0){var p=n.length===0&&o!==null;if(p){var m=o,h=m.parentNode;Fc(h),h.append(m),a.items.clear()}Mr(a,e,!p)}else i={pending:new Set(e),done:new Set},(a.outrogroups??=new Set).add(i)}function Mr(a,e,o=!0){var n;if(a.pending.size>0){n=new Set;for(const c of a.pending.values())for(const d of c)n.add(a.items.get(d).e)}for(var l=0;l<e.length;l++){var i=e[l];if(n?.has(i)){i.f|=Za;const c=document.createDocumentFragment();on(i,c)}else ba(e[l],o)}}var kn;function re(a,e,o,n,l,i=null){var c=a,d=new Map,p=(e&il)!==0;if(p){var m=a;c=m.appendChild(Xa())}var h=null,v=Jr(()=>{var S=o();return Kr(S)?S:S==null?[]:tr(S)}),y,k=new Map,w=!0;function E(S){(P.effect.f&za)===0&&(P.pending.delete(S),P.fallback=h,fd(P,y,c,e,n),h!==null&&(y.length===0?(h.f&Za)===0?Qs(h):(h.f^=Za,xs(h,null,c)):Eo(h,()=>{h=null})))}function B(S){P.pending.delete(S)}var U=ls(()=>{y=t(v);for(var S=y.length,_=new Set,z=Tt,L=Il(),R=0;R<S;R+=1){var D=y[R],A=n(D,R),T=w?null:d.get(A);T?(T.v&&$o(T.v,D),T.i&&$o(T.i,R),L&&z.unskip_effect(T.e)):(T=ud(d,w?c:kn??=Xa(),D,A,R,l,e,o),w||(T.e.f|=Za),d.set(A,T)),_.add(A)}if(S===0&&i&&!h&&(w?h=La(()=>i(c)):(h=La(()=>i(kn??=Xa())),h.f|=Za)),S>_.size&&Zi(),!w)if(k.set(z,_),L){for(const[N,$]of d)_.has(N)||z.skip_effect($.e);z.oncommit(E),z.ondiscard(B)}else E(z);t(v)}),P={effect:U,items:d,pending:k,outrogroups:null,fallback:h};w=!1}function cs(a){for(;a!==null&&(a.f&Va)===0;)a=a.next;return a}function fd(a,e,o,n,l){var i=(n&lc)!==0,c=e.length,d=a.items,p=cs(a.effect.first),m,h=null,v,y=[],k=[],w,E,B,U;if(i)for(U=0;U<c;U+=1)w=e[U],E=l(w,U),B=d.get(E).e,(B.f&Za)===0&&(B.nodes?.a?.measure(),(v??=new Set).add(B));for(U=0;U<c;U+=1){if(w=e[U],E=l(w,U),B=d.get(E).e,a.outrogroups!==null)for(const T of a.outrogroups)T.pending.delete(B),T.done.delete(B);if((B.f&Oa)!==0&&(Qs(B),i&&(B.nodes?.a?.unfix(),(v??=new Set).delete(B))),(B.f&Za)!==0)if(B.f^=Za,B===p)xs(B,null,o);else{var P=h?h.next:p;B===a.effect.last&&(a.effect.last=B.prev),B.prev&&(B.prev.next=B.next),B.next&&(B.next.prev=B.prev),co(a,h,B),co(a,B,P),xs(B,P,o),h=B,y=[],k=[],p=cs(h.next);continue}if(B!==p){if(m!==void 0&&m.has(B)){if(y.length<k.length){var S=k[0],_;h=S.prev;var z=y[0],L=y[y.length-1];for(_=0;_<y.length;_+=1)xs(y[_],S,o);for(_=0;_<k.length;_+=1)m.delete(k[_]);co(a,z.prev,L.next),co(a,h,z),co(a,L,S),p=S,h=L,U-=1,y=[],k=[]}else m.delete(B),xs(B,p,o),co(a,B.prev,B.next),co(a,B,h===null?a.effect.first:h.next),co(a,h,B),h=B;continue}for(y=[],k=[];p!==null&&p!==B;)(m??=new Set).add(p),k.push(p),p=cs(p.next);if(p===null)continue}(B.f&Za)===0&&y.push(B),h=B,p=cs(B.next)}if(a.outrogroups!==null){for(const T of a.outrogroups)T.pending.size===0&&(Mr(a,tr(T.done)),a.outrogroups?.delete(T));a.outrogroups.size===0&&(a.outrogroups=null)}if(p!==null||m!==void 0){var R=[];if(m!==void 0)for(B of m)(B.f&Oa)===0&&R.push(B);for(;p!==null;)(p.f&Oa)===0&&p!==a.fallback&&R.push(p),p=cs(p.next);var D=R.length;if(D>0){var A=(n&il)!==0&&c===0?o:null;if(i){for(U=0;U<D;U+=1)R[U].nodes?.a?.measure();for(U=0;U<D;U+=1)R[U].nodes?.a?.fix()}dd(a,R,A)}}i&&no(()=>{if(v!==void 0)for(B of v)B.nodes?.a?.apply()})}function ud(a,e,o,n,l,i,c,d){var p=(c&rc)!==0?(c&ic)===0?Tc(o,!1,!1):xo(o):null,m=(c&nc)!==0?xo(l):null;return{v:p,i:m,e:La(()=>(i(e,p??o,m??l,d),()=>{a.delete(n)}))}}function xs(a,e,o){if(a.nodes)for(var n=a.nodes.start,l=a.nodes.end,i=e&&(e.f&Za)===0?e.nodes.start:o;n!==null;){var c=zs(n);if(i.before(n),n===l)return;n=c}}function co(a,e,o){e===null?a.effect.first=o:e.next=o,o===null?a.effect.last=e:o.prev=e}function Ht(a,e,o,n,l){var i=e.$$slots?.[o],c=!1;i===!0&&(i=e.children,c=!0),i===void 0||i(a,c?()=>n:n)}function Nr(a,e,o){var n=new ir(a);ls(()=>{var l=e()??null;n.ensure(l,l&&(i=>o(i,l)))},bo)}function pd(a,e,o,n,l,i){var c=null,d=a,p=new ir(d,!1);ls(()=>{const m=e()||null;var h=vc;if(m===null){p.ensure(null,null);return}return p.ensure(m,v=>{if(m){if(c=Bl(m,h),as(c,c),n){var y=null,k=c.appendChild(Xa());n(c,k),y?.remove()}Ft.nodes.end=c,v.before(c)}}),()=>{}},bo),rr(()=>{})}function md(a,e){var o=void 0,n;Rl(()=>{o!==(o=e())&&(n&&(ba(n),n=null),o&&(n=La(()=>{nr(()=>o(a))})))})}function Ql(a){var e,o,n="";if(typeof a=="string"||typeof a=="number")n+=a;else if(typeof a=="object")if(Array.isArray(a)){var l=a.length;for(e=0;e<l;e++)a[e]&&(o=Ql(a[e]))&&(n&&(n+=" "),n+=o)}else for(o in a)a[o]&&(n&&(n+=" "),n+=o);return n}function vd(){for(var a,e,o=0,n="",l=arguments.length;o<l;o++)(a=arguments[o])&&(e=Ql(a))&&(n&&(n+=" "),n+=e);return n}function ro(a){return typeof a=="object"?vd(a):a??""}const wn=[...` 	
-\r\f \v\uFEFF`];function hd(a,e,o){var n=a==null?"":""+a;if(e&&(n=n?n+" "+e:e),o){for(var l of Object.keys(o))if(o[l])n=n?n+" "+l:l;else if(n.length)for(var i=l.length,c=0;(c=n.indexOf(l,c))>=0;){var d=c+i;(c===0||wn.includes(n[c-1]))&&(d===n.length||wn.includes(n[d]))?n=(c===0?"":n.substring(0,c))+n.substring(d+1):c=d}}return n===""?null:n}function _n(a,e=!1){var o=e?" !important;":";",n="";for(var l of Object.keys(a)){var i=a[l];i!=null&&i!==""&&(n+=" "+l+": "+i+o)}return n}function mr(a){return a[0]!=="-"||a[1]!=="-"?a.toLowerCase():a}function gd(a,e){if(e){var o="",n,l;if(Array.isArray(e)?(n=e[0],l=e[1]):n=e,a){a=String(a).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var i=!1,c=0,d=!1,p=[];n&&p.push(...Object.keys(n).map(mr)),l&&p.push(...Object.keys(l).map(mr));var m=0,h=-1;const E=a.length;for(var v=0;v<E;v++){var y=a[v];if(d?y==="/"&&a[v-1]==="*"&&(d=!1):i?i===y&&(i=!1):y==="/"&&a[v+1]==="*"?d=!0:y==='"'||y==="'"?i=y:y==="("?c++:y===")"&&c--,!d&&i===!1&&c===0){if(y===":"&&h===-1)h=v;else if(y===";"||v===E-1){if(h!==-1){var k=mr(a.substring(m,h).trim());if(!p.includes(k)){y!==";"&&v++;var w=a.substring(m,v).trim();o+=" "+w+";"}}m=v+1,h=-1}}}}return n&&(o+=_n(n)),l&&(o+=_n(l,!0)),o=o.trim(),o===""?null:o}return a==null?null:String(a)}function Ye(a,e,o,n,l,i){var c=a[Br];if(c!==o||c===void 0){var d=hd(o,n,i);d==null?a.removeAttribute("class"):e?a.className=d:a.setAttribute("class",d),a[Br]=o}else if(i&&l!==i)for(var p in i){var m=!!i[p];(l==null||m!==!!l[p])&&a.classList.toggle(p,m)}return i}function vr(a,e={},o,n){for(var l in o){var i=o[l];e[l]!==i&&(o[l]==null?a.style.removeProperty(l):a.style.setProperty(l,i,n))}}function lt(a,e,o,n){var l=a[Ur];if(l!==e){var i=gd(e,n);i==null?a.removeAttribute("style"):a.style.cssText=i,a[Ur]=e}else n&&(Array.isArray(n)?(vr(a,o?.[0],n[0]),vr(a,o?.[1],n[1],"important")):vr(a,o,n));return n}function Ba(a,e,o=!1){if(a.multiple){if(e==null)return;if(!Kr(e))return bc();for(var n of a.options)n.selected=e.includes(_s(n));return}for(n of a.options){var l=_s(n);if(Mc(l,e)){n.selected=!0;return}}(!o||e!==void 0)&&(a.selectedIndex=-1)}function Na(a){var e=new MutationObserver(()=>{Ba(a,a.__value)});e.observe(a,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),rr(()=>{e.disconnect()})}function Cn(a,e,o=e){var n=new WeakSet,l=!0;zl(a,"change",i=>{var c=i?"[selected]":":checked",d;if(a.multiple)d=[].map.call(a.querySelectorAll(c),_s);else{var p=a.querySelector(c)??a.querySelector("option:not([disabled])");d=p&&_s(p)}o(d),a.__value=d,Tt!==null&&n.add(Tt)}),nr(()=>{var i=e();if(a===document.activeElement){var c=Tt;if(n.has(c))return}if(Ba(a,i,l),l&&i===void 0){var d=a.querySelector(":checked");d!==null&&(i=_s(d),o(i))}a.__value=i,l=!1}),Na(a)}function _s(a){return"__value"in a?a.__value:a.value}const ds=Symbol("class"),fs=Symbol("style"),$l=Symbol("is custom element"),ei=Symbol("is html"),bd=or?"input":"INPUT",yd=or?"option":"OPTION",xd=or?"select":"SELECT",kd=or?"progress":"PROGRESS";function Xt(a,e){var o=rn(a);o.value===(o.value=e??void 0)||a.value===e&&(e!==0||a.nodeName!==kd)||(a.value=e??"")}function wd(a,e){e?a.hasAttribute("selected")||a.setAttribute("selected",""):a.removeAttribute("selected")}function Y(a,e,o,n){var l=rn(a);l[e]!==(l[e]=o)&&(e==="loading"&&(a[Ki]=o),o==null?a.removeAttribute(e):typeof o!="string"&&ti(a).includes(e)?a[e]=o:a.setAttribute(e,o))}function _d(a,e,o,n,l=!1,i=!1){var c=rn(a),d=c[$l],p=!c[ei],m=e||{},h=a.nodeName===yd;for(var v in e)v in o||(o[v]=null);o.class?o.class=ro(o.class):o[ds]&&(o.class=null),o[fs]&&(o.style??=null);var y=ti(a);if(a.nodeName===bd&&"type"in o&&("value"in o||"__value"in o)){var k=o.type;(k!==m.type||k===void 0&&a.hasAttribute("type"))&&(m.type=k,Y(a,"type",k))}for(const z in o){let L=o[z];if(h&&z==="value"&&L==null){a.value=a.__value="",m[z]=L;continue}if(z==="class"){var w=a.namespaceURI==="http://www.w3.org/1999/xhtml";Ye(a,w,L,n,e?.[ds],o[ds]),m[z]=L,m[ds]=o[ds];continue}if(z==="style"){lt(a,L,e?.[fs],o[fs]),m[z]=L,m[fs]=o[fs];continue}var E=m[z];if(!(L===E&&!(L===void 0&&a.hasAttribute(z)))){m[z]=L;var B=z[0]+z[1];if(B!=="$$")if(B==="on"){const R={},D="$$"+z;let A=z.slice(2);var U=Qc(A);if(Jc(A)&&(A=A.slice(0,-7),R.capture=!0),!U&&E){if(L!=null)continue;a.removeEventListener(A,m[D],R),m[D]=null}if(U)x(A,a,L),ta([A]);else if(L!=null){let T=function(N){m[z].call(this,N)};var _=T;m[D]=Zl(A,a,T,R)}}else if(z==="style")Y(a,z,L);else if(z==="autofocus")Ul(a,!!L);else if(!d&&(z==="__value"||z==="value"&&L!=null))a.value=a.__value=L;else if(z==="selected"&&h)wd(a,L);else{var P=z;p||(P=ed(P));var S=P==="defaultValue"||P==="defaultChecked";if(L==null&&!d&&!S)if(c[z]=null,P==="value"||P==="checked"){let R=a;const D=e===void 0;if(P==="value"){let A=R.defaultValue;R.removeAttribute(P),R.defaultValue=A,R.value=R.__value=D?A:null}else{let A=R.defaultChecked;R.removeAttribute(P),R.defaultChecked=A,R.checked=D?A:!1}}else a.removeAttribute(z);else S||y.includes(P)&&(d||typeof L!="string")?(a[P]=L,P in c&&(c[P]=ua)):typeof L!="function"&&Y(a,P,L)}}}return m}function On(a,e,o=[],n=[],l=[],i,c=!1,d=!1){gl(l,o,n,p=>{var m=void 0,h={},v=a.nodeName===xd,y=!1;if(Rl(()=>{var w=e(...p.map(t)),E=_d(a,m,w,i,c,d);y&&v&&"value"in w&&Ba(a,w.value);for(let U of Object.getOwnPropertySymbols(h))w[U]||ba(h[U]);for(let U of Object.getOwnPropertySymbols(w)){var B=w[U];U.description===hc&&(!m||B!==m[U])&&(h[U]&&ba(h[U]),h[U]=La(()=>md(a,()=>B))),E[U]=B}m=E}),v){var k=a;nr(()=>{Ba(k,m.value,!0),Na(k)})}y=!0})}function rn(a){return a[ll]??={[$l]:a.nodeName.includes("-"),[ei]:a.namespaceURI===dl}}var Sn=new Map;function ti(a){var e=a.getAttribute("is")||a.nodeName,o=Sn.get(e);if(o)return o;Sn.set(e,o=[]);for(var n,l=a,i=Element.prototype;i!==l;){n=ol(l);for(var c in n)n[c].set&&c!=="innerHTML"&&c!=="textContent"&&c!=="innerText"&&o.push(c);l=Wr(l)}return o}function ai(a,e,o=e){var n=new WeakSet;zl(a,"input",async l=>{var i=l?a.defaultValue:a.value;if(i=hr(a)?gr(i):i,o(i),Tt!==null&&n.add(Tt),await Vl(),i!==(i=e())){var c=a.selectionStart,d=a.selectionEnd,p=a.value.length;if(a.value=i??"",d!==null){var m=a.value.length;c===d&&d===p&&m>p?(a.selectionStart=m,a.selectionEnd=m):(a.selectionStart=c,a.selectionEnd=Math.min(d,m))}}}),ko(e)==null&&a.value&&(o(hr(a)?gr(a.value):a.value),Tt!==null&&n.add(Tt)),tn(()=>{var l=e();if(a===document.activeElement){var i=Tt;if(n.has(i))return}hr(a)&&l===gr(a.value)||a.type==="date"&&!l&&!a.value||l!==a.value&&(a.value=l??"")})}function hr(a){var e=a.type;return e==="number"||e==="range"}function gr(a){return a===""?null:+a}function br(a,e){return a===e||a?.[Ja]===e}function Yo(a={},e,o,n){var l=na.r,i=Ft;return nr(()=>{var c,d;return tn(()=>{c=d,d=[],ko(()=>{br(o(...d),a)||(e(a,...d),c&&br(o(...c),a)&&e(null,...c))})}),()=>{let p=i;for(;p!==l&&p.parent!==null&&p.parent.f&Ir;)p=p.parent;const m=()=>{d&&br(o(...d),a)&&e(null,...d)},h=p.teardown;p.teardown=()=>{m(),h?.()}}}),a}function Cd(a=!1){const e=na,o=e.l.u;if(!o)return;let n=()=>Ho(e.s);if(a){let l=0,i={};const c=Qo(()=>{let d=!1;const p=e.s;for(const m in p)p[m]!==i[m]&&(i[m]=p[m],d=!0);return d&&l++,l});n=()=>t(c)}o.b.length&&Hc(()=>{Ln(e,n),Lr(o.b)}),ha(()=>{const l=ko(()=>o.m.map(qi));return()=>{for(const i of l)typeof i=="function"&&i()}}),o.a.length&&ha(()=>{Ln(e,n),Lr(o.a)})}function Ln(a,e){if(a.l.s)for(const o of a.l.s)t(o);e()}const Od={get(a,e){if(!a.exclude.includes(e))return t(a.version),e in a.special?a.special[e]():a.props[e]},set(a,e,o){if(!(e in a.special)){var n=Ft;try{Da(a.parent_effect),a.special[e]=ka({get[e](){return a.props[e]}},e,cl)}finally{Da(n)}}return a.special[e](o),mn(a.version),!0},getOwnPropertyDescriptor(a,e){if(!a.exclude.includes(e)&&e in a.props)return{enumerable:!0,configurable:!0,value:a.props[e]}},deleteProperty(a,e){return a.exclude.includes(e)||(a.exclude.push(e),mn(a.version)),!0},has(a,e){return a.exclude.includes(e)?!1:e in a.props},ownKeys(a){return Reflect.ownKeys(a.props).filter(e=>!a.exclude.includes(e))}};function Gt(a,e){return new Proxy({props:a,exclude:e,special:{},version:xo(0),parent_effect:Ft},Od)}const Sd={get(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(is(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n)return n[e]}},set(a,e,o){let n=a.props.length;for(;n--;){let l=a.props[n];is(l)&&(l=l());const i=mo(l,e);if(i&&i.set)return i.set(o),!0}return!1},getOwnPropertyDescriptor(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(is(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n){const l=mo(n,e);return l&&!l.configurable&&(l.configurable=!0),l}}},has(a,e){if(e===Ja||e===nl)return!1;for(let o of a.props)if(is(o)&&(o=o()),o!=null&&e in o)return!0;return!1},ownKeys(a){const e=[];for(let o of a.props)if(is(o)&&(o=o()),!!o){for(const n in o)e.includes(n)||e.push(n);for(const n of Object.getOwnPropertySymbols(o))e.includes(n)||e.push(n)}return e}};function Kt(...a){return new Proxy({props:a},Sd)}function ka(a,e,o,n){var l=!rs||(o&dc)!==0,i=(o&fc)!==0,c=(o&uc)!==0,d=n,p=!0,m=void 0,h=()=>c&&l?(m??=Qo(n),t(m)):(p&&(p=!1,d=c?ko(n):n),d);let v;if(i){var y=Ja in a||nl in a;v=mo(a,e)?.set??(y&&e in a?_=>a[e]=_:void 0)}var k,w=!1;i?[k,w]=Cc(()=>a[e]):k=a[e],k===void 0&&n!==void 0&&(k=h(),v&&(l&&ec(),v(k)));var E;if(l?E=()=>{var _=a[e];return _===void 0?h():(p=!0,_)}:E=()=>{var _=a[e];return _!==void 0&&(d=void 0),_===void 0?d:_},l&&(o&cl)===0)return E;if(v){var B=a.$$legacy;return(function(_,z){return arguments.length>0?((!l||!z||B||w)&&v(z?E():_),_):E()})}var U=!1,P=((o&cc)!==0?Qo:Jr)(()=>(U=!1,E()));i&&t(P);var S=Ft;return(function(_,z){if(arguments.length>0){const L=z?t(P):l&&i?da(_):_;return O(P,L),U=!0,d!==void 0&&(d=L),_}return io&&U||(S.f&za)!==0?P.v:t(P)})}function oi(a){na===null&&Wi(),rs&&na.l!==null?Ld(na).m.push(a):ha(()=>{const e=ko(a);if(typeof e=="function")return e})}function Ld(a){var e=a.l;return e.u??={a:[],b:[],m:[]}}const Pd="5";typeof window<"u"&&((window.__svelte??={}).v??=new Set).add(Pd);kc();/**
+var Kr=Array.isArray,Ni=Array.prototype.indexOf,Ws=Array.prototype.includes,tr=Array.from,Fi=Object.defineProperty,mo=Object.getOwnPropertyDescriptor,ol=Object.getOwnPropertyDescriptors,ji=Object.prototype,Gi=Array.prototype,Wr=Object.getPrototypeOf,fn=Object.isExtensible;function is(a){return typeof a=="function"}const Hi=()=>{};function qi(a){return a()}function Lr(a){for(var e=0;e<a.length;e++)a[e]()}function sl(){var a,e,o=new Promise((n,l)=>{a=n,e=l});return{promise:o,resolve:a,reject:e}}function Pa(a,e){if(Array.isArray(a))return a;if(e===void 0||!(Symbol.iterator in a))return Array.from(a);const o=[];for(const n of a)if(o.push(n),o.length===e)break;return o}const ya=2,Jo=4,Us=8,Yr=1<<24,ja=16,Va=32,go=64,Pr=128,Ra=512,ma=1024,ga=2048,eo=4096,Oa=8192,za=16384,os=32768,Ir=1<<25,bo=65536,Ys=1<<17,Vi=1<<18,ss=1<<19,rl=1<<20,Za=1<<25,Do=65536,Zs=1<<21,Wo=1<<22,vo=1<<23,Ja=Symbol("$state"),nl=Symbol("legacy props"),Ki=Symbol(""),ll=Symbol("attributes"),Br=Symbol("class"),Ur=Symbol("style"),zr=Symbol("text"),js=Symbol("form reset"),ar=new class extends Error{name="StaleReactionError";message="The reaction that called `getAbortSignal()` was re-run or destroyed"},or=!!globalThis.document?.contentType&&globalThis.document.contentType.includes("xml");function Wi(a){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function Yi(){throw new Error("https://svelte.dev/e/async_derived_orphan")}function Zi(a,e,o){throw new Error("https://svelte.dev/e/each_key_duplicate")}function Ji(a){throw new Error("https://svelte.dev/e/effect_in_teardown")}function Xi(){throw new Error("https://svelte.dev/e/effect_in_unowned_derived")}function Qi(a){throw new Error("https://svelte.dev/e/effect_orphan")}function $i(){throw new Error("https://svelte.dev/e/effect_update_depth_exceeded")}function ec(a){throw new Error("https://svelte.dev/e/props_invalid_value")}function tc(){throw new Error("https://svelte.dev/e/state_descriptors_fixed")}function ac(){throw new Error("https://svelte.dev/e/state_prototype_fixed")}function oc(){throw new Error("https://svelte.dev/e/state_unsafe_mutation")}function sc(){throw new Error("https://svelte.dev/e/svelte_boundary_reset_onerror")}const rc=1,nc=2,il=4,lc=8,ic=16,cc=1,dc=2,cl=4,fc=8,uc=16,pc=1,mc=2,ua=Symbol("uninitialized"),dl="http://www.w3.org/1999/xhtml",vc="http://www.w3.org/2000/svg",hc="@attach";function gc(){console.warn("https://svelte.dev/e/derived_inert")}function bc(){console.warn("https://svelte.dev/e/select_multiple_invalid_value")}function yc(){console.warn("https://svelte.dev/e/svelte_boundary_reset_noop")}function fl(a){return a===this.v}function xc(a,e){return a!=a?e==e:a!==e||a!==null&&typeof a=="object"||typeof a=="function"}function ul(a){return!xc(a,this.v)}let rs=!1;function kc(){rs=!0}let na=null;function Xo(a){na=a}function Qt(a,e=!1,o){na={p:na,i:!1,c:null,e:null,s:a,x:null,r:jt,l:rs&&!e?{s:null,u:null,$:[]}:null}}function $t(a){var e=na,o=e.e;if(o!==null){e.e=null;for(var n of o)El(n)}return e.i=!0,na=e.p,{}}function ns(){return!rs||na!==null&&na.l===null}let Uo=[];function pl(){var a=Uo;Uo=[],Lr(a)}function no(a){if(Uo.length===0&&!ks){var e=Uo;queueMicrotask(()=>{e===Uo&&pl()})}Uo.push(a)}function wc(){for(;Uo.length>0;)pl()}function ml(a){var e=jt;if(e===null)return Jt.f|=vo,a;if((e.f&os)===0&&(e.f&Jo)===0)throw a;po(a,e)}function po(a,e){if(!(e!==null&&(e.f&za)!==0)){for(;e!==null;){if((e.f&Pr)!==0){if((e.f&os)===0)throw a;try{e.b.error(a);return}catch(o){a=o}}e=e.parent}throw a}}const _c=-7169;function fa(a,e){a.f=a.f&_c|e}function Zr(a){(a.f&Ra)!==0||a.deps===null?fa(a,ma):fa(a,eo)}function vl(a){if(a!==null)for(const e of a)(e.f&ya)===0||(e.f&Do)===0||(e.f^=Do,vl(e.deps))}function hl(a,e,o){(a.f&ga)!==0?e.add(a):(a.f&eo)!==0&&o.add(a),vl(a.deps),fa(a,ma)}let Rs=!1;function Cc(a){var e=Rs;try{return Rs=!1,[a(),Rs]}finally{Rs=e}}function Oc(a){let e=0,o=xo(0),n;return()=>{en()&&(t(o),tn(()=>(e===0&&(n=ko(()=>a(()=>ws(o)))),e+=1,()=>{no(()=>{e-=1,e===0&&(n?.(),n=void 0,ws(o))})})))}}var Sc=bo|ss;function Lc(a,e,o,n){new Pc(a,e,o,n)}class Pc{parent;is_pending=!1;transform_error;#t;#n=null;#e;#i;#o;#r=null;#a=null;#l=null;#s=null;#m=0;#c=0;#d=!1;#u=new Set;#h=new Set;#f=null;#b=Oc(()=>(this.#f=xo(this.#m),()=>{this.#f=null}));constructor(e,o,n,l){this.#t=e,this.#e=o,this.#i=i=>{var c=jt;c.b=this,c.f|=Pr,n(i)},this.parent=jt.b,this.transform_error=l??this.parent?.transform_error??(i=>i),this.#o=ls(()=>{this.#y()},Sc)}#g(){try{this.#r=La(()=>this.#i(this.#t))}catch(e){this.error(e)}}#k(e){const o=this.#e.failed;o&&(this.#l=La(()=>{o(this.#t,()=>e,()=>()=>{})}))}#w(){const e=this.#e.pending;e&&(this.is_pending=!0,this.#a=La(()=>e(this.#t)),no(()=>{var o=this.#s=document.createDocumentFragment(),n=Xa();o.append(n),this.#r=this.#x(()=>La(()=>this.#i(n))),this.#c===0&&(this.#t.before(o),this.#s=null,Eo(this.#a,()=>{this.#a=null}),this.#p(Mt))}))}#y(){try{if(this.is_pending=this.has_pending_snippet(),this.#c=0,this.#m=0,this.#r=La(()=>{this.#i(this.#t)}),this.#c>0){var e=this.#s=document.createDocumentFragment();on(this.#r,e);const o=this.#e.pending;this.#a=La(()=>o(this.#t))}else this.#p(Mt)}catch(o){this.error(o)}}#p(e){this.is_pending=!1,e.transfer_effects(this.#u,this.#h)}defer_effect(e){hl(e,this.#u,this.#h)}is_rendered(){return!this.is_pending&&(!this.parent||this.parent.is_rendered())}has_pending_snippet(){return!!this.#e.pending}#x(e){var o=jt,n=Jt,l=na;Da(this.#o),Ta(this.#o),Xo(this.#o.ctx);try{return yo.ensure(),e()}catch(i){return ml(i),null}finally{Da(o),Ta(n),Xo(l)}}#v(e,o){if(!this.has_pending_snippet()){this.parent&&this.parent.#v(e,o);return}this.#c+=e,this.#c===0&&(this.#p(o),this.#a&&Eo(this.#a,()=>{this.#a=null}),this.#s&&(this.#t.before(this.#s),this.#s=null))}update_pending_count(e,o){this.#v(e,o),this.#m+=e,!(!this.#f||this.#d)&&(this.#d=!0,no(()=>{this.#d=!1,this.#f&&$o(this.#f,this.#m)}))}get_effect_pending(){return this.#b(),t(this.#f)}error(e){if(!this.#e.onerror&&!this.#e.failed)throw e;Mt?.is_fork?(this.#r&&Mt.skip_effect(this.#r),this.#a&&Mt.skip_effect(this.#a),this.#l&&Mt.skip_effect(this.#l),Mt.oncommit(()=>{this.#_(e)})):this.#_(e)}#_(e){this.#r&&(ba(this.#r),this.#r=null),this.#a&&(ba(this.#a),this.#a=null),this.#l&&(ba(this.#l),this.#l=null);var o=this.#e.onerror;let n=this.#e.failed;var l=!1,i=!1;const c=()=>{if(l){yc();return}l=!0,i&&sc(),this.#l!==null&&Eo(this.#l,()=>{this.#l=null}),this.#x(()=>{this.#y()})},d=p=>{try{i=!0,o?.(p,c),i=!1}catch(m){po(m,this.#o&&this.#o.parent)}n&&(this.#l=this.#x(()=>{try{return La(()=>{var m=jt;m.b=this,m.f|=Pr,n(this.#t,()=>p,()=>c)})}catch(m){return po(m,this.#o.parent),null}}))};no(()=>{var p;try{p=this.transform_error(e)}catch(m){po(m,this.#o&&this.#o.parent);return}p!==null&&typeof p=="object"&&typeof p.then=="function"?p.then(d,m=>po(m,this.#o&&this.#o.parent)):d(p)})}}function gl(a,e,o,n){const l=ns()?Qo:Jr;var i=a.filter(k=>!k.settled),c=e.map(l);if(o.length===0&&i.length===0){n(c);return}var d=jt,p=Ic(),m=i.length===1?i[0].promise:i.length>1?Promise.all(i.map(k=>k.promise)):null;function h(k){if((d.f&za)===0){p();try{n([...c,...k])}catch(w){po(w,d)}Js()}}var v=bl();if(o.length===0){m.then(()=>h([])).finally(v);return}function y(){Promise.all(o.map(k=>Bc(k))).then(h).catch(k=>po(k,d)).finally(v)}m?m.then(()=>{p(),y(),Js()}):y()}function Ic(){var a=jt,e=Jt,o=na,n=Mt;return function(i=!0){Da(a),Ta(e),Xo(o),i&&(a.f&za)===0&&(n?.activate(),n?.apply())}}function Js(a=!0){Da(null),Ta(null),Xo(null),a&&Mt?.deactivate()}function bl(){var a=jt,e=a.b,o=Mt,n=!!e?.is_rendered();return e?.update_pending_count(1,o),o.increment(n,a),()=>{e?.update_pending_count(-1,o),o.decrement(n,a)}}function Qo(a){var e=ya|ga;return jt!==null&&(jt.f|=ss),{ctx:na,deps:null,effects:null,equals:fl,f:e,fn:a,reactions:null,rv:0,v:ua,wv:0,parent:jt,ac:null}}const bs=Symbol("obsolete");function Bc(a,e,o){let n=jt;n===null&&Yi();var l=void 0,i=xo(ua),c=!Jt,d=new Set;return Vc(()=>{var p=jt,m=sl();l=m.promise;try{Promise.resolve(a()).then(m.resolve,k=>{k!==ar&&m.reject(k)}).finally(Js)}catch(k){m.reject(k),Js()}var h=Mt;if(c){if((p.f&os)!==0)var v=bl();if(n.b?.is_rendered())h.async_deriveds.get(p)?.reject(bs);else for(const k of d.values())k.reject(bs);d.add(m),h.async_deriveds.set(p,m)}const y=(k,w=void 0)=>{v?.(),d.delete(m),w!==bs&&(h.activate(),w?(i.f|=vo,$o(i,w)):((i.f&vo)!==0&&(i.f^=vo),$o(i,k)),h.deactivate())};m.promise.then(y,k=>y(null,k||"unknown"))}),rr(()=>{for(const p of d)p.reject(bs)}),new Promise(p=>{function m(h){function v(){h===l?p(i):m(l)}h.then(v,v)}m(l)})}function u(a){const e=Qo(a);return Fl(e),e}function Jr(a){const e=Qo(a);return e.equals=ul,e}function Uc(a){var e=a.effects;if(e!==null){a.effects=null;for(var o=0;o<e.length;o+=1)ba(e[o])}}function Xr(a){var e,o=jt,n=a.parent;if(!io&&n!==null&&a.v!==ua&&(n.f&(za|Oa))!==0)return gc(),a.v;Da(n);try{a.f&=~Do,Uc(a),e=ql(a)}finally{Da(o)}return e}function yl(a){var e=Xr(a);if(!a.equals(e)&&(a.wv=Gl(),(!Mt?.is_fork||a.deps===null)&&(Mt!==null?(Mt.capture(a,e,!0),Ar?.capture(a,e,!0)):a.v=e,a.deps===null))){fa(a,ma);return}io||(Ga!==null?(en()||Mt?.is_fork)&&Ga.set(a,e):Zr(a))}function zc(a){if(a.effects!==null)for(const e of a.effects)(e.teardown||e.ac)&&(e.teardown?.(),e.ac?.abort(ar),e.fn!==null&&(e.teardown=Hi),e.ac=null,Ss(e,0),an(e))}function xl(a){if(a.effects!==null)for(const e of a.effects)e.teardown&&e.fn!==null&&ts(e)}let fr=null,jo=null,Mt=null,Ar=null,Ga=null,Er=null,ks=!1,ur=!1,Vo=null,Gs=null;var un=0;let Ac=1;class yo{id=Ac++;#t=!1;linked=!0;#n=null;#e=null;async_deriveds=new Map;current=new Map;previous=new Map;#i=new Set;#o=new Set;#r=0;#a=new Map;#l=null;#s=[];#m=[];#c=new Set;#d=new Set;#u=new Map;#h=new Set;is_fork=!1;#f=!1;constructor(){jo===null?fr=jo=this:(jo.#e=this,this.#n=jo),jo=this}#b(){if(this.is_fork)return!0;for(const n of this.#a.keys()){for(var e=n,o=!1;e.parent!==null;){if(this.#u.has(e)){o=!0;break}e=e.parent}if(!o)return!0}return!1}skip_effect(e){this.#u.has(e)||this.#u.set(e,{d:[],m:[]}),this.#h.delete(e)}unskip_effect(e,o=n=>this.schedule(n)){var n=this.#u.get(e);if(n){this.#u.delete(e);for(var l of n.d)fa(l,ga),o(l);for(l of n.m)fa(l,eo),o(l)}this.#h.add(e)}#g(){this.#t=!0,un++>1e3&&(this.#v(),Rc());for(const p of this.#c)this.#d.delete(p),fa(p,ga),this.schedule(p);for(const p of this.#d)fa(p,eo),this.schedule(p);const e=this.#s;this.#s=[],this.apply();var o=Vo=[],n=[],l=Gs=[];for(const p of e)try{this.#k(p,o,n)}catch(m){throw _l(p),this.#b()||this.discard(),m}if(Mt=null,l.length>0){var i=yo.ensure();for(const p of l)i.schedule(p)}if(Vo=null,Gs=null,this.#b()){this.#p(n),this.#p(o);for(const[p,m]of this.#u)wl(p,m);l.length>0&&Mt.#g();return}const c=this.#w();if(c){this.#p(n),this.#p(o),c.#y(this);return}this.#c.clear(),this.#d.clear();for(const p of this.#i)p(this);this.#i.clear(),Ar=this,pn(n),pn(o),Ar=null,this.#l?.resolve();var d=Mt;if(this.#r===0&&(this.#s.length===0||d!==null)&&this.#v(),this.#s.length>0)if(d!==null){const p=d;p.#s.push(...this.#s.filter(m=>!p.#s.includes(m)))}else d=this;d!==null&&d.#g()}#k(e,o,n){e.f^=ma;for(var l=e.first;l!==null;){var i=l.f,c=(i&(Va|go))!==0,d=c&&(i&ma)!==0,p=d||(i&Oa)!==0||this.#u.has(l);if(!p&&l.fn!==null){c?l.f^=ma:(i&Jo)!==0?o.push(l):As(l)&&((i&ja)!==0&&this.#d.add(l),ts(l));var m=l.first;if(m!==null){l=m;continue}}for(;l!==null;){var h=l.next;if(h!==null){l=h;break}l=l.parent}}}#w(){for(var e=this.#n;e!==null;){if(!e.is_fork){for(const[o,[,n]]of this.current)if(e.current.has(o)&&!n)return e}e=e.#n}return null}#y(e){for(const[n,l]of e.current)!this.previous.has(n)&&e.previous.has(n)&&this.previous.set(n,e.previous.get(n)),this.current.set(n,l);for(const[n,l]of e.async_deriveds){const i=this.async_deriveds.get(n);i&&l.promise.then(i.resolve).catch(i.reject)}e.async_deriveds.clear(),this.transfer_effects(e.#c,e.#d);const o=n=>{var l=n.reactions;if(l!==null)for(const d of l){var i=d.f;if((i&ya)!==0)o(d);else{var c=d;i&(Wo|ja)&&!this.async_deriveds.has(c)&&(this.#d.delete(c),fa(c,ga),this.schedule(c))}}};for(const n of this.current.keys())o(n);this.oncommit(()=>e.discard()),e.#v(),Mt=this,this.#g()}#p(e){for(var o=0;o<e.length;o+=1)hl(e[o],this.#c,this.#d)}capture(e,o,n=!1){e.v!==ua&&!this.previous.has(e)&&this.previous.set(e,e.v),(e.f&vo)===0&&(this.current.set(e,[o,n]),Ga?.set(e,o)),this.is_fork||(e.v=o)}activate(){Mt=this}deactivate(){Mt=null,Ga=null}flush(){try{ur=!0,Mt=this,this.#g()}finally{un=0,Er=null,Vo=null,Gs=null,ur=!1,Mt=null,Ga=null,Ao.clear()}}discard(){for(const e of this.#o)e(this);this.#o.clear();for(const e of this.async_deriveds.values())e.reject(bs);this.#v(),this.#l?.resolve()}register_created_effect(e){this.#m.push(e)}#x(){for(let v=fr;v!==null;v=v.#e){var e=v.id<this.id,o=[];for(const[y,[k,w]]of this.current){if(v.current.has(y)){var n=v.current.get(y)[0];if(e&&k!==n)v.current.set(y,[k,w]);else continue}o.push(y)}if(e)for(const[y,k]of this.async_deriveds){const w=v.async_deriveds.get(y);w&&k.promise.then(w.resolve).catch(w.reject)}var l=[...v.current.keys()].filter(y=>!v.current.get(y)[1]);if(!(!v.#t||l.length===0)){var i=l.filter(y=>!this.current.has(y));if(i.length===0)e&&v.discard();else if(o.length>0){if(e)for(const y of this.#h)v.unskip_effect(y,k=>{(k.f&(ja|Wo))!==0?v.schedule(k):v.#p([k])});v.activate();var c=new Set,d=new Map;for(var p of o)kl(p,i,c,d);d=new Map;var m=[...v.current].filter(([y,k])=>{const w=this.current.get(y);return w?w[0]!==k[0]||w[1]!==k[1]:!0}).map(([y])=>y);if(m.length>0)for(const y of this.#m)(y.f&(za|Oa|Ys))===0&&Qr(y,m,d)&&((y.f&(Wo|ja))!==0?(fa(y,ga),v.schedule(y)):v.#c.add(y));if(v.#s.length>0&&!v.#f){v.apply();for(var h of v.#s)v.#k(h,[],[]);v.#s=[]}v.deactivate()}}}}increment(e,o){if(this.#r+=1,e){let n=this.#a.get(o)??0;this.#a.set(o,n+1)}}decrement(e,o){if(this.#r-=1,e){let n=this.#a.get(o)??0;n===1?this.#a.delete(o):this.#a.set(o,n-1)}this.#f||(this.#f=!0,no(()=>{this.#f=!1,this.linked&&this.flush()}))}transfer_effects(e,o){for(const n of e)this.#c.add(n);for(const n of o)this.#d.add(n);e.clear(),o.clear()}oncommit(e){this.#i.add(e)}ondiscard(e){this.#o.add(e)}settled(){return(this.#l??=sl()).promise}static ensure(){if(Mt===null){const e=Mt=new yo;!ur&&!ks&&no(()=>{e.#t||e.flush()})}return Mt}apply(){{Ga=null;return}}schedule(e){if(Er=e,e.b?.is_pending&&(e.f&(Jo|Us|Yr))!==0&&(e.f&os)===0){e.b.defer_effect(e);return}for(var o=e;o.parent!==null;){o=o.parent;var n=o.f;if(Vo!==null&&o===jt&&(Jt===null||(Jt.f&ya)===0))return;if((n&(go|Va))!==0){if((n&ma)===0)return;o.f^=ma}}this.#s.push(o)}#v(){if(this.linked){var e=this.#n,o=this.#e;e===null?fr=o:e.#e=o,o===null?jo=e:o.#n=e,this.linked=!1}}}function Ec(a){var e=ks;ks=!0;try{for(var o;;){if(wc(),Mt===null)return o;Mt.flush()}}finally{ks=e}}function Rc(){try{$i()}catch(a){po(a,Er)}}let so=null;function pn(a){var e=a.length;if(e!==0){for(var o=0;o<e;){var n=a[o++];if((n.f&(za|Oa))===0&&As(n)&&(so=new Set,ts(n),n.deps===null&&n.first===null&&n.nodes===null&&n.teardown===null&&n.ac===null&&Dl(n),so?.size>0)){Ao.clear();for(const l of so){if((l.f&(za|Oa))!==0)continue;const i=[l];let c=l.parent;for(;c!==null;)so.has(c)&&(so.delete(c),i.push(c)),c=c.parent;for(let d=i.length-1;d>=0;d--){const p=i[d];(p.f&(za|Oa))===0&&ts(p)}}so.clear()}}so=null}}function kl(a,e,o,n){if(!o.has(a)&&(o.add(a),a.reactions!==null))for(const l of a.reactions){const i=l.f;(i&ya)!==0?kl(l,e,o,n):(i&(Wo|ja))!==0&&(i&ga)===0&&Qr(l,e,n)&&(fa(l,ga),$r(l))}}function Qr(a,e,o){const n=o.get(a);if(n!==void 0)return n;if(a.deps!==null)for(const l of a.deps){if(Ws.call(e,l))return!0;if((l.f&ya)!==0&&Qr(l,e,o))return o.set(l,!0),!0}return o.set(a,!1),!1}function $r(a){Mt.schedule(a)}function wl(a,e){if(!((a.f&Va)!==0&&(a.f&ma)!==0)){(a.f&ga)!==0?e.d.push(a):(a.f&eo)!==0&&e.m.push(a),fa(a,ma);for(var o=a.first;o!==null;)wl(o,e),o=o.next}}function _l(a){fa(a,ma);for(var e=a.first;e!==null;)_l(e),e=e.next}let Xs=new Set;const Ao=new Map;let Cl=!1;function xo(a,e){var o={f:0,v:a,reactions:null,equals:fl,rv:0,wv:0};return o}function G(a,e){const o=xo(a);return Fl(o),o}function Tc(a,e=!1,o=!0){const n=xo(a);return e||(n.equals=ul),rs&&o&&na!==null&&na.l!==null&&(na.l.s??=[]).push(n),n}function O(a,e,o=!1){Jt!==null&&(!Ha||(Jt.f&Ys)!==0)&&ns()&&(Jt.f&(ya|ja|Wo|Ys))!==0&&(Qa===null||!Qa.has(a))&&oc();let n=o?da(e):e;return $o(a,n,Gs)}function $o(a,e,o=null){if(!a.equals(e)){Ao.set(a,io?e:a.v);var n=yo.ensure();if(n.capture(a,e),(a.f&ya)!==0){const l=a;(a.f&ga)!==0&&Xr(l),Ga===null&&Zr(l)}a.wv=Gl(),Ol(a,ga,o),ns()&&jt!==null&&(jt.f&ma)!==0&&(jt.f&(Va|go))===0&&(Ea===null?Yc([a]):Ea.push(a)),!n.is_fork&&Xs.size>0&&!Cl&&Dc()}return e}function Dc(){Cl=!1;for(const a of Xs){(a.f&ma)!==0&&fa(a,eo);let e;try{e=As(a)}catch{e=!0}e&&ts(a)}Xs.clear()}function mn(a,e=1){var o=t(a),n=e===1?o++:o--;return O(a,o),n}function ws(a){O(a,a.v+1)}function Ol(a,e,o){var n=a.reactions;if(n!==null)for(var l=ns(),i=n.length,c=0;c<i;c++){var d=n[c],p=d.f;if(!(!l&&d===jt)){var m=(p&ga)===0;if(m&&fa(d,e),(p&Ys)!==0)Xs.add(d);else if((p&ya)!==0){var h=d;Ga?.delete(h),(p&Do)===0&&(p&Ra&&(jt===null||(jt.f&Zs)===0)&&(d.f|=Do),Ol(h,eo,o))}else if(m){var v=d;(p&ja)!==0&&so!==null&&so.add(v),o!==null?o.push(v):$r(v)}}}}function da(a){if(typeof a!="object"||a===null||Ja in a)return a;const e=Wr(a);if(e!==ji&&e!==Gi)return a;var o=new Map,n=Kr(a),l=G(0),i=Ro,c=d=>{if(Ro===i)return d();var p=Jt,m=Ro;Ta(null),yn(i);var h=d();return Ta(p),yn(m),h};return n&&o.set("length",G(a.length)),new Proxy(a,{defineProperty(d,p,m){(!("value"in m)||m.configurable===!1||m.enumerable===!1||m.writable===!1)&&tc();var h=o.get(p);return h===void 0?c(()=>{var v=G(m.value);return o.set(p,v),v}):O(h,m.value,!0),!0},deleteProperty(d,p){var m=o.get(p);if(m===void 0){if(p in d){const h=c(()=>G(ua));o.set(p,h),ws(l)}}else O(m,ua),ws(l);return!0},get(d,p,m){if(p===Ja)return a;var h=o.get(p),v=p in d;if(h===void 0&&(!v||mo(d,p)?.writable)&&(h=c(()=>{var k=da(v?d[p]:ua),w=G(k);return w}),o.set(p,h)),h!==void 0){var y=t(h);return y===ua?void 0:y}return Reflect.get(d,p,m)},getOwnPropertyDescriptor(d,p){var m=Reflect.getOwnPropertyDescriptor(d,p);if(m&&"value"in m){var h=o.get(p);h&&(m.value=t(h))}else if(m===void 0){var v=o.get(p),y=v?.v;if(v!==void 0&&y!==ua)return{enumerable:!0,configurable:!0,value:y,writable:!0}}return m},has(d,p){if(p===Ja)return!0;var m=o.get(p),h=m!==void 0&&m.v!==ua||Reflect.has(d,p);if(m!==void 0||jt!==null&&(!h||mo(d,p)?.writable)){m===void 0&&(m=c(()=>{var y=h?da(d[p]):ua,k=G(y);return k}),o.set(p,m));var v=t(m);if(v===ua)return!1}return h},set(d,p,m,h){var v=o.get(p),y=p in d;if(n&&p==="length")for(var k=m;k<v.v;k+=1){var w=o.get(k+"");w!==void 0?O(w,ua):k in d&&(w=c(()=>G(ua)),o.set(k+"",w))}if(v===void 0)(!y||mo(d,p)?.writable)&&(v=c(()=>G(void 0)),O(v,da(m)),o.set(p,v));else{y=v.v!==ua;var E=c(()=>da(m));O(v,E)}var B=Reflect.getOwnPropertyDescriptor(d,p);if(B?.set&&B.set.call(h,m),!y){if(n&&typeof p=="string"){var U=o.get("length"),P=Number(p);Number.isInteger(P)&&P>=U.v&&O(U,P+1)}ws(l)}return!0},ownKeys(d){t(l);var p=Reflect.ownKeys(d).filter(v=>{var y=o.get(v);return y===void 0||y.v!==ua});for(var[m,h]of o)h.v!==ua&&!(m in d)&&p.push(m);return p},setPrototypeOf(){ac()}})}function vn(a){try{if(a!==null&&typeof a=="object"&&Ja in a)return a[Ja]}catch{}return a}function Mc(a,e){return Object.is(vn(a),vn(e))}var hn,Sl,Ll,Pl;function Nc(){if(hn===void 0){hn=window,Sl=/Firefox/.test(navigator.userAgent);var a=Element.prototype,e=Node.prototype,o=Text.prototype;Ll=mo(e,"firstChild").get,Pl=mo(e,"nextSibling").get,fn(a)&&(a[Br]=void 0,a[ll]=null,a[Ur]=void 0,a.__e=void 0),fn(o)&&(o[zr]=void 0)}}function Xa(a=""){return document.createTextNode(a)}function es(a){return Ll.call(a)}function zs(a){return Pl.call(a)}function s(a,e){return es(a)}function de(a,e=!1){{var o=es(a);return o instanceof Comment&&o.data===""?zs(o):o}}function r(a,e=1,o=!1){let n=a;for(;e--;)n=zs(n);return n}function Fc(a){a.textContent=""}function Il(){return!1}function Bl(a,e,o){return e==null||e===dl?o?document.createElement(a,{is:o}):document.createElement(a):o?document.createElementNS(e,a,{is:o}):document.createElementNS(e,a)}function Ul(a,e){if(e){const o=document.body;a.autofocus=!0,no(()=>{document.activeElement===o&&a.focus()})}}let gn=!1;function jc(){gn||(gn=!0,document.addEventListener("reset",a=>{Promise.resolve().then(()=>{if(!a.defaultPrevented)for(const e of a.target.elements)e[js]?.()})},{capture:!0}))}function sr(a){var e=Jt,o=jt;Ta(null),Da(null);try{return a()}finally{Ta(e),Da(o)}}function zl(a,e,o,n=o){a.addEventListener(e,()=>sr(o));const l=a[js];l?a[js]=()=>{l(),n(!0)}:a[js]=()=>n(!0),jc()}function Al(a){jt===null&&(Jt===null&&Qi(),Xi()),io&&Ji()}function Gc(a,e){var o=e.last;o===null?e.last=e.first=a:(o.next=a,a.prev=o,e.last=a)}function Ka(a,e){var o=jt;o!==null&&(o.f&Oa)!==0&&(a|=Oa);var n={ctx:na,deps:null,nodes:null,f:a|ga|Ra,first:null,fn:e,last:null,next:null,parent:o,b:o&&o.b,prev:null,teardown:null,wv:0,ac:null};Mt?.register_created_effect(n);var l=n;if((a&Jo)!==0)Vo!==null?Vo.push(n):yo.ensure().schedule(n);else if(e!==null){try{ts(n)}catch(c){throw ba(n),c}l.deps===null&&l.teardown===null&&l.nodes===null&&l.first===l.last&&(l.f&ss)===0&&(l=l.first,(a&ja)!==0&&(a&bo)!==0&&l!==null&&(l.f|=bo))}if(l!==null&&(l.parent=o,o!==null&&Gc(l,o),Jt!==null&&(Jt.f&ya)!==0&&(a&go)===0)){var i=Jt;(i.effects??=[]).push(l)}return n}function en(){return Jt!==null&&!Ha}function rr(a){const e=Ka(Us,null);return fa(e,ma),e.teardown=a,e}function ha(a){Al();var e=jt.f,o=!Jt&&(e&Va)!==0&&na!==null&&!na.i;if(o){var n=na;(n.e??=[]).push(a)}else return El(a)}function El(a){return Ka(Jo|rl,a)}function Hc(a){return Al(),Ka(Us|rl,a)}function qc(a){yo.ensure();const e=Ka(go|ss,a);return(o={})=>new Promise(n=>{o.outro?Eo(e,()=>{ba(e),n(void 0)}):(ba(e),n(void 0))})}function nr(a){return Ka(Jo,a)}function Vc(a){return Ka(Wo|ss,a)}function tn(a,e=0){return Ka(Us|e,a)}function C(a,e=[],o=[],n=[]){gl(n,e,o,l=>{Ka(Us,()=>{a(...l.map(t))})})}function ls(a,e=0){var o=Ka(ja|e,a);return o}function Rl(a,e=0){var o=Ka(Yr|e,a);return o}function La(a){return Ka(Va|ss,a)}function Tl(a){var e=a.teardown;if(e!==null){const o=io,n=Jt;bn(!0),Ta(null);try{e.call(null)}finally{bn(o),Ta(n)}}}function an(a,e=!1){var o=a.first;for(a.first=a.last=null;o!==null;){const l=o.ac;l!==null&&sr(()=>{l.abort(ar)});var n=o.next;(o.f&go)!==0?o.parent=null:ba(o,e),o=n}}function Kc(a){for(var e=a.first;e!==null;){var o=e.next;(e.f&Va)===0&&ba(e),e=o}}function ba(a,e=!0){var o=!1;(e||(a.f&Vi)!==0)&&a.nodes!==null&&a.nodes.end!==null&&(Wc(a.nodes.start,a.nodes.end),o=!0),a.f|=Ir,an(a,e&&!o),Ss(a,0);var n=a.nodes&&a.nodes.t;if(n!==null)for(const i of n)i.stop();Tl(a),a.f^=Ir,a.f|=za;var l=a.parent;l!==null&&l.first!==null&&Dl(a),a.next=a.prev=a.teardown=a.ctx=a.deps=a.fn=a.nodes=a.ac=a.b=null}function Wc(a,e){for(;a!==null;){var o=a===e?null:zs(a);a.remove(),a=o}}function Dl(a){var e=a.parent,o=a.prev,n=a.next;o!==null&&(o.next=n),n!==null&&(n.prev=o),e!==null&&(e.first===a&&(e.first=n),e.last===a&&(e.last=o))}function Eo(a,e,o=!0){var n=[];Ml(a,n,!0);var l=()=>{o&&ba(a),e&&e()},i=n.length;if(i>0){var c=()=>--i||l();for(var d of n)d.out(c)}else l()}function Ml(a,e,o){if((a.f&Oa)===0){a.f^=Oa;var n=a.nodes&&a.nodes.t;if(n!==null)for(const d of n)(d.is_global||o)&&e.push(d);for(var l=a.first;l!==null;){var i=l.next;if((l.f&go)===0){var c=(l.f&bo)!==0||(l.f&Va)!==0&&(a.f&ja)!==0;Ml(l,e,c?o:!1)}l=i}}}function Qs(a){Nl(a,!0)}function Nl(a,e){if((a.f&Oa)!==0){a.f^=Oa,(a.f&ma)===0&&(fa(a,ga),yo.ensure().schedule(a));for(var o=a.first;o!==null;){var n=o.next,l=(o.f&bo)!==0||(o.f&Va)!==0;Nl(o,l?e:!1),o=n}var i=a.nodes&&a.nodes.t;if(i!==null)for(const c of i)(c.is_global||e)&&c.in()}}function on(a,e){if(a.nodes)for(var o=a.nodes.start,n=a.nodes.end;o!==null;){var l=o===n?null:zs(o);e.append(o),o=l}}let Hs=!1,io=!1;function bn(a){io=a}let Jt=null,Ha=!1;function Ta(a){Jt=a}let jt=null;function Da(a){jt=a}let Qa=null;function Fl(a){Jt!==null&&(Qa??=new Set).add(a)}let Sa=null,Ia=0,Ea=null;function Yc(a){Ea=a}let jl=1,zo=0,Ro=zo;function yn(a){Ro=a}function Gl(){return++jl}function As(a){var e=a.f;if((e&ga)!==0)return!0;if(e&ya&&(a.f&=~Do),(e&eo)!==0){for(var o=a.deps,n=o.length,l=0;l<n;l++){var i=o[l];if(As(i)&&yl(i),i.wv>a.wv)return!0}(e&Ra)!==0&&Ga===null&&fa(a,ma)}return!1}function Hl(a,e,o=!0){var n=a.reactions;if(n!==null&&!(Qa!==null&&Qa.has(a)))for(var l=0;l<n.length;l++){var i=n[l];(i.f&ya)!==0?Hl(i,e,!1):e===i&&(o?fa(i,ga):(i.f&ma)!==0&&fa(i,eo),$r(i))}}function ql(a){var e=Sa,o=Ia,n=Ea,l=Jt,i=Qa,c=na,d=Ha,p=Ro,m=a.f;Sa=null,Ia=0,Ea=null,Jt=(m&(Va|go))===0?a:null,Qa=null,Xo(a.ctx),Ha=!1,Ro=++zo,a.ac!==null&&(sr(()=>{a.ac.abort(ar)}),a.ac=null);try{a.f|=Zs;var h=a.fn,v=h();a.f|=os;var y=a.deps,k=Mt?.is_fork;if(Sa!==null){var w;if(k||Ss(a,Ia),y!==null&&Ia>0)for(y.length=Ia+Sa.length,w=0;w<Sa.length;w++)y[Ia+w]=Sa[w];else a.deps=y=Sa;if(en()&&(a.f&Ra)!==0)for(w=Ia;w<y.length;w++)(y[w].reactions??=[]).push(a)}else!k&&y!==null&&Ia<y.length&&(Ss(a,Ia),y.length=Ia);if(ns()&&Ea!==null&&!Ha&&y!==null&&(a.f&(ya|eo|ga))===0)for(w=0;w<Ea.length;w++)Hl(Ea[w],a);if(l!==null&&l!==a){if(zo++,l.deps!==null)for(let E=0;E<o;E+=1)l.deps[E].rv=zo;if(e!==null)for(const E of e)E.rv=zo;Ea!==null&&(n===null?n=Ea:n.push(...Ea))}return(a.f&vo)!==0&&(a.f^=vo),v}catch(E){return ml(E)}finally{a.f^=Zs,Sa=e,Ia=o,Ea=n,Jt=l,Qa=i,Xo(c),Ha=d,Ro=p}}function Zc(a,e){let o=e.reactions;if(o!==null){var n=Ni.call(o,a);if(n!==-1){var l=o.length-1;l===0?o=e.reactions=null:(o[n]=o[l],o.pop())}}if(o===null&&(e.f&ya)!==0&&(Sa===null||!Ws.call(Sa,e))){var i=e;(i.f&Ra)!==0&&(i.f^=Ra,i.f&=~Do),i.v!==ua&&Zr(i),zc(i),Ss(i,0)}}function Ss(a,e){var o=a.deps;if(o!==null)for(var n=e;n<o.length;n++)Zc(a,o[n])}function ts(a){var e=a.f;if((e&za)===0){fa(a,ma);var o=jt,n=Hs;jt=a,Hs=!0;try{(e&(ja|Yr))!==0?Kc(a):an(a),Tl(a);var l=ql(a);a.teardown=typeof l=="function"?l:null,a.wv=jl;var i}finally{Hs=n,jt=o}}}async function Vl(){await Promise.resolve(),Ec()}function t(a){var e=a.f,o=(e&ya)!==0;if(Jt!==null&&!Ha){var n=jt!==null&&(jt.f&za)!==0;if(!n&&(Qa===null||!Qa.has(a))){var l=Jt.deps;if((Jt.f&Zs)!==0)a.rv<zo&&(a.rv=zo,Sa===null&&l!==null&&l[Ia]===a?Ia++:Sa===null?Sa=[a]:Sa.push(a));else{Jt.deps??=[],Ws.call(Jt.deps,a)||Jt.deps.push(a);var i=a.reactions;i===null?a.reactions=[Jt]:Ws.call(i,Jt)||i.push(Jt)}}}if(io&&Ao.has(a))return Ao.get(a);if(o){var c=a;if(io){var d=c.v;return((c.f&ma)===0&&c.reactions!==null||Wl(c))&&(d=Xr(c)),Ao.set(c,d),d}var p=(c.f&Ra)===0&&!Ha&&Jt!==null&&(Hs||(Jt.f&Ra)!==0),m=(c.f&os)===0;As(c)&&(p&&(c.f|=Ra),yl(c)),p&&!m&&(xl(c),Kl(c))}if(Ga?.has(a))return Ga.get(a);if((a.f&vo)!==0)throw a.v;return a.v}function Kl(a){if(a.f|=Ra,a.deps!==null)for(const e of a.deps)(e.reactions??=[]).push(a),(e.f&ya)!==0&&(e.f&Ra)===0&&(xl(e),Kl(e))}function Wl(a){if(a.v===ua)return!0;if(a.deps===null)return!1;for(const e of a.deps)if(Ao.has(e)||(e.f&ya)!==0&&Wl(e))return!0;return!1}function ko(a){var e=Ha;try{return Ha=!0,a()}finally{Ha=e}}function Ho(a){if(!(typeof a!="object"||!a||a instanceof EventTarget)){if(Ja in a)Rr(a);else if(!Array.isArray(a))for(let e in a){const o=a[e];typeof o=="object"&&o&&Ja in o&&Rr(o)}}}function Rr(a,e=new Set){if(typeof a=="object"&&a!==null&&!(a instanceof EventTarget)&&!e.has(a)){e.add(a),a instanceof Date&&a.getTime();for(let n in a)try{Rr(a[n],e)}catch{}const o=Wr(a);if(o!==Object.prototype&&o!==Array.prototype&&o!==Map.prototype&&o!==Set.prototype&&o!==Date.prototype){const n=ol(o);for(let l in n){const i=n[l].get;if(i)try{i.call(a)}catch{}}}}}function Jc(a){return a.endsWith("capture")&&a!=="gotpointercapture"&&a!=="lostpointercapture"}const Xc=["beforeinput","click","change","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"];function Qc(a){return Xc.includes(a)}const $c={formnovalidate:"formNoValidate",ismap:"isMap",nomodule:"noModule",playsinline:"playsInline",readonly:"readOnly",defaultvalue:"defaultValue",defaultchecked:"defaultChecked",srcobject:"srcObject",novalidate:"noValidate",allowfullscreen:"allowFullscreen",disablepictureinpicture:"disablePictureInPicture",disableremoteplayback:"disableRemotePlayback"};function ed(a){return a=a.toLowerCase(),$c[a]??a}const td=["touchstart","touchmove"];function ad(a){return td.includes(a)}const ys=Symbol("events"),Yl=new Set,Tr=new Set;function Zl(a,e,o,n={}){function l(i){if(n.capture||Dr.call(e,i),!i.cancelBubble)return sr(()=>o?.call(this,i))}return a.startsWith("pointer")||a.startsWith("touch")||a==="wheel"?no(()=>{e.addEventListener(a,l,n)}):e.addEventListener(a,l,n),l}function lo(a,e,o,n,l){var i={capture:n,passive:l},c=Zl(a,e,o,i);(e===document.body||e===window||e===document||e instanceof HTMLMediaElement)&&rr(()=>{e.removeEventListener(a,c,i)})}function x(a,e,o){(e[ys]??={})[a]=o}function aa(a){for(var e=0;e<a.length;e++)Yl.add(a[e]);for(var o of Tr)o(a)}let xn=null;function Dr(a){var e=this,o=e.ownerDocument,n=a.type,l=a.composedPath?.()||[],i=l[0]||a.target;xn=a;var c=0,d=xn===a&&a[ys];if(d){var p=l.indexOf(d);if(p!==-1&&(e===document||e===window)){a[ys]=e;return}var m=l.indexOf(e);if(m===-1)return;p<=m&&(c=p)}if(i=l[c]||a.target,i!==e){Fi(a,"currentTarget",{configurable:!0,get(){return i||o}});var h=Jt,v=jt;Ta(null),Da(null);try{for(var y,k=[];i!==null&&i!==e;){try{var w=i[ys]?.[n];w!=null&&(!i.disabled||a.target===i)&&w.call(i,a)}catch(E){y?k.push(E):y=E}if(a.cancelBubble)break;c++,i=c<l.length?l[c]:null}if(y){for(let E of k)queueMicrotask(()=>{throw E});throw y}}finally{a[ys]=e,delete a.currentTarget,Ta(h),Da(v)}}}const od=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:a=>a});function sd(a){return od?.createHTML(a)??a}function Jl(a){var e=Bl("template");return e.innerHTML=sd(a.replaceAll("<!>","<!---->")),e.content}function as(a,e){var o=jt;o.nodes===null&&(o.nodes={start:a,end:e,a:null,t:null})}function g(a,e){var o=(e&pc)!==0,n=(e&mc)!==0,l,i=!a.startsWith("<!>");return()=>{l===void 0&&(l=Jl(i?a:"<!>"+a),o||(l=es(l)));var c=n||Sl?document.importNode(l,!0):l.cloneNode(!0);if(o){var d=es(c),p=c.lastChild;as(d,p)}else as(c,c);return c}}function rd(a,e,o="svg"){var n=!a.startsWith("<!>"),l=`<${o}>${n?a:"<!>"+a}</${o}>`,i;return()=>{if(!i){var c=Jl(l),d=es(c);i=es(d)}var p=i.cloneNode(!0);return as(p,p),p}}function nd(a,e){return rd(a,e,"svg")}function lr(a=""){{var e=Xa(a+"");return as(e,e),e}}function Bt(){var a=document.createDocumentFragment(),e=document.createComment(""),o=Xa();return a.append(e,o),as(e,o),a}function f(a,e){a!==null&&a.before(e)}function b(a,e){var o=e==null?"":typeof e=="object"?`${e}`:e;o!==(a[zr]??=a.nodeValue)&&(a[zr]=o,a.nodeValue=`${o}`)}function Xl(a,e){return ld(a,e)}const Ts=new Map;function ld(a,{target:e,anchor:o,props:n={},events:l,context:i,intro:c=!0,transformError:d}){Nc();var p=void 0,m=qc(()=>{var h=o??e.appendChild(Xa());Lc(h,{pending:()=>{}},k=>{Qt({});var w=na;i&&(w.c=i),l&&(n.$$events=l),p=a(k,n)||{},$t()},d);var v=new Set,y=k=>{for(var w=0;w<k.length;w++){var E=k[w];if(!v.has(E)){v.add(E);var B=ad(E);for(const S of[e,document]){var U=Ts.get(S);U===void 0&&(U=new Map,Ts.set(S,U));var P=U.get(E);P===void 0?(S.addEventListener(E,Dr,{passive:B}),U.set(E,1)):U.set(E,P+1)}}}};return y(tr(Yl)),Tr.add(y),()=>{for(var k of v)for(const B of[e,document]){var w=Ts.get(B),E=w.get(k);--E==0?(B.removeEventListener(k,Dr),w.delete(k),w.size===0&&Ts.delete(B)):w.set(k,E)}Tr.delete(y),h!==o&&h.parentNode?.removeChild(h)}});return id.set(p,m),p}let id=new WeakMap;class ir{anchor;#t=new Map;#n=new Map;#e=new Map;#i=new Set;#o=!0;constructor(e,o=!0){this.anchor=e,this.#o=o}#r=e=>{if(this.#t.has(e)){var o=this.#t.get(e),n=this.#n.get(o);if(n)Qs(n),this.#i.delete(o);else{var l=this.#e.get(o);l&&(Qs(l.effect),this.#n.set(o,l.effect),this.#e.delete(o),l.fragment.lastChild.remove(),this.anchor.before(l.fragment),n=l.effect)}for(const[i,c]of this.#t){if(this.#t.delete(i),i===e)break;const d=this.#e.get(c);d&&(ba(d.effect),this.#e.delete(c))}for(const[i,c]of this.#n){if(i===o||this.#i.has(i))continue;const d=()=>{if(Array.from(this.#t.values()).includes(i)){var m=document.createDocumentFragment();on(c,m),m.append(Xa()),this.#e.set(i,{effect:c,fragment:m})}else ba(c);this.#i.delete(i),this.#n.delete(i)};this.#o||!n?(this.#i.add(i),Eo(c,d,!1)):d()}}};#a=e=>{this.#t.delete(e);const o=Array.from(this.#t.values());for(const[n,l]of this.#e)o.includes(n)||(ba(l.effect),this.#e.delete(n))};ensure(e,o){var n=Mt,l=Il();if(o&&!this.#n.has(e)&&!this.#e.has(e))if(l){var i=document.createDocumentFragment(),c=Xa();i.append(c),this.#e.set(e,{effect:La(()=>o(c)),fragment:i})}else this.#n.set(e,La(()=>o(this.anchor)));if(this.#t.set(n,e),l){for(const[d,p]of this.#n)d===e?n.unskip_effect(p):n.skip_effect(p);for(const[d,p]of this.#e)d===e?n.unskip_effect(p.effect):n.skip_effect(p.effect);n.oncommit(this.#r),n.ondiscard(this.#a)}else this.#r(n)}}function I(a,e,o=!1){var n=new ir(a),l=o?bo:0;function i(c,d){n.ensure(c,d)}ls(()=>{var c=!1;e((d,p=0)=>{c=!0,i(p,d)}),c||i(-1,null)},l)}const cd=Symbol("NaN");function pr(a,e,o){var n=new ir(a),l=!ns();ls(()=>{var i=e();i!==i&&(i=cd),l&&i!==null&&typeof i=="object"&&(i={}),n.ensure(i,o)})}function sn(a,e){return e}function dd(a,e,o){for(var n=[],l=e.length,i,c=e.length,d=0;d<l;d++){let v=e[d];Eo(v,()=>{if(i){if(i.pending.delete(v),i.done.add(v),i.pending.size===0){var y=a.outrogroups;Mr(a,tr(i.done)),y.delete(i),y.size===0&&(a.outrogroups=null)}}else c-=1},!1)}if(c===0){var p=n.length===0&&o!==null;if(p){var m=o,h=m.parentNode;Fc(h),h.append(m),a.items.clear()}Mr(a,e,!p)}else i={pending:new Set(e),done:new Set},(a.outrogroups??=new Set).add(i)}function Mr(a,e,o=!0){var n;if(a.pending.size>0){n=new Set;for(const c of a.pending.values())for(const d of c)n.add(a.items.get(d).e)}for(var l=0;l<e.length;l++){var i=e[l];if(n?.has(i)){i.f|=Za;const c=document.createDocumentFragment();on(i,c)}else ba(e[l],o)}}var kn;function re(a,e,o,n,l,i=null){var c=a,d=new Map,p=(e&il)!==0;if(p){var m=a;c=m.appendChild(Xa())}var h=null,v=Jr(()=>{var S=o();return Kr(S)?S:S==null?[]:tr(S)}),y,k=new Map,w=!0;function E(S){(P.effect.f&za)===0&&(P.pending.delete(S),P.fallback=h,fd(P,y,c,e,n),h!==null&&(y.length===0?(h.f&Za)===0?Qs(h):(h.f^=Za,xs(h,null,c)):Eo(h,()=>{h=null})))}function B(S){P.pending.delete(S)}var U=ls(()=>{y=t(v);for(var S=y.length,_=new Set,z=Mt,L=Il(),R=0;R<S;R+=1){var D=y[R],A=n(D,R),T=w?null:d.get(A);T?(T.v&&$o(T.v,D),T.i&&$o(T.i,R),L&&z.unskip_effect(T.e)):(T=ud(d,w?c:kn??=Xa(),D,A,R,l,e,o),w||(T.e.f|=Za),d.set(A,T)),_.add(A)}if(S===0&&i&&!h&&(w?h=La(()=>i(c)):(h=La(()=>i(kn??=Xa())),h.f|=Za)),S>_.size&&Zi(),!w)if(k.set(z,_),L){for(const[N,$]of d)_.has(N)||z.skip_effect($.e);z.oncommit(E),z.ondiscard(B)}else E(z);t(v)}),P={effect:U,items:d,pending:k,outrogroups:null,fallback:h};w=!1}function cs(a){for(;a!==null&&(a.f&Va)===0;)a=a.next;return a}function fd(a,e,o,n,l){var i=(n&lc)!==0,c=e.length,d=a.items,p=cs(a.effect.first),m,h=null,v,y=[],k=[],w,E,B,U;if(i)for(U=0;U<c;U+=1)w=e[U],E=l(w,U),B=d.get(E).e,(B.f&Za)===0&&(B.nodes?.a?.measure(),(v??=new Set).add(B));for(U=0;U<c;U+=1){if(w=e[U],E=l(w,U),B=d.get(E).e,a.outrogroups!==null)for(const T of a.outrogroups)T.pending.delete(B),T.done.delete(B);if((B.f&Oa)!==0&&(Qs(B),i&&(B.nodes?.a?.unfix(),(v??=new Set).delete(B))),(B.f&Za)!==0)if(B.f^=Za,B===p)xs(B,null,o);else{var P=h?h.next:p;B===a.effect.last&&(a.effect.last=B.prev),B.prev&&(B.prev.next=B.next),B.next&&(B.next.prev=B.prev),co(a,h,B),co(a,B,P),xs(B,P,o),h=B,y=[],k=[],p=cs(h.next);continue}if(B!==p){if(m!==void 0&&m.has(B)){if(y.length<k.length){var S=k[0],_;h=S.prev;var z=y[0],L=y[y.length-1];for(_=0;_<y.length;_+=1)xs(y[_],S,o);for(_=0;_<k.length;_+=1)m.delete(k[_]);co(a,z.prev,L.next),co(a,h,z),co(a,L,S),p=S,h=L,U-=1,y=[],k=[]}else m.delete(B),xs(B,p,o),co(a,B.prev,B.next),co(a,B,h===null?a.effect.first:h.next),co(a,h,B),h=B;continue}for(y=[],k=[];p!==null&&p!==B;)(m??=new Set).add(p),k.push(p),p=cs(p.next);if(p===null)continue}(B.f&Za)===0&&y.push(B),h=B,p=cs(B.next)}if(a.outrogroups!==null){for(const T of a.outrogroups)T.pending.size===0&&(Mr(a,tr(T.done)),a.outrogroups?.delete(T));a.outrogroups.size===0&&(a.outrogroups=null)}if(p!==null||m!==void 0){var R=[];if(m!==void 0)for(B of m)(B.f&Oa)===0&&R.push(B);for(;p!==null;)(p.f&Oa)===0&&p!==a.fallback&&R.push(p),p=cs(p.next);var D=R.length;if(D>0){var A=(n&il)!==0&&c===0?o:null;if(i){for(U=0;U<D;U+=1)R[U].nodes?.a?.measure();for(U=0;U<D;U+=1)R[U].nodes?.a?.fix()}dd(a,R,A)}}i&&no(()=>{if(v!==void 0)for(B of v)B.nodes?.a?.apply()})}function ud(a,e,o,n,l,i,c,d){var p=(c&rc)!==0?(c&ic)===0?Tc(o,!1,!1):xo(o):null,m=(c&nc)!==0?xo(l):null;return{v:p,i:m,e:La(()=>(i(e,p??o,m??l,d),()=>{a.delete(n)}))}}function xs(a,e,o){if(a.nodes)for(var n=a.nodes.start,l=a.nodes.end,i=e&&(e.f&Za)===0?e.nodes.start:o;n!==null;){var c=zs(n);if(i.before(n),n===l)return;n=c}}function co(a,e,o){e===null?a.effect.first=o:e.next=o,o===null?a.effect.last=e:o.prev=e}function qt(a,e,o,n,l){var i=e.$$slots?.[o],c=!1;i===!0&&(i=e.children,c=!0),i===void 0||i(a,c?()=>n:n)}function Nr(a,e,o){var n=new ir(a);ls(()=>{var l=e()??null;n.ensure(l,l&&(i=>o(i,l)))},bo)}function pd(a,e,o,n,l,i){var c=null,d=a,p=new ir(d,!1);ls(()=>{const m=e()||null;var h=vc;if(m===null){p.ensure(null,null);return}return p.ensure(m,v=>{if(m){if(c=Bl(m,h),as(c,c),n){var y=null,k=c.appendChild(Xa());n(c,k),y?.remove()}jt.nodes.end=c,v.before(c)}}),()=>{}},bo),rr(()=>{})}function md(a,e){var o=void 0,n;Rl(()=>{o!==(o=e())&&(n&&(ba(n),n=null),o&&(n=La(()=>{nr(()=>o(a))})))})}function Ql(a){var e,o,n="";if(typeof a=="string"||typeof a=="number")n+=a;else if(typeof a=="object")if(Array.isArray(a)){var l=a.length;for(e=0;e<l;e++)a[e]&&(o=Ql(a[e]))&&(n&&(n+=" "),n+=o)}else for(o in a)a[o]&&(n&&(n+=" "),n+=o);return n}function vd(){for(var a,e,o=0,n="",l=arguments.length;o<l;o++)(a=arguments[o])&&(e=Ql(a))&&(n&&(n+=" "),n+=e);return n}function ro(a){return typeof a=="object"?vd(a):a??""}const wn=[...` 	
+\r\f \v\uFEFF`];function hd(a,e,o){var n=a==null?"":""+a;if(e&&(n=n?n+" "+e:e),o){for(var l of Object.keys(o))if(o[l])n=n?n+" "+l:l;else if(n.length)for(var i=l.length,c=0;(c=n.indexOf(l,c))>=0;){var d=c+i;(c===0||wn.includes(n[c-1]))&&(d===n.length||wn.includes(n[d]))?n=(c===0?"":n.substring(0,c))+n.substring(d+1):c=d}}return n===""?null:n}function _n(a,e=!1){var o=e?" !important;":";",n="";for(var l of Object.keys(a)){var i=a[l];i!=null&&i!==""&&(n+=" "+l+": "+i+o)}return n}function mr(a){return a[0]!=="-"||a[1]!=="-"?a.toLowerCase():a}function gd(a,e){if(e){var o="",n,l;if(Array.isArray(e)?(n=e[0],l=e[1]):n=e,a){a=String(a).replaceAll(/\s*\/\*.*?\*\/\s*/g,"").trim();var i=!1,c=0,d=!1,p=[];n&&p.push(...Object.keys(n).map(mr)),l&&p.push(...Object.keys(l).map(mr));var m=0,h=-1;const E=a.length;for(var v=0;v<E;v++){var y=a[v];if(d?y==="/"&&a[v-1]==="*"&&(d=!1):i?i===y&&(i=!1):y==="/"&&a[v+1]==="*"?d=!0:y==='"'||y==="'"?i=y:y==="("?c++:y===")"&&c--,!d&&i===!1&&c===0){if(y===":"&&h===-1)h=v;else if(y===";"||v===E-1){if(h!==-1){var k=mr(a.substring(m,h).trim());if(!p.includes(k)){y!==";"&&v++;var w=a.substring(m,v).trim();o+=" "+w+";"}}m=v+1,h=-1}}}}return n&&(o+=_n(n)),l&&(o+=_n(l,!0)),o=o.trim(),o===""?null:o}return a==null?null:String(a)}function Ye(a,e,o,n,l,i){var c=a[Br];if(c!==o||c===void 0){var d=hd(o,n,i);d==null?a.removeAttribute("class"):e?a.className=d:a.setAttribute("class",d),a[Br]=o}else if(i&&l!==i)for(var p in i){var m=!!i[p];(l==null||m!==!!l[p])&&a.classList.toggle(p,m)}return i}function vr(a,e={},o,n){for(var l in o){var i=o[l];e[l]!==i&&(o[l]==null?a.style.removeProperty(l):a.style.setProperty(l,i,n))}}function lt(a,e,o,n){var l=a[Ur];if(l!==e){var i=gd(e,n);i==null?a.removeAttribute("style"):a.style.cssText=i,a[Ur]=e}else n&&(Array.isArray(n)?(vr(a,o?.[0],n[0]),vr(a,o?.[1],n[1],"important")):vr(a,o,n));return n}function Ba(a,e,o=!1){if(a.multiple){if(e==null)return;if(!Kr(e))return bc();for(var n of a.options)n.selected=e.includes(_s(n));return}for(n of a.options){var l=_s(n);if(Mc(l,e)){n.selected=!0;return}}(!o||e!==void 0)&&(a.selectedIndex=-1)}function Na(a){var e=new MutationObserver(()=>{Ba(a,a.__value)});e.observe(a,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),rr(()=>{e.disconnect()})}function Cn(a,e,o=e){var n=new WeakSet,l=!0;zl(a,"change",i=>{var c=i?"[selected]":":checked",d;if(a.multiple)d=[].map.call(a.querySelectorAll(c),_s);else{var p=a.querySelector(c)??a.querySelector("option:not([disabled])");d=p&&_s(p)}o(d),a.__value=d,Mt!==null&&n.add(Mt)}),nr(()=>{var i=e();if(a===document.activeElement){var c=Mt;if(n.has(c))return}if(Ba(a,i,l),l&&i===void 0){var d=a.querySelector(":checked");d!==null&&(i=_s(d),o(i))}a.__value=i,l=!1}),Na(a)}function _s(a){return"__value"in a?a.__value:a.value}const ds=Symbol("class"),fs=Symbol("style"),$l=Symbol("is custom element"),ei=Symbol("is html"),bd=or?"input":"INPUT",yd=or?"option":"OPTION",xd=or?"select":"SELECT",kd=or?"progress":"PROGRESS";function Xt(a,e){var o=rn(a);o.value===(o.value=e??void 0)||a.value===e&&(e!==0||a.nodeName!==kd)||(a.value=e??"")}function wd(a,e){e?a.hasAttribute("selected")||a.setAttribute("selected",""):a.removeAttribute("selected")}function Y(a,e,o,n){var l=rn(a);l[e]!==(l[e]=o)&&(e==="loading"&&(a[Ki]=o),o==null?a.removeAttribute(e):typeof o!="string"&&ti(a).includes(e)?a[e]=o:a.setAttribute(e,o))}function _d(a,e,o,n,l=!1,i=!1){var c=rn(a),d=c[$l],p=!c[ei],m=e||{},h=a.nodeName===yd;for(var v in e)v in o||(o[v]=null);o.class?o.class=ro(o.class):o[ds]&&(o.class=null),o[fs]&&(o.style??=null);var y=ti(a);if(a.nodeName===bd&&"type"in o&&("value"in o||"__value"in o)){var k=o.type;(k!==m.type||k===void 0&&a.hasAttribute("type"))&&(m.type=k,Y(a,"type",k))}for(const z in o){let L=o[z];if(h&&z==="value"&&L==null){a.value=a.__value="",m[z]=L;continue}if(z==="class"){var w=a.namespaceURI==="http://www.w3.org/1999/xhtml";Ye(a,w,L,n,e?.[ds],o[ds]),m[z]=L,m[ds]=o[ds];continue}if(z==="style"){lt(a,L,e?.[fs],o[fs]),m[z]=L,m[fs]=o[fs];continue}var E=m[z];if(!(L===E&&!(L===void 0&&a.hasAttribute(z)))){m[z]=L;var B=z[0]+z[1];if(B!=="$$")if(B==="on"){const R={},D="$$"+z;let A=z.slice(2);var U=Qc(A);if(Jc(A)&&(A=A.slice(0,-7),R.capture=!0),!U&&E){if(L!=null)continue;a.removeEventListener(A,m[D],R),m[D]=null}if(U)x(A,a,L),aa([A]);else if(L!=null){let T=function(N){m[z].call(this,N)};var _=T;m[D]=Zl(A,a,T,R)}}else if(z==="style")Y(a,z,L);else if(z==="autofocus")Ul(a,!!L);else if(!d&&(z==="__value"||z==="value"&&L!=null))a.value=a.__value=L;else if(z==="selected"&&h)wd(a,L);else{var P=z;p||(P=ed(P));var S=P==="defaultValue"||P==="defaultChecked";if(L==null&&!d&&!S)if(c[z]=null,P==="value"||P==="checked"){let R=a;const D=e===void 0;if(P==="value"){let A=R.defaultValue;R.removeAttribute(P),R.defaultValue=A,R.value=R.__value=D?A:null}else{let A=R.defaultChecked;R.removeAttribute(P),R.defaultChecked=A,R.checked=D?A:!1}}else a.removeAttribute(z);else S||y.includes(P)&&(d||typeof L!="string")?(a[P]=L,P in c&&(c[P]=ua)):typeof L!="function"&&Y(a,P,L)}}}return m}function On(a,e,o=[],n=[],l=[],i,c=!1,d=!1){gl(l,o,n,p=>{var m=void 0,h={},v=a.nodeName===xd,y=!1;if(Rl(()=>{var w=e(...p.map(t)),E=_d(a,m,w,i,c,d);y&&v&&"value"in w&&Ba(a,w.value);for(let U of Object.getOwnPropertySymbols(h))w[U]||ba(h[U]);for(let U of Object.getOwnPropertySymbols(w)){var B=w[U];U.description===hc&&(!m||B!==m[U])&&(h[U]&&ba(h[U]),h[U]=La(()=>md(a,()=>B))),E[U]=B}m=E}),v){var k=a;nr(()=>{Ba(k,m.value,!0),Na(k)})}y=!0})}function rn(a){return a[ll]??={[$l]:a.nodeName.includes("-"),[ei]:a.namespaceURI===dl}}var Sn=new Map;function ti(a){var e=a.getAttribute("is")||a.nodeName,o=Sn.get(e);if(o)return o;Sn.set(e,o=[]);for(var n,l=a,i=Element.prototype;i!==l;){n=ol(l);for(var c in n)n[c].set&&c!=="innerHTML"&&c!=="textContent"&&c!=="innerText"&&o.push(c);l=Wr(l)}return o}function ai(a,e,o=e){var n=new WeakSet;zl(a,"input",async l=>{var i=l?a.defaultValue:a.value;if(i=hr(a)?gr(i):i,o(i),Mt!==null&&n.add(Mt),await Vl(),i!==(i=e())){var c=a.selectionStart,d=a.selectionEnd,p=a.value.length;if(a.value=i??"",d!==null){var m=a.value.length;c===d&&d===p&&m>p?(a.selectionStart=m,a.selectionEnd=m):(a.selectionStart=c,a.selectionEnd=Math.min(d,m))}}}),ko(e)==null&&a.value&&(o(hr(a)?gr(a.value):a.value),Mt!==null&&n.add(Mt)),tn(()=>{var l=e();if(a===document.activeElement){var i=Mt;if(n.has(i))return}hr(a)&&l===gr(a.value)||a.type==="date"&&!l&&!a.value||l!==a.value&&(a.value=l??"")})}function hr(a){var e=a.type;return e==="number"||e==="range"}function gr(a){return a===""?null:+a}function br(a,e){return a===e||a?.[Ja]===e}function Yo(a={},e,o,n){var l=na.r,i=jt;return nr(()=>{var c,d;return tn(()=>{c=d,d=[],ko(()=>{br(o(...d),a)||(e(a,...d),c&&br(o(...c),a)&&e(null,...c))})}),()=>{let p=i;for(;p!==l&&p.parent!==null&&p.parent.f&Ir;)p=p.parent;const m=()=>{d&&br(o(...d),a)&&e(null,...d)},h=p.teardown;p.teardown=()=>{m(),h?.()}}}),a}function Cd(a=!1){const e=na,o=e.l.u;if(!o)return;let n=()=>Ho(e.s);if(a){let l=0,i={};const c=Qo(()=>{let d=!1;const p=e.s;for(const m in p)p[m]!==i[m]&&(i[m]=p[m],d=!0);return d&&l++,l});n=()=>t(c)}o.b.length&&Hc(()=>{Ln(e,n),Lr(o.b)}),ha(()=>{const l=ko(()=>o.m.map(qi));return()=>{for(const i of l)typeof i=="function"&&i()}}),o.a.length&&ha(()=>{Ln(e,n),Lr(o.a)})}function Ln(a,e){if(a.l.s)for(const o of a.l.s)t(o);e()}const Od={get(a,e){if(!a.exclude.includes(e))return t(a.version),e in a.special?a.special[e]():a.props[e]},set(a,e,o){if(!(e in a.special)){var n=jt;try{Da(a.parent_effect),a.special[e]=ka({get[e](){return a.props[e]}},e,cl)}finally{Da(n)}}return a.special[e](o),mn(a.version),!0},getOwnPropertyDescriptor(a,e){if(!a.exclude.includes(e)&&e in a.props)return{enumerable:!0,configurable:!0,value:a.props[e]}},deleteProperty(a,e){return a.exclude.includes(e)||(a.exclude.push(e),mn(a.version)),!0},has(a,e){return a.exclude.includes(e)?!1:e in a.props},ownKeys(a){return Reflect.ownKeys(a.props).filter(e=>!a.exclude.includes(e))}};function Ht(a,e){return new Proxy({props:a,exclude:e,special:{},version:xo(0),parent_effect:jt},Od)}const Sd={get(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(is(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n)return n[e]}},set(a,e,o){let n=a.props.length;for(;n--;){let l=a.props[n];is(l)&&(l=l());const i=mo(l,e);if(i&&i.set)return i.set(o),!0}return!1},getOwnPropertyDescriptor(a,e){let o=a.props.length;for(;o--;){let n=a.props[o];if(is(n)&&(n=n()),typeof n=="object"&&n!==null&&e in n){const l=mo(n,e);return l&&!l.configurable&&(l.configurable=!0),l}}},has(a,e){if(e===Ja||e===nl)return!1;for(let o of a.props)if(is(o)&&(o=o()),o!=null&&e in o)return!0;return!1},ownKeys(a){const e=[];for(let o of a.props)if(is(o)&&(o=o()),!!o){for(const n in o)e.includes(n)||e.push(n);for(const n of Object.getOwnPropertySymbols(o))e.includes(n)||e.push(n)}return e}};function Wt(...a){return new Proxy({props:a},Sd)}function ka(a,e,o,n){var l=!rs||(o&dc)!==0,i=(o&fc)!==0,c=(o&uc)!==0,d=n,p=!0,m=void 0,h=()=>c&&l?(m??=Qo(n),t(m)):(p&&(p=!1,d=c?ko(n):n),d);let v;if(i){var y=Ja in a||nl in a;v=mo(a,e)?.set??(y&&e in a?_=>a[e]=_:void 0)}var k,w=!1;i?[k,w]=Cc(()=>a[e]):k=a[e],k===void 0&&n!==void 0&&(k=h(),v&&(l&&ec(),v(k)));var E;if(l?E=()=>{var _=a[e];return _===void 0?h():(p=!0,_)}:E=()=>{var _=a[e];return _!==void 0&&(d=void 0),_===void 0?d:_},l&&(o&cl)===0)return E;if(v){var B=a.$$legacy;return(function(_,z){return arguments.length>0?((!l||!z||B||w)&&v(z?E():_),_):E()})}var U=!1,P=((o&cc)!==0?Qo:Jr)(()=>(U=!1,E()));i&&t(P);var S=jt;return(function(_,z){if(arguments.length>0){const L=z?t(P):l&&i?da(_):_;return O(P,L),U=!0,d!==void 0&&(d=L),_}return io&&U||(S.f&za)!==0?P.v:t(P)})}function oi(a){na===null&&Wi(),rs&&na.l!==null?Ld(na).m.push(a):ha(()=>{const e=ko(a);if(typeof e=="function")return e})}function Ld(a){var e=a.l;return e.u??={a:[],b:[],m:[]}}const Pd="5";typeof window<"u"&&((window.__svelte??={}).v??=new Set).add(Pd);kc();/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const Id={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};var Bd=nd("<svg><!><!></svg>");function Wt(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]),n=Gt(o,["name","color","size","strokeWidth","absoluteStrokeWidth","iconNode"]);Qt(e,!1);let l=ka(e,"name",8,void 0),i=ka(e,"color",8,"currentColor"),c=ka(e,"size",8,24),d=ka(e,"strokeWidth",8,2),p=ka(e,"absoluteStrokeWidth",8,!1),m=ka(e,"iconNode",24,()=>[]);const h=(...w)=>w.filter((E,B,U)=>!!E&&U.indexOf(E)===B).join(" ");Cd();var v=Bd();On(v,(w,E)=>({...Id,...n,width:c(),height:c(),stroke:i(),"stroke-width":w,class:E}),[()=>(Ho(p()),Ho(d()),Ho(c()),ko(()=>p()?Number(d())*24/Number(c()):d())),()=>(Ho(l()),Ho(o),ko(()=>h("lucide-icon","lucide",l()?`lucide-${l()}`:"",o.class)))]);var y=s(v);re(y,1,m,sn,(w,E)=>{var B=u(()=>Pa(t(E),2));let U=()=>t(B)[0],P=()=>t(B)[1];var S=Bt(),_=fe(S);pd(_,U,!0,(z,L)=>{On(z,()=>({...P()}))}),f(w,S)});var k=r(y);Ht(k,e,"default",{}),f(a,v),$t()}function Ud(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const Id={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};var Bd=nd("<svg><!><!></svg>");function Yt(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]),n=Ht(o,["name","color","size","strokeWidth","absoluteStrokeWidth","iconNode"]);Qt(e,!1);let l=ka(e,"name",8,void 0),i=ka(e,"color",8,"currentColor"),c=ka(e,"size",8,24),d=ka(e,"strokeWidth",8,2),p=ka(e,"absoluteStrokeWidth",8,!1),m=ka(e,"iconNode",24,()=>[]);const h=(...w)=>w.filter((E,B,U)=>!!E&&U.indexOf(E)===B).join(" ");Cd();var v=Bd();On(v,(w,E)=>({...Id,...n,width:c(),height:c(),stroke:i(),"stroke-width":w,class:E}),[()=>(Ho(p()),Ho(d()),Ho(c()),ko(()=>p()?Number(d())*24/Number(c()):d())),()=>(Ho(l()),Ho(o),ko(()=>h("lucide-icon","lucide",l()?`lucide-${l()}`:"",o.class)))]);var y=s(v);re(y,1,m,sn,(w,E)=>{var B=u(()=>Pa(t(E),2));let U=()=>t(B)[0],P=()=>t(B)[1];var S=Bt(),_=de(S);pd(_,U,!0,(z,L)=>{On(z,()=>({...P()}))}),f(w,S)});var k=r(y);qt(k,e,"default",{}),f(a,v),$t()}function Ud(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1"}],["path",{d:"M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"}]];Wt(a,Kt({name:"blocks"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function zd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"7",height:"7",x:"14",y:"3",rx:"1"}],["path",{d:"M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"}]];Yt(a,Wt({name:"blocks"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function zd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M12 7v14"}],["path",{d:"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}]];Wt(a,Kt({name:"book-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Mo(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M12 7v14"}],["path",{d:"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"}]];Yt(a,Wt({name:"book-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Mo(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M20 6 9 17l-5-5"}]];Wt(a,Kt({name:"check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Pn(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M20 6 9 17l-5-5"}]];Yt(a,Wt({name:"check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Pn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"m9 18 6-6-6-6"}]];Wt(a,Kt({name:"chevron-right"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ad(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"m9 18 6-6-6-6"}]];Yt(a,Wt({name:"chevron-right"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ad(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M12 3v18"}]];Wt(a,Kt({name:"columns-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Fr(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M12 3v18"}]];Yt(a,Wt({name:"columns-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Fr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]];Wt(a,Kt({name:"copy"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function jr(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"}]];Yt(a,Wt({name:"copy"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function jr(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["polyline",{points:"7 10 12 15 17 10"}],["line",{x1:"12",x2:"12",y1:"15",y2:"3"}]];Wt(a,Kt({name:"download"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ed(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}],["polyline",{points:"7 10 12 15 17 10"}],["line",{x1:"12",x2:"12",y1:"15",y2:"3"}]];Yt(a,Wt({name:"download"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Ed(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M15 3h6v6"}],["path",{d:"M10 14 21 3"}],["path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]];Wt(a,Kt({name:"external-link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function si(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M15 3h6v6"}],["path",{d:"M10 14 21 3"}],["path",{d:"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]];Yt(a,Wt({name:"external-link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function si(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]];Wt(a,Kt({name:"folder-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Rd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"}]];Yt(a,Wt({name:"folder-open"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Rd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{d:"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]];Wt(a,Kt({name:"house"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ri(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"}],["path",{d:"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"}]];Yt(a,Wt({name:"house"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ri(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{d:"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{d:"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]];Wt(a,Kt({name:"layers"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Td(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{d:"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{d:"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]];Yt(a,Wt({name:"layers"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Td(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]];Wt(a,Kt({name:"link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Dd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}],["path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"}]];Yt(a,Wt({name:"link"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Dd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M3 12h.01"}],["path",{d:"M3 18h.01"}],["path",{d:"M3 6h.01"}],["path",{d:"M8 12h13"}],["path",{d:"M8 18h13"}],["path",{d:"M8 6h13"}]];Wt(a,Kt({name:"list"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ni(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M3 12h.01"}],["path",{d:"M3 18h.01"}],["path",{d:"M3 6h.01"}],["path",{d:"M8 12h13"}],["path",{d:"M8 18h13"}],["path",{d:"M8 6h13"}]];Yt(a,Wt({name:"list"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ni(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56"}]];Wt(a,Kt({name:"loader-circle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Md(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56"}]];Yt(a,Wt({name:"loader-circle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Md(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21"}]];Wt(a,Kt({name:"monitor"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function In(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"20",height:"14",x:"2",y:"3",rx:"2"}],["line",{x1:"8",x2:"16",y1:"21",y2:"21"}],["line",{x1:"12",x2:"12",y1:"17",y2:"21"}]];Yt(a,Wt({name:"monitor"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function In(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"}]];Wt(a,Kt({name:"moon"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Nd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"}]];Yt(a,Wt({name:"moon"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Nd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{d:"M12 22V12"}],["path",{d:"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7"}],["path",{d:"m7.5 4.27 9 5.15"}]];Wt(a,Kt({name:"package"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function li(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"}],["path",{d:"M12 22V12"}],["path",{d:"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7"}],["path",{d:"m7.5 4.27 9 5.15"}]];Yt(a,Wt({name:"package"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function li(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor"}],["circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor"}],["circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor"}],["circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor"}],["path",{d:"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"}]];Wt(a,Kt({name:"palette"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Fd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor"}],["circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor"}],["circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor"}],["circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor"}],["path",{d:"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"}]];Yt(a,Wt({name:"palette"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Fd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M3 9h18"}],["path",{d:"M9 21V9"}]];Wt(a,Kt({name:"panels-top-left"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function jd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}],["path",{d:"M3 9h18"}],["path",{d:"M9 21V9"}]];Yt(a,Wt({name:"panels-top-left"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function jd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]];Wt(a,Kt({name:"puzzle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ii(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"}]];Yt(a,Wt({name:"puzzle"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ii(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"m15 14 5-5-5-5"}],["path",{d:"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]];Wt(a,Kt({name:"redo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Gd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"m15 14 5-5-5-5"}],["path",{d:"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]];Yt(a,Wt({name:"redo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Gd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{d:"M21 3v5h-5"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{d:"M8 16H3v5"}]];Wt(a,Kt({name:"refresh-cw"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ci(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}],["path",{d:"M21 3v5h-5"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}],["path",{d:"M8 16H3v5"}]];Yt(a,Wt({name:"refresh-cw"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ci(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"}],["path",{d:"m14.5 12.5 2-2"}],["path",{d:"m11.5 9.5 2-2"}],["path",{d:"m8.5 6.5 2-2"}],["path",{d:"m17.5 15.5 2-2"}]];Wt(a,Kt({name:"ruler"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function di(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"}],["path",{d:"m14.5 12.5 2-2"}],["path",{d:"m11.5 9.5 2-2"}],["path",{d:"m8.5 6.5 2-2"}],["path",{d:"m17.5 15.5 2-2"}]];Yt(a,Wt({name:"ruler"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function di(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{d:"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{d:"M7 3v4a1 1 0 0 0 1 1h7"}]];Wt(a,Kt({name:"save"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Hd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}],["path",{d:"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"}],["path",{d:"M7 3v4a1 1 0 0 0 1 1h7"}]];Yt(a,Wt({name:"save"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Hd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["circle",{cx:"18",cy:"5",r:"3"}],["circle",{cx:"6",cy:"12",r:"3"}],["circle",{cx:"18",cy:"19",r:"3"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49"}]];Wt(a,Kt({name:"share-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function qd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["circle",{cx:"18",cy:"5",r:"3"}],["circle",{cx:"6",cy:"12",r:"3"}],["circle",{cx:"18",cy:"19",r:"3"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49"}]];Yt(a,Wt({name:"share-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function qd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{d:"m9 12 2 2 4-4"}]];Wt(a,Kt({name:"shield-check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Vd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"}],["path",{d:"m9 12 2 2 4-4"}]];Yt(a,Wt({name:"shield-check"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Vd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["line",{x1:"21",x2:"14",y1:"4",y2:"4"}],["line",{x1:"10",x2:"3",y1:"4",y2:"4"}],["line",{x1:"21",x2:"12",y1:"12",y2:"12"}],["line",{x1:"8",x2:"3",y1:"12",y2:"12"}],["line",{x1:"21",x2:"16",y1:"20",y2:"20"}],["line",{x1:"12",x2:"3",y1:"20",y2:"20"}],["line",{x1:"14",x2:"14",y1:"2",y2:"6"}],["line",{x1:"8",x2:"8",y1:"10",y2:"14"}],["line",{x1:"16",x2:"16",y1:"18",y2:"22"}]];Wt(a,Kt({name:"sliders-horizontal"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Kd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["line",{x1:"21",x2:"14",y1:"4",y2:"4"}],["line",{x1:"10",x2:"3",y1:"4",y2:"4"}],["line",{x1:"21",x2:"12",y1:"12",y2:"12"}],["line",{x1:"8",x2:"3",y1:"12",y2:"12"}],["line",{x1:"21",x2:"16",y1:"20",y2:"20"}],["line",{x1:"12",x2:"3",y1:"20",y2:"20"}],["line",{x1:"14",x2:"14",y1:"2",y2:"6"}],["line",{x1:"8",x2:"8",y1:"10",y2:"14"}],["line",{x1:"16",x2:"16",y1:"18",y2:"22"}]];Yt(a,Wt({name:"sliders-horizontal"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Kd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2"}],["path",{d:"M12 18h.01"}]];Wt(a,Kt({name:"smartphone"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function fi(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"14",height:"20",x:"5",y:"2",rx:"2",ry:"2"}],["path",{d:"M12 18h.01"}]];Yt(a,Wt({name:"smartphone"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function fi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"}],["path",{d:"M20 3v4"}],["path",{d:"M22 5h-4"}],["path",{d:"M4 17v2"}],["path",{d:"M5 18H3"}]];Wt(a,Kt({name:"sparkles"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ui(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"}],["path",{d:"M20 3v4"}],["path",{d:"M22 5h-4"}],["path",{d:"M4 17v2"}],["path",{d:"M5 18H3"}]];Yt(a,Wt({name:"sparkles"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function ui(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}]];Wt(a,Kt({name:"square"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Bn(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2"}]];Yt(a,Wt({name:"square"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Bn(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["circle",{cx:"12",cy:"12",r:"4"}],["path",{d:"M12 2v2"}],["path",{d:"M12 20v2"}],["path",{d:"m4.93 4.93 1.41 1.41"}],["path",{d:"m17.66 17.66 1.41 1.41"}],["path",{d:"M2 12h2"}],["path",{d:"M20 12h2"}],["path",{d:"m6.34 17.66-1.41 1.41"}],["path",{d:"m19.07 4.93-1.41 1.41"}]];Wt(a,Kt({name:"sun"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Wd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["circle",{cx:"12",cy:"12",r:"4"}],["path",{d:"M12 2v2"}],["path",{d:"M12 20v2"}],["path",{d:"m4.93 4.93 1.41 1.41"}],["path",{d:"m17.66 17.66 1.41 1.41"}],["path",{d:"M2 12h2"}],["path",{d:"M20 12h2"}],["path",{d:"m6.34 17.66-1.41 1.41"}],["path",{d:"m19.07 4.93-1.41 1.41"}]];Yt(a,Wt({name:"sun"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Wd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"}],["path",{d:"M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"}],["path",{d:"M 7 17h.01"}],["path",{d:"m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"}]];Wt(a,Kt({name:"swatch-book"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Yd(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"}],["path",{d:"M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"}],["path",{d:"M 7 17h.01"}],["path",{d:"m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"}]];Yt(a,Wt({name:"swatch-book"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function Yd(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18"}]];Wt(a,Kt({name:"tablet"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function pi(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["rect",{width:"16",height:"20",x:"4",y:"2",rx:"2",ry:"2"}],["line",{x1:"12",x2:"12.01",y1:"18",y2:"18"}]];Yt(a,Wt({name:"tablet"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function pi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M3 6h18"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17"}]];Wt(a,Kt({name:"trash-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function mi(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M3 6h18"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17"}]];Yt(a,Wt({name:"trash-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function mi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["polyline",{points:"4 7 4 4 20 4 20 7"}],["line",{x1:"9",x2:"15",y1:"20",y2:"20"}],["line",{x1:"12",x2:"12",y1:"4",y2:"20"}]];Wt(a,Kt({name:"type"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function vi(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["polyline",{points:"4 7 4 4 20 4 20 7"}],["line",{x1:"9",x2:"15",y1:"20",y2:"20"}],["line",{x1:"12",x2:"12",y1:"4",y2:"20"}]];Yt(a,Wt({name:"type"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function vi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M9 14 4 9l5-5"}],["path",{d:"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]];Wt(a,Kt({name:"undo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function hi(a,e){const o=Gt(e,["children","$$slots","$$events","$$legacy"]);/**
+ */const n=[["path",{d:"M9 14 4 9l5-5"}],["path",{d:"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]];Yt(a,Wt({name:"undo-2"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}function hi(a,e){const o=Ht(e,["children","$$slots","$$events","$$legacy"]);/**
  * @license lucide-svelte v0.468.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const n=[["path",{d:"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"}]];Wt(a,Kt({name:"zap"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=fe(c);Ht(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}var Zd=g('<button class="flex items-center gap-1.5 px-2.5 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-lg text-indigo-300 text-[10px] font-bold font-mono hover:bg-indigo-500/20 transition-colors cursor-pointer shrink-0"><span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[9px] font-black"> </span> customised · Export →</button>'),Jd=g("<!> Saving…",1),Xd=g("<!> Saved",1),Qd=g("<!> Save",1),$d=g('<header class="h-[52px] bg-[#0d0d14] border-b border-white/8 flex items-center px-3 gap-3 shrink-0 z-20"><div class="w-8 h-8 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-lg leading-none select-none shadow-lg shadow-indigo-600/30 shrink-0">/</div> <div class="shrink-0"><div class="text-[11px] font-bold text-white tracking-tight leading-none flex items-center gap-1.5">SLASHED Studio <span class="text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono"> </span></div> <div class="text-[9px] text-slate-500 font-mono tracking-widest uppercase mt-0.5">Token Architect</div></div> <!> <div class="flex-1"></div> <div class="flex items-center gap-1.5"><button><!></button> <button title="Undo (Ctrl+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <div class="w-px h-4 bg-white/10 mx-1"></div> <button title="Copy share link" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Import CSS overrides" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Reset all overrides" class="p-1.5 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button></div></header>');function ef(a,e){Qt(e,!0);const o=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"";let n=G(!1);async function l(){try{await navigator.clipboard.writeText(window.location.href),O(n,!0),setTimeout(()=>{O(n,!1)},2e3)}catch{}}var i=$d(),c=r(s(i),2),d=s(c),p=r(s(d)),m=s(p),h=r(c,2);{var v=te=>{var ye=Zd(),Ie=s(ye),he=s(Ie);C(()=>b(he,e.overridesCount)),x("click",ye,function(...ve){e.onExport?.apply(this,ve)}),f(te,ye)};I(h,te=>{e.overridesCount>0&&te(v)})}var y=r(h,4),k=s(y),w=s(k);{var E=te=>{var ye=Jd(),Ie=fe(ye);ni(Ie,{class:"w-3.5 h-3.5 animate-spin"}),f(te,ye)},B=te=>{var ye=Xd(),Ie=fe(ye);Mo(Ie,{class:"w-3.5 h-3.5"}),f(te,ye)},U=te=>{var ye=Qd(),Ie=fe(ye);di(Ie,{class:"w-3.5 h-3.5"}),f(te,ye)};I(w,te=>{e.saveState==="saving"?te(E):e.saveState==="saved"?te(B,1):te(U,-1)})}var P=r(k,2),S=s(P);vi(S,{class:"w-3.5 h-3.5"});var _=r(P,2),z=s(_);ii(z,{class:"w-3.5 h-3.5"});var L=r(_,4),R=s(L);{var D=te=>{Mo(te,{class:"w-3.5 h-3.5 text-emerald-400"})},A=te=>{Hd(te,{class:"w-3.5 h-3.5"})};I(R,te=>{t(n)?te(D):te(A,-1)})}var T=r(L,2),N=s(T);si(N,{class:"w-3.5 h-3.5"});var $=r(T,2),He=s($);pi(He,{class:"w-3.5 h-3.5"}),C(te=>{b(m,`v${o??""}`),k.disabled=!e.hasPendingChanges||e.saveState==="saving",Y(k,"title",e.hasPendingChanges?"Save changes (Ctrl+S)":"No unsaved changes"),Ye(k,1,te),P.disabled=!e.canUndo,_.disabled=!e.canRedo,$.disabled=e.overridesCount===0},[()=>ro(["flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all cursor-pointer",e.saveState==="saved"?"bg-emerald-900/40 border border-emerald-500/30 text-emerald-300":e.hasPendingChanges?"bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30":"bg-white/5 text-slate-500 disabled:opacity-40 disabled:pointer-events-none"].join(" "))]),x("click",k,function(...te){e.onSave?.apply(this,te)}),x("click",P,function(...te){e.onUndo?.apply(this,te)}),x("click",_,function(...te){e.onRedo?.apply(this,te)}),x("click",L,l),x("click",T,function(...te){e.onImport?.apply(this,te)}),x("click",$,function(...te){e.onResetAll?.apply(this,te)}),f(a,i),$t()}ta(["click"]);var Un=g('<span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center"> </span>'),zn=g('<button><!> <!> <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10"> </span></button>'),tf=g('<nav class="w-14 bg-[#0a0a0f] border-r border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden"><div class="flex flex-col items-center gap-1 w-full px-2"></div> <div class="w-8 h-px bg-white/8 my-2"></div> <div class="flex flex-col items-center gap-1 w-full px-2"></div></nav>');function gi(a,e){Qt(e,!0);let o=ka(e,"overridesByDomain",19,()=>({}));const n=[{id:"home",icon:Rd,label:"Home",group:"tokens"},{id:"colors",icon:li,label:"Colors",group:"tokens"},{id:"typography",icon:mi,label:"Typography",group:"tokens"},{id:"spacing",icon:ci,label:"Spacing",group:"tokens"},{id:"layout",icon:Fd,label:"Layout",group:"tokens"},{id:"borders",icon:ui,label:"Borders",group:"tokens"},{id:"shadows",icon:ri,label:"Shadows",group:"tokens"},{id:"motion",icon:hi,label:"Motion",group:"tokens"},{id:"effects",icon:fi,label:"Effects",group:"tokens"},{id:"macros",icon:Ud,label:"Macros",group:"tokens"},{id:"misc",icon:jd,label:"Misc",group:"tokens"},{id:"themes",icon:Wd,label:"Themes",group:"tools"},{id:"wcag",icon:qd,label:"WCAG",group:"tools"},{id:"setup",icon:Nd,label:"Install",group:"tools"},{id:"cheatsheet",icon:zd,label:"Classes",group:"tools"}];let l=u(()=>n.filter(m=>m.group==="tokens")),i=u(()=>n.filter(m=>m.group==="tools"));var c=tf(),d=s(c);re(d,21,()=>t(l),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),y=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var w=zn(),E=s(w);Nr(E,()=>t(k),(_,z)=>{z(_,{class:"w-4 h-4"})});var B=r(E,2);{var U=_=>{var z=Un(),L=s(z);C(()=>b(L,t(y)>9?"+":t(y))),f(_,z)};I(B,_=>{t(y)>0&&!t(v)&&_(U)})}var P=r(B,2),S=s(P);C(()=>{Y(w,"title",t(h).label),Ye(w,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),b(S,t(h).label)}),x("click",w,()=>e.onSelect(t(h).id)),f(m,w)});var p=r(d,4);re(p,21,()=>t(i),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),y=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var w=zn(),E=s(w);Nr(E,()=>t(k),(_,z)=>{z(_,{class:"w-4 h-4"})});var B=r(E,2);{var U=_=>{var z=Un(),L=s(z);C(()=>b(L,t(y)>9?"+":t(y))),f(_,z)};I(B,_=>{t(y)>0&&!t(v)&&_(U)})}var P=r(B,2),S=s(P);C(()=>{Y(w,"title",t(h).label),Ye(w,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),b(S,t(h).label)}),x("click",w,()=>e.onSelect(t(h).id)),f(m,w)}),f(a,c),$t()}ta(["click"]);var af=g('<span class="text-indigo-400"> </span>'),of=g('<div class="h-6 bg-[#07070b] border-t border-white/6 flex items-center px-4 gap-4 shrink-0 select-none"><div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> <span class="text-[9px] font-mono font-bold text-slate-500 uppercase tracking-widest">Live</span></div> <span class="text-[9px] font-mono text-slate-600"><!></span> <div class="flex-1"></div> <span class="text-[9px] font-mono text-slate-700"> </span></div>');function sf(a,e){var o=of(),n=r(s(o),2),l=s(n);{var i=m=>{var h=af(),v=s(h);C(()=>b(v,`${e.overridesCount??""} override${e.overridesCount!==1?"s":""} active`)),f(m,h)},c=m=>{var h=lr("No overrides — showing framework defaults");f(m,h)};I(l,m=>{e.overridesCount>0?m(i):m(c,-1)})}var d=r(n,4),p=s(d);C(()=>b(p,e.domain)),f(a,o)}var wa=Uint8Array,Ua=Uint16Array,nn=Int32Array,cr=new wa([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),dr=new wa([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),Gr=new wa([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),bi=function(a,e){for(var o=new Ua(31),n=0;n<31;++n)o[n]=e+=1<<a[n-1];for(var l=new nn(o[30]),n=1;n<30;++n)for(var i=o[n];i<o[n+1];++i)l[i]=i-o[n]<<5|n;return{b:o,r:l}},yi=bi(cr,2),xi=yi.b,Hr=yi.r;xi[28]=258,Hr[258]=28;var ki=bi(dr,0),rf=ki.b,An=ki.r,qr=new Ua(32768);for(var ra=0;ra<32768;++ra){var fo=(ra&43690)>>1|(ra&21845)<<1;fo=(fo&52428)>>2|(fo&13107)<<2,fo=(fo&61680)>>4|(fo&3855)<<4,qr[ra]=((fo&65280)>>8|(fo&255)<<8)>>1}var $a=(function(a,e,o){for(var n=a.length,l=0,i=new Ua(e);l<n;++l)a[l]&&++i[a[l]-1];var c=new Ua(e);for(l=1;l<e;++l)c[l]=c[l-1]+i[l-1]<<1;var d;if(o){d=new Ua(1<<e);var p=15-e;for(l=0;l<n;++l)if(a[l])for(var m=l<<4|a[l],h=e-a[l],v=c[a[l]-1]++<<h,y=v|(1<<h)-1;v<=y;++v)d[qr[v]>>p]=m}else for(d=new Ua(n),l=0;l<n;++l)a[l]&&(d[l]=qr[c[a[l]-1]++]>>15-a[l]);return d}),wo=new wa(288);for(var ra=0;ra<144;++ra)wo[ra]=8;for(var ra=144;ra<256;++ra)wo[ra]=9;for(var ra=256;ra<280;++ra)wo[ra]=7;for(var ra=280;ra<288;++ra)wo[ra]=8;var Ls=new wa(32);for(var ra=0;ra<32;++ra)Ls[ra]=5;var nf=$a(wo,9,0),lf=$a(wo,9,1),cf=$a(Ls,5,0),df=$a(Ls,5,1),yr=function(a){for(var e=a[0],o=1;o<a.length;++o)a[o]>e&&(e=a[o]);return e},Ma=function(a,e,o){var n=e/8|0;return(a[n]|a[n+1]<<8)>>(e&7)&o},xr=function(a,e){var o=e/8|0;return(a[o]|a[o+1]<<8|a[o+2]<<16)>>(e&7)},ln=function(a){return(a+7)/8|0},wi=function(a,e,o){return(o==null||o>a.length)&&(o=a.length),new wa(a.subarray(e,o))},ff=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],oo=function(a,e,o){var n=new Error(e||ff[a]);if(n.code=a,Error.captureStackTrace&&Error.captureStackTrace(n,oo),!o)throw n;return n},uf=function(a,e,o,n){var l=a.length,i=0;if(!l||e.f&&!e.l)return o||new wa(0);var c=!o,d=c||e.i!=2,p=e.i;c&&(o=new wa(l*3));var m=function(Ue){var ae=o.length;if(Ue>ae){var q=new wa(Math.max(ae*2,Ue));q.set(o),o=q}},h=e.f||0,v=e.p||0,y=e.b||0,k=e.l,w=e.d,E=e.m,B=e.n,U=l*8;do{if(!k){h=Ma(a,v,1);var P=Ma(a,v+1,3);if(v+=3,P)if(P==1)k=lf,w=df,E=9,B=5;else if(P==2){var L=Ma(a,v,31)+257,R=Ma(a,v+10,15)+4,D=L+Ma(a,v+5,31)+1;v+=14;for(var A=new wa(D),T=new wa(19),N=0;N<R;++N)T[Gr[N]]=Ma(a,v+N*3,7);v+=R*3;for(var $=yr(T),He=(1<<$)-1,te=$a(T,$,1),N=0;N<D;){var ye=te[Ma(a,v,He)];v+=ye&15;var S=ye>>4;if(S<16)A[N++]=S;else{var Ie=0,he=0;for(S==16?(he=3+Ma(a,v,3),v+=2,Ie=A[N-1]):S==17?(he=3+Ma(a,v,7),v+=3):S==18&&(he=11+Ma(a,v,127),v+=7);he--;)A[N++]=Ie}}var ve=A.subarray(0,L),je=A.subarray(L);E=yr(ve),B=yr(je),k=$a(ve,E,1),w=$a(je,B,1)}else oo(1);else{var S=ln(v)+4,_=a[S-4]|a[S-3]<<8,z=S+_;if(z>l){p&&oo(0);break}d&&m(y+_),o.set(a.subarray(S,z),y),e.b=y+=_,e.p=v=z*8,e.f=h;continue}if(v>U){p&&oo(0);break}}d&&m(y+131072);for(var $e=(1<<E)-1,et=(1<<B)-1,M=v;;M=v){var Ie=k[xr(a,v)&$e],J=Ie>>4;if(v+=Ie&15,v>U){p&&oo(0);break}if(Ie||oo(2),J<256)o[y++]=J;else if(J==256){M=v,k=null;break}else{var xe=J-254;if(J>264){var N=J-257,ke=cr[N];xe=Ma(a,v,(1<<ke)-1)+xi[N],v+=ke}var W=w[xr(a,v)&et],we=W>>4;W||oo(3),v+=W&15;var je=rf[we];if(we>3){var ke=dr[we];je+=xr(a,v)&(1<<ke)-1,v+=ke}if(v>U){p&&oo(0);break}d&&m(y+131072);var qe=y+xe;if(y<je){var at=i-je,Se=Math.min(je,qe);for(at+y<0&&oo(3);y<Se;++y)o[y]=n[at+y]}for(;y<qe;++y)o[y]=o[y-je]}}e.l=k,e.p=M,e.b=y,e.f=h,k&&(h=1,e.m=E,e.d=w,e.n=B)}while(!h);return y!=o.length&&c?wi(o,0,y):o.subarray(0,y)},ao=function(a,e,o){o<<=e&7;var n=e/8|0;a[n]|=o,a[n+1]|=o>>8},us=function(a,e,o){o<<=e&7;var n=e/8|0;a[n]|=o,a[n+1]|=o>>8,a[n+2]|=o>>16},kr=function(a,e){for(var o=[],n=0;n<a.length;++n)a[n]&&o.push({s:n,f:a[n]});var l=o.length,i=o.slice();if(!l)return{t:Ci,l:0};if(l==1){var c=new wa(o[0].s+1);return c[o[0].s]=1,{t:c,l:1}}o.sort(function(z,L){return z.f-L.f}),o.push({s:-1,f:25001});var d=o[0],p=o[1],m=0,h=1,v=2;for(o[0]={s:-1,f:d.f+p.f,l:d,r:p};h!=l-1;)d=o[o[m].f<o[v].f?m++:v++],p=o[m!=h&&o[m].f<o[v].f?m++:v++],o[h++]={s:-1,f:d.f+p.f,l:d,r:p};for(var y=i[0].s,n=1;n<l;++n)i[n].s>y&&(y=i[n].s);var k=new Ua(y+1),w=Vr(o[h-1],k,0);if(w>e){var n=0,E=0,B=w-e,U=1<<B;for(i.sort(function(L,R){return k[R.s]-k[L.s]||L.f-R.f});n<l;++n){var P=i[n].s;if(k[P]>e)E+=U-(1<<w-k[P]),k[P]=e;else break}for(E>>=B;E>0;){var S=i[n].s;k[S]<e?E-=1<<e-k[S]++-1:++n}for(;n>=0&&E;--n){var _=i[n].s;k[_]==e&&(--k[_],++E)}w=e}return{t:new wa(k),l:w}},Vr=function(a,e,o){return a.s==-1?Math.max(Vr(a.l,e,o+1),Vr(a.r,e,o+1)):e[a.s]=o},En=function(a){for(var e=a.length;e&&!a[--e];);for(var o=new Ua(++e),n=0,l=a[0],i=1,c=function(p){o[n++]=p},d=1;d<=e;++d)if(a[d]==l&&d!=e)++i;else{if(!l&&i>2){for(;i>138;i-=138)c(32754);i>2&&(c(i>10?i-11<<5|28690:i-3<<5|12305),i=0)}else if(i>3){for(c(l),--i;i>6;i-=6)c(8304);i>2&&(c(i-3<<5|8208),i=0)}for(;i--;)c(l);i=1,l=a[d]}return{c:o.subarray(0,n),n:e}},ps=function(a,e){for(var o=0,n=0;n<e.length;++n)o+=a[n]*e[n];return o},_i=function(a,e,o){var n=o.length,l=ln(e+2);a[l]=n&255,a[l+1]=n>>8,a[l+2]=a[l]^255,a[l+3]=a[l+1]^255;for(var i=0;i<n;++i)a[l+i+4]=o[i];return(l+4+n)*8},Rn=function(a,e,o,n,l,i,c,d,p,m,h){ao(e,h++,o),++l[256];for(var v=kr(l,15),y=v.t,k=v.l,w=kr(i,15),E=w.t,B=w.l,U=En(y),P=U.c,S=U.n,_=En(E),z=_.c,L=_.n,R=new Ua(19),D=0;D<P.length;++D)++R[P[D]&31];for(var D=0;D<z.length;++D)++R[z[D]&31];for(var A=kr(R,7),T=A.t,N=A.l,$=19;$>4&&!T[Gr[$-1]];--$);var He=m+5<<3,te=ps(l,wo)+ps(i,Ls)+c,ye=ps(l,y)+ps(i,E)+c+14+3*$+ps(R,T)+2*R[16]+3*R[17]+7*R[18];if(p>=0&&He<=te&&He<=ye)return _i(e,h,a.subarray(p,p+m));var Ie,he,ve,je;if(ao(e,h,1+(ye<te)),h+=2,ye<te){Ie=$a(y,k,0),he=y,ve=$a(E,B,0),je=E;var $e=$a(T,N,0);ao(e,h,S-257),ao(e,h+5,L-1),ao(e,h+10,$-4),h+=14;for(var D=0;D<$;++D)ao(e,h+3*D,T[Gr[D]]);h+=3*$;for(var et=[P,z],M=0;M<2;++M)for(var J=et[M],D=0;D<J.length;++D){var xe=J[D]&31;ao(e,h,$e[xe]),h+=T[xe],xe>15&&(ao(e,h,J[D]>>5&127),h+=J[D]>>12)}}else Ie=nf,he=wo,ve=cf,je=Ls;for(var D=0;D<d;++D){var ke=n[D];if(ke>255){var xe=ke>>18&31;us(e,h,Ie[xe+257]),h+=he[xe+257],xe>7&&(ao(e,h,ke>>23&31),h+=cr[xe]);var W=ke&31;us(e,h,ve[W]),h+=je[W],W>3&&(us(e,h,ke>>5&8191),h+=dr[W])}else us(e,h,Ie[ke]),h+=he[ke]}return us(e,h,Ie[256]),h+he[256]},pf=new nn([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),Ci=new wa(0),mf=function(a,e,o,n,l,i){var c=i.z||a.length,d=new wa(n+c+5*(1+Math.ceil(c/7e3))+l),p=d.subarray(n,d.length-l),m=i.l,h=(i.r||0)&7;if(e){h&&(p[0]=i.r>>3);for(var v=pf[e-1],y=v>>13,k=v&8191,w=(1<<o)-1,E=i.p||new Ua(32768),B=i.h||new Ua(w+1),U=Math.ceil(o/3),P=2*U,S=function(_e){return(a[_e]^a[_e+1]<<U^a[_e+2]<<P)&w},_=new nn(25e3),z=new Ua(288),L=new Ua(32),R=0,D=0,A=i.i||0,T=0,N=i.w||0,$=0;A+2<c;++A){var He=S(A),te=A&32767,ye=B[He];if(E[te]=ye,B[He]=te,N<=A){var Ie=c-A;if((R>7e3||T>24576)&&(Ie>423||!m)){h=Rn(a,p,0,_,z,L,D,T,$,A-$,h),T=R=D=0,$=A;for(var he=0;he<286;++he)z[he]=0;for(var he=0;he<30;++he)L[he]=0}var ve=2,je=0,$e=k,et=te-ye&32767;if(Ie>2&&He==S(A-et))for(var M=Math.min(y,Ie)-1,J=Math.min(32767,A),xe=Math.min(258,Ie);et<=J&&--$e&&te!=ye;){if(a[A+ve]==a[A+ve-et]){for(var ke=0;ke<xe&&a[A+ke]==a[A+ke-et];++ke);if(ke>ve){if(ve=ke,je=et,ke>M)break;for(var W=Math.min(et,ke-2),we=0,he=0;he<W;++he){var qe=A-et+he&32767,at=E[qe],Se=qe-at&32767;Se>we&&(we=Se,ye=qe)}}}te=ye,ye=E[te],et+=te-ye&32767}if(je){_[T++]=268435456|Hr[ve]<<18|An[je];var Ue=Hr[ve]&31,ae=An[je]&31;D+=cr[Ue]+dr[ae],++z[257+Ue],++L[ae],N=A+ve,++R}else _[T++]=a[A],++z[a[A]]}}for(A=Math.max(A,N);A<c;++A)_[T++]=a[A],++z[a[A]];h=Rn(a,p,m,_,z,L,D,T,$,A-$,h),m||(i.r=h&7|p[h/8|0]<<3,h-=7,i.h=B,i.p=E,i.i=A,i.w=N)}else{for(var A=i.w||0;A<c+m;A+=65535){var q=A+65535;q>=c&&(p[h/8|0]=m,q=c),h=_i(p,h+1,a.subarray(A,q))}i.i=c}return wi(d,0,n+ln(h)+l)},vf=function(a,e,o,n,l){if(!l&&(l={l:1},e.dictionary)){var i=e.dictionary.subarray(-32768),c=new wa(i.length+a.length);c.set(i),c.set(a,i.length),a=c,l.w=i.length}return mf(a,e.level==null?6:e.level,e.mem==null?l.l?Math.ceil(Math.max(8,Math.min(13,Math.log(a.length)))*1.5):20:12+e.mem,o,n,l)};function hf(a,e){return vf(a,{},0,0)}function gf(a,e){return uf(a,{i:2},e,e)}var bf=typeof TextDecoder<"u"&&new TextDecoder,yf=0;try{bf.decode(Ci,{stream:!0}),yf=1}catch{}const xf={generatedBy:"scripts/gen-token-registry.js",nextId:701},kf=JSON.parse('[{"id":0,"name":"--sf-alternate-gap"},{"id":1,"name":"--sf-alternate-inner-gap"},{"id":2,"name":"--sf-animation-blink"},{"id":3,"name":"--sf-animation-color-pulse"},{"id":4,"name":"--sf-animation-delay-1"},{"id":5,"name":"--sf-animation-delay-2"},{"id":6,"name":"--sf-animation-delay-3"},{"id":7,"name":"--sf-animation-delay-4"},{"id":8,"name":"--sf-animation-delay-5"},{"id":9,"name":"--sf-animation-fade-in"},{"id":10,"name":"--sf-animation-fade-out"},{"id":11,"name":"--sf-animation-float"},{"id":12,"name":"--sf-animation-ping"},{"id":13,"name":"--sf-animation-scale-down"},{"id":14,"name":"--sf-animation-scale-up"},{"id":15,"name":"--sf-animation-shimmer"},{"id":16,"name":"--sf-animation-slide-in-down"},{"id":17,"name":"--sf-animation-slide-in-left"},{"id":18,"name":"--sf-animation-slide-in-right"},{"id":19,"name":"--sf-animation-slide-in-up"},{"id":20,"name":"--sf-animation-spin"},{"id":21,"name":"--sf-aspect"},{"id":22,"name":"--sf-bento-cols-default"},{"id":23,"name":"--sf-bento-gap"},{"id":24,"name":"--sf-bento-row-compact"},{"id":25,"name":"--sf-bento-row-default"},{"id":26,"name":"--sf-bento-row-tall"},{"id":27,"name":"--sf-blur"},{"id":28,"name":"--sf-body-color"},{"id":29,"name":"--sf-body-em-style"},{"id":30,"name":"--sf-body-font-family"},{"id":31,"name":"--sf-body-font-size"},{"id":32,"name":"--sf-body-font-weight"},{"id":33,"name":"--sf-body-line-height"},{"id":34,"name":"--sf-body-strong-weight"},{"id":35,"name":"--sf-body-text-wrap"},{"id":36,"name":"--sf-border"},{"id":37,"name":"--sf-border-scale"},{"id":38,"name":"--sf-border-strong"},{"id":39,"name":"--sf-border-style"},{"id":40,"name":"--sf-border-subtle"},{"id":41,"name":"--sf-border-width-1"},{"id":42,"name":"--sf-border-width-2"},{"id":43,"name":"--sf-border-width-3"},{"id":44,"name":"--sf-border-width-4"},{"id":45,"name":"--sf-border-width-hairline"},{"id":46,"name":"--sf-box-border-color"},{"id":47,"name":"--sf-box-border-width"},{"id":48,"name":"--sf-box-padding"},{"id":49,"name":"--sf-breakout-width"},{"id":50,"name":"--sf-button-padding-block","removed":true},{"id":51,"name":"--sf-button-padding-inline","removed":true},{"id":52,"name":"--sf-button-radius","removed":true},{"id":53,"name":"--sf-caret-color"},{"id":54,"name":"--sf-center-gutter"},{"id":55,"name":"--sf-center-max"},{"id":56,"name":"--sf-cluster-align"},{"id":57,"name":"--sf-cluster-gap"},{"id":58,"name":"--sf-cluster-justify"},{"id":59,"name":"--sf-code-font-size"},{"id":60,"name":"--sf-color-action"},{"id":61,"name":"--sf-color-action--active"},{"id":62,"name":"--sf-color-action--hover"},{"id":63,"name":"--sf-color-action-100"},{"id":64,"name":"--sf-color-action-200"},{"id":65,"name":"--sf-color-action-300"},{"id":66,"name":"--sf-color-action-400"},{"id":67,"name":"--sf-color-action-50"},{"id":68,"name":"--sf-color-action-500"},{"id":69,"name":"--sf-color-action-600"},{"id":70,"name":"--sf-color-action-700"},{"id":71,"name":"--sf-color-action-800"},{"id":72,"name":"--sf-color-action-900"},{"id":73,"name":"--sf-color-action-950"},{"id":74,"name":"--sf-color-action-a10"},{"id":75,"name":"--sf-color-action-a30"},{"id":76,"name":"--sf-color-action-a5"},{"id":77,"name":"--sf-color-action-a50"},{"id":78,"name":"--sf-color-action-a80"},{"id":79,"name":"--sf-color-action-source-dark"},{"id":80,"name":"--sf-color-action-darker"},{"id":81,"name":"--sf-color-action-ghost"},{"id":82,"name":"--sf-color-action-source-light"},{"id":83,"name":"--sf-color-action-lighter"},{"id":84,"name":"--sf-color-action-muted"},{"id":85,"name":"--sf-color-action-subtle"},{"id":86,"name":"--sf-color-action-superdark"},{"id":87,"name":"--sf-color-action-superlight"},{"id":88,"name":"--sf-color-action-xdark"},{"id":89,"name":"--sf-color-action-xlight"},{"id":90,"name":"--sf-color-base"},{"id":91,"name":"--sf-color-base--active"},{"id":92,"name":"--sf-color-base--hover"},{"id":93,"name":"--sf-color-base-100"},{"id":94,"name":"--sf-color-base-200"},{"id":95,"name":"--sf-color-base-300"},{"id":96,"name":"--sf-color-base-400"},{"id":97,"name":"--sf-color-base-50"},{"id":98,"name":"--sf-color-base-500"},{"id":99,"name":"--sf-color-base-600"},{"id":100,"name":"--sf-color-base-700"},{"id":101,"name":"--sf-color-base-800"},{"id":102,"name":"--sf-color-base-900"},{"id":103,"name":"--sf-color-base-950"},{"id":104,"name":"--sf-color-base-a10"},{"id":105,"name":"--sf-color-base-a30"},{"id":106,"name":"--sf-color-base-a5"},{"id":107,"name":"--sf-color-base-a50"},{"id":108,"name":"--sf-color-base-a80"},{"id":109,"name":"--sf-color-base-source-dark"},{"id":110,"name":"--sf-color-base-darker"},{"id":111,"name":"--sf-color-base-ghost"},{"id":112,"name":"--sf-color-base-source-light"},{"id":113,"name":"--sf-color-base-lighter"},{"id":114,"name":"--sf-color-base-muted"},{"id":115,"name":"--sf-color-base-subtle"},{"id":116,"name":"--sf-color-base-superdark"},{"id":117,"name":"--sf-color-base-superlight"},{"id":118,"name":"--sf-color-base-xdark"},{"id":119,"name":"--sf-color-base-xlight"},{"id":120,"name":"--sf-color-bg"},{"id":121,"name":"--sf-color-bg--active"},{"id":122,"name":"--sf-color-bg--disabled"},{"id":123,"name":"--sf-color-bg--focus"},{"id":124,"name":"--sf-color-bg--hover"},{"id":125,"name":"--sf-color-bg--selected"},{"id":126,"name":"--sf-color-black"},{"id":127,"name":"--sf-color-border"},{"id":128,"name":"--sf-color-border--disabled"},{"id":129,"name":"--sf-color-border--focus"},{"id":130,"name":"--sf-color-border--strong"},{"id":131,"name":"--sf-color-border--subtle"},{"id":132,"name":"--sf-color-border--translucent"},{"id":133,"name":"--sf-color-code-bg"},{"id":134,"name":"--sf-color-code-text"},{"id":135,"name":"--sf-color-danger"},{"id":136,"name":"--sf-color-danger-source-dark"},{"id":137,"name":"--sf-color-danger-source-light"},{"id":138,"name":"--sf-color-danger-muted"},{"id":139,"name":"--sf-color-danger-strong"},{"id":140,"name":"--sf-color-danger-subtle"},{"id":141,"name":"--sf-color-dim"},{"id":142,"name":"--sf-color-error","removed":true},{"id":143,"name":"--sf-color-error-dark","removed":true},{"id":144,"name":"--sf-color-error-light","removed":true},{"id":145,"name":"--sf-color-error-muted","removed":true},{"id":146,"name":"--sf-color-error-strong","removed":true},{"id":147,"name":"--sf-color-error-subtle","removed":true},{"id":148,"name":"--sf-color-heading"},{"id":149,"name":"--sf-color-info"},{"id":150,"name":"--sf-color-info-source-dark"},{"id":151,"name":"--sf-color-info-source-light"},{"id":152,"name":"--sf-color-info-muted"},{"id":153,"name":"--sf-color-info-strong"},{"id":154,"name":"--sf-color-info-subtle"},{"id":155,"name":"--sf-color-inset"},{"id":156,"name":"--sf-color-inverse"},{"id":157,"name":"--sf-color-link"},{"id":158,"name":"--sf-color-link--active"},{"id":159,"name":"--sf-color-link--disabled"},{"id":160,"name":"--sf-color-link--hover"},{"id":161,"name":"--sf-color-link--underline"},{"id":162,"name":"--sf-color-link--visited"},{"id":163,"name":"--sf-color-mark-bg"},{"id":164,"name":"--sf-color-mark-text"},{"id":165,"name":"--sf-color-neutral"},{"id":166,"name":"--sf-color-neutral--active"},{"id":167,"name":"--sf-color-neutral--hover"},{"id":168,"name":"--sf-color-neutral-100"},{"id":169,"name":"--sf-color-neutral-200"},{"id":170,"name":"--sf-color-neutral-300"},{"id":171,"name":"--sf-color-neutral-400"},{"id":172,"name":"--sf-color-neutral-50"},{"id":173,"name":"--sf-color-neutral-500"},{"id":174,"name":"--sf-color-neutral-600"},{"id":175,"name":"--sf-color-neutral-700"},{"id":176,"name":"--sf-color-neutral-800"},{"id":177,"name":"--sf-color-neutral-900"},{"id":178,"name":"--sf-color-neutral-950"},{"id":179,"name":"--sf-color-neutral-a10"},{"id":180,"name":"--sf-color-neutral-a30"},{"id":181,"name":"--sf-color-neutral-a5"},{"id":182,"name":"--sf-color-neutral-a50"},{"id":183,"name":"--sf-color-neutral-a80"},{"id":184,"name":"--sf-color-neutral-source-dark"},{"id":185,"name":"--sf-color-neutral-darker"},{"id":186,"name":"--sf-color-neutral-ghost"},{"id":187,"name":"--sf-color-neutral-source-light"},{"id":188,"name":"--sf-color-neutral-lighter"},{"id":189,"name":"--sf-color-neutral-muted"},{"id":190,"name":"--sf-color-neutral-subtle"},{"id":191,"name":"--sf-color-neutral-superdark"},{"id":192,"name":"--sf-color-neutral-superlight"},{"id":193,"name":"--sf-color-neutral-xdark"},{"id":194,"name":"--sf-color-neutral-xlight"},{"id":195,"name":"--sf-color-overlay"},{"id":196,"name":"--sf-color-primary"},{"id":197,"name":"--sf-color-primary--active"},{"id":198,"name":"--sf-color-primary--hover"},{"id":199,"name":"--sf-color-primary-100"},{"id":200,"name":"--sf-color-primary-200"},{"id":201,"name":"--sf-color-primary-300"},{"id":202,"name":"--sf-color-primary-400"},{"id":203,"name":"--sf-color-primary-50"},{"id":204,"name":"--sf-color-primary-500"},{"id":205,"name":"--sf-color-primary-600"},{"id":206,"name":"--sf-color-primary-700"},{"id":207,"name":"--sf-color-primary-800"},{"id":208,"name":"--sf-color-primary-900"},{"id":209,"name":"--sf-color-primary-950"},{"id":210,"name":"--sf-color-primary-a10"},{"id":211,"name":"--sf-color-primary-a30"},{"id":212,"name":"--sf-color-primary-a5"},{"id":213,"name":"--sf-color-primary-a50"},{"id":214,"name":"--sf-color-primary-a80"},{"id":215,"name":"--sf-color-primary-source-dark"},{"id":216,"name":"--sf-color-primary-darker"},{"id":217,"name":"--sf-color-primary-ghost"},{"id":218,"name":"--sf-color-primary-source-light"},{"id":219,"name":"--sf-color-primary-lighter"},{"id":220,"name":"--sf-color-primary-muted"},{"id":221,"name":"--sf-color-primary-subtle"},{"id":222,"name":"--sf-color-primary-superdark"},{"id":223,"name":"--sf-color-primary-superlight"},{"id":224,"name":"--sf-color-primary-xdark"},{"id":225,"name":"--sf-color-primary-xlight"},{"id":226,"name":"--sf-color-raised"},{"id":227,"name":"--sf-color-scheme"},{"id":228,"name":"--sf-color-secondary"},{"id":229,"name":"--sf-color-secondary--active"},{"id":230,"name":"--sf-color-secondary--hover"},{"id":231,"name":"--sf-color-secondary-100"},{"id":232,"name":"--sf-color-secondary-200"},{"id":233,"name":"--sf-color-secondary-300"},{"id":234,"name":"--sf-color-secondary-400"},{"id":235,"name":"--sf-color-secondary-50"},{"id":236,"name":"--sf-color-secondary-500"},{"id":237,"name":"--sf-color-secondary-600"},{"id":238,"name":"--sf-color-secondary-700"},{"id":239,"name":"--sf-color-secondary-800"},{"id":240,"name":"--sf-color-secondary-900"},{"id":241,"name":"--sf-color-secondary-950"},{"id":242,"name":"--sf-color-secondary-a10"},{"id":243,"name":"--sf-color-secondary-a30"},{"id":244,"name":"--sf-color-secondary-a5"},{"id":245,"name":"--sf-color-secondary-a50"},{"id":246,"name":"--sf-color-secondary-a80"},{"id":247,"name":"--sf-color-secondary-source-dark"},{"id":248,"name":"--sf-color-secondary-darker"},{"id":249,"name":"--sf-color-secondary-ghost"},{"id":250,"name":"--sf-color-secondary-source-light"},{"id":251,"name":"--sf-color-secondary-lighter"},{"id":252,"name":"--sf-color-secondary-muted"},{"id":253,"name":"--sf-color-secondary-subtle"},{"id":254,"name":"--sf-color-secondary-superdark"},{"id":255,"name":"--sf-color-secondary-superlight"},{"id":256,"name":"--sf-color-secondary-xdark"},{"id":257,"name":"--sf-color-secondary-xlight"},{"id":258,"name":"--sf-color-selection-bg"},{"id":259,"name":"--sf-color-selection-text"},{"id":260,"name":"--sf-color-success"},{"id":261,"name":"--sf-color-success-source-dark"},{"id":262,"name":"--sf-color-success-source-light"},{"id":263,"name":"--sf-color-success-muted"},{"id":264,"name":"--sf-color-success-strong"},{"id":265,"name":"--sf-color-success-subtle"},{"id":266,"name":"--sf-color-surface"},{"id":267,"name":"--sf-color-tertiary"},{"id":268,"name":"--sf-color-tertiary--active"},{"id":269,"name":"--sf-color-tertiary--hover"},{"id":270,"name":"--sf-color-tertiary-100"},{"id":271,"name":"--sf-color-tertiary-200"},{"id":272,"name":"--sf-color-tertiary-300"},{"id":273,"name":"--sf-color-tertiary-400"},{"id":274,"name":"--sf-color-tertiary-50"},{"id":275,"name":"--sf-color-tertiary-500"},{"id":276,"name":"--sf-color-tertiary-600"},{"id":277,"name":"--sf-color-tertiary-700"},{"id":278,"name":"--sf-color-tertiary-800"},{"id":279,"name":"--sf-color-tertiary-900"},{"id":280,"name":"--sf-color-tertiary-950"},{"id":281,"name":"--sf-color-tertiary-a10"},{"id":282,"name":"--sf-color-tertiary-a30"},{"id":283,"name":"--sf-color-tertiary-a5"},{"id":284,"name":"--sf-color-tertiary-a50"},{"id":285,"name":"--sf-color-tertiary-a80"},{"id":286,"name":"--sf-color-tertiary-source-dark"},{"id":287,"name":"--sf-color-tertiary-darker"},{"id":288,"name":"--sf-color-tertiary-ghost"},{"id":289,"name":"--sf-color-tertiary-source-light"},{"id":290,"name":"--sf-color-tertiary-lighter"},{"id":291,"name":"--sf-color-tertiary-muted"},{"id":292,"name":"--sf-color-tertiary-subtle"},{"id":293,"name":"--sf-color-tertiary-superdark"},{"id":294,"name":"--sf-color-tertiary-superlight"},{"id":295,"name":"--sf-color-tertiary-xdark"},{"id":296,"name":"--sf-color-tertiary-xlight"},{"id":297,"name":"--sf-color-text"},{"id":298,"name":"--sf-color-text--disabled"},{"id":299,"name":"--sf-color-text--inverse"},{"id":300,"name":"--sf-color-text--muted"},{"id":301,"name":"--sf-color-text--on-action"},{"id":302,"name":"--sf-color-text--on-base"},{"id":303,"name":"--sf-color-text--on-danger"},{"id":304,"name":"--sf-color-text--on-error","removed":true},{"id":305,"name":"--sf-color-text--on-info"},{"id":306,"name":"--sf-color-text--on-inverse"},{"id":307,"name":"--sf-color-text--on-neutral"},{"id":308,"name":"--sf-color-text--on-primary"},{"id":309,"name":"--sf-color-text--on-secondary"},{"id":310,"name":"--sf-color-text--on-success"},{"id":311,"name":"--sf-color-text--on-tertiary"},{"id":312,"name":"--sf-color-text--on-warning"},{"id":313,"name":"--sf-color-text--placeholder"},{"id":314,"name":"--sf-color-text--secondary"},{"id":315,"name":"--sf-color-warning"},{"id":316,"name":"--sf-color-warning-source-dark"},{"id":317,"name":"--sf-color-warning-source-light"},{"id":318,"name":"--sf-color-warning-muted"},{"id":319,"name":"--sf-color-warning-strong"},{"id":320,"name":"--sf-color-warning-subtle"},{"id":321,"name":"--sf-color-white"},{"id":322,"name":"--sf-component-pad"},{"id":323,"name":"--sf-container-default"},{"id":324,"name":"--sf-container-full"},{"id":325,"name":"--sf-container-narrow"},{"id":326,"name":"--sf-container-prose"},{"id":327,"name":"--sf-container-wide"},{"id":328,"name":"--sf-content-gap"},{"id":329,"name":"--sf-content-intrinsic-size"},{"id":330,"name":"--sf-content-width"},{"id":331,"name":"--sf-contrast-bias"},{"id":332,"name":"--sf-contrast-threshold"},{"id":333,"name":"--sf-cover-min-height"},{"id":334,"name":"--sf-cover-padding"},{"id":335,"name":"--sf-current-font-weight"},{"id":336,"name":"--sf-display-l-line-height"},{"id":337,"name":"--sf-display-m-line-height"},{"id":338,"name":"--sf-display-s-line-height"},{"id":339,"name":"--sf-divider-color"},{"id":340,"name":"--sf-divider-gap"},{"id":341,"name":"--sf-divider-style"},{"id":342,"name":"--sf-divider-width"},{"id":343,"name":"--sf-drop-shadow-l"},{"id":344,"name":"--sf-drop-shadow-m"},{"id":345,"name":"--sf-drop-shadow-s"},{"id":346,"name":"--sf-duration-fast"},{"id":347,"name":"--sf-duration-instant"},{"id":348,"name":"--sf-duration-none"},{"id":349,"name":"--sf-duration-normal"},{"id":350,"name":"--sf-duration-slow"},{"id":351,"name":"--sf-duration-slower"},{"id":352,"name":"--sf-ease-bounce"},{"id":353,"name":"--sf-ease-elastic"},{"id":354,"name":"--sf-ease-in"},{"id":355,"name":"--sf-ease-in-out"},{"id":356,"name":"--sf-ease-linear"},{"id":357,"name":"--sf-ease-out"},{"id":358,"name":"--sf-ease-overshoot"},{"id":359,"name":"--sf-ease-spring"},{"id":360,"name":"--sf-equal-gap"},{"id":361,"name":"--sf-equal-min-col"},{"id":362,"name":"--sf-equal-min-col-2"},{"id":363,"name":"--sf-equal-min-col-3"},{"id":364,"name":"--sf-equal-min-col-4"},{"id":365,"name":"--sf-equal-min-col-6"},{"id":366,"name":"--sf-field-block"},{"id":367,"name":"--sf-field-padding-block"},{"id":368,"name":"--sf-field-padding-inline"},{"id":369,"name":"--sf-field-radius"},{"id":370,"name":"--sf-field-required-marker"},{"id":371,"name":"--sf-flow-space"},{"id":372,"name":"--sf-fluid-max-vw"},{"id":373,"name":"--sf-fluid-min-vw"},{"id":374,"name":"--sf-focus-ring-color"},{"id":375,"name":"--sf-focus-ring-offset"},{"id":376,"name":"--sf-focus-ring-shadow"},{"id":377,"name":"--sf-focus-ring-style"},{"id":378,"name":"--sf-focus-ring-width"},{"id":379,"name":"--sf-font-body"},{"id":380,"name":"--sf-font-display"},{"id":381,"name":"--sf-font-features"},{"id":382,"name":"--sf-font-geometric"},{"id":383,"name":"--sf-font-heading"},{"id":384,"name":"--sf-font-humanist"},{"id":385,"name":"--sf-font-mono"},{"id":386,"name":"--sf-font-numeric"},{"id":387,"name":"--sf-font-slab"},{"id":388,"name":"--sf-font-variation"},{"id":389,"name":"--sf-font-weight-body"},{"id":390,"name":"--sf-font-weight-bold"},{"id":391,"name":"--sf-font-weight-display"},{"id":392,"name":"--sf-font-weight-heading"},{"id":393,"name":"--sf-font-weight-interactive"},{"id":394,"name":"--sf-font-weight-light"},{"id":395,"name":"--sf-font-weight-medium"},{"id":396,"name":"--sf-font-weight-normal"},{"id":397,"name":"--sf-font-weight-semibold"},{"id":398,"name":"--sf-font-weight-strong"},{"id":399,"name":"--sf-frame-ratio"},{"id":400,"name":"--sf-gap"},{"id":401,"name":"--sf-gradient-brand"},{"id":402,"name":"--sf-gradient-fade--b"},{"id":403,"name":"--sf-gradient-fade--l"},{"id":404,"name":"--sf-gradient-fade--r"},{"id":405,"name":"--sf-gradient-fade--t"},{"id":406,"name":"--sf-gradient-primary"},{"id":407,"name":"--sf-gradient-secondary"},{"id":408,"name":"--sf-gradient-surface"},{"id":409,"name":"--sf-gradient-tertiary"},{"id":410,"name":"--sf-grid-gap"},{"id":411,"name":"--sf-grid-min"},{"id":412,"name":"--sf-grid-min-2xl"},{"id":413,"name":"--sf-grid-min-l"},{"id":414,"name":"--sf-grid-min-m"},{"id":415,"name":"--sf-grid-min-s"},{"id":416,"name":"--sf-grid-min-xl"},{"id":417,"name":"--sf-grid-min-xs"},{"id":418,"name":"--sf-gutter"},{"id":419,"name":"--sf-h1-font-weight"},{"id":420,"name":"--sf-h1-letter-spacing"},{"id":421,"name":"--sf-h1-line-height"},{"id":422,"name":"--sf-h1-max-width"},{"id":423,"name":"--sf-h1-size"},{"id":424,"name":"--sf-h2-font-weight"},{"id":425,"name":"--sf-h2-letter-spacing"},{"id":426,"name":"--sf-h2-line-height"},{"id":427,"name":"--sf-h2-max-width"},{"id":428,"name":"--sf-h2-size"},{"id":429,"name":"--sf-h3-font-weight"},{"id":430,"name":"--sf-h3-letter-spacing"},{"id":431,"name":"--sf-h3-line-height"},{"id":432,"name":"--sf-h3-max-width"},{"id":433,"name":"--sf-h3-size"},{"id":434,"name":"--sf-h4-font-weight"},{"id":435,"name":"--sf-h4-letter-spacing"},{"id":436,"name":"--sf-h4-line-height"},{"id":437,"name":"--sf-h4-max-width"},{"id":438,"name":"--sf-h4-size"},{"id":439,"name":"--sf-h5-font-weight"},{"id":440,"name":"--sf-h5-letter-spacing"},{"id":441,"name":"--sf-h5-line-height"},{"id":442,"name":"--sf-h5-max-width"},{"id":443,"name":"--sf-h5-size"},{"id":444,"name":"--sf-h6-font-weight"},{"id":445,"name":"--sf-h6-letter-spacing"},{"id":446,"name":"--sf-h6-line-height"},{"id":447,"name":"--sf-h6-max-width"},{"id":448,"name":"--sf-h6-size"},{"id":449,"name":"--sf-header-height"},{"id":450,"name":"--sf-header-height-desktop"},{"id":451,"name":"--sf-header-height-mobile"},{"id":452,"name":"--sf-heading-color"},{"id":453,"name":"--sf-heading-font-family"},{"id":454,"name":"--sf-heading-text-wrap"},{"id":455,"name":"--sf-icon-2xl"},{"id":456,"name":"--sf-icon-box-bg"},{"id":457,"name":"--sf-icon-box-border"},{"id":458,"name":"--sf-icon-box-pad"},{"id":459,"name":"--sf-icon-box-radius"},{"id":460,"name":"--sf-icon-l"},{"id":461,"name":"--sf-icon-m"},{"id":462,"name":"--sf-icon-s"},{"id":463,"name":"--sf-icon-xl"},{"id":464,"name":"--sf-icon-xs"},{"id":465,"name":"--sf-imposter-margin"},{"id":466,"name":"--sf-is-active"},{"id":467,"name":"--sf-is-current"},{"id":468,"name":"--sf-is-dark"},{"id":469,"name":"--sf-is-open"},{"id":470,"name":"--sf-is-pressed"},{"id":471,"name":"--sf-leading-normal"},{"id":472,"name":"--sf-leading-relaxed"},{"id":473,"name":"--sf-leading-snug"},{"id":474,"name":"--sf-leading-taper"},{"id":475,"name":"--sf-leading-tight"},{"id":476,"name":"--sf-line-clamp"},{"id":477,"name":"--sf-link-external-marker"},{"id":478,"name":"--sf-link-underline-offset"},{"id":479,"name":"--sf-link-underline-thickness"},{"id":480,"name":"--sf-lumlocker"},{"id":481,"name":"--sf-mask-scrim-end"},{"id":482,"name":"--sf-mask-scrim-start"},{"id":483,"name":"--sf-motion-scale"},{"id":484,"name":"--sf-object-fit"},{"id":485,"name":"--sf-object-position"},{"id":486,"name":"--sf-opacity-disabled"},{"id":487,"name":"--sf-opacity-muted"},{"id":488,"name":"--sf-optical-sizing"},{"id":489,"name":"--sf-palette-mix-100"},{"id":490,"name":"--sf-palette-mix-200"},{"id":491,"name":"--sf-palette-mix-300"},{"id":492,"name":"--sf-palette-mix-400"},{"id":493,"name":"--sf-palette-mix-50"},{"id":494,"name":"--sf-palette-mix-600"},{"id":495,"name":"--sf-palette-mix-700"},{"id":496,"name":"--sf-palette-mix-800"},{"id":497,"name":"--sf-palette-mix-900"},{"id":498,"name":"--sf-palette-mix-950"},{"id":499,"name":"--sf-print-base-size"},{"id":500,"name":"--sf-print-page-margin"},{"id":501,"name":"--sf-print-page-size"},{"id":502,"name":"--sf-prose-block-margin"},{"id":503,"name":"--sf-prose-blockquote-border"},{"id":504,"name":"--sf-prose-blockquote-padding"},{"id":505,"name":"--sf-prose-figcaption-size"},{"id":506,"name":"--sf-prose-figure-margin"},{"id":507,"name":"--sf-prose-heading-gap"},{"id":508,"name":"--sf-prose-hr-margin"},{"id":509,"name":"--sf-prose-list-gap"},{"id":510,"name":"--sf-prose-marker-color"},{"id":511,"name":"--sf-prose-media-margin"},{"id":512,"name":"--sf-prose-media-radius"},{"id":513,"name":"--sf-prose-nested-list-gap"},{"id":514,"name":"--sf-prose-paragraph"},{"id":515,"name":"--sf-prose-table-pad"},{"id":516,"name":"--sf-radius-2xl"},{"id":517,"name":"--sf-radius-2xs"},{"id":518,"name":"--sf-radius-3xl"},{"id":519,"name":"--sf-radius-4xl"},{"id":520,"name":"--sf-radius-full"},{"id":521,"name":"--sf-radius-l"},{"id":522,"name":"--sf-radius-m"},{"id":523,"name":"--sf-radius-none"},{"id":524,"name":"--sf-radius-outer"},{"id":525,"name":"--sf-radius-pill"},{"id":526,"name":"--sf-radius-s"},{"id":527,"name":"--sf-radius-scale"},{"id":528,"name":"--sf-radius-xl"},{"id":529,"name":"--sf-radius-xs"},{"id":530,"name":"--sf-ratio-3-2"},{"id":531,"name":"--sf-ratio-4-3"},{"id":532,"name":"--sf-ratio-cinema"},{"id":533,"name":"--sf-ratio-golden"},{"id":534,"name":"--sf-ratio-portrait"},{"id":535,"name":"--sf-ratio-square"},{"id":536,"name":"--sf-ratio-video"},{"id":537,"name":"--sf-reel-gap"},{"id":538,"name":"--sf-reel-height"},{"id":539,"name":"--sf-reel-item-width"},{"id":540,"name":"--sf-safe-bottom"},{"id":541,"name":"--sf-safe-left"},{"id":542,"name":"--sf-safe-right"},{"id":543,"name":"--sf-safe-top"},{"id":544,"name":"--sf-scrim-color"},{"id":545,"name":"--sf-scrim-direction"},{"id":546,"name":"--sf-scrim-gradient"},{"id":547,"name":"--sf-scrim-text-shadow"},{"id":548,"name":"--sf-scroll-shadow-size"},{"id":549,"name":"--sf-scroll-timeline-range-end"},{"id":550,"name":"--sf-scroll-timeline-range-start"},{"id":551,"name":"--sf-scrollbar-thumb"},{"id":552,"name":"--sf-scrollbar-track"},{"id":553,"name":"--sf-section-pad"},{"id":554,"name":"--sf-section-pad--2xl"},{"id":555,"name":"--sf-section-pad--l"},{"id":556,"name":"--sf-section-pad--m"},{"id":557,"name":"--sf-section-pad--s"},{"id":558,"name":"--sf-section-pad--xl"},{"id":559,"name":"--sf-section-pad--xs"},{"id":560,"name":"--sf-section-scale"},{"id":561,"name":"--sf-shadow-2xl"},{"id":562,"name":"--sf-shadow-color"},{"id":563,"name":"--sf-shadow-glow"},{"id":564,"name":"--sf-shadow-glow-color"},{"id":565,"name":"--sf-shadow-inner"},{"id":566,"name":"--sf-shadow-l"},{"id":567,"name":"--sf-shadow-lightness"},{"id":568,"name":"--sf-shadow-m"},{"id":569,"name":"--sf-shadow-none"},{"id":570,"name":"--sf-shadow-s"},{"id":571,"name":"--sf-shadow-strength"},{"id":572,"name":"--sf-shadow-xl"},{"id":573,"name":"--sf-shadow-xs"},{"id":574,"name":"--sf-sidebar-gap"},{"id":575,"name":"--sf-sidebar-min-width"},{"id":576,"name":"--sf-sidebar-width"},{"id":577,"name":"--sf-size-l"},{"id":578,"name":"--sf-size-m"},{"id":579,"name":"--sf-size-s"},{"id":580,"name":"--sf-size-xl"},{"id":581,"name":"--sf-size-xs"},{"id":582,"name":"--sf-space-2xl"},{"id":583,"name":"--sf-space-2xs"},{"id":584,"name":"--sf-space-3xl"},{"id":585,"name":"--sf-space-4xl"},{"id":586,"name":"--sf-space-base-max"},{"id":587,"name":"--sf-space-base-min"},{"id":588,"name":"--sf-space-l"},{"id":589,"name":"--sf-space-m"},{"id":590,"name":"--sf-space-none"},{"id":591,"name":"--sf-space-px"},{"id":592,"name":"--sf-space-ratio-max"},{"id":593,"name":"--sf-space-ratio-min"},{"id":594,"name":"--sf-space-s"},{"id":595,"name":"--sf-space-scale"},{"id":596,"name":"--sf-space-xl"},{"id":597,"name":"--sf-space-xs"},{"id":598,"name":"--sf-stack-gap"},{"id":599,"name":"--sf-state-pending-opacity"},{"id":600,"name":"--sf-sticky-offset"},{"id":601,"name":"--sf-sticky-offset-desktop"},{"id":602,"name":"--sf-sticky-offset-mobile"},{"id":603,"name":"--sf-surface-color"},{"id":604,"name":"--sf-switcher-gap"},{"id":605,"name":"--sf-switcher-threshold"},{"id":606,"name":"--sf-text-2xl"},{"id":607,"name":"--sf-text-2xl-font-weight"},{"id":608,"name":"--sf-text-2xl-letter-spacing"},{"id":609,"name":"--sf-text-2xl-line-height"},{"id":610,"name":"--sf-text-2xl-max-width"},{"id":611,"name":"--sf-text-2xs"},{"id":612,"name":"--sf-text-2xs-font-weight"},{"id":613,"name":"--sf-text-2xs-letter-spacing"},{"id":614,"name":"--sf-text-2xs-line-height"},{"id":615,"name":"--sf-text-2xs-max-width"},{"id":616,"name":"--sf-text-3xl"},{"id":617,"name":"--sf-text-3xl-font-weight"},{"id":618,"name":"--sf-text-3xl-letter-spacing"},{"id":619,"name":"--sf-text-3xl-line-height"},{"id":620,"name":"--sf-text-3xl-max-width"},{"id":621,"name":"--sf-text-4xl"},{"id":622,"name":"--sf-text-4xl-font-weight"},{"id":623,"name":"--sf-text-4xl-letter-spacing"},{"id":624,"name":"--sf-text-4xl-line-height"},{"id":625,"name":"--sf-text-4xl-max-width"},{"id":626,"name":"--sf-text-base-max"},{"id":627,"name":"--sf-text-base-min"},{"id":628,"name":"--sf-text-display-base-max"},{"id":629,"name":"--sf-text-display-base-min"},{"id":630,"name":"--sf-text-display-l"},{"id":631,"name":"--sf-text-display-m"},{"id":632,"name":"--sf-text-display-s"},{"id":633,"name":"--sf-text-display-scale"},{"id":634,"name":"--sf-text-l"},{"id":635,"name":"--sf-text-l-font-weight"},{"id":636,"name":"--sf-text-l-letter-spacing"},{"id":637,"name":"--sf-text-l-line-height"},{"id":638,"name":"--sf-text-l-max-width"},{"id":639,"name":"--sf-text-m"},{"id":640,"name":"--sf-text-m-font-weight"},{"id":641,"name":"--sf-text-m-letter-spacing"},{"id":642,"name":"--sf-text-m-line-height"},{"id":643,"name":"--sf-text-m-max-width"},{"id":644,"name":"--sf-text-ratio-max"},{"id":645,"name":"--sf-text-ratio-min"},{"id":646,"name":"--sf-text-s"},{"id":647,"name":"--sf-text-s-font-weight"},{"id":648,"name":"--sf-text-s-letter-spacing"},{"id":649,"name":"--sf-text-s-line-height"},{"id":650,"name":"--sf-text-s-max-width"},{"id":651,"name":"--sf-text-scale"},{"id":652,"name":"--sf-text-shadow-l"},{"id":653,"name":"--sf-text-shadow-m"},{"id":654,"name":"--sf-text-shadow-none"},{"id":655,"name":"--sf-text-shadow-s"},{"id":656,"name":"--sf-text-xl"},{"id":657,"name":"--sf-text-xl-font-weight"},{"id":658,"name":"--sf-text-xl-letter-spacing"},{"id":659,"name":"--sf-text-xl-line-height"},{"id":660,"name":"--sf-text-xl-max-width"},{"id":661,"name":"--sf-text-xs"},{"id":662,"name":"--sf-text-xs-font-weight"},{"id":663,"name":"--sf-text-xs-letter-spacing"},{"id":664,"name":"--sf-text-xs-line-height"},{"id":665,"name":"--sf-text-xs-max-width"},{"id":666,"name":"--sf-theme-transition-duration"},{"id":667,"name":"--sf-touch-target"},{"id":668,"name":"--sf-tracking-normal"},{"id":669,"name":"--sf-tracking-tight"},{"id":670,"name":"--sf-tracking-wide"},{"id":671,"name":"--sf-tracking-wider"},{"id":672,"name":"--sf-tracking-widest"},{"id":673,"name":"--sf-transition-colors"},{"id":674,"name":"--sf-transition-enter"},{"id":675,"name":"--sf-transition-exit"},{"id":676,"name":"--sf-transition-fast"},{"id":677,"name":"--sf-transition-form-field"},{"id":678,"name":"--sf-transition-opacity"},{"id":679,"name":"--sf-transition-overlay"},{"id":680,"name":"--sf-transition-shadow"},{"id":681,"name":"--sf-transition-slow"},{"id":682,"name":"--sf-transition-transform"},{"id":683,"name":"--sf-z-base"},{"id":684,"name":"--sf-z-below"},{"id":685,"name":"--sf-z-dropdown"},{"id":686,"name":"--sf-z-fixed"},{"id":687,"name":"--sf-z-modal"},{"id":688,"name":"--sf-z-overlay"},{"id":689,"name":"--sf-z-raised"},{"id":690,"name":"--sf-z-sticky"},{"id":691,"name":"--sf-z-toast"},{"id":692,"name":"--sf-z-tooltip"},{"id":693,"name":"--sf-bg-fit"},{"id":694,"name":"--sf-bg-inset"},{"id":695,"name":"--sf-bg-position"},{"id":696,"name":"--sf-bg-radius"},{"id":697,"name":"--sf-bg-z"},{"id":698,"name":"--sf-btn-padding-block"},{"id":699,"name":"--sf-btn-padding-inline"},{"id":700,"name":"--sf-btn-radius"}]'),wf={_meta:xf,tokens:kf};/**
+ */const n=[["path",{d:"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"}]];Yt(a,Wt({name:"zap"},()=>o,{get iconNode(){return n},children:(l,i)=>{var c=Bt(),d=de(c);qt(d,e,"default",{}),f(l,c)},$$slots:{default:!0}}))}var Zd=g('<button class="flex items-center gap-1.5 px-2.5 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-lg text-indigo-300 text-[10px] font-bold font-mono hover:bg-indigo-500/20 transition-colors cursor-pointer shrink-0"><span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[9px] font-black"> </span> customised · Export →</button>'),Jd=g("<!> Saving…",1),Xd=g("<!> Saved",1),Qd=g("<!> Save",1),$d=g('<header class="h-[52px] bg-[#0d0d14] border-b border-white/8 flex items-center px-3 gap-3 shrink-0 z-20"><div class="w-8 h-8 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-lg leading-none select-none shadow-lg shadow-indigo-600/30 shrink-0">/</div> <div class="shrink-0"><div class="text-[11px] font-bold text-white tracking-tight leading-none flex items-center gap-1.5">SLASHED Studio <span class="text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono"> </span></div> <div class="text-[9px] text-slate-500 font-mono tracking-widest uppercase mt-0.5">Token Architect</div></div> <!> <div class="flex-1"></div> <div class="flex items-center gap-1.5"><button><!></button> <button title="Undo (Ctrl+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button> <div class="w-px h-4 bg-white/10 mx-1"></div> <button title="Copy share link" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Import CSS overrides" class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Reset all overrides" class="p-1.5 rounded-lg text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer"><!></button></div></header>');function ef(a,e){Qt(e,!0);const o=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"";let n=G(!1);async function l(){try{await navigator.clipboard.writeText(window.location.href),O(n,!0),setTimeout(()=>{O(n,!1)},2e3)}catch{}}var i=$d(),c=r(s(i),2),d=s(c),p=r(s(d)),m=s(p),h=r(c,2);{var v=te=>{var ge=Zd(),Pe=s(ge),ve=s(Pe);C(()=>b(ve,e.overridesCount)),x("click",ge,function(...me){e.onExport?.apply(this,me)}),f(te,ge)};I(h,te=>{e.overridesCount>0&&te(v)})}var y=r(h,4),k=s(y),w=s(k);{var E=te=>{var ge=Jd(),Pe=de(ge);ni(Pe,{class:"w-3.5 h-3.5 animate-spin"}),f(te,ge)},B=te=>{var ge=Xd(),Pe=de(ge);Mo(Pe,{class:"w-3.5 h-3.5"}),f(te,ge)},U=te=>{var ge=Qd(),Pe=de(ge);di(Pe,{class:"w-3.5 h-3.5"}),f(te,ge)};I(w,te=>{e.saveState==="saving"?te(E):e.saveState==="saved"?te(B,1):te(U,-1)})}var P=r(k,2),S=s(P);vi(S,{class:"w-3.5 h-3.5"});var _=r(P,2),z=s(_);ii(z,{class:"w-3.5 h-3.5"});var L=r(_,4),R=s(L);{var D=te=>{Mo(te,{class:"w-3.5 h-3.5 text-emerald-400"})},A=te=>{Hd(te,{class:"w-3.5 h-3.5"})};I(R,te=>{t(n)?te(D):te(A,-1)})}var T=r(L,2),N=s(T);si(N,{class:"w-3.5 h-3.5"});var $=r(T,2),Ge=s($);pi(Ge,{class:"w-3.5 h-3.5"}),C(te=>{b(m,`v${o??""}`),k.disabled=!e.hasPendingChanges||e.saveState==="saving",Y(k,"title",e.hasPendingChanges?"Save changes (Ctrl+S)":"No unsaved changes"),Ye(k,1,te),P.disabled=!e.canUndo,_.disabled=!e.canRedo,$.disabled=e.overridesCount===0},[()=>ro(["flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all cursor-pointer",e.saveState==="saved"?"bg-emerald-900/40 border border-emerald-500/30 text-emerald-300":e.hasPendingChanges?"bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-600/30":"bg-white/5 text-slate-500 disabled:opacity-40 disabled:pointer-events-none"].join(" "))]),x("click",k,function(...te){e.onSave?.apply(this,te)}),x("click",P,function(...te){e.onUndo?.apply(this,te)}),x("click",_,function(...te){e.onRedo?.apply(this,te)}),x("click",L,l),x("click",T,function(...te){e.onImport?.apply(this,te)}),x("click",$,function(...te){e.onResetAll?.apply(this,te)}),f(a,i),$t()}aa(["click"]);var Un=g('<span class="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 bg-indigo-500 rounded-full text-[8px] font-black text-white flex items-center justify-center"> </span>'),zn=g('<button><!> <!> <span class="absolute left-12 bg-slate-800 text-white text-[10px] font-semibold px-2 py-1 rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 border border-white/10"> </span></button>'),tf=g('<nav class="w-14 bg-[#0a0a0f] border-r border-white/8 flex flex-col items-center py-3 gap-1 shrink-0 overflow-y-auto overflow-x-hidden"><div class="flex flex-col items-center gap-1 w-full px-2"></div> <div class="w-8 h-px bg-white/8 my-2"></div> <div class="flex flex-col items-center gap-1 w-full px-2"></div></nav>');function gi(a,e){Qt(e,!0);let o=ka(e,"overridesByDomain",19,()=>({}));const n=[{id:"home",icon:Rd,label:"Home",group:"tokens"},{id:"colors",icon:li,label:"Colors",group:"tokens"},{id:"typography",icon:mi,label:"Typography",group:"tokens"},{id:"spacing",icon:ci,label:"Spacing",group:"tokens"},{id:"layout",icon:Fd,label:"Layout",group:"tokens"},{id:"borders",icon:ui,label:"Borders",group:"tokens"},{id:"shadows",icon:ri,label:"Shadows",group:"tokens"},{id:"motion",icon:hi,label:"Motion",group:"tokens"},{id:"effects",icon:fi,label:"Effects",group:"tokens"},{id:"macros",icon:Ud,label:"Macros",group:"tokens"},{id:"misc",icon:jd,label:"Misc",group:"tokens"},{id:"themes",icon:Wd,label:"Themes",group:"tools"},{id:"wcag",icon:qd,label:"WCAG",group:"tools"},{id:"setup",icon:Nd,label:"Install",group:"tools"},{id:"cheatsheet",icon:zd,label:"Classes",group:"tools"}];let l=u(()=>n.filter(m=>m.group==="tokens")),i=u(()=>n.filter(m=>m.group==="tools"));var c=tf(),d=s(c);re(d,21,()=>t(l),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),y=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var w=zn(),E=s(w);Nr(E,()=>t(k),(_,z)=>{z(_,{class:"w-4 h-4"})});var B=r(E,2);{var U=_=>{var z=Un(),L=s(z);C(()=>b(L,t(y)>9?"+":t(y))),f(_,z)};I(B,_=>{t(y)>0&&!t(v)&&_(U)})}var P=r(B,2),S=s(P);C(()=>{Y(w,"title",t(h).label),Ye(w,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),b(S,t(h).label)}),x("click",w,()=>e.onSelect(t(h).id)),f(m,w)});var p=r(d,4);re(p,21,()=>t(i),m=>m.id,(m,h)=>{const v=u(()=>e.activeId===t(h).id),y=u(()=>o()[t(h).id]||0),k=u(()=>t(h).icon);var w=zn(),E=s(w);Nr(E,()=>t(k),(_,z)=>{z(_,{class:"w-4 h-4"})});var B=r(E,2);{var U=_=>{var z=Un(),L=s(z);C(()=>b(L,t(y)>9?"+":t(y))),f(_,z)};I(B,_=>{t(y)>0&&!t(v)&&_(U)})}var P=r(B,2),S=s(P);C(()=>{Y(w,"title",t(h).label),Ye(w,1,`relative w-10 h-10 flex items-center justify-center rounded-xl transition-all cursor-pointer group ${t(v)?"bg-indigo-600 text-white shadow-lg shadow-indigo-600/30":"text-slate-500 hover:text-slate-200 hover:bg-white/8"}`),b(S,t(h).label)}),x("click",w,()=>e.onSelect(t(h).id)),f(m,w)}),f(a,c),$t()}aa(["click"]);var af=g('<span class="text-indigo-400"> </span>'),of=g('<div class="h-6 bg-[#07070b] border-t border-white/6 flex items-center px-4 gap-4 shrink-0 select-none"><div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div> <span class="text-[9px] font-mono font-bold text-slate-500 uppercase tracking-widest">Live</span></div> <span class="text-[9px] font-mono text-slate-600"><!></span> <div class="flex-1"></div> <span class="text-[9px] font-mono text-slate-700"> </span></div>');function sf(a,e){var o=of(),n=r(s(o),2),l=s(n);{var i=m=>{var h=af(),v=s(h);C(()=>b(v,`${e.overridesCount??""} override${e.overridesCount!==1?"s":""} active`)),f(m,h)},c=m=>{var h=lr("No overrides — showing framework defaults");f(m,h)};I(l,m=>{e.overridesCount>0?m(i):m(c,-1)})}var d=r(n,4),p=s(d);C(()=>b(p,e.domain)),f(a,o)}var wa=Uint8Array,Ua=Uint16Array,nn=Int32Array,cr=new wa([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),dr=new wa([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),Gr=new wa([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),bi=function(a,e){for(var o=new Ua(31),n=0;n<31;++n)o[n]=e+=1<<a[n-1];for(var l=new nn(o[30]),n=1;n<30;++n)for(var i=o[n];i<o[n+1];++i)l[i]=i-o[n]<<5|n;return{b:o,r:l}},yi=bi(cr,2),xi=yi.b,Hr=yi.r;xi[28]=258,Hr[258]=28;var ki=bi(dr,0),rf=ki.b,An=ki.r,qr=new Ua(32768);for(var ra=0;ra<32768;++ra){var fo=(ra&43690)>>1|(ra&21845)<<1;fo=(fo&52428)>>2|(fo&13107)<<2,fo=(fo&61680)>>4|(fo&3855)<<4,qr[ra]=((fo&65280)>>8|(fo&255)<<8)>>1}var $a=(function(a,e,o){for(var n=a.length,l=0,i=new Ua(e);l<n;++l)a[l]&&++i[a[l]-1];var c=new Ua(e);for(l=1;l<e;++l)c[l]=c[l-1]+i[l-1]<<1;var d;if(o){d=new Ua(1<<e);var p=15-e;for(l=0;l<n;++l)if(a[l])for(var m=l<<4|a[l],h=e-a[l],v=c[a[l]-1]++<<h,y=v|(1<<h)-1;v<=y;++v)d[qr[v]>>p]=m}else for(d=new Ua(n),l=0;l<n;++l)a[l]&&(d[l]=qr[c[a[l]-1]++]>>15-a[l]);return d}),wo=new wa(288);for(var ra=0;ra<144;++ra)wo[ra]=8;for(var ra=144;ra<256;++ra)wo[ra]=9;for(var ra=256;ra<280;++ra)wo[ra]=7;for(var ra=280;ra<288;++ra)wo[ra]=8;var Ls=new wa(32);for(var ra=0;ra<32;++ra)Ls[ra]=5;var nf=$a(wo,9,0),lf=$a(wo,9,1),cf=$a(Ls,5,0),df=$a(Ls,5,1),yr=function(a){for(var e=a[0],o=1;o<a.length;++o)a[o]>e&&(e=a[o]);return e},Ma=function(a,e,o){var n=e/8|0;return(a[n]|a[n+1]<<8)>>(e&7)&o},xr=function(a,e){var o=e/8|0;return(a[o]|a[o+1]<<8|a[o+2]<<16)>>(e&7)},ln=function(a){return(a+7)/8|0},wi=function(a,e,o){return(o==null||o>a.length)&&(o=a.length),new wa(a.subarray(e,o))},ff=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],oo=function(a,e,o){var n=new Error(e||ff[a]);if(n.code=a,Error.captureStackTrace&&Error.captureStackTrace(n,oo),!o)throw n;return n},uf=function(a,e,o,n){var l=a.length,i=0;if(!l||e.f&&!e.l)return o||new wa(0);var c=!o,d=c||e.i!=2,p=e.i;c&&(o=new wa(l*3));var m=function(Be){var ae=o.length;if(Be>ae){var q=new wa(Math.max(ae*2,Be));q.set(o),o=q}},h=e.f||0,v=e.p||0,y=e.b||0,k=e.l,w=e.d,E=e.m,B=e.n,U=l*8;do{if(!k){h=Ma(a,v,1);var P=Ma(a,v+1,3);if(v+=3,P)if(P==1)k=lf,w=df,E=9,B=5;else if(P==2){var L=Ma(a,v,31)+257,R=Ma(a,v+10,15)+4,D=L+Ma(a,v+5,31)+1;v+=14;for(var A=new wa(D),T=new wa(19),N=0;N<R;++N)T[Gr[N]]=Ma(a,v+N*3,7);v+=R*3;for(var $=yr(T),Ge=(1<<$)-1,te=$a(T,$,1),N=0;N<D;){var ge=te[Ma(a,v,Ge)];v+=ge&15;var S=ge>>4;if(S<16)A[N++]=S;else{var Pe=0,ve=0;for(S==16?(ve=3+Ma(a,v,3),v+=2,Pe=A[N-1]):S==17?(ve=3+Ma(a,v,7),v+=3):S==18&&(ve=11+Ma(a,v,127),v+=7);ve--;)A[N++]=Pe}}var me=A.subarray(0,L),je=A.subarray(L);E=yr(me),B=yr(je),k=$a(me,E,1),w=$a(je,B,1)}else oo(1);else{var S=ln(v)+4,_=a[S-4]|a[S-3]<<8,z=S+_;if(z>l){p&&oo(0);break}d&&m(y+_),o.set(a.subarray(S,z),y),e.b=y+=_,e.p=v=z*8,e.f=h;continue}if(v>U){p&&oo(0);break}}d&&m(y+131072);for(var $e=(1<<E)-1,tt=(1<<B)-1,M=v;;M=v){var Pe=k[xr(a,v)&$e],J=Pe>>4;if(v+=Pe&15,v>U){p&&oo(0);break}if(Pe||oo(2),J<256)o[y++]=J;else if(J==256){M=v,k=null;break}else{var be=J-254;if(J>264){var N=J-257,ye=cr[N];be=Ma(a,v,(1<<ye)-1)+xi[N],v+=ye}var W=w[xr(a,v)&tt],ke=W>>4;W||oo(3),v+=W&15;var je=rf[ke];if(ke>3){var ye=dr[ke];je+=xr(a,v)&(1<<ye)-1,v+=ye}if(v>U){p&&oo(0);break}d&&m(y+131072);var He=y+be;if(y<je){var st=i-je,Se=Math.min(je,He);for(st+y<0&&oo(3);y<Se;++y)o[y]=n[st+y]}for(;y<He;++y)o[y]=o[y-je]}}e.l=k,e.p=M,e.b=y,e.f=h,k&&(h=1,e.m=E,e.d=w,e.n=B)}while(!h);return y!=o.length&&c?wi(o,0,y):o.subarray(0,y)},ao=function(a,e,o){o<<=e&7;var n=e/8|0;a[n]|=o,a[n+1]|=o>>8},us=function(a,e,o){o<<=e&7;var n=e/8|0;a[n]|=o,a[n+1]|=o>>8,a[n+2]|=o>>16},kr=function(a,e){for(var o=[],n=0;n<a.length;++n)a[n]&&o.push({s:n,f:a[n]});var l=o.length,i=o.slice();if(!l)return{t:Ci,l:0};if(l==1){var c=new wa(o[0].s+1);return c[o[0].s]=1,{t:c,l:1}}o.sort(function(z,L){return z.f-L.f}),o.push({s:-1,f:25001});var d=o[0],p=o[1],m=0,h=1,v=2;for(o[0]={s:-1,f:d.f+p.f,l:d,r:p};h!=l-1;)d=o[o[m].f<o[v].f?m++:v++],p=o[m!=h&&o[m].f<o[v].f?m++:v++],o[h++]={s:-1,f:d.f+p.f,l:d,r:p};for(var y=i[0].s,n=1;n<l;++n)i[n].s>y&&(y=i[n].s);var k=new Ua(y+1),w=Vr(o[h-1],k,0);if(w>e){var n=0,E=0,B=w-e,U=1<<B;for(i.sort(function(L,R){return k[R.s]-k[L.s]||L.f-R.f});n<l;++n){var P=i[n].s;if(k[P]>e)E+=U-(1<<w-k[P]),k[P]=e;else break}for(E>>=B;E>0;){var S=i[n].s;k[S]<e?E-=1<<e-k[S]++-1:++n}for(;n>=0&&E;--n){var _=i[n].s;k[_]==e&&(--k[_],++E)}w=e}return{t:new wa(k),l:w}},Vr=function(a,e,o){return a.s==-1?Math.max(Vr(a.l,e,o+1),Vr(a.r,e,o+1)):e[a.s]=o},En=function(a){for(var e=a.length;e&&!a[--e];);for(var o=new Ua(++e),n=0,l=a[0],i=1,c=function(p){o[n++]=p},d=1;d<=e;++d)if(a[d]==l&&d!=e)++i;else{if(!l&&i>2){for(;i>138;i-=138)c(32754);i>2&&(c(i>10?i-11<<5|28690:i-3<<5|12305),i=0)}else if(i>3){for(c(l),--i;i>6;i-=6)c(8304);i>2&&(c(i-3<<5|8208),i=0)}for(;i--;)c(l);i=1,l=a[d]}return{c:o.subarray(0,n),n:e}},ps=function(a,e){for(var o=0,n=0;n<e.length;++n)o+=a[n]*e[n];return o},_i=function(a,e,o){var n=o.length,l=ln(e+2);a[l]=n&255,a[l+1]=n>>8,a[l+2]=a[l]^255,a[l+3]=a[l+1]^255;for(var i=0;i<n;++i)a[l+i+4]=o[i];return(l+4+n)*8},Rn=function(a,e,o,n,l,i,c,d,p,m,h){ao(e,h++,o),++l[256];for(var v=kr(l,15),y=v.t,k=v.l,w=kr(i,15),E=w.t,B=w.l,U=En(y),P=U.c,S=U.n,_=En(E),z=_.c,L=_.n,R=new Ua(19),D=0;D<P.length;++D)++R[P[D]&31];for(var D=0;D<z.length;++D)++R[z[D]&31];for(var A=kr(R,7),T=A.t,N=A.l,$=19;$>4&&!T[Gr[$-1]];--$);var Ge=m+5<<3,te=ps(l,wo)+ps(i,Ls)+c,ge=ps(l,y)+ps(i,E)+c+14+3*$+ps(R,T)+2*R[16]+3*R[17]+7*R[18];if(p>=0&&Ge<=te&&Ge<=ge)return _i(e,h,a.subarray(p,p+m));var Pe,ve,me,je;if(ao(e,h,1+(ge<te)),h+=2,ge<te){Pe=$a(y,k,0),ve=y,me=$a(E,B,0),je=E;var $e=$a(T,N,0);ao(e,h,S-257),ao(e,h+5,L-1),ao(e,h+10,$-4),h+=14;for(var D=0;D<$;++D)ao(e,h+3*D,T[Gr[D]]);h+=3*$;for(var tt=[P,z],M=0;M<2;++M)for(var J=tt[M],D=0;D<J.length;++D){var be=J[D]&31;ao(e,h,$e[be]),h+=T[be],be>15&&(ao(e,h,J[D]>>5&127),h+=J[D]>>12)}}else Pe=nf,ve=wo,me=cf,je=Ls;for(var D=0;D<d;++D){var ye=n[D];if(ye>255){var be=ye>>18&31;us(e,h,Pe[be+257]),h+=ve[be+257],be>7&&(ao(e,h,ye>>23&31),h+=cr[be]);var W=ye&31;us(e,h,me[W]),h+=je[W],W>3&&(us(e,h,ye>>5&8191),h+=dr[W])}else us(e,h,Pe[ye]),h+=ve[ye]}return us(e,h,Pe[256]),h+ve[256]},pf=new nn([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),Ci=new wa(0),mf=function(a,e,o,n,l,i){var c=i.z||a.length,d=new wa(n+c+5*(1+Math.ceil(c/7e3))+l),p=d.subarray(n,d.length-l),m=i.l,h=(i.r||0)&7;if(e){h&&(p[0]=i.r>>3);for(var v=pf[e-1],y=v>>13,k=v&8191,w=(1<<o)-1,E=i.p||new Ua(32768),B=i.h||new Ua(w+1),U=Math.ceil(o/3),P=2*U,S=function(we){return(a[we]^a[we+1]<<U^a[we+2]<<P)&w},_=new nn(25e3),z=new Ua(288),L=new Ua(32),R=0,D=0,A=i.i||0,T=0,N=i.w||0,$=0;A+2<c;++A){var Ge=S(A),te=A&32767,ge=B[Ge];if(E[te]=ge,B[Ge]=te,N<=A){var Pe=c-A;if((R>7e3||T>24576)&&(Pe>423||!m)){h=Rn(a,p,0,_,z,L,D,T,$,A-$,h),T=R=D=0,$=A;for(var ve=0;ve<286;++ve)z[ve]=0;for(var ve=0;ve<30;++ve)L[ve]=0}var me=2,je=0,$e=k,tt=te-ge&32767;if(Pe>2&&Ge==S(A-tt))for(var M=Math.min(y,Pe)-1,J=Math.min(32767,A),be=Math.min(258,Pe);tt<=J&&--$e&&te!=ge;){if(a[A+me]==a[A+me-tt]){for(var ye=0;ye<be&&a[A+ye]==a[A+ye-tt];++ye);if(ye>me){if(me=ye,je=tt,ye>M)break;for(var W=Math.min(tt,ye-2),ke=0,ve=0;ve<W;++ve){var He=A-tt+ve&32767,st=E[He],Se=He-st&32767;Se>ke&&(ke=Se,ge=He)}}}te=ge,ge=E[te],tt+=te-ge&32767}if(je){_[T++]=268435456|Hr[me]<<18|An[je];var Be=Hr[me]&31,ae=An[je]&31;D+=cr[Be]+dr[ae],++z[257+Be],++L[ae],N=A+me,++R}else _[T++]=a[A],++z[a[A]]}}for(A=Math.max(A,N);A<c;++A)_[T++]=a[A],++z[a[A]];h=Rn(a,p,m,_,z,L,D,T,$,A-$,h),m||(i.r=h&7|p[h/8|0]<<3,h-=7,i.h=B,i.p=E,i.i=A,i.w=N)}else{for(var A=i.w||0;A<c+m;A+=65535){var q=A+65535;q>=c&&(p[h/8|0]=m,q=c),h=_i(p,h+1,a.subarray(A,q))}i.i=c}return wi(d,0,n+ln(h)+l)},vf=function(a,e,o,n,l){if(!l&&(l={l:1},e.dictionary)){var i=e.dictionary.subarray(-32768),c=new wa(i.length+a.length);c.set(i),c.set(a,i.length),a=c,l.w=i.length}return mf(a,e.level==null?6:e.level,e.mem==null?l.l?Math.ceil(Math.max(8,Math.min(13,Math.log(a.length)))*1.5):20:12+e.mem,o,n,l)};function hf(a,e){return vf(a,{},0,0)}function gf(a,e){return uf(a,{i:2},e,e)}var bf=typeof TextDecoder<"u"&&new TextDecoder,yf=0;try{bf.decode(Ci,{stream:!0}),yf=1}catch{}const xf={generatedBy:"scripts/gen-token-registry.js",nextId:701},kf=JSON.parse('[{"id":0,"name":"--sf-alternate-gap"},{"id":1,"name":"--sf-alternate-inner-gap"},{"id":2,"name":"--sf-animation-blink"},{"id":3,"name":"--sf-animation-color-pulse"},{"id":4,"name":"--sf-animation-delay-1"},{"id":5,"name":"--sf-animation-delay-2"},{"id":6,"name":"--sf-animation-delay-3"},{"id":7,"name":"--sf-animation-delay-4"},{"id":8,"name":"--sf-animation-delay-5"},{"id":9,"name":"--sf-animation-fade-in"},{"id":10,"name":"--sf-animation-fade-out"},{"id":11,"name":"--sf-animation-float"},{"id":12,"name":"--sf-animation-ping"},{"id":13,"name":"--sf-animation-scale-down"},{"id":14,"name":"--sf-animation-scale-up"},{"id":15,"name":"--sf-animation-shimmer"},{"id":16,"name":"--sf-animation-slide-in-down"},{"id":17,"name":"--sf-animation-slide-in-left"},{"id":18,"name":"--sf-animation-slide-in-right"},{"id":19,"name":"--sf-animation-slide-in-up"},{"id":20,"name":"--sf-animation-spin"},{"id":21,"name":"--sf-aspect"},{"id":22,"name":"--sf-bento-cols-default"},{"id":23,"name":"--sf-bento-gap"},{"id":24,"name":"--sf-bento-row-compact"},{"id":25,"name":"--sf-bento-row-default"},{"id":26,"name":"--sf-bento-row-tall"},{"id":27,"name":"--sf-blur"},{"id":28,"name":"--sf-body-color"},{"id":29,"name":"--sf-body-em-style"},{"id":30,"name":"--sf-body-font-family"},{"id":31,"name":"--sf-body-font-size"},{"id":32,"name":"--sf-body-font-weight"},{"id":33,"name":"--sf-body-line-height"},{"id":34,"name":"--sf-body-strong-weight"},{"id":35,"name":"--sf-body-text-wrap"},{"id":36,"name":"--sf-border"},{"id":37,"name":"--sf-border-scale"},{"id":38,"name":"--sf-border-strong"},{"id":39,"name":"--sf-border-style"},{"id":40,"name":"--sf-border-subtle"},{"id":41,"name":"--sf-border-width-1"},{"id":42,"name":"--sf-border-width-2"},{"id":43,"name":"--sf-border-width-3"},{"id":44,"name":"--sf-border-width-4"},{"id":45,"name":"--sf-border-width-hairline"},{"id":46,"name":"--sf-box-border-color"},{"id":47,"name":"--sf-box-border-width"},{"id":48,"name":"--sf-box-padding"},{"id":49,"name":"--sf-breakout-width"},{"id":50,"name":"--sf-button-padding-block","removed":true},{"id":51,"name":"--sf-button-padding-inline","removed":true},{"id":52,"name":"--sf-button-radius","removed":true},{"id":53,"name":"--sf-caret-color"},{"id":54,"name":"--sf-center-gutter"},{"id":55,"name":"--sf-center-max"},{"id":56,"name":"--sf-cluster-align"},{"id":57,"name":"--sf-cluster-gap"},{"id":58,"name":"--sf-cluster-justify"},{"id":59,"name":"--sf-code-font-size"},{"id":60,"name":"--sf-color-action"},{"id":61,"name":"--sf-color-action--active"},{"id":62,"name":"--sf-color-action--hover"},{"id":63,"name":"--sf-color-action-100"},{"id":64,"name":"--sf-color-action-200"},{"id":65,"name":"--sf-color-action-300"},{"id":66,"name":"--sf-color-action-400"},{"id":67,"name":"--sf-color-action-50"},{"id":68,"name":"--sf-color-action-500"},{"id":69,"name":"--sf-color-action-600"},{"id":70,"name":"--sf-color-action-700"},{"id":71,"name":"--sf-color-action-800"},{"id":72,"name":"--sf-color-action-900"},{"id":73,"name":"--sf-color-action-950"},{"id":74,"name":"--sf-color-action-a10"},{"id":75,"name":"--sf-color-action-a30"},{"id":76,"name":"--sf-color-action-a5"},{"id":77,"name":"--sf-color-action-a50"},{"id":78,"name":"--sf-color-action-a80"},{"id":79,"name":"--sf-color-action-source-dark"},{"id":80,"name":"--sf-color-action-darker"},{"id":81,"name":"--sf-color-action-ghost"},{"id":82,"name":"--sf-color-action-source-light"},{"id":83,"name":"--sf-color-action-lighter"},{"id":84,"name":"--sf-color-action-muted"},{"id":85,"name":"--sf-color-action-subtle"},{"id":86,"name":"--sf-color-action-superdark"},{"id":87,"name":"--sf-color-action-superlight"},{"id":88,"name":"--sf-color-action-xdark"},{"id":89,"name":"--sf-color-action-xlight"},{"id":90,"name":"--sf-color-base"},{"id":91,"name":"--sf-color-base--active"},{"id":92,"name":"--sf-color-base--hover"},{"id":93,"name":"--sf-color-base-100"},{"id":94,"name":"--sf-color-base-200"},{"id":95,"name":"--sf-color-base-300"},{"id":96,"name":"--sf-color-base-400"},{"id":97,"name":"--sf-color-base-50"},{"id":98,"name":"--sf-color-base-500"},{"id":99,"name":"--sf-color-base-600"},{"id":100,"name":"--sf-color-base-700"},{"id":101,"name":"--sf-color-base-800"},{"id":102,"name":"--sf-color-base-900"},{"id":103,"name":"--sf-color-base-950"},{"id":104,"name":"--sf-color-base-a10"},{"id":105,"name":"--sf-color-base-a30"},{"id":106,"name":"--sf-color-base-a5"},{"id":107,"name":"--sf-color-base-a50"},{"id":108,"name":"--sf-color-base-a80"},{"id":109,"name":"--sf-color-base-source-dark"},{"id":110,"name":"--sf-color-base-darker"},{"id":111,"name":"--sf-color-base-ghost"},{"id":112,"name":"--sf-color-base-source-light"},{"id":113,"name":"--sf-color-base-lighter"},{"id":114,"name":"--sf-color-base-muted"},{"id":115,"name":"--sf-color-base-subtle"},{"id":116,"name":"--sf-color-base-superdark"},{"id":117,"name":"--sf-color-base-superlight"},{"id":118,"name":"--sf-color-base-xdark"},{"id":119,"name":"--sf-color-base-xlight"},{"id":120,"name":"--sf-color-bg"},{"id":121,"name":"--sf-color-bg--active"},{"id":122,"name":"--sf-color-bg--disabled"},{"id":123,"name":"--sf-color-bg--focus"},{"id":124,"name":"--sf-color-bg--hover"},{"id":125,"name":"--sf-color-bg--selected"},{"id":126,"name":"--sf-color-black"},{"id":127,"name":"--sf-color-border"},{"id":128,"name":"--sf-color-border--disabled"},{"id":129,"name":"--sf-color-border--focus"},{"id":130,"name":"--sf-color-border--strong"},{"id":131,"name":"--sf-color-border--subtle"},{"id":132,"name":"--sf-color-border--translucent"},{"id":133,"name":"--sf-color-code-bg"},{"id":134,"name":"--sf-color-code-text"},{"id":135,"name":"--sf-color-danger"},{"id":136,"name":"--sf-color-danger-source-dark"},{"id":137,"name":"--sf-color-danger-source-light"},{"id":138,"name":"--sf-color-danger-muted"},{"id":139,"name":"--sf-color-danger-strong"},{"id":140,"name":"--sf-color-danger-subtle"},{"id":141,"name":"--sf-color-dim"},{"id":142,"name":"--sf-color-error","removed":true},{"id":143,"name":"--sf-color-error-dark","removed":true},{"id":144,"name":"--sf-color-error-light","removed":true},{"id":145,"name":"--sf-color-error-muted","removed":true},{"id":146,"name":"--sf-color-error-strong","removed":true},{"id":147,"name":"--sf-color-error-subtle","removed":true},{"id":148,"name":"--sf-color-heading"},{"id":149,"name":"--sf-color-info"},{"id":150,"name":"--sf-color-info-source-dark"},{"id":151,"name":"--sf-color-info-source-light"},{"id":152,"name":"--sf-color-info-muted"},{"id":153,"name":"--sf-color-info-strong"},{"id":154,"name":"--sf-color-info-subtle"},{"id":155,"name":"--sf-color-inset"},{"id":156,"name":"--sf-color-inverse"},{"id":157,"name":"--sf-color-link"},{"id":158,"name":"--sf-color-link--active"},{"id":159,"name":"--sf-color-link--disabled"},{"id":160,"name":"--sf-color-link--hover"},{"id":161,"name":"--sf-color-link--underline"},{"id":162,"name":"--sf-color-link--visited"},{"id":163,"name":"--sf-color-mark-bg"},{"id":164,"name":"--sf-color-mark-text"},{"id":165,"name":"--sf-color-neutral"},{"id":166,"name":"--sf-color-neutral--active"},{"id":167,"name":"--sf-color-neutral--hover"},{"id":168,"name":"--sf-color-neutral-100"},{"id":169,"name":"--sf-color-neutral-200"},{"id":170,"name":"--sf-color-neutral-300"},{"id":171,"name":"--sf-color-neutral-400"},{"id":172,"name":"--sf-color-neutral-50"},{"id":173,"name":"--sf-color-neutral-500"},{"id":174,"name":"--sf-color-neutral-600"},{"id":175,"name":"--sf-color-neutral-700"},{"id":176,"name":"--sf-color-neutral-800"},{"id":177,"name":"--sf-color-neutral-900"},{"id":178,"name":"--sf-color-neutral-950"},{"id":179,"name":"--sf-color-neutral-a10"},{"id":180,"name":"--sf-color-neutral-a30"},{"id":181,"name":"--sf-color-neutral-a5"},{"id":182,"name":"--sf-color-neutral-a50"},{"id":183,"name":"--sf-color-neutral-a80"},{"id":184,"name":"--sf-color-neutral-source-dark"},{"id":185,"name":"--sf-color-neutral-darker"},{"id":186,"name":"--sf-color-neutral-ghost"},{"id":187,"name":"--sf-color-neutral-source-light"},{"id":188,"name":"--sf-color-neutral-lighter"},{"id":189,"name":"--sf-color-neutral-muted"},{"id":190,"name":"--sf-color-neutral-subtle"},{"id":191,"name":"--sf-color-neutral-superdark"},{"id":192,"name":"--sf-color-neutral-superlight"},{"id":193,"name":"--sf-color-neutral-xdark"},{"id":194,"name":"--sf-color-neutral-xlight"},{"id":195,"name":"--sf-color-overlay"},{"id":196,"name":"--sf-color-primary"},{"id":197,"name":"--sf-color-primary--active"},{"id":198,"name":"--sf-color-primary--hover"},{"id":199,"name":"--sf-color-primary-100"},{"id":200,"name":"--sf-color-primary-200"},{"id":201,"name":"--sf-color-primary-300"},{"id":202,"name":"--sf-color-primary-400"},{"id":203,"name":"--sf-color-primary-50"},{"id":204,"name":"--sf-color-primary-500"},{"id":205,"name":"--sf-color-primary-600"},{"id":206,"name":"--sf-color-primary-700"},{"id":207,"name":"--sf-color-primary-800"},{"id":208,"name":"--sf-color-primary-900"},{"id":209,"name":"--sf-color-primary-950"},{"id":210,"name":"--sf-color-primary-a10"},{"id":211,"name":"--sf-color-primary-a30"},{"id":212,"name":"--sf-color-primary-a5"},{"id":213,"name":"--sf-color-primary-a50"},{"id":214,"name":"--sf-color-primary-a80"},{"id":215,"name":"--sf-color-primary-source-dark"},{"id":216,"name":"--sf-color-primary-darker"},{"id":217,"name":"--sf-color-primary-ghost"},{"id":218,"name":"--sf-color-primary-source-light"},{"id":219,"name":"--sf-color-primary-lighter"},{"id":220,"name":"--sf-color-primary-muted"},{"id":221,"name":"--sf-color-primary-subtle"},{"id":222,"name":"--sf-color-primary-superdark"},{"id":223,"name":"--sf-color-primary-superlight"},{"id":224,"name":"--sf-color-primary-xdark"},{"id":225,"name":"--sf-color-primary-xlight"},{"id":226,"name":"--sf-color-raised"},{"id":227,"name":"--sf-color-scheme"},{"id":228,"name":"--sf-color-secondary"},{"id":229,"name":"--sf-color-secondary--active"},{"id":230,"name":"--sf-color-secondary--hover"},{"id":231,"name":"--sf-color-secondary-100"},{"id":232,"name":"--sf-color-secondary-200"},{"id":233,"name":"--sf-color-secondary-300"},{"id":234,"name":"--sf-color-secondary-400"},{"id":235,"name":"--sf-color-secondary-50"},{"id":236,"name":"--sf-color-secondary-500"},{"id":237,"name":"--sf-color-secondary-600"},{"id":238,"name":"--sf-color-secondary-700"},{"id":239,"name":"--sf-color-secondary-800"},{"id":240,"name":"--sf-color-secondary-900"},{"id":241,"name":"--sf-color-secondary-950"},{"id":242,"name":"--sf-color-secondary-a10"},{"id":243,"name":"--sf-color-secondary-a30"},{"id":244,"name":"--sf-color-secondary-a5"},{"id":245,"name":"--sf-color-secondary-a50"},{"id":246,"name":"--sf-color-secondary-a80"},{"id":247,"name":"--sf-color-secondary-source-dark"},{"id":248,"name":"--sf-color-secondary-darker"},{"id":249,"name":"--sf-color-secondary-ghost"},{"id":250,"name":"--sf-color-secondary-source-light"},{"id":251,"name":"--sf-color-secondary-lighter"},{"id":252,"name":"--sf-color-secondary-muted"},{"id":253,"name":"--sf-color-secondary-subtle"},{"id":254,"name":"--sf-color-secondary-superdark"},{"id":255,"name":"--sf-color-secondary-superlight"},{"id":256,"name":"--sf-color-secondary-xdark"},{"id":257,"name":"--sf-color-secondary-xlight"},{"id":258,"name":"--sf-color-selection-bg"},{"id":259,"name":"--sf-color-selection-text"},{"id":260,"name":"--sf-color-success"},{"id":261,"name":"--sf-color-success-source-dark"},{"id":262,"name":"--sf-color-success-source-light"},{"id":263,"name":"--sf-color-success-muted"},{"id":264,"name":"--sf-color-success-strong"},{"id":265,"name":"--sf-color-success-subtle"},{"id":266,"name":"--sf-color-surface"},{"id":267,"name":"--sf-color-tertiary"},{"id":268,"name":"--sf-color-tertiary--active"},{"id":269,"name":"--sf-color-tertiary--hover"},{"id":270,"name":"--sf-color-tertiary-100"},{"id":271,"name":"--sf-color-tertiary-200"},{"id":272,"name":"--sf-color-tertiary-300"},{"id":273,"name":"--sf-color-tertiary-400"},{"id":274,"name":"--sf-color-tertiary-50"},{"id":275,"name":"--sf-color-tertiary-500"},{"id":276,"name":"--sf-color-tertiary-600"},{"id":277,"name":"--sf-color-tertiary-700"},{"id":278,"name":"--sf-color-tertiary-800"},{"id":279,"name":"--sf-color-tertiary-900"},{"id":280,"name":"--sf-color-tertiary-950"},{"id":281,"name":"--sf-color-tertiary-a10"},{"id":282,"name":"--sf-color-tertiary-a30"},{"id":283,"name":"--sf-color-tertiary-a5"},{"id":284,"name":"--sf-color-tertiary-a50"},{"id":285,"name":"--sf-color-tertiary-a80"},{"id":286,"name":"--sf-color-tertiary-source-dark"},{"id":287,"name":"--sf-color-tertiary-darker"},{"id":288,"name":"--sf-color-tertiary-ghost"},{"id":289,"name":"--sf-color-tertiary-source-light"},{"id":290,"name":"--sf-color-tertiary-lighter"},{"id":291,"name":"--sf-color-tertiary-muted"},{"id":292,"name":"--sf-color-tertiary-subtle"},{"id":293,"name":"--sf-color-tertiary-superdark"},{"id":294,"name":"--sf-color-tertiary-superlight"},{"id":295,"name":"--sf-color-tertiary-xdark"},{"id":296,"name":"--sf-color-tertiary-xlight"},{"id":297,"name":"--sf-color-text"},{"id":298,"name":"--sf-color-text--disabled"},{"id":299,"name":"--sf-color-text--inverse"},{"id":300,"name":"--sf-color-text--muted"},{"id":301,"name":"--sf-color-text--on-action"},{"id":302,"name":"--sf-color-text--on-base"},{"id":303,"name":"--sf-color-text--on-danger"},{"id":304,"name":"--sf-color-text--on-error","removed":true},{"id":305,"name":"--sf-color-text--on-info"},{"id":306,"name":"--sf-color-text--on-inverse"},{"id":307,"name":"--sf-color-text--on-neutral"},{"id":308,"name":"--sf-color-text--on-primary"},{"id":309,"name":"--sf-color-text--on-secondary"},{"id":310,"name":"--sf-color-text--on-success"},{"id":311,"name":"--sf-color-text--on-tertiary"},{"id":312,"name":"--sf-color-text--on-warning"},{"id":313,"name":"--sf-color-text--placeholder"},{"id":314,"name":"--sf-color-text--secondary"},{"id":315,"name":"--sf-color-warning"},{"id":316,"name":"--sf-color-warning-source-dark"},{"id":317,"name":"--sf-color-warning-source-light"},{"id":318,"name":"--sf-color-warning-muted"},{"id":319,"name":"--sf-color-warning-strong"},{"id":320,"name":"--sf-color-warning-subtle"},{"id":321,"name":"--sf-color-white"},{"id":322,"name":"--sf-component-pad"},{"id":323,"name":"--sf-container-default"},{"id":324,"name":"--sf-container-full"},{"id":325,"name":"--sf-container-narrow"},{"id":326,"name":"--sf-container-prose"},{"id":327,"name":"--sf-container-wide"},{"id":328,"name":"--sf-content-gap"},{"id":329,"name":"--sf-content-intrinsic-size"},{"id":330,"name":"--sf-content-width"},{"id":331,"name":"--sf-contrast-bias"},{"id":332,"name":"--sf-contrast-threshold"},{"id":333,"name":"--sf-cover-min-height"},{"id":334,"name":"--sf-cover-padding"},{"id":335,"name":"--sf-current-font-weight"},{"id":336,"name":"--sf-display-l-line-height"},{"id":337,"name":"--sf-display-m-line-height"},{"id":338,"name":"--sf-display-s-line-height"},{"id":339,"name":"--sf-divider-color"},{"id":340,"name":"--sf-divider-gap"},{"id":341,"name":"--sf-divider-style"},{"id":342,"name":"--sf-divider-width"},{"id":343,"name":"--sf-drop-shadow-l"},{"id":344,"name":"--sf-drop-shadow-m"},{"id":345,"name":"--sf-drop-shadow-s"},{"id":346,"name":"--sf-duration-fast"},{"id":347,"name":"--sf-duration-instant"},{"id":348,"name":"--sf-duration-none"},{"id":349,"name":"--sf-duration-normal"},{"id":350,"name":"--sf-duration-slow"},{"id":351,"name":"--sf-duration-slower"},{"id":352,"name":"--sf-ease-bounce"},{"id":353,"name":"--sf-ease-elastic"},{"id":354,"name":"--sf-ease-in"},{"id":355,"name":"--sf-ease-in-out"},{"id":356,"name":"--sf-ease-linear"},{"id":357,"name":"--sf-ease-out"},{"id":358,"name":"--sf-ease-overshoot"},{"id":359,"name":"--sf-ease-spring"},{"id":360,"name":"--sf-equal-gap"},{"id":361,"name":"--sf-equal-min-col"},{"id":362,"name":"--sf-equal-min-col-2"},{"id":363,"name":"--sf-equal-min-col-3"},{"id":364,"name":"--sf-equal-min-col-4"},{"id":365,"name":"--sf-equal-min-col-6"},{"id":366,"name":"--sf-field-block"},{"id":367,"name":"--sf-field-padding-block"},{"id":368,"name":"--sf-field-padding-inline"},{"id":369,"name":"--sf-field-radius"},{"id":370,"name":"--sf-field-required-marker"},{"id":371,"name":"--sf-flow-space"},{"id":372,"name":"--sf-fluid-max-vw"},{"id":373,"name":"--sf-fluid-min-vw"},{"id":374,"name":"--sf-focus-ring-color"},{"id":375,"name":"--sf-focus-ring-offset"},{"id":376,"name":"--sf-focus-ring-shadow"},{"id":377,"name":"--sf-focus-ring-style"},{"id":378,"name":"--sf-focus-ring-width"},{"id":379,"name":"--sf-font-body"},{"id":380,"name":"--sf-font-display"},{"id":381,"name":"--sf-font-features"},{"id":382,"name":"--sf-font-geometric"},{"id":383,"name":"--sf-font-heading"},{"id":384,"name":"--sf-font-humanist"},{"id":385,"name":"--sf-font-mono"},{"id":386,"name":"--sf-font-numeric"},{"id":387,"name":"--sf-font-slab"},{"id":388,"name":"--sf-font-variation"},{"id":389,"name":"--sf-font-weight-body"},{"id":390,"name":"--sf-font-weight-bold"},{"id":391,"name":"--sf-font-weight-display"},{"id":392,"name":"--sf-font-weight-heading"},{"id":393,"name":"--sf-font-weight-interactive"},{"id":394,"name":"--sf-font-weight-light"},{"id":395,"name":"--sf-font-weight-medium"},{"id":396,"name":"--sf-font-weight-normal"},{"id":397,"name":"--sf-font-weight-semibold"},{"id":398,"name":"--sf-font-weight-strong"},{"id":399,"name":"--sf-frame-ratio"},{"id":400,"name":"--sf-gap"},{"id":401,"name":"--sf-gradient-brand"},{"id":402,"name":"--sf-gradient-fade--b"},{"id":403,"name":"--sf-gradient-fade--l"},{"id":404,"name":"--sf-gradient-fade--r"},{"id":405,"name":"--sf-gradient-fade--t"},{"id":406,"name":"--sf-gradient-primary"},{"id":407,"name":"--sf-gradient-secondary"},{"id":408,"name":"--sf-gradient-surface"},{"id":409,"name":"--sf-gradient-tertiary"},{"id":410,"name":"--sf-grid-gap"},{"id":411,"name":"--sf-grid-min"},{"id":412,"name":"--sf-grid-min-2xl"},{"id":413,"name":"--sf-grid-min-l"},{"id":414,"name":"--sf-grid-min-m"},{"id":415,"name":"--sf-grid-min-s"},{"id":416,"name":"--sf-grid-min-xl"},{"id":417,"name":"--sf-grid-min-xs"},{"id":418,"name":"--sf-gutter"},{"id":419,"name":"--sf-h1-font-weight"},{"id":420,"name":"--sf-h1-letter-spacing"},{"id":421,"name":"--sf-h1-line-height"},{"id":422,"name":"--sf-h1-max-width"},{"id":423,"name":"--sf-h1-size"},{"id":424,"name":"--sf-h2-font-weight"},{"id":425,"name":"--sf-h2-letter-spacing"},{"id":426,"name":"--sf-h2-line-height"},{"id":427,"name":"--sf-h2-max-width"},{"id":428,"name":"--sf-h2-size"},{"id":429,"name":"--sf-h3-font-weight"},{"id":430,"name":"--sf-h3-letter-spacing"},{"id":431,"name":"--sf-h3-line-height"},{"id":432,"name":"--sf-h3-max-width"},{"id":433,"name":"--sf-h3-size"},{"id":434,"name":"--sf-h4-font-weight"},{"id":435,"name":"--sf-h4-letter-spacing"},{"id":436,"name":"--sf-h4-line-height"},{"id":437,"name":"--sf-h4-max-width"},{"id":438,"name":"--sf-h4-size"},{"id":439,"name":"--sf-h5-font-weight"},{"id":440,"name":"--sf-h5-letter-spacing"},{"id":441,"name":"--sf-h5-line-height"},{"id":442,"name":"--sf-h5-max-width"},{"id":443,"name":"--sf-h5-size"},{"id":444,"name":"--sf-h6-font-weight"},{"id":445,"name":"--sf-h6-letter-spacing"},{"id":446,"name":"--sf-h6-line-height"},{"id":447,"name":"--sf-h6-max-width"},{"id":448,"name":"--sf-h6-size"},{"id":449,"name":"--sf-header-height"},{"id":450,"name":"--sf-header-height-desktop"},{"id":451,"name":"--sf-header-height-mobile"},{"id":452,"name":"--sf-heading-color"},{"id":453,"name":"--sf-heading-font-family"},{"id":454,"name":"--sf-heading-text-wrap"},{"id":455,"name":"--sf-icon-2xl"},{"id":456,"name":"--sf-icon-box-bg"},{"id":457,"name":"--sf-icon-box-border"},{"id":458,"name":"--sf-icon-box-pad"},{"id":459,"name":"--sf-icon-box-radius"},{"id":460,"name":"--sf-icon-l"},{"id":461,"name":"--sf-icon-m"},{"id":462,"name":"--sf-icon-s"},{"id":463,"name":"--sf-icon-xl"},{"id":464,"name":"--sf-icon-xs"},{"id":465,"name":"--sf-imposter-margin"},{"id":466,"name":"--sf-is-active"},{"id":467,"name":"--sf-is-current"},{"id":468,"name":"--sf-is-dark"},{"id":469,"name":"--sf-is-open"},{"id":470,"name":"--sf-is-pressed"},{"id":471,"name":"--sf-leading-normal"},{"id":472,"name":"--sf-leading-relaxed"},{"id":473,"name":"--sf-leading-snug"},{"id":474,"name":"--sf-leading-taper"},{"id":475,"name":"--sf-leading-tight"},{"id":476,"name":"--sf-line-clamp"},{"id":477,"name":"--sf-link-external-marker"},{"id":478,"name":"--sf-link-underline-offset"},{"id":479,"name":"--sf-link-underline-thickness"},{"id":480,"name":"--sf-lumlocker"},{"id":481,"name":"--sf-mask-scrim-end"},{"id":482,"name":"--sf-mask-scrim-start"},{"id":483,"name":"--sf-motion-scale"},{"id":484,"name":"--sf-object-fit"},{"id":485,"name":"--sf-object-position"},{"id":486,"name":"--sf-opacity-disabled"},{"id":487,"name":"--sf-opacity-muted"},{"id":488,"name":"--sf-optical-sizing"},{"id":489,"name":"--sf-palette-mix-100"},{"id":490,"name":"--sf-palette-mix-200"},{"id":491,"name":"--sf-palette-mix-300"},{"id":492,"name":"--sf-palette-mix-400"},{"id":493,"name":"--sf-palette-mix-50"},{"id":494,"name":"--sf-palette-mix-600"},{"id":495,"name":"--sf-palette-mix-700"},{"id":496,"name":"--sf-palette-mix-800"},{"id":497,"name":"--sf-palette-mix-900"},{"id":498,"name":"--sf-palette-mix-950"},{"id":499,"name":"--sf-print-base-size"},{"id":500,"name":"--sf-print-page-margin"},{"id":501,"name":"--sf-print-page-size"},{"id":502,"name":"--sf-prose-block-margin"},{"id":503,"name":"--sf-prose-blockquote-border"},{"id":504,"name":"--sf-prose-blockquote-padding"},{"id":505,"name":"--sf-prose-figcaption-size"},{"id":506,"name":"--sf-prose-figure-margin"},{"id":507,"name":"--sf-prose-heading-gap"},{"id":508,"name":"--sf-prose-hr-margin"},{"id":509,"name":"--sf-prose-list-gap"},{"id":510,"name":"--sf-prose-marker-color"},{"id":511,"name":"--sf-prose-media-margin"},{"id":512,"name":"--sf-prose-media-radius"},{"id":513,"name":"--sf-prose-nested-list-gap"},{"id":514,"name":"--sf-prose-paragraph"},{"id":515,"name":"--sf-prose-table-pad"},{"id":516,"name":"--sf-radius-2xl"},{"id":517,"name":"--sf-radius-2xs"},{"id":518,"name":"--sf-radius-3xl"},{"id":519,"name":"--sf-radius-4xl"},{"id":520,"name":"--sf-radius-full"},{"id":521,"name":"--sf-radius-l"},{"id":522,"name":"--sf-radius-m"},{"id":523,"name":"--sf-radius-none"},{"id":524,"name":"--sf-radius-outer"},{"id":525,"name":"--sf-radius-pill"},{"id":526,"name":"--sf-radius-s"},{"id":527,"name":"--sf-radius-scale"},{"id":528,"name":"--sf-radius-xl"},{"id":529,"name":"--sf-radius-xs"},{"id":530,"name":"--sf-ratio-3-2"},{"id":531,"name":"--sf-ratio-4-3"},{"id":532,"name":"--sf-ratio-cinema"},{"id":533,"name":"--sf-ratio-golden"},{"id":534,"name":"--sf-ratio-portrait"},{"id":535,"name":"--sf-ratio-square"},{"id":536,"name":"--sf-ratio-video"},{"id":537,"name":"--sf-reel-gap"},{"id":538,"name":"--sf-reel-height"},{"id":539,"name":"--sf-reel-item-width"},{"id":540,"name":"--sf-safe-bottom"},{"id":541,"name":"--sf-safe-left"},{"id":542,"name":"--sf-safe-right"},{"id":543,"name":"--sf-safe-top"},{"id":544,"name":"--sf-scrim-color"},{"id":545,"name":"--sf-scrim-direction"},{"id":546,"name":"--sf-scrim-gradient"},{"id":547,"name":"--sf-scrim-text-shadow"},{"id":548,"name":"--sf-scroll-shadow-size"},{"id":549,"name":"--sf-scroll-timeline-range-end"},{"id":550,"name":"--sf-scroll-timeline-range-start"},{"id":551,"name":"--sf-scrollbar-thumb"},{"id":552,"name":"--sf-scrollbar-track"},{"id":553,"name":"--sf-section-pad"},{"id":554,"name":"--sf-section-pad--2xl"},{"id":555,"name":"--sf-section-pad--l"},{"id":556,"name":"--sf-section-pad--m"},{"id":557,"name":"--sf-section-pad--s"},{"id":558,"name":"--sf-section-pad--xl"},{"id":559,"name":"--sf-section-pad--xs"},{"id":560,"name":"--sf-section-scale"},{"id":561,"name":"--sf-shadow-2xl"},{"id":562,"name":"--sf-shadow-color"},{"id":563,"name":"--sf-shadow-glow"},{"id":564,"name":"--sf-shadow-glow-color"},{"id":565,"name":"--sf-shadow-inner"},{"id":566,"name":"--sf-shadow-l"},{"id":567,"name":"--sf-shadow-lightness"},{"id":568,"name":"--sf-shadow-m"},{"id":569,"name":"--sf-shadow-none"},{"id":570,"name":"--sf-shadow-s"},{"id":571,"name":"--sf-shadow-strength"},{"id":572,"name":"--sf-shadow-xl"},{"id":573,"name":"--sf-shadow-xs"},{"id":574,"name":"--sf-sidebar-gap"},{"id":575,"name":"--sf-sidebar-min-width"},{"id":576,"name":"--sf-sidebar-width"},{"id":577,"name":"--sf-size-l"},{"id":578,"name":"--sf-size-m"},{"id":579,"name":"--sf-size-s"},{"id":580,"name":"--sf-size-xl"},{"id":581,"name":"--sf-size-xs"},{"id":582,"name":"--sf-space-2xl"},{"id":583,"name":"--sf-space-2xs"},{"id":584,"name":"--sf-space-3xl"},{"id":585,"name":"--sf-space-4xl"},{"id":586,"name":"--sf-space-base-max"},{"id":587,"name":"--sf-space-base-min"},{"id":588,"name":"--sf-space-l"},{"id":589,"name":"--sf-space-m"},{"id":590,"name":"--sf-space-none"},{"id":591,"name":"--sf-space-px"},{"id":592,"name":"--sf-space-ratio-max"},{"id":593,"name":"--sf-space-ratio-min"},{"id":594,"name":"--sf-space-s"},{"id":595,"name":"--sf-space-scale"},{"id":596,"name":"--sf-space-xl"},{"id":597,"name":"--sf-space-xs"},{"id":598,"name":"--sf-stack-gap"},{"id":599,"name":"--sf-state-pending-opacity"},{"id":600,"name":"--sf-sticky-offset"},{"id":601,"name":"--sf-sticky-offset-desktop"},{"id":602,"name":"--sf-sticky-offset-mobile"},{"id":603,"name":"--sf-surface-color"},{"id":604,"name":"--sf-switcher-gap"},{"id":605,"name":"--sf-switcher-threshold"},{"id":606,"name":"--sf-text-2xl"},{"id":607,"name":"--sf-text-2xl-font-weight"},{"id":608,"name":"--sf-text-2xl-letter-spacing"},{"id":609,"name":"--sf-text-2xl-line-height"},{"id":610,"name":"--sf-text-2xl-max-width"},{"id":611,"name":"--sf-text-2xs"},{"id":612,"name":"--sf-text-2xs-font-weight"},{"id":613,"name":"--sf-text-2xs-letter-spacing"},{"id":614,"name":"--sf-text-2xs-line-height"},{"id":615,"name":"--sf-text-2xs-max-width"},{"id":616,"name":"--sf-text-3xl"},{"id":617,"name":"--sf-text-3xl-font-weight"},{"id":618,"name":"--sf-text-3xl-letter-spacing"},{"id":619,"name":"--sf-text-3xl-line-height"},{"id":620,"name":"--sf-text-3xl-max-width"},{"id":621,"name":"--sf-text-4xl"},{"id":622,"name":"--sf-text-4xl-font-weight"},{"id":623,"name":"--sf-text-4xl-letter-spacing"},{"id":624,"name":"--sf-text-4xl-line-height"},{"id":625,"name":"--sf-text-4xl-max-width"},{"id":626,"name":"--sf-text-base-max"},{"id":627,"name":"--sf-text-base-min"},{"id":628,"name":"--sf-text-display-base-max"},{"id":629,"name":"--sf-text-display-base-min"},{"id":630,"name":"--sf-text-display-l"},{"id":631,"name":"--sf-text-display-m"},{"id":632,"name":"--sf-text-display-s"},{"id":633,"name":"--sf-text-display-scale"},{"id":634,"name":"--sf-text-l"},{"id":635,"name":"--sf-text-l-font-weight"},{"id":636,"name":"--sf-text-l-letter-spacing"},{"id":637,"name":"--sf-text-l-line-height"},{"id":638,"name":"--sf-text-l-max-width"},{"id":639,"name":"--sf-text-m"},{"id":640,"name":"--sf-text-m-font-weight"},{"id":641,"name":"--sf-text-m-letter-spacing"},{"id":642,"name":"--sf-text-m-line-height"},{"id":643,"name":"--sf-text-m-max-width"},{"id":644,"name":"--sf-text-ratio-max"},{"id":645,"name":"--sf-text-ratio-min"},{"id":646,"name":"--sf-text-s"},{"id":647,"name":"--sf-text-s-font-weight"},{"id":648,"name":"--sf-text-s-letter-spacing"},{"id":649,"name":"--sf-text-s-line-height"},{"id":650,"name":"--sf-text-s-max-width"},{"id":651,"name":"--sf-text-scale"},{"id":652,"name":"--sf-text-shadow-l"},{"id":653,"name":"--sf-text-shadow-m"},{"id":654,"name":"--sf-text-shadow-none"},{"id":655,"name":"--sf-text-shadow-s"},{"id":656,"name":"--sf-text-xl"},{"id":657,"name":"--sf-text-xl-font-weight"},{"id":658,"name":"--sf-text-xl-letter-spacing"},{"id":659,"name":"--sf-text-xl-line-height"},{"id":660,"name":"--sf-text-xl-max-width"},{"id":661,"name":"--sf-text-xs"},{"id":662,"name":"--sf-text-xs-font-weight"},{"id":663,"name":"--sf-text-xs-letter-spacing"},{"id":664,"name":"--sf-text-xs-line-height"},{"id":665,"name":"--sf-text-xs-max-width"},{"id":666,"name":"--sf-theme-transition-duration"},{"id":667,"name":"--sf-touch-target"},{"id":668,"name":"--sf-tracking-normal"},{"id":669,"name":"--sf-tracking-tight"},{"id":670,"name":"--sf-tracking-wide"},{"id":671,"name":"--sf-tracking-wider"},{"id":672,"name":"--sf-tracking-widest"},{"id":673,"name":"--sf-transition-colors"},{"id":674,"name":"--sf-transition-enter"},{"id":675,"name":"--sf-transition-exit"},{"id":676,"name":"--sf-transition-fast"},{"id":677,"name":"--sf-transition-form-field"},{"id":678,"name":"--sf-transition-opacity"},{"id":679,"name":"--sf-transition-overlay"},{"id":680,"name":"--sf-transition-shadow"},{"id":681,"name":"--sf-transition-slow"},{"id":682,"name":"--sf-transition-transform"},{"id":683,"name":"--sf-z-base"},{"id":684,"name":"--sf-z-below"},{"id":685,"name":"--sf-z-dropdown"},{"id":686,"name":"--sf-z-fixed"},{"id":687,"name":"--sf-z-modal"},{"id":688,"name":"--sf-z-overlay"},{"id":689,"name":"--sf-z-raised"},{"id":690,"name":"--sf-z-sticky"},{"id":691,"name":"--sf-z-toast"},{"id":692,"name":"--sf-z-tooltip"},{"id":693,"name":"--sf-bg-fit"},{"id":694,"name":"--sf-bg-inset"},{"id":695,"name":"--sf-bg-position"},{"id":696,"name":"--sf-bg-radius"},{"id":697,"name":"--sf-bg-z"},{"id":698,"name":"--sf-btn-padding-block"},{"id":699,"name":"--sf-btn-padding-inline"},{"id":700,"name":"--sf-btn-radius"}]'),wf={_meta:xf,tokens:kf};/**
  * @license
  * SPDX-License-Identifier: Apache-2.0
  */const Ps=wf,_f=typeof window.__SLASHED_FW_VERSION__<"u"?window.__SLASHED_FW_VERSION__:"0.0.0",Cf=65535,Of=new TextEncoder,Sf=new TextDecoder("utf-8",{fatal:!1}),Lf=65535,$s=32*1024,Tn=256*1024;function Pf(a){return Number.isInteger(a)&&a>=0&&a<=Lf}function If(a){const e=new Map;for(const o of a?.tokens??[])o&&!o.removed&&typeof o.name=="string"&&Pf(o.id)&&e.set(o.name,o.id);return e}function Bf(a){const e=new Map;for(const o of a?.tokens??[])o&&typeof o.name=="string"&&Number.isInteger(o.id)&&e.set(o.id,o.name);return e}function Uf(a){let e="";for(let o=0;o<a.length;o++)e+=String.fromCharCode(a[o]);return btoa(e).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,"")}function zf(a){try{let e=a.replace(/-/g,"+").replace(/_/g,"/");for(;e.length%4;)e+="=";const o=atob(e),n=new Uint8Array(o.length);for(let l=0;l<o.length;l++)n[l]=o.charCodeAt(l);return n}catch{return null}}function Af(a,e=Ps){if(!a||typeof a!="object")return"";const o=If(e),n=[];for(const[m,h]of Object.entries(a)){if(typeof m!="string"||typeof h!="string"||h==="")continue;const v=o.get(m);if(v===void 0)continue;const y=Of.encode(h);y.length>Cf||n.push({id:v,valueBytes:y})}if(n.length===0)return"";n.sort((m,h)=>m.id-h.id);let l=0;for(const m of n)l+=4+m.valueBytes.length;const i=new Uint8Array(l);let c=0;for(const{id:m,valueBytes:h}of n)i[c++]=m>>8&255,i[c++]=m&255,i[c++]=h.length>>8&255,i[c++]=h.length&255,i.set(h,c),c+=h.length;const d=hf(i);if(d.length>$s)return console.warn(`[codec] compressed payload too large (${d.length} B > ${$s} B); refusing to encode.`),"";const p=new Uint8Array(1+d.length);return p[0]=2,p.set(d,1),Uf(p)}function Ef(a,e=Ps,o={}){const n=String(a??"").trim();if(n==="")return{};const l=zf(n);if(!l||l.length===0)return{};if(l[0]!==2)return console.warn(`[codec] unknown config-code version ${l[0]} (expected 2); ignoring.`),{};const i=l.length-1;if(i>$s)return console.warn(`[codec] compressed payload too large (${i} B > ${$s} B); ignoring.`),{};let c;try{c=gf(l.subarray(1))}catch{return console.warn("[codec] failed to decompress config; ignoring."),{}}if(!c||c.length===0)return{};if(c.length>Tn)return console.warn(`[codec] decompressed payload too large (${c.length} B > ${Tn} B); ignoring.`),{};const d=Bf(e),p=typeof o.sanitize=="function"?o.sanitize:y=>y,m=typeof o.isKnown=="function"?o.isKnown:()=>!0,h={};let v=0;try{for(;v<c.length;){if(v+4>c.length)throw new Error("truncated entry header");const y=c[v]<<8|c[v+1],k=c[v+2]<<8|c[v+3];if(v+=4,v+k>c.length)throw new Error("truncated value");const w=Sf.decode(c.subarray(v,v+k));v+=k;const E=d.get(y);if(E===void 0||!m(E))continue;const B=p(w);B!==""&&(h[E]=B)}}catch(y){return console.warn(`[codec] malformed config code; ignoring (${y.message}).`),{}}return h}function Oi(a){return a==null?"":String(a).replace(/\/\*[\s\S]*?\*\//g," ").replace(/[;{}]/g," ").replace(/[/*]{2,}/g," ").replace(/\s+/g," ").trim()}function To(a,e={}){const{mode:o="layer",banner:n=!0}=e,l=Object.keys(a).sort((m,h)=>m.localeCompare(h));if(l.length===0)return"";const i=l.map(m=>`${m}: ${Oi(a[m])};`),c=o==="layer"?"		":"	",d=i.map(m=>`${c}${m}`).join(`
@@ -5297,7 +5297,7 @@ ${d}
   } */
 
 }
-`;var Gf=g("<button> </button>"),Hf=g("<button><!></button>"),qf=g('<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED light preview"></iframe>'),Vf=g('<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED dark preview"></iframe>'),Kf=g('<div class="flex-1 flex min-w-0 h-full"><div class="flex-1 flex flex-col min-w-0 border-r border-white/8"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Light</span></div> <!></div> <div class="flex-1 flex flex-col min-w-0"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Dark</span></div> <!></div></div>'),Wf=g('<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="w-full h-full border-0" title="SLASHED live preview"></iframe>'),Yf=g("<div><!></div>"),Zf=g('<div class="flex flex-col flex-1 min-h-0 bg-[#09090e]"><div class="h-10 bg-[#0d0d14] border-b border-white/8 flex items-center px-3 gap-2 shrink-0"><div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="w-px h-4 bg-white/10 mx-1"></div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"><button title="Light mode"><!></button> <button title="Dark mode"><!></button> <button title="Split: light + dark side by side"><!></button></div> <div class="flex-1"></div> <select class="bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"><option>Normal motion</option><option>Slow motion</option><option>No motion</option></select> <button title="Reload preview" class="p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Open in new tab" class="p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button></div> <div><!></div></div>');function Jf(a,e){Qt(e,!0);const o=[{id:"marketing",label:"Marketing"},{id:"docs",label:"Docs"},{id:"dashboard",label:"Dashboard"},{id:"components",label:"Components"},{id:"stylescape",label:"Stylescape"}],n=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 l(ue){if(!ue?.trim())return null;const de=ue.trim().match(/^['"]([^'"]+)['"]/),Me=(de?de[1]:ue.split(",")[0]).trim();return Me&&!n.has(Me)?Me:null}function i(ue){const de=new Set,me=[];for(const Me of["--sf-font-body","--sf-font-heading","--sf-font-mono"]){const Te=l(ue[Me]??"");!Te||de.has(Te)||(de.add(Te),me.push({name:Te,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(Te)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return me}function c(ue,de){for(const{name:me,url:Me}of i(de)){const Te=`gf-${me.replace(/\s+/g,"-").toLowerCase()}`;if(!ue.getElementById(Te)){const ze=ue.createElement("link");ze.id=Te,ze.rel="stylesheet",ze.href=Me,ue.head.appendChild(ze)}}}const y={marketing:`
+`;var Gf=g("<button> </button>"),Hf=g("<button><!></button>"),qf=g('<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED light preview"></iframe>'),Vf=g('<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="flex-1 w-full border-0" title="SLASHED dark preview"></iframe>'),Kf=g('<div class="flex-1 flex min-w-0 h-full"><div class="flex-1 flex flex-col min-w-0 border-r border-white/8"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Light</span></div> <!></div> <div class="flex-1 flex flex-col min-w-0"><div class="h-6 flex items-center justify-center bg-[#0d0d14] border-b border-white/6 shrink-0"><span class="text-[9px] font-bold text-slate-600 uppercase tracking-widest flex items-center gap-1"><!> Dark</span></div> <!></div></div>'),Wf=g('<iframe sandbox="allow-scripts allow-same-origin allow-forms" class="w-full h-full border-0" title="SLASHED live preview"></iframe>'),Yf=g("<div><!></div>"),Zf=g('<div class="flex flex-col flex-1 min-h-0 bg-[#09090e]"><div class="h-10 bg-[#0d0d14] border-b border-white/8 flex items-center px-3 gap-2 shrink-0"><div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="w-px h-4 bg-white/10 mx-1"></div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"><button title="Light mode"><!></button> <button title="Dark mode"><!></button> <button title="Split: light + dark side by side"><!></button></div> <div class="flex-1"></div> <select class="bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"><option>Normal motion</option><option>Slow motion</option><option>No motion</option></select> <button title="Reload preview" class="p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button> <button title="Open in new tab" class="p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"><!></button></div> <div><!></div></div>');function Jf(a,e){Qt(e,!0);const o=[{id:"marketing",label:"Marketing"},{id:"docs",label:"Docs"},{id:"dashboard",label:"Dashboard"},{id:"components",label:"Components"},{id:"stylescape",label:"Stylescape"}],n=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 l(fe){if(!fe?.trim())return null;const ce=fe.trim().match(/^['"]([^'"]+)['"]/),ze=(ce?ce[1]:fe.split(",")[0]).trim();return ze&&!n.has(ze)?ze:null}function i(fe){const ce=new Set,xe=[];for(const ze of["--sf-font-body","--sf-font-heading","--sf-font-mono"]){const De=l(fe[ze]??"");!De||ce.has(De)||(ce.add(De),xe.push({name:De,url:`https://fonts.googleapis.com/css2?family=${encodeURIComponent(De)}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap`}))}return xe}function c(fe,ce){for(const{name:xe,url:ze}of i(ce)){const De=`gf-${xe.replace(/\s+/g,"-").toLowerCase()}`;if(!fe.getElementById(De)){const Ae=fe.createElement("link");Ae.id=De,Ae.rel="stylesheet",Ae.href=ze,fe.head.appendChild(Ae)}}}const y={marketing:`
 <header class="sf-site-header" style="position:sticky;top:0;z-index:50;background:var(--sf-color-base);border-bottom:var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border);padding:var(--sf-space-s) var(--sf-space-l);">
   <div style="max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;">
     <div style="font-weight:700;font-size:var(--sf-text-l);color:var(--sf-color-primary-600);">SlashedUI</div>
@@ -5664,15 +5664,15 @@ ${d}
     </div>
   </section>
 
-</div>`};function k(ue,de,me,Me,Te){const ze=To(ue,{mode:"root",banner:!1}),Be=me==="slow"?"*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }":me==="none"?"*, *::before, *::after { transition: none !important; animation: none !important; }":"",Ge=i(ue).map(({url:dt})=>`  <link rel="stylesheet" href="${dt}">`).join(`
+</div>`};function k(fe,ce,xe,ze,De){const Ae=To(fe,{mode:"root",banner:!1}),Ie=xe==="slow"?"*, *::before, *::after { transition-duration: 200% !important; animation-duration: 200% !important; }":xe==="none"?"*, *::before, *::after { transition: none !important; animation: none !important; }":"",Ve=i(fe).map(({url:nt})=>`  <link rel="stylesheet" href="${nt}">`).join(`
 `);return`<!DOCTYPE html>
-<html lang="en" data-theme="${de}" style="height:100%;margin:0;padding:0;">
+<html lang="en" data-theme="${ce}" style="height:100%;margin:0;padding:0;">
 <head>
   <meta charset="UTF-8">
   <title>SLASHED Preview</title>
-${Ge?Ge+`
-`:""}  <style id="slashed-framework">${Te}</style>
-  <style id="slashed-overrides">${ze}</style>
+${Ve?Ve+`
+`:""}  <style id="slashed-framework">${De}</style>
+  <style id="slashed-overrides">${Ae}</style>
   <style>
     html, body { height: 100%; margin: 0; padding: 0; }
     body {
@@ -5696,27 +5696,27 @@ ${Ge?Ge+`
     .sf-btn-ghost:hover { background: var(--sf-color-base-50); }
     .sf-btn-danger { background: var(--sf-color-danger); color: #fff; }
     .sf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    ${Be}
+    ${Ie}
   </style>
 </head>
 <body>
-${y[Me]}
+${y[ze]}
 </body>
-</html>`}let w=G(!1),E=G(null),B=G(null),U=G(null),P=G(0),S=G(0),_=G(0),z=G(0),L=u(()=>k({},e.previewTheme,e.previewMotion,e.previewTemplate,Ds)),R=u(()=>k({},"light",e.previewMotion,e.previewTemplate,Ds)),D=u(()=>k({},"dark",e.previewMotion,e.previewTemplate,Ds));ha(()=>{const ue=e.overrides,de=e.previewTheme,me=t(P),Me=Ko.value,Te=t(E);if(me===0||!Te)return;const ze=Te.contentDocument;if(!ze)return;const Be=ze.getElementById("slashed-overrides");Be&&(Be.textContent=To(ue,{mode:"root",banner:!1})),c(ze,ue),ze.documentElement.setAttribute("data-theme",de),Me?ze.documentElement.setAttribute("data-lumlocker",""):ze.documentElement.removeAttribute("data-lumlocker"),Mn(ze),er()}),ha(()=>{const ue=e.overrides,de=t(S),me=t(_),Me=Ko.value,Te=To(ue,{mode:"root",banner:!1}),ze=Be=>{Me?Be.documentElement.setAttribute("data-lumlocker",""):Be.documentElement.removeAttribute("data-lumlocker")};if(t(B)&&de>0){const Be=t(B).contentDocument;if(Be){const Ge=Be.getElementById("slashed-overrides");Ge&&(Ge.textContent=Te),c(Be,ue),ze(Be),Mn(Be)}}if(t(U)&&me>0){const Be=t(U).contentDocument;if(Be){const Ge=Be.getElementById("slashed-overrides");Ge&&(Ge.textContent=Te),c(Be,ue),ze(Be)}}er()});let A=u(()=>e.previewWidth!=="fluid");function T(){return e.previewWidth==="fluid"?"width:100%;height:100%":e.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)":e.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 N=Zf(),$=s(N),He=s($);re(He,21,()=>o,ue=>ue.id,(ue,de)=>{var me=Gf(),Me=s(me);C(()=>{Ye(me,1,`px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${e.previewTemplate===t(de).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(Me,t(de).label)}),x("click",me,()=>e.onTemplateChange(t(de).id)),f(ue,me)});var te=r(He,4);re(te,20,()=>["fluid","desktop","tablet","mobile"],ue=>ue,(ue,de)=>{var me=Hf(),Me=s(me);{var Te=Ge=>{Kd(Ge,{class:"w-3 h-3"})},ze=Ge=>{Yd(Ge,{class:"w-3 h-3"})},Be=Ge=>{Md(Ge,{class:"w-3 h-3"})};I(Me,Ge=>{de==="mobile"?Ge(Te):de==="tablet"?Ge(ze,1):Ge(Be,-1)})}C(()=>{Y(me,"title",de==="fluid"?"Full width":de==="desktop"?"Desktop (1024px)":de==="tablet"?"Tablet (768px)":"Mobile (390px)"),Ye(me,1,`p-1 rounded-md transition-all cursor-pointer ${e.previewWidth===de?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`)}),x("click",me,()=>e.onWidthChange(de)),f(ue,me)});var ye=r(te,2),Ie=s(ye),he=s(Ie);Bn(he,{class:"w-3 h-3"});var ve=r(Ie,2),je=s(ve);In(je,{class:"w-3 h-3"});var $e=r(ve,2),et=s($e);Ad(et,{class:"w-3 h-3"});var M=r(ye,4),J=s(M);J.value=J.__value="normal";var xe=r(J);xe.value=xe.__value="slow";var ke=r(xe);ke.value=ke.__value="none";var W;Na(M);var we=r(M,2),qe=s(we);Gd(qe,{class:"w-3 h-3"});var at=r(we,2),Se=s(at);Ed(Se,{class:"w-3 h-3"});var Ue=r($,2),ae=s(Ue);{var q=ue=>{var de=Kf(),me=s(de),Me=s(me),Te=s(Me),ze=s(Te);Bn(ze,{class:"w-2.5 h-2.5"});var Be=r(Me,2);pr(Be,()=>t(z),vt=>{var X=qf();Yo(X,Pe=>O(B,Pe),()=>t(B)),C(()=>Y(X,"srcdoc",t(R))),lo("load",X,()=>{O(S,t(S)+1)}),f(vt,X)});var Ge=r(me,2),dt=s(Ge),st=s(dt),pt=s(st);In(pt,{class:"w-2.5 h-2.5"});var _t=r(dt,2);pr(_t,()=>t(z),vt=>{var X=Vf();Yo(X,Pe=>O(U,Pe),()=>t(U)),C(()=>Y(X,"srcdoc",t(D))),lo("load",X,()=>{O(_,t(_)+1)}),f(vt,X)}),f(ue,de)},_e=ue=>{var de=Yf(),me=s(de);pr(me,()=>t(z),Me=>{var Te=Wf();Yo(Te,ze=>O(E,ze),()=>t(E)),C(()=>Y(Te,"srcdoc",t(L))),lo("load",Te,()=>{O(P,t(P)+1)}),f(Me,Te)}),C(Me=>{lt(de,Me),Ye(de,1,ro(t(A)?"":"w-full h-full"))},[()=>T()]),f(ue,de)};I(ae,ue=>{t(w)?ue(q):ue(_e,-1)})}C(()=>{Ye(Ie,1,`p-1 rounded-md transition-all cursor-pointer ${!t(w)&&e.previewTheme==="light"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Ye(ve,1,`p-1 rounded-md transition-all cursor-pointer ${!t(w)&&e.previewTheme==="dark"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Ye($e,1,`p-1 rounded-md transition-all cursor-pointer ${t(w)?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),W!==(W=e.previewMotion)&&(M.value=(M.__value=e.previewMotion)??"",Ba(M,e.previewMotion)),Ye(Ue,1,`flex-1 min-h-0 flex overflow-auto ${t(A)&&!t(w)?"items-center justify-center bg-[#06060a]":""}`)}),x("click",Ie,()=>{O(w,!1),e.onThemeChange("light")}),x("click",ve,()=>{O(w,!1),e.onThemeChange("dark")}),x("click",$e,()=>{O(w,!t(w))}),x("change",M,ue=>e.onMotionChange(ue.target.value)),x("click",we,()=>{O(P,0),O(S,0),O(_,0),O(z,t(z)+1)}),x("click",at,()=>{const ue=new Blob([k(e.overrides,e.previewTheme,e.previewMotion,e.previewTemplate,Ds)],{type:"text/html"}),de=URL.createObjectURL(ue);window.open(de,"_blank")}),f(a,N),$t()}ta(["click","change"]);const Xf=["prose","flow-space","line-clamp","aspect","scroll-shadow","scrim","surface-color","content-intrinsic"],Qf=["color","contrast","palette-mix","lumlocker","gradient"],$f=["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"],eu=["space","section","gutter","content-gap","component-pad"],tu=["container","layout","grid","breakpoint","measure","column","header-height","touch-target","bento","cluster","cover-min","equal-min","frame","ratio-","reel","safe-","sidebar","switcher","-bg-"],au=["radius","border-width","border-scale","border-style","divider"],ou=["shadow"],su=["motion","duration","easing","ease","scroll-timeline"],ru=["filter","blur","backdrop","opacity","effect"],nu=["z-","cursor","ring","focus","outline","selection","icon","is-active","is-current","is-open","is-pressed","field-required","object-fit","object-position","print-","scrollbar","size-"],lu={macros:Xf,colors:Qf,typography:$f,spacing:eu,layout:tu,borders:au,shadows:ou,motion:su,effects:ru,misc:nu},Pi=lu;function cn(a){for(const[e,o]of Object.entries(Pi))if(e!=="misc"&&o.some(n=>a.includes(n)))return e;return"misc"}const Ii=[{id:"default",name:"Framework default",icon:"⚪",blurb:"Clear every override and let the framework defaults take over.",tags:["minimal"],overrides:{}},{id:"bold",name:"Bold",icon:"🔥",blurb:"Saturated brand colors, larger type, snappier motion, stronger elevation.",tags:["bold"],overrides:{"--sf-color-primary-source-light":"oklch(0.55 0.28 264)","--sf-color-action-source-light":"oklch(0.62 0.23 18)","--sf-text-scale":"1.08","--sf-text-display-scale":"1.15","--sf-shadow-strength":"calc(0.18 + var(--sf-is-dark) * 0.22)","--sf-radius-scale":"1.1","--sf-motion-scale":"0.85"}},{id:"editorial",name:"Editorial",icon:"📰",blurb:"Generous spacing, narrower prose, restrained shadows — long-form reading.",tags:["editorial"],overrides:{"--sf-font-body":"Georgia, 'Times New Roman', serif","--sf-font-heading":"Georgia, 'Times New Roman', serif","--sf-text-scale":"1.05","--sf-space-scale":"1.15","--sf-section-scale":"1.2","--sf-shadow-strength":"calc(0.04 + var(--sf-is-dark) * 0.08)","--sf-radius-scale":"0.5"}},{id:"soft",name:"Soft Cloud",icon:"🫧",blurb:"Lower chroma, larger radii, diffuse shadows — a calmer marketing look.",tags:["minimal"],overrides:{"--sf-color-primary-source-light":"oklch(0.62 0.12 250)","--sf-color-secondary-source-light":"oklch(0.7 0.06 200)","--sf-radius-scale":"1.6","--sf-shadow-strength":"calc(0.06 + var(--sf-is-dark) * 0.1)","--sf-space-scale":"1.05","--sf-motion-scale":"1.1"}},{id:"high-contrast",name:"High Contrast",icon:"⚫",blurb:"Maximum contrast for accessibility; reduced motion respected.",tags:["accessible"],overrides:{"--sf-contrast-bias":"0.15","--sf-contrast-threshold":"0.5","--sf-color-primary-source-light":"oklch(0.45 0.28 264)","--sf-color-action-source-light":"oklch(0.4 0.25 18)","--sf-shadow-strength":"calc(0.22 + var(--sf-is-dark) * 0.28)","--sf-motion-scale":"0","--sf-focus-ring-width":"3px"}},{id:"brutalist",name:"Neo-Brutalist",icon:"🧱",blurb:"Sharp corners, heavy borders, no shadows — utilitarian and uncompromising.",tags:["bold"],overrides:{"--sf-radius-scale":"0","--sf-shadow-strength":"0","--sf-border-width-1":"2px","--sf-border-width-2":"3px","--sf-text-scale":"0.95","--sf-motion-scale":"0.6"}},{id:"midnight",name:"Midnight",icon:"🌙",blurb:"Deep navy base palette with vibrant violet primary — dark-first.",tags:["dark-first"],overrides:{"--sf-color-base-source-dark":"oklch(0.14 0.04 265)","--sf-color-primary-source-light":"oklch(0.6 0.22 270)","--sf-color-primary-source-dark":"oklch(0.72 0.2 270)","--sf-color-action-source-light":"oklch(0.65 0.2 290)","--sf-shadow-strength":"calc(0.05 + var(--sf-is-dark) * 0.3)","--sf-radius-scale":"1.2"}},{id:"sand",name:"Sand & Clay",icon:"🏺",blurb:"Warm neutrals, earthy action color — organic and grounded.",tags:["editorial"],overrides:{"--sf-color-primary-source-light":"oklch(0.58 0.08 60)","--sf-color-action-source-light":"oklch(0.55 0.14 35)","--sf-color-neutral-source-light":"oklch(0.5 0.02 70)","--sf-radius-scale":"0.6","--sf-shadow-strength":"calc(0.06 + var(--sf-is-dark) * 0.1)","--sf-font-body":"'Georgia', serif"}}];var iu=g('You have <span class="text-indigo-300 font-bold"> </span>.',1),cu=g('<button class="mt-2 text-[10px] text-rose-400 hover:text-rose-300 transition-colors cursor-pointer">Reset all overrides →</button>'),du=g('<button class="flex items-start gap-2 p-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/14 transition-all cursor-pointer text-left group"><span class="text-lg leading-none shrink-0"> </span> <div class="min-w-0"><div class="text-[11px] font-semibold text-slate-200 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-500 leading-relaxed mt-0.5 truncate"> </div></div></button>'),fu=g('<span class="text-[9px] font-bold text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0"> </span>'),uu=g('<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"><div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0"><!></div> <div class="flex-1 min-w-0"><div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-600"> </div></div> <!> <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span></button>'),pu=g('<div class="p-4 space-y-5 overflow-y-auto flex-1"><div class="rounded-xl bg-gradient-to-br from-indigo-600/20 to-purple-600/10 border border-indigo-500/20 p-4"><div class="flex items-center gap-2 mb-2"><!> <span class="text-[11px] font-bold text-indigo-300 uppercase tracking-widest">SLASHED Studio</span></div> <p class="text-[12px] text-slate-300 leading-relaxed">Configure every SLASHED design token visually. Changes appear live in the preview. <!></p> <!></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Theme presets</div> <div class="grid grid-cols-2 gap-2"></div> <button class="mt-2 w-full text-[10px] text-slate-500 hover:text-indigo-400 transition-colors cursor-pointer text-center py-1">View all themes →</button></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Token domains</div> <div class="space-y-1"></div></div></div>');function mu(a,e){Qt(e,!0);const o=[{id:"colors",icon:li,label:"Colors",desc:"Brand, semantic & neutral palettes"},{id:"typography",icon:mi,label:"Typography",desc:"Font families & fluid type scale"},{id:"spacing",icon:ci,label:"Spacing",desc:"Space scale & section rhythm"},{id:"borders",icon:ui,label:"Borders",desc:"Corner radius & border widths"},{id:"shadows",icon:ri,label:"Shadows",desc:"Elevation & depth control"},{id:"motion",icon:hi,label:"Motion",desc:"Duration & easing curves"}];let n=u(()=>Object.keys(e.overrides).length);var l=pu(),i=s(l),c=s(i),d=s(c);fi(d,{class:"w-4 h-4 text-indigo-400"});var p=r(c,2),m=r(s(p));{var h=S=>{var _=iu(),z=r(fe(_)),L=s(z);C(()=>b(L,`${t(n)??""} active override${t(n)!==1?"s":""}`)),f(S,_)},v=S=>{var _=lr("Start by picking a theme preset below, or dive into any domain.");f(S,_)};I(m,S=>{t(n)>0?S(h):S(v,-1)})}var y=r(p,2);{var k=S=>{var _=cu();x("click",_,function(...z){e.onResetAll?.apply(this,z)}),f(S,_)};I(y,S=>{t(n)>0&&S(k)})}var w=r(i,2),E=r(s(w),2);re(E,21,()=>Ii.slice(0,6),S=>S.id,(S,_)=>{var z=du(),L=s(z),R=s(L),D=r(L,2),A=s(D),T=s(A),N=r(A,2),$=s(N);C(()=>{b(R,t(_).icon),b(T,t(_).name),b($,t(_).blurb)}),x("click",z,()=>e.onApplyTheme(t(_))),f(S,z)});var B=r(E,2),U=r(w,2),P=r(s(U),2);re(P,21,()=>o,S=>S.id,(S,_)=>{const z=u(()=>Object.keys(e.overrides).filter(he=>he.includes(t(_).id.slice(0,5))).length),L=u(()=>t(_).icon);var R=uu(),D=s(R),A=s(D);Nr(A,()=>t(L),(he,ve)=>{ve(he,{class:"w-4 h-4"})});var T=r(D,2),N=s(T),$=s(N),He=r(N,2),te=s(He),ye=r(T,2);{var Ie=he=>{var ve=fu(),je=s(ve);C(()=>b(je,t(z))),f(he,ve)};I(ye,he=>{t(z)>0&&he(Ie)})}C(()=>{b($,t(_).label),b(te,t(_).desc)}),x("click",R,()=>e.onSelect(t(_).id)),f(S,R)}),x("click",B,()=>e.onSelect("themes")),f(a,l),$t()}ta(["click"]);const No={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:a=>`calc(${a} + var(--sf-is-dark) * 0.17)`,decode:a=>{const e=/^calc\(\s*([\d.e+-]+)/.exec(String(a));return e?parseFloat(e[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}]};/**
+</html>`}let w=G(!1),E=G(null),B=G(null),U=G(null),P=G(0),S=G(0),_=G(0),z=G(0),L=u(()=>k({},e.previewTheme,e.previewMotion,e.previewTemplate,Ds)),R=u(()=>k({},"light",e.previewMotion,e.previewTemplate,Ds)),D=u(()=>k({},"dark",e.previewMotion,e.previewTemplate,Ds));ha(()=>{const fe=e.overrides,ce=e.previewTheme,xe=t(P),ze=Ko.value,De=t(E);if(xe===0||!De)return;const Ae=De.contentDocument;if(!Ae)return;const Ie=Ae.getElementById("slashed-overrides");Ie&&(Ie.textContent=To(fe,{mode:"root",banner:!1})),c(Ae,fe),Ae.documentElement.setAttribute("data-theme",ce),ze?Ae.documentElement.setAttribute("data-lumlocker",""):Ae.documentElement.removeAttribute("data-lumlocker"),Mn(Ae),er()}),ha(()=>{const fe=e.overrides,ce=t(S),xe=t(_),ze=Ko.value,De=To(fe,{mode:"root",banner:!1}),Ae=Ie=>{ze?Ie.documentElement.setAttribute("data-lumlocker",""):Ie.documentElement.removeAttribute("data-lumlocker")};if(t(B)&&ce>0){const Ie=t(B).contentDocument;if(Ie){const Ve=Ie.getElementById("slashed-overrides");Ve&&(Ve.textContent=De),c(Ie,fe),Ae(Ie),Mn(Ie)}}if(t(U)&&xe>0){const Ie=t(U).contentDocument;if(Ie){const Ve=Ie.getElementById("slashed-overrides");Ve&&(Ve.textContent=De),c(Ie,fe),Ae(Ie)}}er()});let A=u(()=>e.previewWidth!=="fluid");function T(){return e.previewWidth==="fluid"?"width:100%;height:100%":e.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)":e.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 N=Zf(),$=s(N),Ge=s($);re(Ge,21,()=>o,fe=>fe.id,(fe,ce)=>{var xe=Gf(),ze=s(xe);C(()=>{Ye(xe,1,`px-2.5 py-0.5 rounded-md text-[10px] font-bold transition-all cursor-pointer ${e.previewTemplate===t(ce).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(ze,t(ce).label)}),x("click",xe,()=>e.onTemplateChange(t(ce).id)),f(fe,xe)});var te=r(Ge,4);re(te,20,()=>["fluid","desktop","tablet","mobile"],fe=>fe,(fe,ce)=>{var xe=Hf(),ze=s(xe);{var De=Ve=>{Kd(Ve,{class:"w-3 h-3"})},Ae=Ve=>{Yd(Ve,{class:"w-3 h-3"})},Ie=Ve=>{Md(Ve,{class:"w-3 h-3"})};I(ze,Ve=>{ce==="mobile"?Ve(De):ce==="tablet"?Ve(Ae,1):Ve(Ie,-1)})}C(()=>{Y(xe,"title",ce==="fluid"?"Full width":ce==="desktop"?"Desktop (1024px)":ce==="tablet"?"Tablet (768px)":"Mobile (390px)"),Ye(xe,1,`p-1 rounded-md transition-all cursor-pointer ${e.previewWidth===ce?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`)}),x("click",xe,()=>e.onWidthChange(ce)),f(fe,xe)});var ge=r(te,2),Pe=s(ge),ve=s(Pe);Bn(ve,{class:"w-3 h-3"});var me=r(Pe,2),je=s(me);In(je,{class:"w-3 h-3"});var $e=r(me,2),tt=s($e);Ad(tt,{class:"w-3 h-3"});var M=r(ge,4),J=s(M);J.value=J.__value="normal";var be=r(J);be.value=be.__value="slow";var ye=r(be);ye.value=ye.__value="none";var W;Na(M);var ke=r(M,2),He=s(ke);Gd(He,{class:"w-3 h-3"});var st=r(ke,2),Se=s(st);Ed(Se,{class:"w-3 h-3"});var Be=r($,2),ae=s(Be);{var q=fe=>{var ce=Kf(),xe=s(ce),ze=s(xe),De=s(ze),Ae=s(De);Bn(Ae,{class:"w-2.5 h-2.5"});var Ie=r(ze,2);pr(Ie,()=>t(z),mt=>{var Q=qf();Yo(Q,Oe=>O(B,Oe),()=>t(B)),C(()=>Y(Q,"srcdoc",t(R))),lo("load",Q,()=>{O(S,t(S)+1)}),f(mt,Q)});var Ve=r(xe,2),nt=s(Ve),ct=s(nt),dt=s(ct);In(dt,{class:"w-2.5 h-2.5"});var Ot=r(nt,2);pr(Ot,()=>t(z),mt=>{var Q=Vf();Yo(Q,Oe=>O(U,Oe),()=>t(U)),C(()=>Y(Q,"srcdoc",t(D))),lo("load",Q,()=>{O(_,t(_)+1)}),f(mt,Q)}),f(fe,ce)},we=fe=>{var ce=Yf(),xe=s(ce);pr(xe,()=>t(z),ze=>{var De=Wf();Yo(De,Ae=>O(E,Ae),()=>t(E)),C(()=>Y(De,"srcdoc",t(L))),lo("load",De,()=>{O(P,t(P)+1)}),f(ze,De)}),C(ze=>{lt(ce,ze),Ye(ce,1,ro(t(A)?"":"w-full h-full"))},[()=>T()]),f(fe,ce)};I(ae,fe=>{t(w)?fe(q):fe(we,-1)})}C(()=>{Ye(Pe,1,`p-1 rounded-md transition-all cursor-pointer ${!t(w)&&e.previewTheme==="light"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Ye(me,1,`p-1 rounded-md transition-all cursor-pointer ${!t(w)&&e.previewTheme==="dark"?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),Ye($e,1,`p-1 rounded-md transition-all cursor-pointer ${t(w)?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),W!==(W=e.previewMotion)&&(M.value=(M.__value=e.previewMotion)??"",Ba(M,e.previewMotion)),Ye(Be,1,`flex-1 min-h-0 flex overflow-auto ${t(A)&&!t(w)?"items-center justify-center bg-[#06060a]":""}`)}),x("click",Pe,()=>{O(w,!1),e.onThemeChange("light")}),x("click",me,()=>{O(w,!1),e.onThemeChange("dark")}),x("click",$e,()=>{O(w,!t(w))}),x("change",M,fe=>e.onMotionChange(fe.target.value)),x("click",ke,()=>{O(P,0),O(S,0),O(_,0),O(z,t(z)+1)}),x("click",st,()=>{const fe=new Blob([k(e.overrides,e.previewTheme,e.previewMotion,e.previewTemplate,Ds)],{type:"text/html"}),ce=URL.createObjectURL(fe);window.open(ce,"_blank")}),f(a,N),$t()}aa(["click","change"]);const Xf=["prose","flow-space","line-clamp","aspect","scroll-shadow","scrim","surface-color","content-intrinsic"],Qf=["color","contrast","palette-mix","lumlocker","gradient"],$f=["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"],eu=["space","section","gutter","content-gap","component-pad"],tu=["container","layout","grid","breakpoint","measure","column","header-height","touch-target","bento","cluster","cover-min","equal-min","frame","ratio-","reel","safe-","sidebar","switcher","-bg-"],au=["radius","border-width","border-scale","border-style","divider"],ou=["shadow"],su=["motion","duration","easing","ease","scroll-timeline"],ru=["filter","blur","backdrop","opacity","effect"],nu=["z-","cursor","ring","focus","outline","selection","icon","is-active","is-current","is-open","is-pressed","field-required","object-fit","object-position","print-","scrollbar","size-"],lu={macros:Xf,colors:Qf,typography:$f,spacing:eu,layout:tu,borders:au,shadows:ou,motion:su,effects:ru,misc:nu},Pi=lu;function cn(a){for(const[e,o]of Object.entries(Pi))if(e!=="misc"&&o.some(n=>a.includes(n)))return e;return"misc"}const Ii=[{id:"default",name:"Framework default",icon:"⚪",blurb:"Clear every override and let the framework defaults take over.",tags:["minimal"],overrides:{}},{id:"bold",name:"Bold",icon:"🔥",blurb:"Saturated brand colors, larger type, snappier motion, stronger elevation.",tags:["bold"],overrides:{"--sf-color-primary-source-light":"oklch(0.55 0.28 264)","--sf-color-action-source-light":"oklch(0.62 0.23 18)","--sf-text-scale":"1.08","--sf-text-display-scale":"1.15","--sf-shadow-strength":"calc(0.18 + var(--sf-is-dark) * 0.22)","--sf-radius-scale":"1.1","--sf-motion-scale":"0.85"}},{id:"editorial",name:"Editorial",icon:"📰",blurb:"Generous spacing, narrower prose, restrained shadows — long-form reading.",tags:["editorial"],overrides:{"--sf-font-body":"Georgia, 'Times New Roman', serif","--sf-font-heading":"Georgia, 'Times New Roman', serif","--sf-text-scale":"1.05","--sf-space-scale":"1.15","--sf-section-scale":"1.2","--sf-shadow-strength":"calc(0.04 + var(--sf-is-dark) * 0.08)","--sf-radius-scale":"0.5"}},{id:"soft",name:"Soft Cloud",icon:"🫧",blurb:"Lower chroma, larger radii, diffuse shadows — a calmer marketing look.",tags:["minimal"],overrides:{"--sf-color-primary-source-light":"oklch(0.62 0.12 250)","--sf-color-secondary-source-light":"oklch(0.7 0.06 200)","--sf-radius-scale":"1.6","--sf-shadow-strength":"calc(0.06 + var(--sf-is-dark) * 0.1)","--sf-space-scale":"1.05","--sf-motion-scale":"1.1"}},{id:"high-contrast",name:"High Contrast",icon:"⚫",blurb:"Maximum contrast for accessibility; reduced motion respected.",tags:["accessible"],overrides:{"--sf-contrast-bias":"0.15","--sf-contrast-threshold":"0.5","--sf-color-primary-source-light":"oklch(0.45 0.28 264)","--sf-color-action-source-light":"oklch(0.4 0.25 18)","--sf-shadow-strength":"calc(0.22 + var(--sf-is-dark) * 0.28)","--sf-motion-scale":"0","--sf-focus-ring-width":"3px"}},{id:"brutalist",name:"Neo-Brutalist",icon:"🧱",blurb:"Sharp corners, heavy borders, no shadows — utilitarian and uncompromising.",tags:["bold"],overrides:{"--sf-radius-scale":"0","--sf-shadow-strength":"0","--sf-border-width-1":"2px","--sf-border-width-2":"3px","--sf-text-scale":"0.95","--sf-motion-scale":"0.6"}},{id:"midnight",name:"Midnight",icon:"🌙",blurb:"Deep navy base palette with vibrant violet primary — dark-first.",tags:["dark-first"],overrides:{"--sf-color-base-source-dark":"oklch(0.14 0.04 265)","--sf-color-primary-source-light":"oklch(0.6 0.22 270)","--sf-color-primary-source-dark":"oklch(0.72 0.2 270)","--sf-color-action-source-light":"oklch(0.65 0.2 290)","--sf-shadow-strength":"calc(0.05 + var(--sf-is-dark) * 0.3)","--sf-radius-scale":"1.2"}},{id:"sand",name:"Sand & Clay",icon:"🏺",blurb:"Warm neutrals, earthy action color — organic and grounded.",tags:["editorial"],overrides:{"--sf-color-primary-source-light":"oklch(0.58 0.08 60)","--sf-color-action-source-light":"oklch(0.55 0.14 35)","--sf-color-neutral-source-light":"oklch(0.5 0.02 70)","--sf-radius-scale":"0.6","--sf-shadow-strength":"calc(0.06 + var(--sf-is-dark) * 0.1)","--sf-font-body":"'Georgia', serif"}}];var iu=g('You have <span class="text-indigo-300 font-bold"> </span>.',1),cu=g('<button class="mt-2 text-[10px] text-rose-400 hover:text-rose-300 transition-colors cursor-pointer">Reset all overrides →</button>'),du=g('<button class="flex items-start gap-2 p-3 rounded-xl bg-white/4 border border-white/8 hover:bg-white/8 hover:border-white/14 transition-all cursor-pointer text-left group"><span class="text-lg leading-none shrink-0"> </span> <div class="min-w-0"><div class="text-[11px] font-semibold text-slate-200 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-500 leading-relaxed mt-0.5 truncate"> </div></div></button>'),fu=g('<span class="text-[9px] font-bold text-indigo-400 bg-indigo-500/10 px-1.5 py-0.5 rounded-full font-mono shrink-0"> </span>'),uu=g('<button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/6 transition-colors cursor-pointer group text-left"><div class="text-slate-500 group-hover:text-slate-300 transition-colors shrink-0"><!></div> <div class="flex-1 min-w-0"><div class="text-[11px] font-semibold text-slate-300 group-hover:text-white transition-colors"> </div> <div class="text-[9px] text-slate-600"> </div></div> <!> <span class="text-slate-700 group-hover:text-slate-500 text-[10px]">→</span></button>'),pu=g('<div class="p-4 space-y-5 overflow-y-auto flex-1"><div class="rounded-xl bg-gradient-to-br from-indigo-600/20 to-purple-600/10 border border-indigo-500/20 p-4"><div class="flex items-center gap-2 mb-2"><!> <span class="text-[11px] font-bold text-indigo-300 uppercase tracking-widest">SLASHED Studio</span></div> <p class="text-[12px] text-slate-300 leading-relaxed">Configure every SLASHED design token visually. Changes appear live in the preview. <!></p> <!></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Theme presets</div> <div class="grid grid-cols-2 gap-2"></div> <button class="mt-2 w-full text-[10px] text-slate-500 hover:text-indigo-400 transition-colors cursor-pointer text-center py-1">View all themes →</button></div> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">Token domains</div> <div class="space-y-1"></div></div></div>');function mu(a,e){Qt(e,!0);const o=[{id:"colors",icon:li,label:"Colors",desc:"Brand, semantic & neutral palettes"},{id:"typography",icon:mi,label:"Typography",desc:"Font families & fluid type scale"},{id:"spacing",icon:ci,label:"Spacing",desc:"Space scale & section rhythm"},{id:"borders",icon:ui,label:"Borders",desc:"Corner radius & border widths"},{id:"shadows",icon:ri,label:"Shadows",desc:"Elevation & depth control"},{id:"motion",icon:hi,label:"Motion",desc:"Duration & easing curves"}];let n=u(()=>Object.keys(e.overrides).length);var l=pu(),i=s(l),c=s(i),d=s(c);fi(d,{class:"w-4 h-4 text-indigo-400"});var p=r(c,2),m=r(s(p));{var h=S=>{var _=iu(),z=r(de(_)),L=s(z);C(()=>b(L,`${t(n)??""} active override${t(n)!==1?"s":""}`)),f(S,_)},v=S=>{var _=lr("Start by picking a theme preset below, or dive into any domain.");f(S,_)};I(m,S=>{t(n)>0?S(h):S(v,-1)})}var y=r(p,2);{var k=S=>{var _=cu();x("click",_,function(...z){e.onResetAll?.apply(this,z)}),f(S,_)};I(y,S=>{t(n)>0&&S(k)})}var w=r(i,2),E=r(s(w),2);re(E,21,()=>Ii.slice(0,6),S=>S.id,(S,_)=>{var z=du(),L=s(z),R=s(L),D=r(L,2),A=s(D),T=s(A),N=r(A,2),$=s(N);C(()=>{b(R,t(_).icon),b(T,t(_).name),b($,t(_).blurb)}),x("click",z,()=>e.onApplyTheme(t(_))),f(S,z)});var B=r(E,2),U=r(w,2),P=r(s(U),2);re(P,21,()=>o,S=>S.id,(S,_)=>{const z=u(()=>Object.keys(e.overrides).filter(ve=>ve.includes(t(_).id.slice(0,5))).length),L=u(()=>t(_).icon);var R=uu(),D=s(R),A=s(D);Nr(A,()=>t(L),(ve,me)=>{me(ve,{class:"w-4 h-4"})});var T=r(D,2),N=s(T),$=s(N),Ge=r(N,2),te=s(Ge),ge=r(T,2);{var Pe=ve=>{var me=fu(),je=s(me);C(()=>b(je,t(z))),f(ve,me)};I(ge,ve=>{t(z)>0&&ve(Pe)})}C(()=>{b($,t(_).label),b(te,t(_).desc)}),x("click",R,()=>e.onSelect(t(_).id)),f(S,R)}),x("click",B,()=>e.onSelect("themes")),f(a,l),$t()}aa(["click"]);const No={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:a=>`calc(${a} + var(--sf-is-dark) * 0.17)`,decode:a=>{const e=/^calc\(\s*([\d.e+-]+)/.exec(String(a));return e?parseFloat(e[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}]};/**
  * @license
  * SPDX-License-Identifier: Apache-2.0
- */function Fn(a,e,o){const n=o*Math.PI/180,l=a,i=e*Math.cos(n),c=e*Math.sin(n),d=l+.3963377774*i+.2158037573*c,p=l-.1055613458*i-.0638541728*c,m=l-.0894841775*i-1.291485548*c,h=d*d*d,v=p*p*p,y=m*m*m,k=4.0767416621*h-3.3077115913*v+.2309699292*y,w=-1.2684380046*h+2.6097574011*v-.3413193965*y,E=-.0041960863*h-.7034186147*v+1.707614701*y,B=_=>_<=.0031308?12.92*_:1.055*Math.pow(_,1/2.4)-.055,U=Math.max(0,Math.min(255,Math.round(B(k)*255))),P=Math.max(0,Math.min(255,Math.round(B(w)*255))),S=Math.max(0,Math.min(255,Math.round(B(E)*255)));return[U,P,S]}function Bo(a,e,o){const n=l=>{const i=l/255;return i<=.04045?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*n(a)+.7152*n(e)+.0722*n(o)}function qs(a,e){const o=Math.max(a,e),n=Math.min(a,e);return(o+.05)/(n+.05)}function Vs(a){const e=a.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(e){const o=e[1],n=o.endsWith("%")?parseFloat(o)/100:parseFloat(o),l=parseFloat(e[2]),i=parseFloat(e[3]);return{l:n,c:l,h:i,valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Ks(a,e,o){return`oklch(${a.toFixed(3)} ${e.toFixed(3)} ${Math.round(o)})`}var vu=g('<span class="text-[10px] text-slate-500 ml-1 font-mono"> </span>'),hu=g('<div class="flex items-center gap-2 w-full"><div class="relative flex-1 h-5 flex items-center"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute left-0 h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed h-full"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-white/20 pointer-events-none"></div></div> <div class="flex items-center shrink-0"><input type="number" 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"/> <!></div></div>');function Zo(a,e){Qt(e,!0);let o=ka(e,"disabled",3,!1);function n(w){return Math.min(e.max,Math.max(e.min,w))}let l=u(()=>(e.value-e.min)/(e.max-e.min)*100);var i=hu(),c=s(i),d=r(s(c),2),p=r(d,2),m=r(p,2),h=r(c,2),v=s(h),y=r(v,2);{var k=w=>{var E=vu(),B=s(E);C(()=>b(B,e.unit)),f(w,E)};I(y,w=>{e.unit&&w(k)})}C(()=>{lt(d,`width: ${t(l)}%`),Y(p,"min",e.min),Y(p,"max",e.max),Y(p,"step",e.step),Xt(p,e.value),p.disabled=o(),lt(m,`left: calc(${t(l)}% - 6px)`),Y(v,"min",e.min),Y(v,"max",e.max),Y(v,"step",e.step),Xt(v,e.value),v.disabled=o()}),x("input",p,w=>e.onChange(n(parseFloat(w.target.value)))),x("change",v,w=>e.onChange(n(parseFloat(w.target.value)||0))),f(a,i),$t()}ta(["input","change"]);var gu=g('<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0"></div>'),bu=g('<button class="px-2 py-1 rounded-lg text-[10px] text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer">Reset</button>'),yu=g('<div class="px-3 pb-3 border-t border-white/6 pt-3 space-y-3"><div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Lightness (L)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Chroma (C)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Hue (H)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="text-[10px] font-bold text-slate-500 mb-1">Raw value</div> <div class="flex gap-2"><input type="text" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-200 focus:outline-none focus:border-indigo-500" placeholder="oklch(0.6 0.15 264)"/> <!></div></div></div>'),xu=g('<div><button class="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer"><div class="w-8 h-8 rounded-lg border border-white/10 shrink-0 shadow-lg"></div> <div class="flex-1 text-left min-w-0"><div class="text-[11px] font-semibold text-slate-200"> </div> <div class="text-[9px] font-mono text-slate-500"> </div> <div class="text-[9px] font-mono text-slate-600"> </div></div> <!> <div>▾</div></button> <!></div>');function Ms(a,e){Qt(e,!0);function o(T){const N=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(T);return N?{l:parseFloat(N[1]),c:parseFloat(N[2]),h:parseFloat(N[3])}:null}function n(T,N,$){return`oklch(${T.toFixed(3)} ${N.toFixed(3)} ${$.toFixed(1)})`}function l(T,N,$){const He=$*Math.PI/180,te=N*Math.cos(He),ye=N*Math.sin(He),Ie=T+.3963377774*te+.2158037573*ye,he=T-.1055613458*te-.0638541728*ye,ve=T-.0894841775*te-1.291485548*ye,je=Ie*Ie*Ie,$e=he*he*he,et=ve*ve*ve;let M=4.0767416621*je-3.3077115913*$e+.2309699292*et,J=-1.2684380046*je+2.6097574011*$e-.3413193965*et,xe=-.0041960863*je-.7034186147*$e+1.707614701*et;const ke=W=>W<=0?0:W>=1?255:Math.round(Math.pow(W,1/2.2)*255);return`rgb(${ke(M)},${ke(J)},${ke(xe)})`}let i=u(()=>o(e.value)??{l:.6,c:.15,h:264}),c=G(!1),d=G(""),p=u(()=>l(t(i).l,t(i).c,t(i).h)),m=u(()=>e.tokenName.replace("--sf-",""));function h(T,N,$){e.onChange(n(T,N,$))}var v=xu(),y=s(v),k=s(y),w=r(k,2),E=s(w),B=s(E),U=r(E,2),P=s(U),S=r(U,2),_=s(S),z=r(w,2);{var L=T=>{var N=gu();f(T,N)};I(z,T=>{e.overridden&&T(L)})}var R=r(z,2),D=r(y,2);{var A=T=>{var N=yu(),$=s(N),He=s($),te=r(s(He),2),ye=s(te),Ie=r(He,2),he=r(Ie,2);Zo(he,{get value(){return t(i).l},min:0,max:1,step:.005,onChange:_e=>h(_e,t(i).c,t(i).h)});var ve=r($,2),je=s(ve),$e=r(s(je),2),et=s($e),M=r(je,2);Zo(M,{get value(){return t(i).c},min:0,max:.4,step:.005,onChange:_e=>h(t(i).l,_e,t(i).h)});var J=r(ve,2),xe=s(J),ke=r(s(xe),2),W=s(ke),we=r(xe,2),qe=r(we,2);Zo(qe,{get value(){return t(i).h},min:0,max:360,step:1,unit:"°",onChange:_e=>h(t(i).l,t(i).c,_e)});var at=r(J,2),Se=r(s(at),2),Ue=s(Se),ae=r(Ue,2);{var q=_e=>{var ue=bu();x("click",ue,function(...de){e.onReset?.apply(this,de)}),f(_e,ue)};I(ae,_e=>{e.overridden&&_e(q)})}C((_e,ue,de,me,Me)=>{b(ye,_e),lt(Ie,ue),b(et,de),b(W,`${me??""}°`),lt(we,Me),Xt(Ue,t(d)||e.value)},[()=>t(i).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}), oklch(1 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}))`,()=>t(i).c.toFixed(3),()=>t(i).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 0), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 60), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 120), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 180), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 240), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 300), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 360))`]),x("input",Ue,_e=>{O(d,_e.target.value,!0)}),lo("blur",Ue,()=>{t(d).trim()&&(e.onChange(t(d).trim()),O(d,""))}),x("keydown",Ue,_e=>{_e.key==="Enter"&&(t(d).trim()&&(e.onChange(t(d).trim()),O(d,"")),_e.currentTarget.blur())}),f(T,N)};I(D,T=>{t(c)&&T(A)})}C(()=>{Ye(v,1,`rounded-xl border transition-all ${e.overridden?"bg-indigo-500/8 border-indigo-500/20":"bg-white/4 border-white/8 hover:border-white/12"}`),lt(k,`background: ${t(p)}`),b(B,e.label),b(P,t(m)),b(_,e.value),Ye(R,1,`text-slate-500 text-[10px] transition-transform ${t(c)?"rotate-180":""}`)}),x("click",y,()=>{O(c,!t(c))}),f(a,v),$t()}ta(["click","input","keydown"]);var ku=g('<span class="text-[9px] text-slate-600 font-mono"> </span>'),wu=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 transition-colors cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),_u=g('<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>'),Cu=g('<div class="group"><div class="flex items-center justify-between mb-1.5"><div class="flex items-center gap-2"><span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 font-bold font-mono">⚡</span> <span class="text-[11px] font-semibold text-slate-200"> </span> <!></div> <!></div> <!> <!></div>');function Fo(a,e){Qt(e,!0);let o=u(()=>e.overrides[e.knob.name]),n=u(()=>t(o)!==void 0?e.knob.decode?e.knob.decode(t(o)):parseFloat(t(o)):e.knob.default),l=u(()=>isNaN(t(n))?e.knob.default:t(n)),i=u(()=>e.knob.name in e.overrides);function c(_){const z=e.knob.encode?e.knob.encode(_):String(_);e.onChange(e.knob.name,z)}function d(){e.onChange(e.knob.name,null)}var p=Cu(),m=s(p),h=s(m),v=r(s(h),2),y=s(v),k=r(v,2);{var w=_=>{var z=ku(),L=s(z);C(()=>b(L,`→ ${e.knob.driving??""} tokens`)),f(_,z)};I(k,_=>{e.knob.driving!==void 0&&_(w)})}var E=r(h,2);{var B=_=>{var z=wu();x("click",z,d),f(_,z)};I(E,_=>{t(i)&&_(B)})}var U=r(m,2);Zo(U,{get value(){return t(l)},get min(){return e.knob.min},get max(){return e.knob.max},get step(){return e.knob.step},get unit(){return e.knob.unit},onChange:c});var P=r(U,2);{var S=_=>{var z=_u(),L=s(z);C(()=>b(L,e.knob.help)),f(_,z)};I(P,_=>{e.knob.help&&_(S)})}C(()=>b(y,e.knob.label)),f(a,p),$t()}ta(["click"]);var Ou=g('<span class="text-[11px] font-semibold text-slate-200"> </span>'),Su=g("<span></span>"),Lu=g("<button>&lt;/&gt;</button>"),Pu=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100 transition-colors">reset</button>'),Iu=g('<input type="text" 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"/>'),Bu=g('<p class="text-[9px] font-mono text-slate-700 mt-0.5 leading-none"> </p>'),Uu=g("<!> <!>",1),zu=g('<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>'),Au=g('<div class="group"><div class="flex items-center justify-between mb-1.5"><!> <div class="flex items-center gap-1.5"><!> <!></div></div> <!> <!></div>');function ut(a,e){Qt(e,!0);let o=G(!1),n=G(da(e.currentRaw??"")),l=G(!1),i=u(()=>!!e.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(e.currentRaw.trim())),c=u(()=>!!(e.rawDefault&&e.onRawSet&&(t(o)||t(i)||t(l))));ha(()=>{t(l)||O(n,e.currentRaw??"",!0)});var d=Au(),p=s(d),m=s(p);{var h=L=>{var R=Ou(),D=s(R);C(()=>b(D,e.label)),f(L,R)},v=L=>{var R=Su();f(L,R)};I(m,L=>{e.label?L(h):L(v,-1)})}var y=r(m,2),k=s(y);{var w=L=>{var R=Lu();C(()=>{Y(R,"title",t(c)?"Switch to slider":"Enter raw CSS value"),Ye(R,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${t(c)?"text-indigo-400":"opacity-0 group-hover:opacity-100 text-slate-500 hover:text-indigo-400"}`)}),x("click",R,()=>{O(o,!t(o))}),f(L,R)};I(k,L=>{e.rawDefault&&e.onRawSet&&L(w)})}var E=r(k,2);{var B=L=>{var R=Pu();x("click",R,function(...D){e.onReset?.apply(this,D)}),f(L,R)};I(E,L=>{e.overridden&&L(B)})}var U=r(p,2);{var P=L=>{var R=Iu();C(()=>{Xt(R,t(n)),Y(R,"placeholder",e.rawDefault)}),lo("focus",R,()=>{O(l,!0)}),lo("blur",R,()=>{O(l,!1),t(n).trim()||e.onReset()}),x("input",R,D=>{O(n,D.target.value,!0);const A=t(n).trim();A&&e.onRawSet&&e.onRawSet(A)}),f(L,R)},S=L=>{var R=Uu(),D=fe(R);Zo(D,{get value(){return e.value},get min(){return e.min},get max(){return e.max},get step(){return e.step},get unit(){return e.unit},get onChange(){return e.onChange}});var A=r(D,2);{var T=N=>{var $=Bu(),He=s($);C(()=>b(He,`default: ${e.rawDefault??""}`)),f(N,$)};I(A,N=>{e.rawDefault&&!e.overridden&&N(T)})}f(L,R)};I(U,L=>{t(c)&&e.rawDefault?L(P):L(S,-1)})}var _=r(U,2);{var z=L=>{var R=zu(),D=s(R);C(()=>b(D,e.help)),f(L,R)};I(_,L=>{e.help&&L(z)})}f(a,d),$t()}ta(["click","input"]);var Eu=g('<input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" tabindex="-1"/>'),Ru=g('<input class="flex-1 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"/>'),Tu=g('<span class="text-indigo-300"> </span>'),Du=g('<button class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"><!></button>'),Mu=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Nu=g('<div class="flex items-center gap-2"><div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer"><div class="absolute inset-0"></div> <!></div> <!> <!></div>');function qa(a,e){Qt(e,!0);let o=G(!1),n=G(!1);function l(S){const _=S.trim();return _.startsWith("--")&&!_.startsWith("var(")?`var(${_})`:_}function i(S){Fa.value;const _=l(S);return ho(_)||_||"transparent"}let c=u(()=>i(e.value||`var(${e.token})`)),d=u(()=>e.value.trim().startsWith("var(")||e.value.trim().startsWith("--"));function p(S){if(S.match(/^#([0-9a-fA-F]{6})$/))return S.toLowerCase();const z=S.match(/^#([0-9a-fA-F]{3})$/);if(z)return"#"+z[1].split("").map(R=>R+R).join("");const L=S.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return L?"#"+[L[1],L[2],L[3]].map(R=>parseInt(R).toString(16).padStart(2,"0")).join(""):"#6366f1"}var m=Nu(),h=s(m),v=s(h),y=r(v,2);{var k=S=>{var _=Eu();C(z=>Xt(_,z),[()=>p(t(c))]),x("input",_,z=>e.onSet(z.target.value)),f(S,_)};I(y,S=>{t(d)||S(k)})}var w=r(h,2);{var E=S=>{var _=Ru();Ul(_,!0),C(()=>{Xt(_,e.value),Y(_,"placeholder",e.placeholder??"default")}),lo("blur",_,z=>{if(t(n)){O(n,!1),O(o,!1);return}const L=l(z.target.value);L?e.onSet(L):e.onReset(),O(o,!1)}),x("keydown",_,z=>{z.key==="Enter"&&z.currentTarget.blur(),z.key==="Escape"&&(O(n,!0),O(o,!1))}),f(S,_)},B=S=>{var _=Du(),z=s(_);{var L=D=>{var A=Tu(),T=s(A);C(()=>b(T,e.value)),f(D,A)},R=D=>{var A=lr();C(()=>b(A,e.placeholder??"default")),f(D,A)};I(z,D=>{e.isOverridden?D(L):D(R,-1)})}x("click",_,()=>{O(o,!0)}),f(S,_)};I(w,S=>{t(o)?S(E):S(B,-1)})}var U=r(w,2);{var P=S=>{var _=Mu();x("click",_,function(...z){e.onReset?.apply(this,z)}),f(S,_)};I(U,S=>{e.isOverridden&&S(P)})}C(()=>lt(v,`background: ${t(c)}`)),f(a,m),$t()}ta(["input","keydown","click"]);var ms=g("<button> </button>"),Fu=g('<div class="w-5 h-3 rounded-t border-x border-t border-white/10"></div>'),ju=g('<div class="w-5 h-3 rounded-b border-x border-b border-white/10"></div>'),Gu=g('<div class="mt-1 pl-1 space-y-px"><div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">L</span> <div class="flex gap-0.5"></div></div> <div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">D</span> <div class="flex gap-0.5"></div></div></div>'),Hu=g('<div class="flex items-center gap-1.5 text-[9px] text-slate-600 pl-1"><span class="w-3.5 h-3.5 rounded border border-white/10 shrink-0"></span> </div>'),qu=g('<div class="space-y-1"><div class="flex items-center justify-between"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!></div> <!> <!> <!></div>'),Vu=g('<p class="text-[10px] text-slate-600 leading-relaxed">OKLCH source values — all 200+ derived color steps are computed automatically.</p> <div class="space-y-3"></div>',1),Ku=g('<div class="flex items-center gap-1"><span class="text-[9px] text-slate-500 w-16 shrink-0"> <span class="text-slate-600"> </span></span> <span class="flex-1 h-5 rounded border border-white/10"></span> <span class="text-slate-600 text-[10px] px-1">→</span> <span class="flex-1 h-5 rounded border border-white/10"></span></div>'),Wu=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH
+ */function Fn(a,e,o){const n=o*Math.PI/180,l=a,i=e*Math.cos(n),c=e*Math.sin(n),d=l+.3963377774*i+.2158037573*c,p=l-.1055613458*i-.0638541728*c,m=l-.0894841775*i-1.291485548*c,h=d*d*d,v=p*p*p,y=m*m*m,k=4.0767416621*h-3.3077115913*v+.2309699292*y,w=-1.2684380046*h+2.6097574011*v-.3413193965*y,E=-.0041960863*h-.7034186147*v+1.707614701*y,B=_=>_<=.0031308?12.92*_:1.055*Math.pow(_,1/2.4)-.055,U=Math.max(0,Math.min(255,Math.round(B(k)*255))),P=Math.max(0,Math.min(255,Math.round(B(w)*255))),S=Math.max(0,Math.min(255,Math.round(B(E)*255)));return[U,P,S]}function Bo(a,e,o){const n=l=>{const i=l/255;return i<=.04045?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*n(a)+.7152*n(e)+.0722*n(o)}function qs(a,e){const o=Math.max(a,e),n=Math.min(a,e);return(o+.05)/(n+.05)}function Vs(a){const e=a.match(/oklch\(\s*([\d.%]+)\s+([\d.]+)\s+([\d.]+)/i);if(e){const o=e[1],n=o.endsWith("%")?parseFloat(o)/100:parseFloat(o),l=parseFloat(e[2]),i=parseFloat(e[3]);return{l:n,c:l,h:i,valid:!0}}return{l:.5,c:.15,h:200,valid:!1}}function Ks(a,e,o){return`oklch(${a.toFixed(3)} ${e.toFixed(3)} ${Math.round(o)})`}var vu=g('<span class="text-[10px] text-slate-500 ml-1 font-mono"> </span>'),hu=g('<div class="flex items-center gap-2 w-full"><div class="relative flex-1 h-5 flex items-center"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute left-0 h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed h-full"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-white/20 pointer-events-none"></div></div> <div class="flex items-center shrink-0"><input type="number" 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"/> <!></div></div>');function Zo(a,e){Qt(e,!0);let o=ka(e,"disabled",3,!1);function n(w){return Math.min(e.max,Math.max(e.min,w))}let l=u(()=>(e.value-e.min)/(e.max-e.min)*100);var i=hu(),c=s(i),d=r(s(c),2),p=r(d,2),m=r(p,2),h=r(c,2),v=s(h),y=r(v,2);{var k=w=>{var E=vu(),B=s(E);C(()=>b(B,e.unit)),f(w,E)};I(y,w=>{e.unit&&w(k)})}C(()=>{lt(d,`width: ${t(l)}%`),Y(p,"min",e.min),Y(p,"max",e.max),Y(p,"step",e.step),Xt(p,e.value),p.disabled=o(),lt(m,`left: calc(${t(l)}% - 6px)`),Y(v,"min",e.min),Y(v,"max",e.max),Y(v,"step",e.step),Xt(v,e.value),v.disabled=o()}),x("input",p,w=>e.onChange(n(parseFloat(w.target.value)))),x("change",v,w=>e.onChange(n(parseFloat(w.target.value)||0))),f(a,i),$t()}aa(["input","change"]);var gu=g('<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0"></div>'),bu=g('<button class="px-2 py-1 rounded-lg text-[10px] text-rose-400 hover:bg-rose-500/10 border border-rose-500/20 transition-colors cursor-pointer">Reset</button>'),yu=g('<div class="px-3 pb-3 border-t border-white/6 pt-3 space-y-3"><div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Lightness (L)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Chroma (C)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <!></div> <div><div class="flex justify-between mb-1"><span class="text-[10px] font-bold text-slate-400">Hue (H)</span> <span class="text-[10px] font-mono text-slate-400"> </span></div> <div class="h-4 rounded-full mb-1"></div> <!></div> <div><div class="text-[10px] font-bold text-slate-500 mb-1">Raw value</div> <div class="flex gap-2"><input type="text" class="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[10px] font-mono text-slate-200 focus:outline-none focus:border-indigo-500" placeholder="oklch(0.6 0.15 264)"/> <!></div></div></div>'),xu=g('<div><button class="w-full flex items-center gap-3 px-3 py-2.5 cursor-pointer"><div class="w-8 h-8 rounded-lg border border-white/10 shrink-0 shadow-lg"></div> <div class="flex-1 text-left min-w-0"><div class="text-[11px] font-semibold text-slate-200"> </div> <div class="text-[9px] font-mono text-slate-500"> </div> <div class="text-[9px] font-mono text-slate-600"> </div></div> <!> <div>▾</div></button> <!></div>');function Ms(a,e){Qt(e,!0);function o(T){const N=/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/.exec(T);return N?{l:parseFloat(N[1]),c:parseFloat(N[2]),h:parseFloat(N[3])}:null}function n(T,N,$){return`oklch(${T.toFixed(3)} ${N.toFixed(3)} ${$.toFixed(1)})`}function l(T,N,$){const Ge=$*Math.PI/180,te=N*Math.cos(Ge),ge=N*Math.sin(Ge),Pe=T+.3963377774*te+.2158037573*ge,ve=T-.1055613458*te-.0638541728*ge,me=T-.0894841775*te-1.291485548*ge,je=Pe*Pe*Pe,$e=ve*ve*ve,tt=me*me*me;let M=4.0767416621*je-3.3077115913*$e+.2309699292*tt,J=-1.2684380046*je+2.6097574011*$e-.3413193965*tt,be=-.0041960863*je-.7034186147*$e+1.707614701*tt;const ye=W=>W<=0?0:W>=1?255:Math.round(Math.pow(W,1/2.2)*255);return`rgb(${ye(M)},${ye(J)},${ye(be)})`}let i=u(()=>o(e.value)??{l:.6,c:.15,h:264}),c=G(!1),d=G(""),p=u(()=>l(t(i).l,t(i).c,t(i).h)),m=u(()=>e.tokenName.replace("--sf-",""));function h(T,N,$){e.onChange(n(T,N,$))}var v=xu(),y=s(v),k=s(y),w=r(k,2),E=s(w),B=s(E),U=r(E,2),P=s(U),S=r(U,2),_=s(S),z=r(w,2);{var L=T=>{var N=gu();f(T,N)};I(z,T=>{e.overridden&&T(L)})}var R=r(z,2),D=r(y,2);{var A=T=>{var N=yu(),$=s(N),Ge=s($),te=r(s(Ge),2),ge=s(te),Pe=r(Ge,2),ve=r(Pe,2);Zo(ve,{get value(){return t(i).l},min:0,max:1,step:.005,onChange:we=>h(we,t(i).c,t(i).h)});var me=r($,2),je=s(me),$e=r(s(je),2),tt=s($e),M=r(je,2);Zo(M,{get value(){return t(i).c},min:0,max:.4,step:.005,onChange:we=>h(t(i).l,we,t(i).h)});var J=r(me,2),be=s(J),ye=r(s(be),2),W=s(ye),ke=r(be,2),He=r(ke,2);Zo(He,{get value(){return t(i).h},min:0,max:360,step:1,unit:"°",onChange:we=>h(t(i).l,t(i).c,we)});var st=r(J,2),Se=r(s(st),2),Be=s(Se),ae=r(Be,2);{var q=we=>{var fe=bu();x("click",fe,function(...ce){e.onReset?.apply(this,ce)}),f(we,fe)};I(ae,we=>{e.overridden&&we(q)})}C((we,fe,ce,xe,ze)=>{b(ge,we),lt(Pe,fe),b(tt,ce),b(W,`${xe??""}°`),lt(ke,ze),Xt(Be,t(d)||e.value)},[()=>t(i).l.toFixed(3),()=>`background: linear-gradient(to right, oklch(0 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}), oklch(1 ${t(i).c.toFixed(3)} ${t(i).h.toFixed(1)}))`,()=>t(i).c.toFixed(3),()=>t(i).h.toFixed(1),()=>`background: linear-gradient(to right, oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 0), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 60), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 120), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 180), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 240), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 300), oklch(${t(i).l.toFixed(3)} ${t(i).c.toFixed(3)} 360))`]),x("input",Be,we=>{O(d,we.target.value,!0)}),lo("blur",Be,()=>{t(d).trim()&&(e.onChange(t(d).trim()),O(d,""))}),x("keydown",Be,we=>{we.key==="Enter"&&(t(d).trim()&&(e.onChange(t(d).trim()),O(d,"")),we.currentTarget.blur())}),f(T,N)};I(D,T=>{t(c)&&T(A)})}C(()=>{Ye(v,1,`rounded-xl border transition-all ${e.overridden?"bg-indigo-500/8 border-indigo-500/20":"bg-white/4 border-white/8 hover:border-white/12"}`),lt(k,`background: ${t(p)}`),b(B,e.label),b(P,t(m)),b(_,e.value),Ye(R,1,`text-slate-500 text-[10px] transition-transform ${t(c)?"rotate-180":""}`)}),x("click",y,()=>{O(c,!t(c))}),f(a,v),$t()}aa(["click","input","keydown"]);var ku=g('<span class="text-[9px] text-slate-600 font-mono"> </span>'),wu=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 transition-colors cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),_u=g('<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>'),Cu=g('<div class="group"><div class="flex items-center justify-between mb-1.5"><div class="flex items-center gap-2"><span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 font-bold font-mono">⚡</span> <span class="text-[11px] font-semibold text-slate-200"> </span> <!></div> <!></div> <!> <!></div>');function Fo(a,e){Qt(e,!0);let o=u(()=>e.overrides[e.knob.name]),n=u(()=>t(o)!==void 0?e.knob.decode?e.knob.decode(t(o)):parseFloat(t(o)):e.knob.default),l=u(()=>isNaN(t(n))?e.knob.default:t(n)),i=u(()=>e.knob.name in e.overrides);function c(_){const z=e.knob.encode?e.knob.encode(_):String(_);e.onChange(e.knob.name,z)}function d(){e.onChange(e.knob.name,null)}var p=Cu(),m=s(p),h=s(m),v=r(s(h),2),y=s(v),k=r(v,2);{var w=_=>{var z=ku(),L=s(z);C(()=>b(L,`→ ${e.knob.driving??""} tokens`)),f(_,z)};I(k,_=>{e.knob.driving!==void 0&&_(w)})}var E=r(h,2);{var B=_=>{var z=wu();x("click",z,d),f(_,z)};I(E,_=>{t(i)&&_(B)})}var U=r(m,2);Zo(U,{get value(){return t(l)},get min(){return e.knob.min},get max(){return e.knob.max},get step(){return e.knob.step},get unit(){return e.knob.unit},onChange:c});var P=r(U,2);{var S=_=>{var z=_u(),L=s(z);C(()=>b(L,e.knob.help)),f(_,z)};I(P,_=>{e.knob.help&&_(S)})}C(()=>b(y,e.knob.label)),f(a,p),$t()}aa(["click"]);var Ou=g('<span class="text-[11px] font-semibold text-slate-200"> </span>'),Su=g("<span></span>"),Lu=g("<button>&lt;/&gt;</button>"),Pu=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100 transition-colors">reset</button>'),Iu=g('<input type="text" 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"/>'),Bu=g('<p class="text-[9px] font-mono text-slate-700 mt-0.5 leading-none"> </p>'),Uu=g("<!> <!>",1),zu=g('<p class="text-[10px] text-slate-600 mt-1 leading-relaxed"> </p>'),Au=g('<div class="group"><div class="flex items-center justify-between mb-1.5"><!> <div class="flex items-center gap-1.5"><!> <!></div></div> <!> <!></div>');function pt(a,e){Qt(e,!0);let o=G(!1),n=G(da(e.currentRaw??"")),l=G(!1),i=u(()=>!!e.currentRaw&&/^(var|calc|clamp|min|max|env)\(/.test(e.currentRaw.trim())),c=u(()=>!!(e.rawDefault&&e.onRawSet&&(t(o)||t(i)||t(l))));ha(()=>{t(l)||O(n,e.currentRaw??"",!0)});var d=Au(),p=s(d),m=s(p);{var h=L=>{var R=Ou(),D=s(R);C(()=>b(D,e.label)),f(L,R)},v=L=>{var R=Su();f(L,R)};I(m,L=>{e.label?L(h):L(v,-1)})}var y=r(m,2),k=s(y);{var w=L=>{var R=Lu();C(()=>{Y(R,"title",t(c)?"Switch to slider":"Enter raw CSS value"),Ye(R,1,`text-[9px] font-mono cursor-pointer transition-all px-0.5 ${t(c)?"text-indigo-400":"opacity-0 group-hover:opacity-100 text-slate-500 hover:text-indigo-400"}`)}),x("click",R,()=>{O(o,!t(o))}),f(L,R)};I(k,L=>{e.rawDefault&&e.onRawSet&&L(w)})}var E=r(k,2);{var B=L=>{var R=Pu();x("click",R,function(...D){e.onReset?.apply(this,D)}),f(L,R)};I(E,L=>{e.overridden&&L(B)})}var U=r(p,2);{var P=L=>{var R=Iu();C(()=>{Xt(R,t(n)),Y(R,"placeholder",e.rawDefault)}),lo("focus",R,()=>{O(l,!0)}),lo("blur",R,()=>{O(l,!1),t(n).trim()||e.onReset()}),x("input",R,D=>{O(n,D.target.value,!0);const A=t(n).trim();A&&e.onRawSet&&e.onRawSet(A)}),f(L,R)},S=L=>{var R=Uu(),D=de(R);Zo(D,{get value(){return e.value},get min(){return e.min},get max(){return e.max},get step(){return e.step},get unit(){return e.unit},get onChange(){return e.onChange}});var A=r(D,2);{var T=N=>{var $=Bu(),Ge=s($);C(()=>b(Ge,`default: ${e.rawDefault??""}`)),f(N,$)};I(A,N=>{e.rawDefault&&!e.overridden&&N(T)})}f(L,R)};I(U,L=>{t(c)&&e.rawDefault?L(P):L(S,-1)})}var _=r(U,2);{var z=L=>{var R=zu(),D=s(R);C(()=>b(D,e.help)),f(L,R)};I(_,L=>{e.help&&L(z)})}f(a,d),$t()}aa(["click","input"]);var Eu=g('<input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" tabindex="-1"/>'),Ru=g('<input class="flex-1 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"/>'),Tu=g('<span class="text-indigo-300"> </span>'),Du=g('<button class="flex-1 text-left text-[9px] font-mono text-slate-500 hover:text-slate-200 truncate cursor-pointer transition-colors"><!></button>'),Mu=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Nu=g('<div class="flex items-center gap-2"><div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer"><div class="absolute inset-0"></div> <!></div> <!> <!></div>');function qa(a,e){Qt(e,!0);let o=G(!1),n=G(!1);function l(S){const _=S.trim();return _.startsWith("--")&&!_.startsWith("var(")?`var(${_})`:_}function i(S){Fa.value;const _=l(S);return ho(_)||_||"transparent"}let c=u(()=>i(e.value||`var(${e.token})`)),d=u(()=>e.value.trim().startsWith("var(")||e.value.trim().startsWith("--"));function p(S){if(S.match(/^#([0-9a-fA-F]{6})$/))return S.toLowerCase();const z=S.match(/^#([0-9a-fA-F]{3})$/);if(z)return"#"+z[1].split("").map(R=>R+R).join("");const L=S.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);return L?"#"+[L[1],L[2],L[3]].map(R=>parseInt(R).toString(16).padStart(2,"0")).join(""):"#6366f1"}var m=Nu(),h=s(m),v=s(h),y=r(v,2);{var k=S=>{var _=Eu();C(z=>Xt(_,z),[()=>p(t(c))]),x("input",_,z=>e.onSet(z.target.value)),f(S,_)};I(y,S=>{t(d)||S(k)})}var w=r(h,2);{var E=S=>{var _=Ru();Ul(_,!0),C(()=>{Xt(_,e.value),Y(_,"placeholder",e.placeholder??"default")}),lo("blur",_,z=>{if(t(n)){O(n,!1),O(o,!1);return}const L=l(z.target.value);L?e.onSet(L):e.onReset(),O(o,!1)}),x("keydown",_,z=>{z.key==="Enter"&&z.currentTarget.blur(),z.key==="Escape"&&(O(n,!0),O(o,!1))}),f(S,_)},B=S=>{var _=Du(),z=s(_);{var L=D=>{var A=Tu(),T=s(A);C(()=>b(T,e.value)),f(D,A)},R=D=>{var A=lr();C(()=>b(A,e.placeholder??"default")),f(D,A)};I(z,D=>{e.isOverridden?D(L):D(R,-1)})}x("click",_,()=>{O(o,!0)}),f(S,_)};I(w,S=>{t(o)?S(E):S(B,-1)})}var U=r(w,2);{var P=S=>{var _=Mu();x("click",_,function(...z){e.onReset?.apply(this,z)}),f(S,_)};I(U,S=>{e.isOverridden&&S(P)})}C(()=>lt(v,`background: ${t(c)}`)),f(a,m),$t()}aa(["input","keydown","click"]);var ms=g("<button> </button>"),Fu=g('<div class="w-5 h-3 rounded-t border-x border-t border-white/10"></div>'),ju=g('<div class="w-5 h-3 rounded-b border-x border-b border-white/10"></div>'),Gu=g('<div class="mt-1 pl-1 space-y-px"><div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">L</span> <div class="flex gap-0.5"></div></div> <div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none">D</span> <div class="flex gap-0.5"></div></div></div>'),Hu=g('<div class="flex items-center gap-1.5 text-[9px] text-slate-600 pl-1"><span class="w-3.5 h-3.5 rounded border border-white/10 shrink-0"></span> </div>'),qu=g('<div class="space-y-1"><div class="flex items-center justify-between"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!></div> <!> <!> <!></div>'),Vu=g('<p class="text-[10px] text-slate-600 leading-relaxed">OKLCH source values — all 200+ derived color steps are computed automatically.</p> <div class="space-y-3"></div>',1),Ku=g('<div class="flex items-center gap-1"><span class="text-[9px] text-slate-500 w-16 shrink-0"> <span class="text-slate-600"> </span></span> <span class="flex-1 h-5 rounded border border-white/10"></span> <span class="text-slate-600 text-[10px] px-1">→</span> <span class="flex-1 h-5 rounded border border-white/10"></span></div>'),Wu=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Pins brand colors (primary, secondary, tertiary, action) to a fixed OKLCH
         lightness — useful for always-stable sections. Enable on canvas to preview.</p> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><div class="flex items-center text-[8px] font-mono text-slate-600 uppercase tracking-widest"><span class="w-16 shrink-0">Color</span> <span class="flex-1 text-center">Current</span> <span class="flex-1 text-center">Locked</span></div> <!></div> <button> </button>`,1),Yu=g('<div class="w-5 h-3 rounded-sm border border-white/10"></div>'),Zu=g('<div class="flex items-center gap-1"><span class="text-[7px] text-slate-600 w-2.5 shrink-0 text-right select-none"> </span> <div class="flex gap-0.5"></div></div>'),Ju=g('<div class="space-y-1"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest"> </div> <!> <!> <div class="mt-1 pl-1 space-y-px"></div></div>'),Xu=g('<div class="space-y-3"></div>'),Qu=g('<div class="flex items-center gap-2"><span class="w-6 h-6 rounded border border-white/10 shrink-0 flex items-center justify-center text-[10px] font-bold">Aa</span> <span class="text-[9px] text-slate-500 flex-1 truncate"> </span> <span class="text-[10px] font-mono font-bold text-slate-200"> </span> <span> </span></div>'),$u=g('<button class="w-full mt-1 py-1.5 rounded-lg bg-indigo-600/15 border border-indigo-500/30 text-indigo-300 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/25 transition-all">Open contrast tool →</button>'),ep=g('<p class="text-[10px] text-slate-600 leading-relaxed">Controls whether text on brand-coloured surfaces is light or dark.</p> <!> <div class="rounded-lg bg-white/4 border border-white/8 p-2.5 space-y-2"><!> <!></div> <!>',1),tp=g('<button><span class="text-[11px] font-bold"> </span> <span class="text-[9px] text-slate-500 text-center"> </span></button>'),ap=g('<div class="flex-1 flex flex-col items-center gap-0.5 h-full justify-end"><span class="text-[7px] font-mono text-slate-600"> </span> <div class="w-full rounded-sm border-x border-t border-white/10"></div> <span class="text-[7px] font-mono text-slate-600"> </span></div>'),op=g('<div class="flex-1 h-4 rounded-sm border border-white/10"></div>'),sp=g('<div class="flex items-center gap-1.5"><span class="text-[7px] font-mono text-slate-600 w-12 shrink-0 truncate"> </span> <div class="flex gap-0.5 flex-1"></div></div>'),rp=g('<p class="text-[10px] text-slate-600 leading-relaxed">Controls how much color is mixed into each palette step. Step 500 is always the source color.</p> <div class="grid grid-cols-3 gap-1.5"></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Tints (50–400) — mixed toward surface</div> <div class="space-y-2"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Shades (600–950) — mixed toward text</div> <div class="space-y-2"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="flex items-center justify-between mb-2"><span class="text-[9px] text-slate-600">Palette &amp; curve preview</span> <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5"></div></div> <div class="flex items-end gap-0.5 h-20"></div> <p class="text-[8px] text-slate-600 mt-2">Bar height = mix amount · fill = the resolved primary palette swatch at each step</p></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between mb-1"><span class="text-[9px] text-slate-600">Mini palettes — all brand colors</span> <div class="flex bg-white/5 border border-white/8 rounded p-0.5 gap-0.5"></div></div> <!></div>',1),np=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),lp=g('<div class="flex items-center gap-1"><span class="text-[8px] text-slate-500 w-10 shrink-0">Dir</span> <!></div>'),ip=g('<div class="flex items-center gap-2"><span class="text-[8px] text-slate-500 w-10 shrink-0">Angle</span> <input type="range" min="0" max="360" step="1" class="flex-1 accent-indigo-500"/> <span class="text-[9px] font-mono text-slate-400 w-9 text-right shrink-0"> </span></div>'),cp=g('<div class="rounded-lg border border-white/8 bg-white/3 overflow-hidden"><div class="h-9 w-full"></div> <div class="px-2 py-1.5 space-y-1.5"><div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-300 flex-1"> </span> <!></div> <!> <div class="flex items-center gap-1"><span class="text-[8px] text-slate-500 w-10 shrink-0">Stops</span> <input type="text" 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"/> <input type="text" 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"/></div> <div class="text-[8px] font-mono text-slate-600 leading-snug break-all"><span class="text-slate-500">default:</span> </div> <input type="text" placeholder="raw override (auto-derived if blank)" 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"/></div></div>'),dp=g('<div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest pt-1"> </div> <div class="space-y-2"></div>',1),fp=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Auto-derived from your brand colors. Use the angle/direction and stop
-        controls, or edit the raw value for full control.</p> <!>`,1),up=g('<p class="text-[9px] text-slate-600 leading-relaxed">--sf-color-scheme — sets the CSS <span class="font-mono text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.</p> <div class="flex gap-1"></div>',1),pp=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1"> </div> <!></div>'),mp=g('<p class="text-[10px] text-slate-600 leading-relaxed">Direct color overrides for tokens the framework auto-derives. Use for edge cases.</p> <div class="space-y-2"></div>',1),vp=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Brand color sources</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">LumLocker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status colors</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text contrast</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shade / tint curve</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Gradients</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Color scheme</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic overrides</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — override individual color steps (50–950), semantic aliases, or surface tokens directly.</p></div></div>');function hp(a,e){Qt(e,!0);function o(se,V){return Fa.value,ho(se)||V}function n(se,V){Fa.value;const F=jf(se);return F&&F!=="none"?F:V}function l(se,V,F){return Fa.value,Nf(se,V)||F}const i=[{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))"}],c=[{key:"primary",label:"Primary"},{key:"secondary",label:"Secondary"},{key:"tertiary",label:"Tertiary"},{key:"action",label:"Action"}],d=[{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"}],p=[{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"}],m=[{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}],h=[{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(m.map(se=>[se.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%"}}],v=[{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)"}],y=["50","100","200","300","400","500","600","700","800","900","950"],k=["primary","secondary","tertiary","action","neutral"],w=(No.colors??[]).filter(se=>se.name==="--sf-contrast-bias"||se.name==="--sf-contrast-threshold"),E=(No.colors??[]).filter(se=>se.name==="--sf-focus-ring-width");let B=G(!1),U=G(!1),P=G(!1),S=G(!1),_=G(!1),z=G(!1),L=G(!1),R=G(!1),D=G("light"),A=da({}),T=u(()=>parseFloat(e.overrides["--sf-lumlocker"]??"0.65"));function N(se){const V=se.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!V)return null;const F=V[1],ee=V[2].trim(),be=ee.startsWith("to "),Z=be?ee.slice(3).trim():"right",j=be?0:parseInt(ee);let ie=0,pe=0;const K=[],le=V[3];for(let De=0;De<le.length;De++)le[De]==="("?ie++:le[De]===")"?ie--:le[De]===","&&ie===0&&(K.push(le.slice(pe,De).trim()),pe=De+1);return K.push(le.slice(pe).trim()),K.length<2?null:{space:F,kind:be?"dir":"angle",angle:j,dir:Z,stop1:K[0],stop2:K[1]}}function $(se){const V=e.overrides[se.name];return(V?N(V):null)??{space:se.space,kind:se.kind,angle:se.angle,dir:se.dir,stop1:se.stop1,stop2:se.stop2}}function He(se){return A[se.name]??$(se)}function te(se){const V=He(se),F=V.kind==="dir"?`to ${V.dir}`:`${V.angle}deg`;return`linear-gradient(in ${V.space} ${F}, ${V.stop1}, ${V.stop2})`}function ye(se,V,F){A[se.name]||(A[se.name]=$(se)),A[se.name][V]=F,e.onSet(se.name,te(se))}function Ie(se,V){const F=`--sf-color-${se}-source-${V}`,ee=e.overrides[F]??d.find(be=>be.name===F)?.default??"";return ee?`oklch(from ${ee} ${t(T)} c h)`:""}let he=G(da(new Set(d.filter(se=>se.side==="light"&&!((d.find(V=>V.colorKey===se.colorKey&&V.side==="dark")?.name??"")in e.overrides)).map(se=>se.colorKey)))),ve=u(()=>{const se={},V=[...d,...p];for(const F of e.tokens)V.some(ee=>ee.name===F.name)&&(se[F.name]=F);return se}),je=u(()=>h.find(se=>Object.entries(se.patch).every(([V,F])=>F===null?!(V in e.overrides):e.overrides[V]===F)));function $e(se){const V=e.overrides[se.name];return V?parseFloat(V):se.default}const et=[];for(let se=0;se<d.length;se+=2)et.push([d[se],d[se+1]]);const M=[];for(let se=0;se<p.length;se+=2)M.push([p[se],p[se+1]]);function J(se,V){const{l:F,c:ee,h:be,valid:Z}=Vs(se);if(!Z)return se;let j,ie;return V==="base"?(j=Math.max(.16,Math.min(1.18-F,.24)),ie=ee*.5):(j=Math.max(.65,Math.min(.95-F*.5,.88)),ie=ee*.9),Ks(j,ie,be)}function xe(){return e.overrides["--sf-color-base-source-light"]??"oklch(0.96 0.006 250)"}function ke(){const se=e.overrides["--sf-color-base-source-dark"];return se||J(e.overrides["--sf-color-base-source-light"]??"oklch(0.96 0.006 250)","base")}function W(){const se=e.overrides["--sf-color-neutral-source-light"]??"oklch(0.52 0.025 260)",{l:V,c:F,h:ee,valid:be}=Vs(se);return be?Ks(Math.max(.05,Math.min(V-.38,.3)),F*.8,ee):"oklch(0.12 0.02 260)"}function we(){const se=e.overrides["--sf-color-neutral-source-dark"]??"oklch(0.69 0.0225 260)",{l:V,c:F,h:ee,valid:be}=Vs(se);return be?Ks(Math.min(1,Math.max(V+.22,.88)),F*.8,ee):"oklch(0.92 0.02 260)"}function qe(se,V,F,ee){if(Fa.value,V==="500")return ho(se)||se;const be=parseInt(V)<500,Z=m.find(K=>K.label===V);if(!Z)return se;const j=$e(Z),pe=`color-mix(in oklab, ${se} ${j}%, ${be?F:ee})`;return ho(pe)||pe}function at(se,V,F){e.onSet(se.name,F)}function Se(se,V,F){const ee=!!(V&&V.name in e.overrides);if(t(he).has(se)&&!ee){const Z=e.overrides[F]??d.find(j=>j.name===F)?.default??"";V&&e.onSet(V.name,J(Z,se)),O(he,new Set([...t(he)].filter(j=>j!==se)),!0)}else V&&e.onBulkChange({[V.name]:null}),O(he,new Set([...t(he),se]),!0)}const Ue=[{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 ae(se,V){Fa.value;const F=Cs(se),ee=Cs(V);return!F||!ee?null:qs(Bo(...F),Bo(...ee))}var q=vp(),_e=s(q),ue=s(_e),de=r(s(ue),2),me=s(de),Me=r(ue,2);{var Te=se=>{var V=Vu(),F=r(fe(V),2);re(F,21,()=>et,([ee,be])=>ee.name,(ee,be)=>{var Z=u(()=>Pa(t(be),2));let j=()=>t(Z)[0],ie=()=>t(Z)[1];const pe=u(()=>!!(ie()&&ie().name in e.overrides)),K=u(()=>t(he).has(j().colorKey)&&!t(pe));var le=qu(),De=s(le),H=s(De),Ce=s(H),ce=r(H,2);{var Le=Q=>{var oe=ms(),Ae=s(oe);C(()=>{Ye(oe,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${t(K)?"border-indigo-500/40 bg-indigo-500/15 text-indigo-300":"border-white/10 text-slate-500 hover:text-slate-300"}`),b(Ae,t(K)?"Auto dark":"Manual dark")}),x("click",oe,()=>Se(j().colorKey,ie(),j().name)),f(Q,oe)};I(ce,Q=>{ie()&&Q(Le)})}var Ne=r(De,2);{let Q=u(()=>`${j().label} (light)`),oe=u(()=>e.overrides[j().name]??t(ve)[j().name]?.value??j().default),Ae=u(()=>j().name in e.overrides);Ms(Ne,{get label(){return t(Q)},get tokenName(){return j().name},get value(){return t(oe)},get overridden(){return t(Ae)},onChange:Ke=>at(j(),ie(),Ke),onReset:()=>e.onReset(j().name)})}var Qe=r(Ne,2);{var Xe=Q=>{const oe=u(()=>e.overrides[j().name]??t(ve)[j().name]?.value??j().default),Ae=u(()=>t(K)?J(t(oe),j().colorKey):ie()?e.overrides[ie().name]??t(ve)[ie().name]?.value??ie().default:t(oe)),Ke=u(xe),We=u(ke),gt=u(W),xt=u(we);var ht=Gu(),Ee=s(ht),Oe=r(s(Ee),2);re(Oe,20,()=>y,qt=>qt,(qt,Zt)=>{const pa=u(()=>qe(t(oe),Zt,t(Ke),t(gt)));var _a=Fu();C(()=>{lt(_a,`background: ${t(pa)}`),Y(_a,"title",`${j().colorKey}-${Zt} (light) — ${t(pa)}`)}),f(qt,_a)});var At=r(Ee,2),oa=r(s(At),2);re(oa,20,()=>y,qt=>qt,(qt,Zt)=>{const pa=u(()=>qe(t(Ae),Zt,t(We),t(xt)));var _a=ju();C(()=>{lt(_a,`background: ${t(pa)}`),Y(_a,"title",`${j().colorKey}-${Zt} (dark) — ${t(pa)}`)}),f(qt,_a)}),f(Q,ht)},yt=u(()=>k.includes(j().colorKey));I(Qe,Q=>{t(yt)&&Q(Xe)})}var kt=r(Qe,2);{var Pt=Q=>{{let oe=u(()=>`${ie().label} (dark mode)`),Ae=u(()=>e.overrides[ie().name]??t(ve)[ie().name]?.value??ie().default),Ke=u(()=>ie().name in e.overrides);Ms(Q,{get label(){return t(oe)},get tokenName(){return ie().name},get value(){return t(Ae)},get overridden(){return t(Ke)},onChange:We=>e.onSet(ie().name,We),onReset:()=>e.onReset(ie().name)})}},wt=Q=>{const oe=u(()=>J(e.overrides[j().name]??j().default,j().colorKey));var Ae=Hu(),Ke=s(Ae),We=r(Ke);C(gt=>{lt(Ke,gt),Y(Ke,"title",t(oe)),b(We,` Dark: auto-derived (${t(oe)??""})`)},[()=>`background: ${o(t(oe),t(oe))}`]),f(Q,Ae)};I(kt,Q=>{ie()&&!t(K)?Q(Pt):ie()&&t(K)&&Q(wt,1)})}C(()=>b(Ce,j().label)),f(ee,le)}),f(se,V)};I(Me,se=>{t(B)&&se(Te)})}var ze=r(_e,4),Be=s(ze),Ge=r(s(Be),2),dt=s(Ge),st=r(Be,2);{var pt=se=>{var V=Wu(),F=r(fe(V),2);{let ie=u(()=>"--sf-lumlocker"in e.overrides);ut(F,{label:"LumLocker lightness (L)",get value(){return t(T)},min:0,max:1,step:.01,help:"--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]",get overridden(){return t(ie)},onChange:pe=>e.onSet("--sf-lumlocker",String(pe)),onReset:()=>e.onReset("--sf-lumlocker")})}var ee=r(F,2),be=r(s(ee),2);re(be,17,()=>c,ie=>ie.key,(ie,pe)=>{var K=Bt(),le=fe(K);re(le,16,()=>["light","dark"],De=>De,(De,H)=>{const Ce=u(()=>l(`var(--sf-color-${t(pe).key}-source-${H})`,H,"")),ce=u(()=>Ie(t(pe).key,H));var Le=Ku(),Ne=s(Le),Qe=s(Ne),Xe=r(Qe),yt=s(Xe),kt=r(Ne,2),Pt=r(kt,4);C(wt=>{b(Qe,`${t(pe).label??""} `),b(yt,H==="light"?"L":"D"),lt(kt,`background:${t(Ce)||`var(--sf-color-${t(pe).key})`}`),lt(Pt,wt),Y(Pt,"title",t(ce))},[()=>`background:${o(t(ce),t(ce))}`]),f(De,Le)}),f(ie,K)});var Z=r(ee,2),j=s(Z);C(()=>{Ye(Z,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${Ko.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"}`),b(j,Ko.value?"✓ LumLocker active on canvas — click to disable":"Preview LumLocker on live canvas")}),x("click",Z,()=>{Ko.value=!Ko.value}),f(se,V)};I(st,se=>{t(R)&&se(pt)})}var _t=r(ze,4),vt=s(_t),X=r(s(vt),2),Pe=s(X),Re=r(vt,2);{var nt=se=>{var V=Xu();re(V,21,()=>M,([F,ee])=>F.name,(F,ee)=>{var be=u(()=>Pa(t(ee),2));let Z=()=>t(be)[0],j=()=>t(be)[1];var ie=Ju(),pe=s(ie),K=s(pe),le=r(pe,2);{let ce=u(()=>`${Z().label} light`),Le=u(()=>e.overrides[Z().name]??t(ve)[Z().name]?.value??Z().default),Ne=u(()=>Z().name in e.overrides);Ms(le,{get label(){return t(ce)},get tokenName(){return Z().name},get value(){return t(Le)},get overridden(){return t(Ne)},onChange:Qe=>e.onSet(Z().name,Qe),onReset:()=>e.onReset(Z().name)})}var De=r(le,2);{var H=ce=>{{let Le=u(()=>`${j().label} dark`),Ne=u(()=>e.overrides[j().name]??t(ve)[j().name]?.value??j().default),Qe=u(()=>j().name in e.overrides);Ms(ce,{get label(){return t(Le)},get tokenName(){return j().name},get value(){return t(Ne)},get overridden(){return t(Qe)},onChange:Xe=>e.onSet(j().name,Xe),onReset:()=>e.onReset(j().name)})}};I(De,ce=>{j()&&ce(H)})}var Ce=r(De,2);re(Ce,21,()=>[["L","light",e.overrides[Z().name]??Z().default,xe(),W()],["D","dark",j()?e.overrides[j().name]??j().default:e.overrides[Z().name]??Z().default,ke(),we()]],([ce,Le,Ne,Qe,Xe])=>ce,(ce,Le)=>{var Ne=u(()=>Pa(t(Le),5));let Qe=()=>t(Ne)[0],Xe=()=>t(Ne)[1],yt=()=>t(Ne)[2],kt=()=>t(Ne)[3],Pt=()=>t(Ne)[4];var wt=Zu(),Q=s(wt),oe=s(Q),Ae=r(Q,2);re(Ae,20,()=>y,Ke=>Ke,(Ke,We)=>{const gt=u(()=>qe(yt(),We,kt(),Pt()));var xt=Yu();C(()=>{lt(xt,`background: ${t(gt)}`),Y(xt,"title",`${Z().colorKey}-${We} (${Xe()}) — ${t(gt)}`)}),f(Ke,xt)}),C(()=>b(oe,Qe())),f(ce,wt)}),C(()=>b(K,Z().label)),f(F,ie)}),f(se,V)};I(Re,se=>{t(S)&&se(nt)})}var it=r(_t,4),Ct=s(it),bt=r(s(Ct),2),Dt=s(bt),St=r(Ct,2);{var Ut=se=>{var V=ep(),F=r(fe(V),2);re(F,17,()=>w,pe=>pe.name,(pe,K)=>{Fo(pe,{get knob(){return t(K)},get overrides(){return e.overrides},onChange:(le,De)=>De===null?e.onReset(le):e.onSet(le,De)})});var ee=r(F,2),be=s(ee);re(be,17,()=>Ue,pe=>pe.label,(pe,K)=>{const le=u(()=>ae(t(K).fg,t(K).bg));var De=Bt(),H=fe(De);{var Ce=ce=>{var Le=Qu(),Ne=s(Le),Qe=r(Ne,2),Xe=s(Qe),yt=r(Qe,2),kt=s(yt),Pt=r(yt,2),wt=s(Pt);C((Q,oe)=>{lt(Ne,Q),b(Xe,t(K).label),b(kt,`${oe??""}:1`),Ye(Pt,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${t(le)>=4.5?"bg-emerald-500/20 text-emerald-300":"bg-amber-500/20 text-amber-300"}`),b(wt,t(le)>=4.5?"AA":t(le)>=3?"AA-L":"✗")},[()=>`background:${o(t(K).bg,t(K).bg)}; color:${o(t(K).fg,t(K).fg)}`,()=>t(le).toFixed(2)]),f(ce,Le)};I(H,ce=>{t(le)!==null&&ce(Ce)})}f(pe,De)});var Z=r(be,2);{var j=pe=>{var K=$u();x("click",K,()=>e.onSelectDomain?.("wcag")),f(pe,K)};I(Z,pe=>{e.onSelectDomain&&pe(j)})}var ie=r(ee,2);re(ie,17,()=>E,pe=>pe.name,(pe,K)=>{Fo(pe,{get knob(){return t(K)},get overrides(){return e.overrides},onChange:(le,De)=>De===null?e.onReset(le):e.onSet(le,De)})}),f(se,V)};I(St,se=>{t(U)&&se(Ut)})}var ct=r(it,4),jt=s(ct),ea=r(s(jt),2),ia=s(ea),Ze=r(jt,2);{var mt=se=>{const V=u(()=>e.overrides["--sf-color-primary-source-light"]??d.find(Q=>Q.name==="--sf-color-primary-source-light")?.default??"oklch(0.47 0.27 264)"),F=u(()=>e.overrides["--sf-color-primary-source-dark"]),ee=u(()=>t(F)??(!t(he).has("primary")||t(F)?d.find(Q=>Q.name==="--sf-color-primary-source-dark")?.default??J(t(V),"primary"):J(t(V),"primary"))),be=u(()=>t(D)==="light"?t(V):t(ee)),Z=u(()=>t(D)==="light"?xe():ke()),j=u(()=>t(D)==="light"?W():we()),ie=u(()=>t(D)==="light"?xe():ke()),pe=u(()=>t(D)==="light"?W():we());var K=rp(),le=r(fe(K),2);re(le,21,()=>h,Q=>Q.label,(Q,oe)=>{var Ae=tp(),Ke=s(Ae),We=s(Ke),gt=r(Ke,2),xt=s(gt);C(()=>{Ye(Ae,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${t(je)?.label===t(oe).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"}`),b(We,t(oe).label),b(xt,t(oe).desc)}),x("click",Ae,()=>e.onBulkChange(t(oe).patch)),f(Q,Ae)});var De=r(le,2),H=r(s(De),2);re(H,21,()=>m.filter(Q=>Q.step==="tint"),Q=>Q.name,(Q,oe)=>{{let Ae=u(()=>$e(t(oe))),Ke=u(()=>t(oe).name in e.overrides);ut(Q,{get label(){return t(oe).label},get value(){return t(Ae)},min:0,max:100,step:1,unit:"%",get overridden(){return t(Ke)},onChange:We=>e.onSet(t(oe).name,`${We}%`),onReset:()=>e.onReset(t(oe).name)})}});var Ce=r(De,2),ce=r(s(Ce),2);re(ce,21,()=>m.filter(Q=>Q.step==="shade"),Q=>Q.name,(Q,oe)=>{{let Ae=u(()=>$e(t(oe))),Ke=u(()=>t(oe).name in e.overrides);ut(Q,{get label(){return t(oe).label},get value(){return t(Ae)},min:0,max:100,step:1,unit:"%",get overridden(){return t(Ke)},onChange:We=>e.onSet(t(oe).name,`${We}%`),onReset:()=>e.onReset(t(oe).name)})}});var Le=r(Ce,2),Ne=s(Le),Qe=r(s(Ne),2);re(Qe,20,()=>["light","dark"],Q=>Q,(Q,oe)=>{var Ae=ms(),Ke=s(Ae);C(()=>{Ye(Ae,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(D)===oe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(Ke,oe==="light"?"Light":"Dark")}),x("click",Ae,()=>{O(D,oe,!0)}),f(Q,Ae)});var Xe=r(Ne,2);re(Xe,21,()=>m,Q=>Q.name,(Q,oe)=>{const Ae=u(()=>$e(t(oe))),Ke=u(()=>t(oe).label),We=u(()=>qe(t(be),t(Ke),t(Z),t(j)));var gt=ap(),xt=s(gt),ht=s(xt),Ee=r(xt,2),Oe=r(Ee,2),At=s(Oe);C((oa,qt,Zt)=>{b(ht,oa),lt(Ee,qt),Y(Ee,"title",Zt),b(At,t(Ke))},[()=>Math.round(t(Ae)),()=>`background:${t(We)}; height: ${Math.max(t(Ae)/100*56,6)}px`,()=>`primary-${t(Ke)} (${t(D)}) · mix ${Math.round(t(Ae))}%`]),f(Q,gt)});var yt=r(Le,2),kt=s(yt),Pt=r(s(kt),2);re(Pt,20,()=>["light","dark"],Q=>Q,(Q,oe)=>{var Ae=ms(),Ke=s(Ae);C(()=>{Ye(Ae,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(D)===oe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(Ke,oe==="light"?"Light":"Dark")}),x("click",Ae,()=>{O(D,oe,!0)}),f(Q,Ae)});var wt=r(kt,2);re(wt,16,()=>k,Q=>Q,(Q,oe)=>{const Ae=u(()=>e.overrides[`--sf-color-${oe}-source-light`]??d.find(At=>At.name===`--sf-color-${oe}-source-light`)?.default??"oklch(0.5 0.15 264)"),Ke=u(()=>`--sf-color-${oe}-source-dark`),We=u(()=>e.overrides[t(Ke)]??(t(he).has(oe)&&!e.overrides[t(Ke)]?J(t(Ae),oe):d.find(At=>At.name===t(Ke))?.default??J(t(Ae),oe))),gt=u(()=>t(D)==="light"?t(Ae):t(We));var xt=sp(),ht=s(xt),Ee=s(ht),Oe=r(ht,2);re(Oe,20,()=>y,At=>At,(At,oa)=>{const qt=u(()=>qe(t(gt),oa,t(ie),t(pe)));var Zt=op();C(()=>{lt(Zt,`background:${t(qt)}`),Y(Zt,"title",`${oe}-${oa} (${t(D)})`)}),f(At,Zt)}),C(()=>b(Ee,oe)),f(Q,xt)}),f(se,K)};I(Ze,se=>{t(P)&&se(mt)})}var Ot=r(ct,4),Rt=s(Ot),ne=r(s(Rt),2),Je=s(ne),ft=r(Rt,2);{var Lt=se=>{var V=fp(),F=r(fe(V),2);re(F,16,()=>["brand","fade"],ee=>ee,(ee,be)=>{var Z=dp(),j=fe(Z),ie=s(j),pe=r(j,2);re(pe,21,()=>i.filter(K=>K.group===be),K=>K.name,(K,le)=>{const De=u(()=>`var(${t(le).name})`),H=u(()=>He(t(le)));var Ce=cp(),ce=s(Ce),Le=r(ce,2),Ne=s(Le),Qe=s(Ne),Xe=s(Qe),yt=r(Qe,2);{var kt=ht=>{var Ee=np();x("click",Ee,()=>{delete A[t(le).name],e.onReset(t(le).name)}),f(ht,Ee)};I(yt,ht=>{t(le).name in e.overrides&&ht(kt)})}var Pt=r(Ne,2);{var wt=ht=>{var Ee=lp(),Oe=r(s(Ee),2);re(Oe,16,()=>["top","right","bottom","left"],At=>At,(At,oa)=>{var qt=ms(),Zt=s(qt);C(()=>{Ye(qt,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${t(H).dir===oa?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),b(Zt,oa)}),x("click",qt,()=>ye(t(le),"dir",oa)),f(At,qt)}),f(ht,Ee)},Q=ht=>{var Ee=ip(),Oe=r(s(Ee),2),At=r(Oe,2),oa=s(At);C(()=>{Xt(Oe,t(H).angle),b(oa,`${t(H).angle??""}°`)}),x("input",Oe,qt=>ye(t(le),"angle",parseInt(qt.target.value))),f(ht,Ee)};I(Pt,ht=>{t(le).kind==="dir"&&t(le).group!=="fade"?ht(wt):t(le).kind!=="dir"&&ht(Q,1)})}var oe=r(Pt,2),Ae=r(s(oe),2),Ke=r(Ae,2),We=r(oe,2),gt=r(s(We)),xt=r(We,2);C(ht=>{lt(ce,ht),b(Xe,t(le).label),Xt(Ae,t(H).stop1),Xt(Ke,t(H).stop2),b(gt,` ${t(le).formula??""}`),Xt(xt,e.overrides[t(le).name]??"")},[()=>`background:${n(t(De),t(De))}`]),x("change",Ae,ht=>ye(t(le),"stop1",ht.target.value.trim())),x("change",Ke,ht=>ye(t(le),"stop2",ht.target.value.trim())),x("change",xt,ht=>{const Ee=ht.target.value.trim();delete A[t(le).name],Ee?e.onSet(t(le).name,Ee):e.onReset(t(le).name)}),f(K,Ce)}),C(()=>b(ie,be==="brand"?"Brand & surface":"Edge fades")),f(ee,Z)}),f(se,V)};I(ft,se=>{t(L)&&se(Lt)})}var Yt=r(Ot,4),ge=s(Yt),Fe=r(s(ge),2),rt=s(Fe),Ve=r(ge,2);{var Mt=se=>{var V=up(),F=r(fe(V),2);re(F,20,()=>[["light dark","light dark (default)"],["light","Light only"],["dark","Dark only"]],([ee,be])=>ee,(ee,be)=>{var Z=u(()=>Pa(be,2));let j=()=>t(Z)[0],ie=()=>t(Z)[1];const pe=u(()=>e.overrides["--sf-color-scheme"]??"light dark");var K=ms(),le=s(K);C(()=>{Ye(K,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(pe)===j()?"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"}`),b(le,ie())}),x("click",K,()=>j()==="light dark"?e.onReset("--sf-color-scheme"):e.onSet("--sf-color-scheme",j())),f(ee,K)}),f(se,V)};I(Ve,se=>{t(z)&&se(Mt)})}var aa=r(Yt,4),zt=s(aa),It=r(s(zt),2),Nt=s(It),la=r(zt,2);{var xa=se=>{var V=mp(),F=r(fe(V),2);re(F,21,()=>v,ee=>ee.name,(ee,be)=>{const Z=u(()=>o(`var(${t(be).name})`,""));var j=pp(),ie=s(j),pe=s(ie),K=r(ie,2);{let le=u(()=>e.overrides[t(be).name]??""),De=u(()=>t(Z)?`auto-derived · ${t(Z)}`:"auto-derived"),H=u(()=>t(be).name in e.overrides);qa(K,{get token(){return t(be).name},get value(){return t(le)},get placeholder(){return t(De)},get isOverridden(){return t(H)},onSet:Ce=>e.onSet(t(be).name,Ce),onReset:()=>e.onReset(t(be).name)})}C(()=>b(pe,t(be).label)),f(ee,j)}),f(se,V)};I(la,se=>{t(_)&&se(xa)})}C(()=>{Y(ue,"aria-expanded",t(B)),b(me,t(B)?"▲":"▼"),Y(Be,"aria-expanded",t(R)),b(dt,t(R)?"▲":"▼"),Y(vt,"aria-expanded",t(S)),b(Pe,t(S)?"▲":"▼"),Y(Ct,"aria-expanded",t(U)),b(Dt,t(U)?"▲":"▼"),Y(jt,"aria-expanded",t(P)),b(ia,t(P)?"▲":"▼"),Y(Rt,"aria-expanded",t(L)),b(Je,t(L)?"▲":"▼"),Y(ge,"aria-expanded",t(z)),b(rt,t(z)?"▲":"▼"),Y(zt,"aria-expanded",t(_)),b(Nt,t(_)?"▲":"▼")}),x("click",ue,()=>{O(B,!t(B))}),x("click",Be,()=>{O(R,!t(R))}),x("click",vt,()=>{O(S,!t(S))}),x("click",Ct,()=>{O(U,!t(U))}),x("click",jt,()=>{O(P,!t(P))}),x("click",Rt,()=>{O(L,!t(L))}),x("click",ge,()=>{O(z,!t(z))}),x("click",zt,()=>{O(_,!t(_))}),f(a,q),$t()}ta(["click","input","change"]);var gp=g('<div class="flex items-baseline justify-between gap-3 mt-2 px-1 overflow-hidden"><span class="text-slate-500 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span> <span class="text-white/80 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span></div>'),bp=g('<div class="flex items-center gap-2 mt-2 px-1"><div class="h-2 bg-indigo-500/40 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">min</span> <div class="h-2 bg-indigo-500/70 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">max</span></div>'),yp=g('<option style="background:#16161e;">Custom</option>'),xp=g('<option style="background:#16161e;"> </option>'),kp=g('<div class="flex items-center gap-2"><span class="text-[9px] text-slate-500 w-14 shrink-0"> </span> <select class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded text-[10px] text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select> <input type="number" class="w-16 shrink-0 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"/></div>'),wp=g('<div class="mt-3 pt-3 border-t border-white/6"><div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div> <div class="space-y-2"></div></div>'),_p=g('<div class="flex justify-end mt-2"><button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button></div>'),Cp=g('<div><div class="flex items-center justify-between mb-2"><span class="text-[10px] font-bold text-slate-300"> </span> <span class="text-[9px] font-mono text-slate-500">clamp(<span class="text-indigo-300"> </span> … <span class="text-indigo-300"> </span>)</span></div> <div class="clampTrack relative h-5 flex items-center mb-2"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div></div> <div class="grid grid-cols-2 gap-2"><label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full 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"/></label> <label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full 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"/></label></div> <!> <!> <!></div>');function Os(a,e){Qt(e,!0);let o=ka(e,"unit",3,"rem"),n=ka(e,"minLabel",3,"Min"),l=ka(e,"maxLabel",3,"Max"),i=ka(e,"overridden",3,!1),c=ka(e,"ratioMin_bound",3,1.05),d=ka(e,"ratioMax_bound",3,1.8),p=ka(e,"previewKind",3,"none");function m(Se){return Math.min(e.max,Math.max(e.min,Se))}let h=u(()=>(e.minValue-e.min)/(e.max-e.min)*100),v=u(()=>(e.maxValue-e.min)/(e.max-e.min)*100);function y(Se){return Math.min(d(),Math.max(c(),Se))}let k=u(()=>e.ratioPresets?.find(Se=>e.ratioMin!==void 0&&Math.abs(Se.value-e.ratioMin)<.0015)?.value),w=u(()=>e.ratioPresets?.find(Se=>e.ratioMax!==void 0&&Math.abs(Se.value-e.ratioMax)<.0015)?.value);var E=Cp(),B=s(E),U=s(B),P=s(U),S=r(U,2),_=r(s(S)),z=s(_),L=r(_,2),R=s(L),D=r(B,2),A=r(s(D),2),T=r(A,2),N=r(T,2),$=r(N,2),He=r($,2),te=r(D,2),ye=s(te),Ie=s(ye),he=s(Ie),ve=r(Ie,2),je=r(ye,2),$e=s(je),et=s($e),M=r($e,2),J=r(te,2);{var xe=Se=>{var Ue=gp(),ae=s(Ue),q=r(s(ae)),_e=s(q),ue=r(ae,2),de=r(s(ue)),me=s(de);C((Me,Te,ze,Be)=>{lt(ae,Me),b(_e,Te),lt(ue,ze),b(me,Be)},[()=>`font-size:${Math.min(e.minValue,2)}rem`,()=>n().toLowerCase(),()=>`font-size:${Math.min(e.maxValue,2.6)}rem`,()=>l().toLowerCase()]),f(Se,Ue)},ke=Se=>{var Ue=bp(),ae=s(Ue),q=r(ae,4);C((_e,ue)=>{lt(ae,_e),lt(q,ue)},[()=>`width:${Math.min(e.minValue*28,120)}px`,()=>`width:${Math.min(e.maxValue*28,200)}px`]),f(Se,Ue)};I(J,Se=>{p()==="type"?Se(xe):p()==="space"&&Se(ke,1)})}var W=r(J,2);{var we=Se=>{var Ue=wp(),ae=r(s(Ue),2);re(ae,21,()=>[{side:n(),value:e.ratioMin,active:t(k),onChange:e.onRatioMinChange},{side:l(),value:e.ratioMax,active:t(w),onChange:e.onRatioMaxChange}],q=>q.side,(q,_e)=>{var ue=kp(),de=s(ue),me=s(de),Me=r(de,2),Te=s(Me);{var ze=st=>{var pt=yp();pt.value=pt.__value="",f(st,pt)};I(Te,st=>{t(_e).active===void 0&&st(ze)})}var Be=r(Te);re(Be,17,()=>e.ratioPresets,st=>st.value,(st,pt)=>{var _t=xp(),vt=s(_t),X={};C(Pe=>{b(vt,t(pt).label),X!==(X=Pe)&&(_t.value=(_t.__value=Pe)??"")},[()=>String(t(pt).value)]),f(st,_t)});var Ge;Na(Me);var dt=r(Me,2);Y(dt,"step",.001),C(st=>{b(me,t(_e).side),Y(Me,"aria-label",`${t(_e).side} modular scale ratio preset`),Ge!==(Ge=st)&&(Me.value=(Me.__value=st)??"",Ba(Me,st)),Y(dt,"aria-label",`${t(_e).side} modular scale custom ratio`),Y(dt,"min",c()),Y(dt,"max",d()),Xt(dt,t(_e).value)},[()=>t(_e).active!==void 0?String(t(_e).active):""]),x("change",Me,st=>{const pt=parseFloat(st.target.value);Number.isFinite(pt)&&t(_e).onChange?.(y(pt))}),x("change",dt,st=>{const pt=parseFloat(st.target.value);Number.isFinite(pt)&&t(_e).onChange?.(y(pt))}),f(q,ue)}),f(Se,Ue)};I(W,Se=>{e.ratioPresets&&Se(we)})}var qe=r(W,2);{var at=Se=>{var Ue=_p(),ae=s(Ue);x("click",ae,function(...q){e.onReset?.apply(this,q)}),f(Se,Ue)};I(qe,Se=>{i()&&e.onReset&&Se(at)})}C(Se=>{Ye(E,1,`rounded-xl border p-3 ${i()?"bg-indigo-500/8 border-indigo-500/25":"bg-white/4 border-white/8"}`,"svelte-iy59wr"),b(P,e.title),b(z,`${e.minValue??""}${o()??""}`),b(R,`${e.maxValue??""}${o()??""}`),lt(A,Se),Y(T,"min",e.min),Y(T,"max",e.max),Y(T,"step",e.step),Xt(T,e.minValue),Y(T,"aria-label",`${e.title} min`),Y(N,"min",e.min),Y(N,"max",e.max),Y(N,"step",e.step),Xt(N,e.maxValue),Y(N,"aria-label",`${e.title} max`),lt($,`left: calc(${t(h)}% - 6px)`),lt(He,`left: calc(${t(v)}% - 6px)`),b(he,n()),Y(ve,"min",e.min),Y(ve,"max",e.max),Y(ve,"step",e.step),Xt(ve,e.minValue),b(et,l()),Y(M,"min",e.min),Y(M,"max",e.max),Y(M,"step",e.step),Xt(M,e.maxValue)},[()=>`left:${Math.min(t(h),t(v))}%; right:${100-Math.max(t(h),t(v))}%`]),x("input",T,Se=>e.onMinChange(Math.min(m(parseFloat(Se.target.value)),e.maxValue))),x("input",N,Se=>e.onMaxChange(Math.max(m(parseFloat(Se.target.value)),e.minValue))),x("change",ve,Se=>e.onMinChange(m(parseFloat(Se.target.value)||e.min))),x("change",M,Se=>e.onMaxChange(m(parseFloat(Se.target.value)||e.max))),f(a,E),$t()}ta(["input","change","click"]);var Op=g('<option style="font-family:inherit;background:#16161e;"> </option>'),vs=g('<option style="background:#16161e;"> </option>'),wr=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Sp=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <select 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"><!><!></select> <!></div>'),Lp=g('<!> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="text-[10px] font-semibold text-slate-400">Google Font</div> <div class="flex gap-2"><select 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"><option style="background:#16161e;">Pick a font…</option><!></select> <div class="flex gap-1 shrink-0"><button>Body</button> <button>Heading</button></div></div> <input type="text" placeholder="…or type any Google font name" class="w-full 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"/> <button class="w-full py-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 text-[11px] font-bold cursor-pointer hover:bg-indigo-600/30 transition-all"> </button></div>',1),Pp=g('<span class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-indigo-400"></span>'),Ip=g("<button> <!></button>"),_r=g('<option style="background:#16161e;">custom</option>'),Lo=g("<button> </button>"),Bp=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Tracking</span> <select 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"><!><!></select></div>'),Up=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Max width</span> <input type="text" placeholder="none" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>'),zp=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer"> </button>'),Ap=g('<div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 px-3 py-3 overflow-hidden"><div class="text-white/85 truncate">The quick brown fox</div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Size</span> <select 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"><!><!></select></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Line height</span> <select 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"><!><!></select></div> <div><span class="text-[10px] font-semibold text-slate-400">Weight</span> <div class="flex gap-1 mt-1"></div></div> <!> <!> <div class="flex justify-end"><!></div>',1),jn=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100 transition-colors">reset</button>'),Gn=g('<div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>'),Ep=g("<button><span> </span></button>"),Rp=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5"> </div> <div class="flex gap-1"></div></div>'),Tp=g('<!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Emphasis style</div> <div class="flex gap-1"></div></div> <!> <!> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">External marker</span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>',1),Hn=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),Dp=g('<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>'),Mp=g('<p class="text-[9px] text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p> <!>',1),Np=g('<div><div class="text-[9px] text-slate-600 mb-1"> </div> <!></div>'),Fp=g('<!> <div class="grid grid-cols-2 gap-3"></div> <!>',1),jp=g('<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <!></div>'),Gp=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale. Each endpoint has three values — viewport width,
-      base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.</p> <!> <!> <div class="space-y-4"></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Line height scale</div> <div class="space-y-2"></div></div> <!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Letter-spacing scale</div> <p class="text-[9px] text-slate-600 mb-2">Overriding these propagates to heading sizes that reference them.</p> <div class="space-y-2"></div></div>`,1),Hp=g('<div class="flex items-baseline gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 shrink-0 text-right"> </span> <span class="text-white/80 font-medium leading-none truncate">Aa</span> <span class="text-[9px] font-mono text-slate-600 ml-auto shrink-0"> </span></div>'),qp=g('<div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1 overflow-hidden"></div>'),Cr=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Vp=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-400 w-6 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),Kp=g('<p class="text-[9px] text-slate-600 leading-relaxed">Per-text-size max-width caps on <span class="font-mono text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-400">ch</span> units for character-based measures.</p> <div class="space-y-1.5"></div>',1),Wp=g('<p class="text-[9px] text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-400">normal</span> unless your font supports these features.</p> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Numeric figures</div> <div class="flex gap-1"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Optical sizing</div> <div class="flex gap-1"></div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Font features</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 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"/> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Variation</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 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"/> <!></div>',1),Yp=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font families</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Per-type styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Body text</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font weight scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Display type</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section><button class="w-full flex items-center justify-between cursor-pointer mb-3"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scale preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line lengths (max-width)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Advanced typography</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function Zp(a,e){Qt(e,!0);const o=[{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}],n=[{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"}],l=[{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"}],i=[{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"}],c=["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"],d=[{label:"balance",value:"balance"},{label:"pretty",value:"pretty"},{label:"normal",value:"normal"}],p=["300","400","500","600","700","800"],m={"--sf-font-weight-body":"400","--sf-font-weight-heading":"600","--sf-font-weight-display":"700","--sf-font-weight-interactive":"600"},h=[{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}],v=[{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}],y=[{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}],k=[{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}],w=y.map(H=>({label:H.label,value:`var(${H.token})`,num:H.default})),E=v.map(H=>({label:H.label,value:`var(${H.token})`,em:H.default})),B=[{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)"}];let U=G("h1"),P=u(()=>B.find(H=>H.id===t(U)));const S=No.typography??[];function _(H,Ce){const ce=parseFloat(e.overrides[H]??"");return isNaN(ce)?Ce:ce}let z=u(()=>_("--sf-text-ratio-min",1.25)),L=u(()=>_("--sf-text-ratio-max",1.333)),R=u(()=>_("--sf-text-base-min",1)),D=u(()=>_("--sf-text-base-max",1.25)),A=u(()=>_("--sf-text-display-base-min",2.4)),T=u(()=>_("--sf-text-display-base-max",3)),N=u(()=>_("--sf-leading-taper",0)),$=u(()=>_("--sf-text-scale",1)),He=u(()=>_("--sf-fluid-min-vw",22.5)),te=u(()=>_("--sf-fluid-max-vw",90)),ye=G(!1),Ie=G(!1),he=G(!1),ve=G(!1),je=G(!1),$e=G(!1),et=G(!1),M=G(!1),J=G(!1),xe=u(()=>e.overrides["--sf-font-body"]??""),ke=u(()=>e.overrides["--sf-font-heading"]??""),W=u(()=>e.overrides["--sf-font-mono"]??"ui-monospace, monospace"),we=G(""),qe=G("body");function at(H){const Ce=e.overrides[H.token];return Ce?parseFloat(Ce.replace("em","")):H.default}function Se(H){return _(H.token,H.default)}function Ue(H){if(!H.trim())return;const Ce=`gf-${H.replace(/\s+/g,"-")}`;if(!document.getElementById(Ce)){const ce=document.createElement("link");ce.id=Ce,ce.rel="stylesheet",ce.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(H)}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(ce)}}function ae(H,Ce){if(!H.trim())return;Ue(H);const ce=Ce==="body"?"--sf-font-body":"--sf-font-heading";e.onSet(ce,`'${H}', sans-serif`)}function q(H,Ce){return H?e.overrides[H]??Ce:Ce}function _e(H,Ce,ce){H&&(Ce===ce?e.onReset(H):e.onSet(H,Ce))}let ue=u(()=>{const H=q(t(P).size,t(P).dSize),Ce=k.find(Le=>Le.value===H),ce=(t(R)+t(D))/2;return Math.min((Ce?.approx??1)*ce*t($),2.4)}),de=u(()=>{const H=q(t(P).wt,t(P).dWt),Ce=parseInt(H);return isNaN(Ce)?600:Ce}),me=u(()=>{if(!t(P).ls)return 0;const H=q(t(P).ls,t(P).dLs),Ce=E.find(Le=>Le.value===H);if(Ce)return Ce.em;const ce=parseFloat(H.replace("em",""));return isNaN(ce)?0:ce}),Me=u(()=>{const H=q(t(P).lh,t(P).dLh),Ce=w.find(Le=>Le.value===H);if(Ce)return Ce.num;const ce=parseFloat(H);return isNaN(ce)?1.3:ce});var Te=Yp(),ze=s(Te),Be=s(ze),Ge=r(s(Be),2),dt=s(Ge),st=r(Be,2);{var pt=H=>{var Ce=Lp(),ce=fe(Ce);re(ce,17,()=>[{label:"Body",token:"--sf-font-body",current:t(xe),opts:n},{label:"Heading",token:"--sf-font-heading",current:t(ke),opts:l},{label:"Mono",token:"--sf-font-mono",current:t(W),opts:i}],We=>We.token,(We,gt)=>{var xt=Sp(),ht=s(xt),Ee=s(ht),Oe=r(ht,2),At=s(Oe);re(At,17,()=>t(gt).opts,tt=>tt.label,(tt,ot)=>{var Et=Op(),Vt=s(Et),ca={};C(()=>{b(Vt,t(ot).label),ca!==(ca=t(ot).value)&&(Et.value=(Et.__value=t(ot).value)??"")}),f(tt,Et)});var oa=r(At);{var qt=tt=>{var ot=vs(),Et=s(ot),Vt={};C(ca=>{b(Et,`Custom: ${ca??""}`),Vt!==(Vt=t(gt).current)&&(ot.value=(ot.__value=t(gt).current)??"")},[()=>t(gt).current.split(",")[0].replace(/['"]/g,"")]),f(tt,ot)},Zt=u(()=>t(gt).current&&!t(gt).opts.some(tt=>tt.value===t(gt).current));I(oa,tt=>{t(Zt)&&tt(qt)})}var pa;Na(Oe);var _a=r(Oe,2);{var _o=tt=>{var ot=wr();x("click",ot,()=>e.onReset(t(gt).token)),f(tt,ot)};I(_a,tt=>{t(gt).token in e.overrides&&tt(_o)})}C(()=>{b(Ee,t(gt).label),lt(Oe,`font-family: ${t(gt).current||"inherit"}`),pa!==(pa=t(gt).current)&&(Oe.value=(Oe.__value=t(gt).current)??"",Ba(Oe,t(gt).current))}),x("change",Oe,tt=>{const ot=tt.target.value;ot?e.onSet(t(gt).token,ot):e.onReset(t(gt).token)}),f(We,xt)});var Le=r(ce,2),Ne=r(s(Le),2),Qe=s(Ne),Xe=s(Qe);Xe.value=Xe.__value="";var yt=r(Xe);re(yt,16,()=>c,We=>We,(We,gt)=>{var xt=vs(),ht=s(xt),Ee={};C(()=>{b(ht,gt),Ee!==(Ee=gt)&&(xt.value=(xt.__value=gt)??"")}),f(We,xt)});var kt;Na(Qe);var Pt=r(Qe,2),wt=s(Pt),Q=r(wt,2),oe=r(Ne,2),Ae=r(oe,2),Ke=s(Ae);C(()=>{kt!==(kt=t(we))&&(Qe.value=(Qe.__value=t(we))??"",Ba(Qe,t(we))),Ye(wt,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(qe)==="body"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Ye(Q,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(qe)==="heading"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Xt(oe,t(we)),b(Ke,`Load & apply to ${t(qe)??""}`)}),x("change",Qe,We=>{O(we,We.target.value,!0)}),x("click",wt,()=>{O(qe,"body")}),x("click",Q,()=>{O(qe,"heading")}),x("input",oe,We=>{O(we,We.target.value,!0)}),x("click",Ae,()=>ae(t(we),t(qe))),f(H,Ce)};I(st,H=>{t(ye)&&H(pt)})}var _t=r(ze,4),vt=s(_t),X=r(s(vt),2),Pe=s(X),Re=r(vt,2);{var nt=H=>{var Ce=Ap(),ce=fe(Ce);re(ce,21,()=>B,tt=>tt.id,(tt,ot)=>{const Et=u(()=>t(ot).size in e.overrides||t(ot).lh in e.overrides||t(ot).wt in e.overrides||!!t(ot).ls&&t(ot).ls in e.overrides);var Vt=Ip(),ca=s(Vt),Co=r(ca);{var to=Aa=>{var va=Pp();f(Aa,va)};I(Co,Aa=>{t(Et)&&Aa(to)})}C(()=>{Ye(Vt,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t(U)===t(ot).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(ca,`${t(ot).label??""} `)}),x("click",Vt,()=>{O(U,t(ot).id,!0)}),f(tt,Vt)});var Le=r(ce,2),Ne=s(Le),Qe=r(Le,2),Xe=r(s(Qe),2),yt=s(Xe);re(yt,17,()=>k,tt=>tt.value,(tt,ot)=>{var Et=vs(),Vt=s(Et),ca={};C(()=>{b(Vt,t(ot).label),ca!==(ca=t(ot).value)&&(Et.value=(Et.__value=t(ot).value)??"")}),f(tt,Et)});var kt=r(yt);{var Pt=tt=>{var ot=_r(),Et={};C(Vt=>{Et!==(Et=Vt)&&(ot.value=(ot.__value=Vt)??"")},[()=>q(t(P).size,t(P).dSize)]),f(tt,ot)},wt=u(()=>!k.some(tt=>tt.value===q(t(P).size,t(P).dSize)));I(kt,tt=>{t(wt)&&tt(Pt)})}var Q;Na(Xe);var oe=r(Qe,2),Ae=r(s(oe),2),Ke=s(Ae);re(Ke,17,()=>w,tt=>tt.value,(tt,ot)=>{var Et=vs(),Vt=s(Et),ca={};C(()=>{b(Vt,`${t(ot).label??""} · ${t(ot).num??""}`),ca!==(ca=t(ot).value)&&(Et.value=(Et.__value=t(ot).value)??"")}),f(tt,Et)});var We=r(Ke);{var gt=tt=>{var ot=_r(),Et={};C(Vt=>{Et!==(Et=Vt)&&(ot.value=(ot.__value=Vt)??"")},[()=>q(t(P).lh,t(P).dLh)]),f(tt,ot)},xt=u(()=>!w.some(tt=>tt.value===q(t(P).lh,t(P).dLh)));I(We,tt=>{t(xt)&&tt(gt)})}var ht;Na(Ae);var Ee=r(oe,2),Oe=r(s(Ee),2);re(Oe,20,()=>p,tt=>tt,(tt,ot)=>{const Et=u(()=>q(t(P).wt,t(P).dWt));var Vt=Lo(),ca=s(Vt);C(Co=>{lt(Vt,Co),Ye(Vt,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Et)===ot?"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"}`),b(ca,ot)},[()=>`font-weight:${parseInt(ot)}`]),x("click",Vt,()=>_e(t(P).wt,ot,t(P).dWt)),f(tt,Vt)});var At=r(Ee,2);{var oa=tt=>{var ot=Bp(),Et=r(s(ot),2),Vt=s(Et);re(Vt,17,()=>E,va=>va.value,(va,Oo)=>{var So=vs(),Es=s(So),dn={};C(()=>{b(Es,t(Oo).label),dn!==(dn=t(Oo).value)&&(So.value=(So.__value=t(Oo).value)??"")}),f(va,So)});var ca=r(Vt);{var Co=va=>{var Oo=_r(),So={};C(Es=>{So!==(So=Es)&&(Oo.value=(Oo.__value=Es)??"")},[()=>q(t(P).ls,t(P).dLs)]),f(va,Oo)},to=u(()=>!E.some(va=>va.value===q(t(P).ls,t(P).dLs)));I(ca,va=>{t(to)&&va(Co)})}var Aa;Na(Et),C(va=>{Aa!==(Aa=va)&&(Et.value=(Et.__value=va)??"",Ba(Et,va))},[()=>q(t(P).ls,t(P).dLs)]),x("change",Et,va=>_e(t(P).ls,va.target.value,t(P).dLs)),f(tt,ot)};I(At,tt=>{t(P).ls&&tt(oa)})}var qt=r(At,2);{var Zt=tt=>{const ot=u(()=>`--sf-${t(P).id}-max-width`);var Et=Up(),Vt=r(s(Et),2),ca=r(Vt,2);{var Co=to=>{var Aa=wr();x("click",Aa,()=>e.onReset(t(ot))),f(to,Aa)};I(ca,to=>{t(ot)in e.overrides&&to(Co)})}C(()=>Xt(Vt,e.overrides[t(ot)]??"")),x("input",Vt,to=>{const Aa=to.target.value.trim();Aa?e.onSet(t(ot),Aa):e.onReset(t(ot))}),f(tt,Et)};I(qt,tt=>{t(P).id!=="body"&&tt(Zt)})}var pa=r(qt,2),_a=s(pa);{var _o=tt=>{var ot=zp(),Et=s(ot);C(()=>b(Et,`reset ${t(P).label??""}`)),x("click",ot,()=>{const Vt={[t(P).size]:null,[t(P).lh]:null,[t(P).wt]:null};t(P).ls&&(Vt[t(P).ls]=null),e.onBulkChange(Vt)}),f(tt,ot)};I(_a,tt=>{(t(P).size in e.overrides||t(P).lh in e.overrides||t(P).wt in e.overrides||t(P).ls&&t(P).ls in e.overrides)&&tt(_o)})}C((tt,ot)=>{lt(Ne,`font-size:${t(ue)}rem; font-weight:${t(de)}; letter-spacing:${t(me)}em; line-height:${t(Me)}; font-family:${t(P).id==="body"?t(xe)||"inherit":t(ke)||t(xe)||"inherit"}`),Q!==(Q=tt)&&(Xe.value=(Xe.__value=tt)??"",Ba(Xe,tt)),ht!==(ht=ot)&&(Ae.value=(Ae.__value=ot)??"",Ba(Ae,ot))},[()=>q(t(P).size,t(P).dSize),()=>q(t(P).lh,t(P).dLh)]),x("change",Xe,tt=>_e(t(P).size,tt.target.value,t(P).dSize)),x("change",Ae,tt=>_e(t(P).lh,tt.target.value,t(P).dLh)),f(H,Ce)};I(Re,H=>{t(Ie)&&H(nt)})}var it=r(_t,4),Ct=s(it),bt=r(s(Ct),2),Dt=s(bt),St=r(Ct,2);{var Ut=H=>{var Ce=Tp(),ce=fe(Ce);re(ce,16,()=>[{label:"Body strong",tokenName:"--sf-font-weight-strong"},{label:"Interactive",tokenName:"--sf-font-weight-interactive"}],Q=>Q.tokenName,(Q,oe)=>{const Ae=u(()=>m[oe.tokenName]??"600"),Ke=u(()=>e.overrides[oe.tokenName]??t(Ae)),We=u(()=>oe.tokenName in e.overrides);var gt=Gn(),xt=s(gt),ht=s(xt),Ee=s(ht),Oe=r(ht,2);{var At=qt=>{var Zt=jn();x("click",Zt,()=>e.onReset(oe.tokenName)),f(qt,Zt)};I(Oe,qt=>{t(We)&&qt(At)})}var oa=r(xt,2);re(oa,20,()=>p,qt=>qt,(qt,Zt)=>{var pa=Lo(),_a=s(pa);C(_o=>{lt(pa,_o),Ye(pa,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ke)===Zt?"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"}`),b(_a,Zt)},[()=>`font-weight: ${parseInt(Zt)}`]),x("click",pa,()=>Zt===t(Ae)&&!t(We)?void 0:Zt===t(Ae)?e.onReset(oe.tokenName):e.onSet(oe.tokenName,Zt)),f(qt,pa)}),C(()=>b(Ee,`${oe.label??""} weight`)),f(Q,gt)});var Le=r(ce,2),Ne=r(s(Le),2);re(Ne,20,()=>[["Italic","italic"],["Normal","normal"]],([Q,oe])=>oe,(Q,oe)=>{var Ae=u(()=>Pa(oe,2));let Ke=()=>t(Ae)[0],We=()=>t(Ae)[1];const gt=u(()=>e.overrides["--sf-body-em-style"]??"italic");var xt=Ep(),ht=s(xt),Ee=s(ht);C(()=>{Ye(xt,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(gt)===We()?"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"}`),lt(ht,`font-style: ${We()}`),b(Ee,Ke())}),x("click",xt,()=>We()==="italic"?e.onReset("--sf-body-em-style"):e.onSet("--sf-body-em-style",We())),f(Q,xt)});var Qe=r(Le,2);{let Q=u(()=>_("--sf-code-font-size",.875)),oe=u(()=>"--sf-code-font-size"in e.overrides);ut(Qe,{label:"Code font size",get value(){return t(Q)},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 t(oe)},onChange:Ae=>e.onSet("--sf-code-font-size",`${Ae}em`),onReset:()=>e.onReset("--sf-code-font-size")})}var Xe=r(Qe,2);re(Xe,16,()=>[{label:"Heading wrap",token:"--sf-heading-text-wrap",defaultVal:"balance"},{label:"Body wrap",token:"--sf-body-text-wrap",defaultVal:"pretty"}],Q=>Q.token,(Q,oe)=>{const Ae=u(()=>e.overrides[oe.token]??oe.defaultVal);var Ke=Rp(),We=s(Ke),gt=s(We),xt=r(We,2);re(xt,21,()=>d,ht=>ht.value,(ht,Ee)=>{var Oe=Lo(),At=s(Oe);C(()=>{Ye(Oe,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Ae)===t(Ee).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"}`),b(At,t(Ee).label)}),x("click",Oe,()=>t(Ee).value===oe.defaultVal&&!(oe.token in e.overrides)?void 0:t(Ee).value===oe.defaultVal?e.onReset(oe.token):e.onSet(oe.token,t(Ee).value)),f(ht,Oe)}),C(()=>b(gt,oe.label)),f(Q,Ke)});var yt=r(Xe,2),kt=r(s(yt),2);Y(kt,"placeholder",'" ↗"');var Pt=r(kt,2);{var wt=Q=>{var oe=wr();x("click",oe,()=>e.onReset("--sf-link-external-marker")),f(Q,oe)};I(Pt,Q=>{"--sf-link-external-marker"in e.overrides&&Q(wt)})}C(()=>Xt(kt,e.overrides["--sf-link-external-marker"]??"")),x("input",kt,Q=>{const oe=Q.target.value;oe?e.onSet("--sf-link-external-marker",oe):e.onReset("--sf-link-external-marker")}),f(H,Ce)};I(St,H=>{t(he)&&H(Ut)})}var ct=r(it,4),jt=s(ct),ea=r(s(jt),2),ia=s(ea),Ze=r(jt,2);{var mt=H=>{var Ce=Mp(),ce=r(fe(Ce),2);re(ce,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}],Le=>Le.token,(Le,Ne)=>{var Qe=Dp(),Xe=s(Qe),yt=s(Xe),kt=s(yt),Pt=r(yt,2);{var wt=oe=>{var Ae=Hn();x("click",Ae,()=>e.onReset(Ne.token)),f(oe,Ae)};I(Pt,oe=>{Ne.token in e.overrides&&oe(wt)})}var Q=r(Xe,2);re(Q,20,()=>p,oe=>oe,(oe,Ae)=>{const Ke=u(()=>e.overrides[Ne.token]??String(Ne.def));var We=Lo(),gt=s(We);C(xt=>{lt(We,xt),Ye(We,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ke)===Ae?"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"}`),b(gt,Ae)},[()=>`font-weight:${parseInt(Ae)}`]),x("click",We,()=>Ae===String(Ne.def)&&!(Ne.token in e.overrides)?void 0:Ae===String(Ne.def)?e.onReset(Ne.token):e.onSet(Ne.token,Ae)),f(oe,We)}),C(()=>b(kt,Ne.label)),f(Le,Qe)}),f(H,Ce)};I(Ze,H=>{t(J)&&H(mt)})}var Ot=r(ct,4),Rt=s(Ot),ne=r(s(Rt),2),Je=s(ne),ft=r(Rt,2);{var Lt=H=>{var Ce=Fp(),ce=fe(Ce);{let Qe=u(()=>"--sf-text-display-base-min"in e.overrides||"--sf-text-display-base-max"in e.overrides);Os(ce,{title:"Display base size",get minValue(){return t(A)},get maxValue(){return t(T)},min:1.5,max:6,step:.05,unit:"rem",previewKind:"type",get overridden(){return t(Qe)},onReset:()=>{e.onReset("--sf-text-display-base-min"),e.onReset("--sf-text-display-base-max")},onMinChange:Xe=>e.onSet("--sf-text-display-base-min",String(Xe)),onMaxChange:Xe=>e.onSet("--sf-text-display-base-max",String(Xe))})}var Le=r(ce,2);re(Le,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}],Qe=>Qe.token,(Qe,Xe)=>{var yt=Np(),kt=s(yt),Pt=s(kt),wt=r(kt,2);{let Q=u(()=>_(Xe.token,Xe.def)),oe=u(()=>Xe.token in e.overrides);ut(wt,{label:"",get value(){return t(Q)},min:.8,max:1.5,step:.025,get overridden(){return t(oe)},onChange:Ae=>e.onSet(Xe.token,String(Ae)),onReset:()=>e.onReset(Xe.token)})}C(()=>b(Pt,Xe.label)),f(Qe,yt)});var Ne=r(Le,2);re(Ne,16,()=>[{label:"Display",tokenName:"--sf-font-weight-display"},{label:"Heading",tokenName:"--sf-font-weight-heading"}],Qe=>Qe.tokenName,(Qe,Xe)=>{const yt=u(()=>m[Xe.tokenName]??"700"),kt=u(()=>e.overrides[Xe.tokenName]??t(yt)),Pt=u(()=>Xe.tokenName in e.overrides);var wt=Gn(),Q=s(wt),oe=s(Q),Ae=s(oe),Ke=r(oe,2);{var We=xt=>{var ht=jn();x("click",ht,()=>e.onReset(Xe.tokenName)),f(xt,ht)};I(Ke,xt=>{t(Pt)&&xt(We)})}var gt=r(Q,2);re(gt,20,()=>p,xt=>xt,(xt,ht)=>{var Ee=Lo(),Oe=s(Ee);C(At=>{lt(Ee,At),Ye(Ee,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(kt)===ht?"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"}`),b(Oe,ht)},[()=>`font-weight: ${parseInt(ht)}`]),x("click",Ee,()=>ht===t(yt)&&!t(Pt)?void 0:ht===t(yt)?e.onReset(Xe.tokenName):e.onSet(Xe.tokenName,ht)),f(xt,Ee)}),C(()=>b(Ae,`${Xe.label??""} weight`)),f(Qe,wt)}),f(H,Ce)};I(ft,H=>{t(ve)&&H(Lt)})}var Yt=r(Ot,4),ge=s(Yt),Fe=r(s(ge),2),rt=s(Fe),Ve=r(ge,2);{var Mt=H=>{var Ce=Gp(),ce=r(fe(Ce),2);{let wt=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Os(ce,{title:"Viewport range",get minValue(){return t(He)},get maxValue(){return t(te)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(wt)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:Q=>e.onSet("--sf-fluid-min-vw",String(Q)),onMaxChange:Q=>e.onSet("--sf-fluid-max-vw",String(Q))})}var Le=r(ce,2);{let wt=u(()=>"--sf-text-base-min"in e.overrides||"--sf-text-base-max"in e.overrides);Os(Le,{title:"Base size & ratio",get minValue(){return t(R)},get maxValue(){return t(D)},min:.7,max:2,step:.01,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"type",get overridden(){return t(wt)},onReset:()=>{e.onReset("--sf-text-base-min"),e.onReset("--sf-text-base-max")},onMinChange:Q=>e.onSet("--sf-text-base-min",String(Q)),onMaxChange:Q=>e.onSet("--sf-text-base-max",String(Q)),get ratioPresets(){return o},get ratioMin(){return t(z)},get ratioMax(){return t(L)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:Q=>e.onSet("--sf-text-ratio-min",String(Q)),onRatioMaxChange:Q=>e.onSet("--sf-text-ratio-max",String(Q))})}var Ne=r(Le,2);re(Ne,21,()=>S,wt=>wt.name,(wt,Q)=>{Fo(wt,{get knob(){return t(Q)},get overrides(){return e.overrides},onChange:(oe,Ae)=>Ae===null?e.onReset(oe):e.onSet(oe,Ae)})});var Qe=r(Ne,2),Xe=r(s(Qe),2);re(Xe,21,()=>y,wt=>wt.token,(wt,Q)=>{{let oe=u(()=>Se(t(Q))),Ae=u(()=>`${t(Q).token} — ${t(Q).label.toLowerCase()} line height`),Ke=u(()=>t(Q).token in e.overrides);ut(wt,{get label(){return t(Q).label},get value(){return t(oe)},min:1,max:2.2,step:.05,get help(){return t(Ae)},get overridden(){return t(Ke)},onChange:We=>e.onSet(t(Q).token,String(We)),onReset:()=>e.onReset(t(Q).token)})}});var yt=r(Qe,2);{let wt=u(()=>"--sf-leading-taper"in e.overrides);ut(yt,{label:"Leading taper",get value(){return t(N)},min:0,max:.5,step:.01,help:"How aggressively large display sizes shrink their line-height.",get overridden(){return t(wt)},onChange:Q=>e.onSet("--sf-leading-taper",String(Q)),onReset:()=>e.onReset("--sf-leading-taper")})}var kt=r(yt,2),Pt=r(s(kt),4);re(Pt,21,()=>v,wt=>wt.token,(wt,Q)=>{var oe=jp(),Ae=s(oe),Ke=s(Ae),We=s(Ke),gt=r(Ke,2);{var xt=Ee=>{var Oe=Hn();x("click",Oe,()=>e.onReset(t(Q).token)),f(Ee,Oe)};I(gt,Ee=>{t(Q).token in e.overrides&&Ee(xt)})}var ht=r(Ae,2);{let Ee=u(()=>at(t(Q)));Zo(ht,{get value(){return t(Ee)},min:-.1,max:.2,step:.005,unit:"em",onChange:Oe=>e.onSet(t(Q).token,`${Oe}em`)})}C(()=>b(We,t(Q).label)),f(wt,oe)}),f(H,Ce)};I(Ve,H=>{t(je)&&H(Mt)})}var aa=r(Yt,4),zt=s(aa),It=r(s(zt),2),Nt=s(It),la=r(zt,2);{var xa=H=>{var Ce=qp();re(Ce,21,()=>[...h].reverse(),({label:ce,factor:Le})=>ce,(ce,Le)=>{let Ne=()=>t(Le).label,Qe=()=>t(Le).factor;const Xe=u(()=>(t(R)+t(D))/2),yt=u(()=>t(Xe)*Qe()*t($));var kt=Hp(),Pt=s(kt),wt=s(Pt),Q=r(Pt,2),oe=r(Q,2),Ae=s(oe);C((Ke,We)=>{b(wt,Ne()),lt(Q,Ke),b(Ae,`${We??""}rem`)},[()=>`font-size: ${Math.min(t(yt),2.5)}rem; font-family: ${t(xe)||"inherit"}`,()=>t(yt).toFixed(2)]),f(ce,kt)}),f(H,Ce)};I(la,H=>{t($e)&&H(xa)})}var se=r(aa,4),V=s(se),F=r(s(V),2),ee=s(F),be=r(V,2);{var Z=H=>{var Ce=Kp(),ce=r(fe(Ce),2);re(ce,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"}],Le=>Le.token,(Le,Ne)=>{var Qe=Vp(),Xe=s(Qe),yt=s(Xe),kt=r(Xe,2),Pt=r(kt,2);{var wt=Q=>{var oe=Cr();x("click",oe,()=>e.onReset(Ne.token)),f(Q,oe)};I(Pt,Q=>{Ne.token in e.overrides&&Q(wt)})}C(()=>{b(yt,Ne.label),Xt(kt,e.overrides[Ne.token]??""),Y(kt,"placeholder",Ne.def)}),x("input",kt,Q=>{const oe=Q.target.value.trim();oe?e.onSet(Ne.token,oe):e.onReset(Ne.token)}),f(Le,Qe)}),f(H,Ce)};I(be,H=>{t(M)&&H(Z)})}var j=r(se,4),ie=s(j),pe=r(s(ie),2),K=s(pe),le=r(ie,2);{var De=H=>{var Ce=Wp(),ce=r(fe(Ce),2),Le=r(s(ce),2);re(Le,20,()=>[["tabular-nums","tabular-nums (default)"],["proportional-nums","proportional-nums"],["normal","normal"]],([Ke,We])=>Ke,(Ke,We)=>{var gt=u(()=>Pa(We,2));let xt=()=>t(gt)[0],ht=()=>t(gt)[1];const Ee=u(()=>e.overrides["--sf-font-numeric"]??"tabular-nums");var Oe=Lo(),At=s(Oe);C(()=>{Ye(Oe,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(Ee)===xt()?"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"}`),b(At,ht())}),x("click",Oe,()=>xt()==="tabular-nums"?e.onReset("--sf-font-numeric"):e.onSet("--sf-font-numeric",xt())),f(Ke,Oe)});var Ne=r(ce,2),Qe=r(s(Ne),2);re(Qe,20,()=>[["auto","auto (default)"],["none","none"]],([Ke,We])=>Ke,(Ke,We)=>{var gt=u(()=>Pa(We,2));let xt=()=>t(gt)[0],ht=()=>t(gt)[1];const Ee=u(()=>e.overrides["--sf-optical-sizing"]??"auto");var Oe=Lo(),At=s(Oe);C(()=>{Ye(Oe,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Ee)===xt()?"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"}`),b(At,ht())}),x("click",Oe,()=>xt()==="auto"?e.onReset("--sf-optical-sizing"):e.onSet("--sf-optical-sizing",xt())),f(Ke,Oe)});var Xe=r(Ne,2),yt=r(s(Xe),2),kt=r(yt,2);{var Pt=Ke=>{var We=Cr();x("click",We,()=>e.onReset("--sf-font-features")),f(Ke,We)};I(kt,Ke=>{"--sf-font-features"in e.overrides&&Ke(Pt)})}var wt=r(Xe,2),Q=r(s(wt),2),oe=r(Q,2);{var Ae=Ke=>{var We=Cr();x("click",We,()=>e.onReset("--sf-font-variation")),f(Ke,We)};I(oe,Ke=>{"--sf-font-variation"in e.overrides&&Ke(Ae)})}C(()=>{Xt(yt,e.overrides["--sf-font-features"]??""),Xt(Q,e.overrides["--sf-font-variation"]??"")}),x("input",yt,Ke=>{const We=Ke.target.value.trim();We?e.onSet("--sf-font-features",We):e.onReset("--sf-font-features")}),x("input",Q,Ke=>{const We=Ke.target.value.trim();We?e.onSet("--sf-font-variation",We):e.onReset("--sf-font-variation")}),f(H,Ce)};I(le,H=>{t(et)&&H(De)})}C(()=>{Y(Be,"aria-expanded",t(ye)),b(dt,t(ye)?"▲":"▼"),Y(vt,"aria-expanded",t(Ie)),b(Pe,t(Ie)?"▲":"▼"),Y(Ct,"aria-expanded",t(he)),b(Dt,t(he)?"▲":"▼"),Y(jt,"aria-expanded",t(J)),b(ia,t(J)?"▲":"▼"),Y(Rt,"aria-expanded",t(ve)),b(Je,t(ve)?"▲":"▼"),Y(ge,"aria-expanded",t(je)),b(rt,t(je)?"▲":"▼"),Y(zt,"aria-expanded",t($e)),b(Nt,t($e)?"▲":"▼"),Y(V,"aria-expanded",t(M)),b(ee,t(M)?"▲":"▼"),Y(ie,"aria-expanded",t(et)),b(K,t(et)?"▲":"▼")}),x("click",Be,()=>{O(ye,!t(ye))}),x("click",vt,()=>{O(Ie,!t(Ie))}),x("click",Ct,()=>{O(he,!t(he))}),x("click",jt,()=>{O(J,!t(J))}),x("click",Rt,()=>{O(ve,!t(ve))}),x("click",ge,()=>{O(je,!t(je))}),x("click",zt,()=>{O($e,!t($e))}),x("click",V,()=>{O(M,!t(M))}),x("click",ie,()=>{O(et,!t(et))}),f(a,Te),$t()}ta(["click","change","input"]);var Jp=g('<p class="text-[10px] text-slate-600 leading-relaxed">The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).</p> <!> <!> <!>',1),Xp=g('<button><span class="text-[11px] font-bold"> </span> <span class="text-[9px] text-slate-500 text-center"> </span></button>'),Qp=g('<div class="grid grid-cols-3 gap-2"></div>'),$p=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale — viewport width, base unit and ratio per endpoint.
-        The viewport range is shared with the type scale.</p> <!> <!> <div class="space-y-4"></div>`,1),em=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 text-right shrink-0"> </span> <div class="bg-indigo-500/50 rounded shrink-0 h-3"></div> <span class="text-[9px] font-mono text-slate-500 shrink-0"> </span></div>'),tm=g('<div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>'),am=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Layout gap</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Density presets</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Space scale preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function om(a,e){Qt(e,!0);const o=[{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}],n=[{label:"Compact",desc:"Tight UI, data-heavy",patch:{"--sf-space-scale":"0.75","--sf-section-scale":"0.7","--sf-space-base-min":"0.75","--sf-space-base-max":"1.25"}},{label:"Comfortable",desc:"Balanced — default",patch:{"--sf-space-scale":null,"--sf-section-scale":null,"--sf-space-base-min":null,"--sf-space-base-max":null}},{label:"Spacious",desc:"Generous, editorial",patch:{"--sf-space-scale":"1.3","--sf-section-scale":"1.4","--sf-space-base-min":"1.25","--sf-space-base-max":"2.75"}}],l=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],i=No.spacing??[];function c(Ue,ae){const q=parseFloat(e.overrides[Ue]??"");return isNaN(q)?ae:q}let d=u(()=>c("--sf-space-ratio-min",1.25)),p=u(()=>c("--sf-space-ratio-max",1.333)),m=u(()=>c("--sf-space-base-min",1)),h=u(()=>c("--sf-space-base-max",2)),v=u(()=>c("--sf-space-scale",1)),y=u(()=>c("--sf-gap",1)),k=u(()=>c("--sf-gutter",1.5)),w=u(()=>c("--sf-content-gap",.5)),E=u(()=>c("--sf-fluid-min-vw",22.5)),B=u(()=>c("--sf-fluid-max-vw",90)),U=u(()=>n.find(Ue=>Object.entries(Ue.patch).every(([ae,q])=>q===null?!(ae in e.overrides):e.overrides[ae]===q))),P=G(!1),S=G(!1),_=G(!1),z=G(!1);var L=am(),R=s(L),D=s(R),A=r(s(D),2),T=s(A),N=r(D,2);{var $=Ue=>{var ae=Jp(),q=r(fe(ae),2);{let de=u(()=>"--sf-gap"in e.overrides);ut(q,{label:"Gap",get value(){return t(y)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)",get overridden(){return t(de)},onChange:me=>e.onSet("--sf-gap",`${me}rem`),onReset:()=>e.onReset("--sf-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-gap"]},onRawSet:me=>e.onSet("--sf-gap",me)})}var _e=r(q,2);{let de=u(()=>"--sf-content-gap"in e.overrides);ut(_e,{label:"Content gap",get value(){return t(w)},min:0,max:2,step:.0625,unit:"rem",help:"--sf-content-gap — tighter gap within components (defaults to space-s)",get overridden(){return t(de)},onChange:me=>e.onSet("--sf-content-gap",`${me}rem`),onReset:()=>e.onReset("--sf-content-gap"),rawDefault:"var(--sf-space-s)",get currentRaw(){return e.overrides["--sf-content-gap"]},onRawSet:me=>e.onSet("--sf-content-gap",me)})}var ue=r(_e,2);{let de=u(()=>"--sf-gutter"in e.overrides);ut(ue,{label:"Gutter",get value(){return t(k)},min:0,max:6,step:.0625,unit:"rem",help:"--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)",get overridden(){return t(de)},onChange:me=>e.onSet("--sf-gutter",`${me}rem`),onReset:()=>e.onReset("--sf-gutter"),rawDefault:"var(--sf-space-l)",get currentRaw(){return e.overrides["--sf-gutter"]},onRawSet:me=>e.onSet("--sf-gutter",me)})}f(Ue,ae)};I(N,Ue=>{t(P)&&Ue($)})}var He=r(R,4),te=s(He),ye=r(s(te),2),Ie=s(ye),he=r(te,2);{var ve=Ue=>{var ae=Qp();re(ae,21,()=>n,q=>q.label,(q,_e)=>{var ue=Xp(),de=s(ue),me=s(de),Me=r(de,2),Te=s(Me);C(()=>{Ye(ue,1,`flex flex-col items-center gap-1 p-3 rounded-xl border transition-all cursor-pointer ${t(U)?.label===t(_e).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"}`),b(me,t(_e).label),b(Te,t(_e).desc)}),x("click",ue,()=>e.onBulkChange(t(_e).patch)),f(q,ue)}),f(Ue,ae)};I(he,Ue=>{t(S)&&Ue(ve)})}var je=r(He,4),$e=s(je),et=r(s($e),2),M=s(et),J=r($e,2);{var xe=Ue=>{var ae=$p(),q=r(fe(ae),2);{let de=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Os(q,{title:"Viewport range",get minValue(){return t(E)},get maxValue(){return t(B)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(de)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:me=>e.onSet("--sf-fluid-min-vw",String(me)),onMaxChange:me=>e.onSet("--sf-fluid-max-vw",String(me))})}var _e=r(q,2);{let de=u(()=>"--sf-space-base-min"in e.overrides||"--sf-space-base-max"in e.overrides);Os(_e,{title:"Base unit & ratio",get minValue(){return t(m)},get maxValue(){return t(h)},min:.5,max:4,step:.05,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"space",get overridden(){return t(de)},onReset:()=>{e.onReset("--sf-space-base-min"),e.onReset("--sf-space-base-max")},onMinChange:me=>e.onSet("--sf-space-base-min",String(me)),onMaxChange:me=>e.onSet("--sf-space-base-max",String(me)),get ratioPresets(){return o},get ratioMin(){return t(d)},get ratioMax(){return t(p)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:me=>e.onSet("--sf-space-ratio-min",String(me)),onRatioMaxChange:me=>e.onSet("--sf-space-ratio-max",String(me))})}var ue=r(_e,2);re(ue,21,()=>i,de=>de.name,(de,me)=>{Fo(de,{get knob(){return t(me)},get overrides(){return e.overrides},onChange:(Me,Te)=>Te===null?e.onReset(Me):e.onSet(Me,Te)})}),f(Ue,ae)};I(J,Ue=>{t(_)&&Ue(xe)})}var ke=r(je,4),W=s(ke),we=r(s(W),2),qe=s(we),at=r(W,2);{var Se=Ue=>{var ae=tm();re(ae,22,()=>l,q=>q,(q,_e,ue)=>{const de=u(()=>(t(m)+t(h))/2),me=u(()=>(t(d)+t(p))/2),Me=u(()=>t(ue)-4),Te=u(()=>t(Me)>=0?t(de)*Math.pow(t(me),t(Me)):t(de)/Math.pow(t(me),-t(Me))),ze=u(()=>t(Te)*t(v)),Be=u(()=>Math.min(t(ze)*28,240));var Ge=em(),dt=s(Ge),st=s(dt),pt=r(dt,2),_t=r(pt,2),vt=s(_t);C(X=>{b(st,_e),lt(pt,`width: ${t(Be)}px; min-width: 3px`),b(vt,`${X??""}rem`)},[()=>t(ze).toFixed(2)]),f(q,Ge)}),f(Ue,ae)};I(at,Ue=>{t(z)&&Ue(Se)})}C(()=>{Y(D,"aria-expanded",t(P)),b(T,t(P)?"▲":"▼"),Y(te,"aria-expanded",t(S)),b(Ie,t(S)?"▲":"▼"),Y($e,"aria-expanded",t(_)),b(M,t(_)?"▲":"▼"),Y(W,"aria-expanded",t(z)),b(qe,t(z)?"▲":"▼")}),x("click",D,()=>{O(P,!t(P))}),x("click",te,()=>{O(S,!t(S))}),x("click",$e,()=>{O(_,!t(_))}),x("click",W,()=>{O(z,!t(z))}),f(a,L),$t()}ta(["click"]);var sm=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-12 text-right shrink-0"> </span> <div class="flex-1 h-4 bg-white/5 rounded overflow-hidden"><div class="h-full bg-indigo-500/30 border-r border-indigo-400/40 rounded"></div></div> <span class="text-[9px] font-mono text-slate-500 w-14 shrink-0"> </span></div>'),rm=g('<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Narrow</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Prose</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Default</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Wide</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>',1),nm=g("<!> <!>",1),lm=g('<div class="h-8 bg-indigo-500/20 border border-indigo-500/20 rounded text-[8px] font-mono text-indigo-400/60 flex items-center justify-center">col</div>'),im=g('<!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named sizes (grid-min-xs → 2xl)</div> <div class="space-y-1.5"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="text-[9px] text-slate-600 mb-2 font-mono">Preview at 360px panel width</div> <div class="grid gap-1"></div></div>',1),cm=g('<div class="w-8 h-1.5 bg-slate-600/60 rounded"></div>'),dm=g('<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 overflow-hidden"><div class="flex items-center px-3 bg-indigo-500/10 border-b border-white/8"><div class="w-16 h-2 bg-indigo-400/40 rounded"></div> <div class="ml-auto flex gap-2"></div></div> <div class="p-2 text-[9px] text-slate-600 font-mono"> </div></div>',1),fm=g('<p class="text-[9px] text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p> <div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div>',1),um=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex gap-2 items-stretch" style="height: 60px"><div class="bg-indigo-500/15 border border-indigo-500/20 rounded flex-shrink-0 flex items-center justify-center"><span class="text-[8px] font-mono text-indigo-400/60 rotate-90 whitespace-nowrap"> </span></div> <div class="flex-1 bg-white/4 rounded"></div></div>',1),pm=g('<div class="mt-2 space-y-2"></div>'),qn=g('<option style="background:#16161e;"> </option>'),Ns=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Vn=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <select class="flex-1 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <!></div>'),Kn=g("<button> </button>"),mm=g('<div id="more-layout-primitives" class="mt-3 space-y-5"><section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Switcher</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Sidebar content</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cluster</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Equal grid</div> <!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named column counts (equal-min-col-2/3/4/6)</div> <div class="space-y-1.5"></div></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cover</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Frame ratio</div> <p class="text-[9px] text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p> <div class="grid grid-cols-5 gap-1"></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Reel</div> <p class="text-[9px] text-slate-600">--sf-reel-item-width — width of each item in a horizontal .sf-reel</p> <div class="grid grid-cols-4 gap-1"></div> <div class="flex items-center gap-2 pt-0.5"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Height</span> <input type="text" placeholder="auto" class="flex-1 min-w-0 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"/> <!></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Imposter</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Content grid (breakout)</div> <!> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Alternate (zigzag)</div> <!></section></div>'),vm=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),hm=g('<div class="mt-2 space-y-2"><p class="text-[9px] text-slate-600">Override the built-in named aspect ratios used by <span class="font-mono text-slate-400">.sf-ratio-*</span> utilities.</p> <!></div>'),gm=g('<div class="mt-2 space-y-3"><p class="text-[9px] text-slate-600">Default values for the <span class="font-mono text-slate-400">.sf-bg</span> full-bleed background utility.</p> <!> <!> <!> <!></div>'),bm=g('<div class="p-4 space-y-6"><section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Container widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Center wrapper</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Auto grid</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Header height</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sticky offset</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sidebar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button 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"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Bento grid</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button 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"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">More layout primitives</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Named ratios</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Background layer (.sf-bg)</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function ym(a,e){Qt(e,!0);function o(F,ee){if(!F)return ee;const be=parseFloat(F);return isNaN(be)?ee:be}let n=u(()=>o(e.overrides["--sf-container-narrow"],38)),l=u(()=>o(e.overrides["--sf-container-prose"],65)),i=u(()=>o(e.overrides["--sf-container-default"],75)),c=u(()=>o(e.overrides["--sf-container-wide"],90)),d=u(()=>o(e.overrides["--sf-center-max"],75)),p=u(()=>o(e.overrides["--sf-center-gutter"],1)),m=u(()=>o(e.overrides["--sf-grid-min"],16)),h=u(()=>o(e.overrides["--sf-header-height-mobile"],3.5)),v=u(()=>o(e.overrides["--sf-header-height-desktop"],5)),y=u(()=>o(e.overrides["--sf-sidebar-width"],18)),k=u(()=>o(e.overrides["--sf-sticky-offset-mobile"],3.5)),w=u(()=>o(e.overrides["--sf-sticky-offset-desktop"],5));const E=[{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}];let B=G(!1),U=G(!1),P=G(!1),S=G(!1),_=G(!1),z=G(!1),L=G(!1),R=G(!1),D=G(!1),A=G(!1);function T(F){const ee=e.overrides[F.token];return ee?parseFloat(ee):F.default}let N=u(()=>o(e.overrides["--sf-switcher-threshold"],30)),$=u(()=>o(e.overrides["--sf-sidebar-min-width"],50)),He=u(()=>o(e.overrides["--sf-equal-min-col"],16)),te=u(()=>o(e.overrides["--sf-cover-min-height"],100)),ye=u(()=>o(e.overrides["--sf-imposter-margin"],1)),Ie=u(()=>o(e.overrides["--sf-breakout-width"],90)),he=u(()=>o(e.overrides["--sf-content-width"],75)),ve=u(()=>o(e.overrides["--sf-alternate-inner-gap"],1)),je=u(()=>e.overrides["--sf-frame-ratio"]??"16 / 9"),$e=u(()=>e.overrides["--sf-reel-item-width"]??"max-content");const et=["16 / 9","4 / 3","3 / 2","1 / 1","21 / 9"],M=[{label:"auto",value:"max-content"},{label:"12rem",value:"12rem"},{label:"16rem",value:"16rem"},{label:"20rem",value:"20rem"}];var J=bm(),xe=s(J),ke=s(xe),W=r(s(ke),2),we=s(W),qe=r(ke,2);{var at=F=>{var ee=rm(),be=fe(ee),Z=s(be),j=r(s(Z),2);{let ce=u(()=>"--sf-container-narrow"in e.overrides);ut(j,{label:"",get value(){return t(n)},min:20,max:60,step:1,unit:"rem",get overridden(){return t(ce)},onChange:Le=>e.onSet("--sf-container-narrow",`${Le}rem`),onReset:()=>e.onReset("--sf-container-narrow")})}var ie=r(Z,2),pe=r(s(ie),2);{let ce=u(()=>"--sf-container-prose"in e.overrides);ut(pe,{label:"",get value(){return t(l)},min:40,max:90,step:1,unit:"ch",get overridden(){return t(ce)},onChange:Le=>e.onSet("--sf-container-prose",`${Le}ch`),onReset:()=>e.onReset("--sf-container-prose")})}var K=r(ie,2),le=r(s(K),2);{let ce=u(()=>"--sf-container-default"in e.overrides);ut(le,{label:"",get value(){return t(i)},min:50,max:120,step:1,unit:"rem",get overridden(){return t(ce)},onChange:Le=>e.onSet("--sf-container-default",`${Le}rem`),onReset:()=>e.onReset("--sf-container-default")})}var De=r(K,2),H=r(s(De),2);{let ce=u(()=>"--sf-container-wide"in e.overrides);ut(H,{label:"",get value(){return t(c)},min:60,max:160,step:1,unit:"rem",get overridden(){return t(ce)},onChange:Le=>e.onSet("--sf-container-wide",`${Le}rem`),onReset:()=>e.onReset("--sf-container-wide")})}var Ce=r(be,2);re(Ce,21,()=>[{label:"narrow",value:t(n),max:t(c),unit:"rem"},{label:"prose",value:t(l),max:t(c)*1.5,unit:"ch"},{label:"default",value:t(i),max:t(c),unit:"rem"},{label:"wide",value:t(c),max:t(c),unit:"rem"}],ce=>ce.label,(ce,Le)=>{var Ne=sm(),Qe=s(Ne),Xe=s(Qe),yt=r(Qe,2),kt=s(yt),Pt=r(yt,2),wt=s(Pt);C(Q=>{b(Xe,t(Le).label),lt(kt,Q),b(wt,`${t(Le).value??""}${t(Le).unit??""}`)},[()=>`width: ${Math.min(t(Le).value/t(Le).max*100,100)}%`]),f(ce,Ne)}),f(F,ee)};I(qe,F=>{t(B)&&F(at)})}var Se=r(xe,4),Ue=s(Se),ae=r(s(Ue),2),q=s(ae),_e=r(Ue,2);{var ue=F=>{var ee=nm(),be=fe(ee);{let j=u(()=>"--sf-center-max"in e.overrides);ut(be,{label:"Max width",get value(){return t(d)},min:30,max:160,step:1,unit:"rem",help:"--sf-center-max — max-width of the .sf-center centering wrapper",get overridden(){return t(j)},onChange:ie=>e.onSet("--sf-center-max",`${ie}rem`),onReset:()=>e.onReset("--sf-center-max"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-center-max"]},onRawSet:ie=>e.onSet("--sf-center-max",ie)})}var Z=r(be,2);{let j=u(()=>"--sf-center-gutter"in e.overrides);ut(Z,{label:"Gutter",get value(){return t(p)},min:0,max:4,step:.125,unit:"rem",help:"--sf-center-gutter — minimum side padding inside the center wrapper",get overridden(){return t(j)},onChange:ie=>e.onSet("--sf-center-gutter",`${ie}rem`),onReset:()=>e.onReset("--sf-center-gutter"),rawDefault:"var(--sf-gutter)",get currentRaw(){return e.overrides["--sf-center-gutter"]},onRawSet:ie=>e.onSet("--sf-center-gutter",ie)})}f(F,ee)};I(_e,F=>{t(U)&&F(ue)})}var de=r(Se,4),me=s(de),Me=r(s(me),2),Te=s(Me),ze=r(me,2);{var Be=F=>{var ee=im(),be=fe(ee);{let K=u(()=>"--sf-grid-min"in e.overrides);ut(be,{label:"Grid min cell width",get value(){return t(m)},min:8,max:40,step:.5,unit:"rem",help:"sf-grid minimum column width — browser auto-fills columns",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-grid-min",`${le}rem`),onReset:()=>e.onReset("--sf-grid-min")})}var Z=r(be,2),j=r(s(Z),2);re(j,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}],K=>K.token,(K,le)=>{{let De=u(()=>o(e.overrides[le.token],le.def)),H=u(()=>le.token in e.overrides);ut(K,{get label(){return le.label},get value(){return t(De)},min:6,max:40,step:.5,unit:"rem",get overridden(){return t(H)},onChange:Ce=>e.onSet(le.token,`${Ce}rem`),onReset:()=>e.onReset(le.token)})}});var ie=r(Z,2),pe=r(s(ie),2);re(pe,20,()=>Array.from({length:8}),sn,(K,le)=>{var De=lm();f(K,De)}),C(K=>lt(pe,K),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(t(m)*16*.3,120)}px, 1fr))`]),f(F,ee)};I(ze,F=>{t(P)&&F(Be)})}var Ge=r(de,4),dt=s(Ge),st=r(s(dt),2),pt=s(st),_t=r(dt,2);{var vt=F=>{var ee=dm(),be=fe(ee),Z=s(be),j=r(s(Z),2);{let ce=u(()=>"--sf-header-height-mobile"in e.overrides);ut(j,{label:"",get value(){return t(h)},min:2,max:8,step:.25,unit:"rem",get overridden(){return t(ce)},onChange:Le=>e.onSet("--sf-header-height-mobile",`${Le}rem`),onReset:()=>e.onReset("--sf-header-height-mobile")})}var ie=r(Z,2),pe=r(s(ie),2);{let ce=u(()=>"--sf-header-height-desktop"in e.overrides);ut(pe,{label:"",get value(){return t(v)},min:3,max:10,step:.25,unit:"rem",get overridden(){return t(ce)},onChange:Le=>e.onSet("--sf-header-height-desktop",`${Le}rem`),onReset:()=>e.onReset("--sf-header-height-desktop")})}var K=r(be,2),le=s(K),De=r(s(le),2);re(De,20,()=>[1,2,3],ce=>ce,(ce,Le)=>{var Ne=cm();f(ce,Ne)});var H=r(le,2),Ce=s(H);C(ce=>{lt(le,ce),b(Ce,`${t(h)??""}rem mobile · ${t(v)??""}rem desktop`)},[()=>`height: ${Math.min(t(h)*12,64)}px`]),f(F,ee)};I(_t,F=>{t(S)&&F(vt)})}var X=r(Ge,4),Pe=s(X),Re=r(s(Pe),2),nt=s(Re),it=r(Pe,2);{var Ct=F=>{var ee=fm(),be=r(fe(ee),2),Z=s(be),j=r(s(Z),2);{let K=u(()=>"--sf-sticky-offset-mobile"in e.overrides);ut(j,{label:"",get value(){return t(k)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-sticky-offset-mobile",`${le}rem`),onReset:()=>e.onReset("--sf-sticky-offset-mobile"),rawDefault:"var(--sf-header-height-mobile)",get currentRaw(){return e.overrides["--sf-sticky-offset-mobile"]},onRawSet:le=>e.onSet("--sf-sticky-offset-mobile",le)})}var ie=r(Z,2),pe=r(s(ie),2);{let K=u(()=>"--sf-sticky-offset-desktop"in e.overrides);ut(pe,{label:"",get value(){return t(w)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-sticky-offset-desktop",`${le}rem`),onReset:()=>e.onReset("--sf-sticky-offset-desktop"),rawDefault:"var(--sf-header-height-desktop)",get currentRaw(){return e.overrides["--sf-sticky-offset-desktop"]},onRawSet:le=>e.onSet("--sf-sticky-offset-desktop",le)})}f(F,ee)};I(it,F=>{t(_)&&F(Ct)})}var bt=r(X,4),Dt=s(bt),St=r(s(Dt),2),Ut=s(St),ct=r(Dt,2);{var jt=F=>{var ee=um(),be=fe(ee);{let K=u(()=>"--sf-sidebar-width"in e.overrides);ut(be,{label:"Sidebar width",get value(){return t(y)},min:10,max:32,step:.5,unit:"rem",help:"--sf-sidebar-width — default sidebar / drawer width",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-sidebar-width",`${le}rem`),onReset:()=>e.onReset("--sf-sidebar-width")})}var Z=r(be,2),j=s(Z),ie=s(j),pe=s(ie);C(K=>{lt(j,K),b(pe,`${t(y)??""}rem`)},[()=>`width: ${Math.min(t(y)*3.5,100)}px`]),f(F,ee)};I(ct,F=>{t(z)&&F(jt)})}var ea=r(bt,4),ia=s(ea),Ze=r(s(ia),2),mt=s(Ze),Ot=r(ia,2);{var Rt=F=>{var ee=pm();re(ee,21,()=>E,be=>be.token,(be,Z)=>{{let j=u(()=>T(t(Z))),ie=u(()=>t(Z).token in e.overrides);ut(be,{get label(){return t(Z).label},get value(){return t(j)},get min(){return t(Z).min},get max(){return t(Z).max},get step(){return t(Z).step},get unit(){return t(Z).unit},get help(){return t(Z).token},get overridden(){return t(ie)},onChange:pe=>e.onSet(t(Z).token,t(Z).unit?`${pe}${t(Z).unit}`:String(pe)),onReset:()=>e.onReset(t(Z).token)})}}),f(F,ee)};I(Ot,F=>{t(L)&&F(Rt)})}var ne=r(ea,4),Je=s(ne),ft=r(s(Je),2),Lt=s(ft),Yt=r(Je,2);{var ge=F=>{var ee=mm(),be=s(ee),Z=r(s(be),2);{let Ee=u(()=>"--sf-switcher-threshold"in e.overrides);ut(Z,{label:"Threshold",get value(){return t(N)},min:10,max:60,step:1,unit:"rem",help:"--sf-switcher-threshold — width below which .sf-switcher stacks vertically",get overridden(){return t(Ee)},onChange:Oe=>e.onSet("--sf-switcher-threshold",`${Oe}rem`),onReset:()=>e.onReset("--sf-switcher-threshold")})}var j=r(be,2),ie=r(s(j),2);{let Ee=u(()=>"--sf-sidebar-min-width"in e.overrides);ut(ie,{label:"Content min width",get value(){return t($)},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 t(Ee)},onChange:Oe=>e.onSet("--sf-sidebar-min-width",`${Oe}%`),onReset:()=>e.onReset("--sf-sidebar-min-width")})}var pe=r(j,2),K=r(s(pe),2);re(K,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"]}],Ee=>Ee.token,(Ee,Oe)=>{var At=Vn(),oa=s(At),qt=s(oa),Zt=r(oa,2);re(Zt,20,()=>Oe.opts,tt=>tt,(tt,ot)=>{var Et=qn(),Vt=s(Et),ca={};C(()=>{b(Vt,ot),ca!==(ca=ot)&&(Et.value=(Et.__value=ot)??"")}),f(tt,Et)});var pa;Na(Zt);var _a=r(Zt,2);{var _o=tt=>{var ot=Ns();x("click",ot,()=>e.onReset(Oe.token)),f(tt,ot)};I(_a,tt=>{Oe.token in e.overrides&&tt(_o)})}C(()=>{b(qt,Oe.label),pa!==(pa=e.overrides[Oe.token]??Oe.def)&&(Zt.value=(Zt.__value=e.overrides[Oe.token]??Oe.def)??"",Ba(Zt,e.overrides[Oe.token]??Oe.def))}),x("change",Zt,tt=>{const ot=tt.target.value;ot===Oe.def?e.onReset(Oe.token):e.onSet(Oe.token,ot)}),f(Ee,At)});var le=r(pe,2),De=r(s(le),2);{let Ee=u(()=>"--sf-equal-min-col"in e.overrides);ut(De,{label:"Min column",get value(){return t(He)},min:6,max:36,step:.5,unit:"rem",help:"--sf-equal-min-col — minimum column width for .sf-equal",get overridden(){return t(Ee)},onChange:Oe=>e.onSet("--sf-equal-min-col",`${Oe}rem`),onReset:()=>e.onReset("--sf-equal-min-col")})}var H=r(De,2),Ce=r(s(H),2);re(Ce,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}],Ee=>Ee.token,(Ee,Oe)=>{{let At=u(()=>o(e.overrides[Oe.token],Oe.def)),oa=u(()=>Oe.token in e.overrides);ut(Ee,{get label(){return Oe.label},get value(){return t(At)},min:4,max:36,step:.5,unit:"rem",get overridden(){return t(oa)},onChange:qt=>e.onSet(Oe.token,`${qt}rem`),onReset:()=>e.onReset(Oe.token)})}});var ce=r(le,2),Le=r(s(ce),2);{let Ee=u(()=>"--sf-cover-min-height"in e.overrides);ut(Le,{label:"Min height",get value(){return t(te)},min:20,max:100,step:1,unit:"dvh",help:"--sf-cover-min-height — minimum height of the .sf-cover layout",get overridden(){return t(Ee)},onChange:Oe=>e.onSet("--sf-cover-min-height",`${Oe}dvh`),onReset:()=>e.onReset("--sf-cover-min-height")})}var Ne=r(ce,2),Qe=r(s(Ne),4);re(Qe,20,()=>et,Ee=>Ee,(Ee,Oe)=>{var At=Kn(),oa=s(At);C(qt=>{Ye(At,1,qt),b(oa,Oe)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${t(je).replace(/\s/g,"")===Oe.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"}`]),x("click",At,()=>Oe==="16 / 9"?e.onReset("--sf-frame-ratio"):e.onSet("--sf-frame-ratio",Oe)),f(Ee,At)});var Xe=r(Ne,2),yt=r(s(Xe),4);re(yt,21,()=>M,Ee=>Ee.value,(Ee,Oe)=>{var At=Kn(),oa=s(At);C(()=>{Ye(At,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${t($e)===t(Oe).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"}`),b(oa,t(Oe).label)}),x("click",At,()=>t(Oe).value==="max-content"?e.onReset("--sf-reel-item-width"):e.onSet("--sf-reel-item-width",t(Oe).value)),f(Ee,At)});var kt=r(yt,2),Pt=r(s(kt),2),wt=r(Pt,2);{var Q=Ee=>{var Oe=Ns();x("click",Oe,()=>e.onReset("--sf-reel-height")),f(Ee,Oe)};I(wt,Ee=>{"--sf-reel-height"in e.overrides&&Ee(Q)})}var oe=r(Xe,2),Ae=r(s(oe),2);{let Ee=u(()=>"--sf-imposter-margin"in e.overrides);ut(Ae,{label:"Margin",get value(){return t(ye)},min:0,max:4,step:.125,unit:"rem",help:"--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay",get overridden(){return t(Ee)},onChange:Oe=>e.onSet("--sf-imposter-margin",`${Oe}rem`),onReset:()=>e.onReset("--sf-imposter-margin"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-imposter-margin"]},onRawSet:Oe=>e.onSet("--sf-imposter-margin",Oe)})}var Ke=r(oe,2),We=r(s(Ke),2);{let Ee=u(()=>"--sf-content-width"in e.overrides);ut(We,{label:"Content width",get value(){return t(he)},min:40,max:120,step:1,unit:"rem",help:"--sf-content-width — default reading column width in .sf-content-grid",get overridden(){return t(Ee)},onChange:Oe=>e.onSet("--sf-content-width",`${Oe}rem`),onReset:()=>e.onReset("--sf-content-width"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-content-width"]},onRawSet:Oe=>e.onSet("--sf-content-width",Oe)})}var gt=r(We,2);{let Ee=u(()=>"--sf-breakout-width"in e.overrides);ut(gt,{label:"Breakout width",get value(){return t(Ie)},min:50,max:160,step:1,unit:"rem",help:"--sf-breakout-width — wide breakout column width in .sf-content-grid",get overridden(){return t(Ee)},onChange:Oe=>e.onSet("--sf-breakout-width",`${Oe}rem`),onReset:()=>e.onReset("--sf-breakout-width"),rawDefault:"var(--sf-container-wide)",get currentRaw(){return e.overrides["--sf-breakout-width"]},onRawSet:Oe=>e.onSet("--sf-breakout-width",Oe)})}var xt=r(Ke,2),ht=r(s(xt),2);{let Ee=u(()=>"--sf-alternate-inner-gap"in e.overrides);ut(ht,{label:"Inner gap",get value(){return t(ve)},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 t(Ee)},onChange:Oe=>e.onSet("--sf-alternate-inner-gap",`${Oe}rem`),onReset:()=>e.onReset("--sf-alternate-inner-gap"),rawDefault:"var(--sf-gap)",get currentRaw(){return e.overrides["--sf-alternate-inner-gap"]},onRawSet:Oe=>e.onSet("--sf-alternate-inner-gap",Oe)})}C(()=>Xt(Pt,e.overrides["--sf-reel-height"]??"")),x("input",Pt,Ee=>{const Oe=Ee.target.value.trim();Oe?e.onSet("--sf-reel-height",Oe):e.onReset("--sf-reel-height")}),f(F,ee)};I(Yt,F=>{t(R)&&F(ge)})}var Fe=r(ne,4),rt=s(Fe),Ve=r(s(rt),2),Mt=s(Ve),aa=r(rt,2);{var zt=F=>{var ee=hm(),be=r(s(ee),2);re(be,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"}],Z=>Z.token,(Z,j)=>{var ie=vm(),pe=s(ie),K=s(pe),le=r(pe,2),De=r(le,2);{var H=Ce=>{var ce=Ns();x("click",ce,()=>e.onReset(j.token)),f(Ce,ce)};I(De,Ce=>{j.token in e.overrides&&Ce(H)})}C(()=>{b(K,j.label),Xt(le,e.overrides[j.token]??""),Y(le,"placeholder",j.def)}),x("input",le,Ce=>{const ce=Ce.target.value.trim();ce?e.onSet(j.token,ce):e.onReset(j.token)}),f(Z,ie)}),f(F,ee)};I(aa,F=>{t(A)&&F(zt)})}var It=r(Fe,4),Nt=s(It),la=r(s(Nt),2),xa=s(la),se=r(Nt,2);{var V=F=>{var ee=gm(),be=r(s(ee),2);re(be,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"]}],pe=>pe.token,(pe,K)=>{var le=Vn(),De=s(le),H=s(De),Ce=r(De,2);re(Ce,20,()=>K.opts,Qe=>Qe,(Qe,Xe)=>{var yt=qn(),kt=s(yt),Pt={};C(()=>{b(kt,Xe),Pt!==(Pt=Xe)&&(yt.value=(yt.__value=Xe)??"")}),f(Qe,yt)});var ce;Na(Ce);var Le=r(Ce,2);{var Ne=Qe=>{var Xe=Ns();x("click",Xe,()=>e.onReset(K.token)),f(Qe,Xe)};I(Le,Qe=>{K.token in e.overrides&&Qe(Ne)})}C(()=>{b(H,K.label),ce!==(ce=e.overrides[K.token]??K.placeholder)&&(Ce.value=(Ce.__value=e.overrides[K.token]??K.placeholder)??"",Ba(Ce,e.overrides[K.token]??K.placeholder))}),x("change",Ce,Qe=>{const Xe=Qe.target.value;Xe===K.placeholder?e.onReset(K.token):e.onSet(K.token,Xe)}),f(pe,le)});var Z=r(be,2);{let pe=u(()=>o(e.overrides["--sf-bg-inset"],0)),K=u(()=>"--sf-bg-inset"in e.overrides);ut(Z,{label:"Inset",get value(){return t(pe)},min:0,max:4,step:.25,unit:"rem",help:"--sf-bg-inset — inset the background from the container edges",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-bg-inset",`${le}rem`),onReset:()=>e.onReset("--sf-bg-inset")})}var j=r(Z,2);{let pe=u(()=>o(e.overrides["--sf-bg-radius"],0)),K=u(()=>"--sf-bg-radius"in e.overrides);ut(j,{label:"Radius",get value(){return t(pe)},min:0,max:4,step:.125,unit:"rem",help:"--sf-bg-radius — corner radius of the background element",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-bg-radius",`${le}rem`),onReset:()=>e.onReset("--sf-bg-radius")})}var ie=r(j,2);{let pe=u(()=>o(e.overrides["--sf-bg-z"],-2)),K=u(()=>"--sf-bg-z"in e.overrides);ut(ie,{label:"Z-index",get value(){return t(pe)},min:-10,max:0,step:1,help:"--sf-bg-z — stack order of the background pseudo-element (typically negative)",get overridden(){return t(K)},onChange:le=>e.onSet("--sf-bg-z",String(le)),onReset:()=>e.onReset("--sf-bg-z")})}f(F,ee)};I(se,F=>{t(D)&&F(V)})}C(()=>{Y(ke,"aria-expanded",t(B)),b(we,t(B)?"▲":"▼"),Y(Ue,"aria-expanded",t(U)),b(q,t(U)?"▲":"▼"),Y(me,"aria-expanded",t(P)),b(Te,t(P)?"▲":"▼"),Y(dt,"aria-expanded",t(S)),b(pt,t(S)?"▲":"▼"),Y(Pe,"aria-expanded",t(_)),b(nt,t(_)?"▲":"▼"),Y(Dt,"aria-expanded",t(z)),b(Ut,t(z)?"▲":"▼"),Y(ia,"aria-expanded",t(L)),b(mt,t(L)?"▲":"▼"),Y(Je,"aria-expanded",t(R)),b(Lt,t(R)?"▲":"▼"),Y(rt,"aria-expanded",t(A)),b(Mt,t(A)?"▲":"▼"),Y(Nt,"aria-expanded",t(D)),b(xa,t(D)?"▲":"▼")}),x("click",ke,()=>{O(B,!t(B))}),x("click",Ue,()=>{O(U,!t(U))}),x("click",me,()=>{O(P,!t(P))}),x("click",dt,()=>{O(S,!t(S))}),x("click",Pe,()=>{O(_,!t(_))}),x("click",Dt,()=>{O(z,!t(z))}),x("click",ia,()=>{O(L,!t(L))}),x("click",Je,()=>{O(R,!t(R))}),x("click",rt,()=>{O(A,!t(A))}),x("click",Nt,()=>{O(D,!t(D))}),f(a,J),$t()}ta(["click","change","input"]);const xm=[{id:"default",label:"Default",patch:{"--sf-radius-scale":null}},{id:"sharp",label:"Sharp",patch:{"--sf-radius-scale":"0"}},{id:"subtle",label:"Subtle",patch:{"--sf-radius-scale":"0.5"}},{id:"rounded",label:"Rounded",patch:{"--sf-radius-scale":"1"}},{id:"pill",label:"Pill",patch:{"--sf-radius-scale":"2"}}],km=[{id:"default",label:"Default",patch:{"--sf-shadow-strength":null}},{id:"none",label:"None",patch:{"--sf-shadow-strength":"0"}},{id:"subtle",label:"Subtle",patch:{"--sf-shadow-strength":"calc(0.04 + var(--sf-is-dark) * 0.08)"}},{id:"soft",label:"Soft",patch:{"--sf-shadow-strength":"calc(0.08 + var(--sf-is-dark) * 0.12)"}},{id:"strong",label:"Strong",patch:{"--sf-shadow-strength":"calc(0.18 + var(--sf-is-dark) * 0.22)"}}];var wm=g("<button> </button>"),_m=g('<div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2"> </div> <div class="flex gap-1.5 flex-wrap"></div></div>');function Bi(a,e){Qt(e,!0);function o(p,m){for(const v of p){if(v.id==="default")continue;if(Object.entries(v.patch).every(([k,w])=>w===null?!(k in m):m[k]===w))return v.id}return p.filter(v=>v.id!=="default").flatMap(v=>Object.keys(v.patch)).every(v=>!(v in m))?"default":""}let n=u(()=>o(e.presets,e.overrides));var l=_m(),i=s(l),c=s(i),d=r(i,2);re(d,21,()=>e.presets,p=>p.id,(p,m)=>{var h=wm(),v=s(h);C(()=>{Ye(h,1,`px-3 py-1.5 rounded-lg text-[11px] font-bold border transition-all cursor-pointer ${t(n)===t(m).id?"bg-indigo-600/20 border-indigo-500/50 text-indigo-300":"bg-white/4 border-white/8 text-slate-400 hover:text-slate-200 hover:bg-white/8"}`),b(v,t(m).label)}),x("click",h,()=>e.onApply(t(m).patch)),f(p,h)}),C(()=>b(c,e.label)),f(a,l),$t()}ta(["click"]);var Cm=g('<!> <p class="text-[9px] text-slate-600">Drives --sf-color-border--strong, --subtle, --translucent automatically.</p>',1),Om=g('<div class="flex items-center gap-3"><span class="text-[9px] font-mono text-slate-600 w-10"> </span> <div class="flex-1 bg-indigo-400/50 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>'),Sm=g('<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>',1),Lm=g('<button><span class="block mx-auto mb-0.5"></span> </button>'),Pm=g('<div><div class="text-[9px] text-slate-500 mb-1.5"> </div> <div class="flex flex-col gap-1"></div></div>'),Im=g('<div class="grid grid-cols-2 gap-3"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center gap-3"><div class="px-4 py-2 rounded-lg text-[11px] text-slate-300 bg-white/4">Border sample</div> <span class="text-[9px] font-mono text-slate-600"> </span></div>',1),Bm=g('<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div> <!></div> <!> <!>',1),Um=g('<!> <!> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200">Focus preview</div></div>',1),zm=g('<div class="mt-3 space-y-4"></div>'),Am=g('<div class="mt-2 space-y-2 pl-2 border-l border-white/10"></div>'),Em=g('<div class="flex flex-col items-center gap-1"><div class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),Rm=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4"><div class="flex gap-3 flex-wrap"></div></div>'),Tm=g('<div class="mt-2 space-y-2"></div>'),Dm=g('<div class="p-4 space-y-5"><!> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Dividers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div><button 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"><span>Fine-tune radius steps</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button 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"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component shape</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function Mm(a,e){Qt(e,!0);const o=["solid","dashed","dotted"],n=["xs","s","m","l","xl","2xl","full"],l={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},i=[{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))"}],c=[{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"}],d=No.borders??[];let p=G(!1),m=G(!1),h=G(!1),v=G(!1),y=G(!1),k=G(!1),w=G(!1),E=G(!1),B=G(!1);function U(ge,Fe,rt){if(!ge)return Fe;const Ve=parseFloat(rt?ge.replace(rt,""):ge);return isNaN(Ve)?Fe:Ve}let P=u(()=>U(e.overrides["--sf-radius-scale"],1)),S=u(()=>U(e.overrides["--sf-border-scale"],1)),_=u(()=>U(e.overrides["--sf-focus-ring-width"],2,"px")),z=u(()=>U(e.overrides["--sf-focus-ring-offset"],2,"px")),L=u(()=>U(e.overrides["--sf-divider-width"]?.replace("px",""),1)),R=u(()=>U(e.overrides["--sf-divider-gap"]?.replace("rem",""),1)),D=u(()=>e.overrides["--sf-color-border"]??""),A=u(()=>e.overrides["--sf-border-style"]??"solid"),T=u(()=>e.overrides["--sf-focus-ring-color"]??""),N=u(()=>e.overrides["--sf-divider-color"]??"");function $(ge,Fe){return e.overrides[ge]??Fe}function He(ge){const Fe=e.overrides[ge.name];if(!Fe||/^(var|calc|clamp)\(/.test(Fe.trim()))return ge.default;const rt=parseFloat(Fe);return isNaN(rt)?ge.default:rt}function te(ge){const Fe=e.overrides[ge.token];if(!Fe||/^(var|calc|clamp)\(/.test(Fe.trim()))return ge.default;const rt=parseFloat(Fe);return isNaN(rt)?ge.default:rt}var ye=Dm(),Ie=s(ye);Bi(Ie,{label:"Corner style",get presets(){return xm},get overrides(){return e.overrides},get onApply(){return e.onBulkChange}});var he=r(Ie,4),ve=s(he),je=r(s(ve),2),$e=s(je),et=r(ve,2);{var M=ge=>{var Fe=Cm(),rt=fe(Fe);{let Ve=u(()=>"--sf-color-border"in e.overrides);qa(rt,{token:"--sf-color-border",get value(){return t(D)},placeholder:"auto-derived",get isOverridden(){return t(Ve)},onSet:Mt=>e.onSet("--sf-color-border",Mt),onReset:()=>e.onReset("--sf-color-border")})}f(ge,Fe)};I(et,ge=>{t(p)&&ge(M)})}var J=r(he,4),xe=s(J),ke=r(s(xe),2),W=s(ke),we=r(xe,2);{var qe=ge=>{var Fe=Sm(),rt=fe(Fe);{let zt=u(()=>"--sf-border-scale"in e.overrides);ut(rt,{label:"Border scale",get value(){return t(S)},min:0,max:4,step:.25,help:"Multiplier applied to all border widths. 0 hides all borders.",get overridden(){return t(zt)},onChange:It=>e.onSet("--sf-border-scale",String(It)),onReset:()=>e.onReset("--sf-border-scale")})}var Ve=r(rt,2);{let zt=u(()=>U(e.overrides["--sf-border-width-hairline"]?.replace("px",""),.5)),It=u(()=>"--sf-border-width-hairline"in e.overrides);ut(Ve,{label:"Hairline",get value(){return t(zt)},min:0,max:1,step:.25,unit:"px",help:"--sf-border-width-hairline — ultra-thin border for retina displays",get overridden(){return t(It)},onChange:Nt=>e.onSet("--sf-border-width-hairline",`${Nt}px`),onReset:()=>e.onReset("--sf-border-width-hairline")})}var Mt=r(Ve,2);{let zt=u(()=>U(e.overrides["--sf-box-border-width"]?.replace("px",""),0)),It=u(()=>"--sf-box-border-width"in e.overrides);ut(Mt,{label:"Box border",get value(){return t(zt)},min:0,max:4,step:.5,unit:"px",help:"--sf-box-border-width — box-shadow border drawn without affecting layout",get overridden(){return t(It)},onChange:Nt=>e.onSet("--sf-box-border-width",`${Nt}px`),onReset:()=>e.onReset("--sf-box-border-width")})}var aa=r(Mt,2);re(aa,20,()=>[1,2,3,4],zt=>zt,(zt,It)=>{var Nt=Om(),la=s(Nt),xa=s(la),se=r(la,2),V=r(se,2),F=s(V);C((ee,be)=>{b(xa,`${It??""}px →`),lt(se,ee),b(F,`${be??""}px`)},[()=>`height: ${Math.max(It*t(S),.5)}px`,()=>(It*t(S)).toFixed(1)]),f(zt,Nt)}),f(ge,Fe)};I(we,ge=>{t(m)&&ge(qe)})}var at=r(J,4),Se=s(at),Ue=r(s(Se),2),ae=s(Ue),q=r(Se,2);{var _e=ge=>{var Fe=Im(),rt=fe(Fe);re(rt,20,()=>[{label:"Border",token:"--sf-border-style",default:"solid"},{label:"Divider",token:"--sf-divider-style",default:"solid"}],It=>It.token,(It,Nt)=>{var la=Pm(),xa=s(la),se=s(xa),V=r(xa,2);re(V,20,()=>o,F=>F,(F,ee)=>{const be=u(()=>$(Nt.token,Nt.default));var Z=Lm(),j=s(Z),ie=r(j);C(()=>{Ye(Z,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${t(be)===ee?"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"}`),lt(j,`width: 20px; height: 0; border-bottom: 2px ${ee} currentColor; opacity: 0.7`),b(ie,` ${ee??""}`)}),x("click",Z,()=>ee===Nt.default?e.onReset(Nt.token):e.onSet(Nt.token,ee)),f(F,Z)}),C(()=>b(se,Nt.label)),f(It,la)});var Ve=r(rt,2),Mt=s(Ve),aa=r(Mt,2),zt=s(aa);C((It,Nt)=>{lt(Mt,It),b(zt,`${Nt??""}px · ${t(A)??""}`)},[()=>`border: ${Math.max(t(S),.5)}px ${t(A)} ${t(D)||"var(--sf-color-border, #64748b)"}`,()=>(1*t(S)).toFixed(1)]),f(ge,Fe)};I(q,ge=>{t(h)&&ge(_e)})}var ue=r(at,4),de=s(ue),me=r(s(de),2),Me=s(me),Te=r(de,2);{var ze=ge=>{var Fe=Bm(),rt=fe(Fe),Ve=r(s(rt),2);{let zt=u(()=>"--sf-divider-color"in e.overrides);qa(Ve,{token:"--sf-divider-color",get value(){return t(N)},placeholder:"inherits border",get isOverridden(){return t(zt)},onSet:It=>e.onSet("--sf-divider-color",It),onReset:()=>e.onReset("--sf-divider-color")})}var Mt=r(rt,2);{let zt=u(()=>"--sf-divider-width"in e.overrides);ut(Mt,{label:"Width",get value(){return t(L)},min:.5,max:4,step:.5,unit:"px",help:"--sf-divider-width",get overridden(){return t(zt)},onChange:It=>e.onSet("--sf-divider-width",`${It}px`),onReset:()=>e.onReset("--sf-divider-width"),rawDefault:"var(--sf-border-width-1)",get currentRaw(){return e.overrides["--sf-divider-width"]},onRawSet:It=>e.onSet("--sf-divider-width",It)})}var aa=r(Mt,2);{let zt=u(()=>"--sf-divider-gap"in e.overrides);ut(aa,{label:"Gap",get value(){return t(R)},min:0,max:4,step:.125,unit:"rem",help:"--sf-divider-gap — spacing around divider lines",get overridden(){return t(zt)},onChange:It=>e.onSet("--sf-divider-gap",`${It}rem`),onReset:()=>e.onReset("--sf-divider-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-divider-gap"]},onRawSet:It=>e.onSet("--sf-divider-gap",It)})}f(ge,Fe)};I(Te,ge=>{t(v)&&ge(ze)})}var Be=r(ue,4),Ge=s(Be),dt=r(s(Ge),2),st=s(dt),pt=r(Ge,2);{var _t=ge=>{var Fe=Um(),rt=fe(Fe);{let Nt=u(()=>"--sf-focus-ring-width"in e.overrides);ut(rt,{label:"Ring width",get value(){return t(_)},min:0,max:6,step:.5,unit:"px",help:"Thickness of the keyboard focus indicator",get overridden(){return t(Nt)},onChange:la=>e.onSet("--sf-focus-ring-width",`${la}px`),onReset:()=>e.onReset("--sf-focus-ring-width")})}var Ve=r(rt,2);{let Nt=u(()=>"--sf-focus-ring-offset"in e.overrides);ut(Ve,{label:"Ring offset",get value(){return t(z)},min:0,max:8,step:.5,unit:"px",help:"Gap between element edge and focus ring",get overridden(){return t(Nt)},onChange:la=>e.onSet("--sf-focus-ring-offset",`${la}px`),onReset:()=>e.onReset("--sf-focus-ring-offset")})}var Mt=r(Ve,2),aa=r(s(Mt),2);{let Nt=u(()=>"--sf-focus-ring-color"in e.overrides);qa(aa,{token:"--sf-focus-ring-color",get value(){return t(T)},placeholder:"default (action)",get isOverridden(){return t(Nt)},onSet:la=>e.onSet("--sf-focus-ring-color",la),onReset:()=>e.onReset("--sf-focus-ring-color")})}var zt=r(Mt,2),It=s(zt);C(()=>lt(It,`outline: ${t(_)}px solid ${t(T)||"oklch(0.7 0.2 235)"}; outline-offset: ${t(z)}px`)),f(ge,Fe)};I(pt,ge=>{t(y)&&ge(_t)})}var vt=r(Be,4),X=s(vt),Pe=r(s(X),2),Re=s(Pe),nt=r(X,2);{var it=ge=>{var Fe=zm();re(Fe,21,()=>d,rt=>rt.name,(rt,Ve)=>{Fo(rt,{get knob(){return t(Ve)},get overrides(){return e.overrides},onChange:(Mt,aa)=>aa===null?e.onReset(Mt):e.onSet(Mt,aa)})}),f(ge,Fe)};I(nt,ge=>{t(k)&&ge(it)})}var Ct=r(vt,2),bt=s(Ct),Dt=r(s(bt),2),St=s(Dt),Ut=r(bt,2);{var ct=ge=>{var Fe=Am();re(Fe,21,()=>i,rt=>rt.name,(rt,Ve)=>{{let Mt=u(()=>He(t(Ve))),aa=u(()=>t(Ve).name in e.overrides);ut(rt,{get label(){return t(Ve).step},get value(){return t(Mt)},min:0,get max(){return t(Ve).max},get step(){return t(Ve).step_size},unit:"px",get overridden(){return t(aa)},onChange:zt=>e.onSet(t(Ve).name,`${zt}px`),onReset:()=>e.onReset(t(Ve).name),get rawDefault(){return t(Ve).rawDefault},get currentRaw(){return e.overrides[t(Ve).name]},onRawSet:zt=>e.onSet(t(Ve).name,zt)})}}),f(ge,Fe)};I(Ut,ge=>{t(E)&&ge(ct)})}var jt=r(Ct,2),ea=s(jt),ia=r(s(ea),2),Ze=s(ia),mt=r(ea,2);{var Ot=ge=>{var Fe=Rm(),rt=s(Fe);re(rt,20,()=>n,Ve=>Ve,(Ve,Mt)=>{const aa=u(()=>l[Mt]??6),zt=u(()=>Mt==="full"?9999:t(aa)*t(P));var It=Em(),Nt=s(It),la=r(Nt,2),xa=s(la);C(se=>{lt(Nt,se),b(xa,Mt)},[()=>`border-radius: ${Math.min(t(zt),9999)}px`]),f(Ve,It)}),f(ge,Fe)};I(mt,ge=>{t(w)&&ge(Ot)})}var Rt=r(jt,4),ne=s(Rt),Je=r(s(ne),2),ft=s(Je),Lt=r(ne,2);{var Yt=ge=>{var Fe=Tm();re(Fe,21,()=>c,rt=>rt.token,(rt,Ve)=>{{let Mt=u(()=>te(t(Ve))),aa=u(()=>t(Ve).token in e.overrides);ut(rt,{get label(){return t(Ve).label},get value(){return t(Mt)},get min(){return t(Ve).min},get max(){return t(Ve).max},get step(){return t(Ve).step},get unit(){return t(Ve).unit},get help(){return t(Ve).help},get overridden(){return t(aa)},onChange:zt=>e.onSet(t(Ve).token,`${zt}${t(Ve).unit}`),onReset:()=>e.onReset(t(Ve).token),get rawDefault(){return t(Ve).rawDefault},get currentRaw(){return e.overrides[t(Ve).token]},onRawSet:zt=>e.onSet(t(Ve).token,zt)})}}),f(ge,Fe)};I(Lt,ge=>{t(B)&&ge(Yt)})}C(()=>{Y(ve,"aria-expanded",t(p)),b($e,t(p)?"▲":"▼"),Y(xe,"aria-expanded",t(m)),b(W,t(m)?"▲":"▼"),Y(Se,"aria-expanded",t(h)),b(ae,t(h)?"▲":"▼"),Y(de,"aria-expanded",t(v)),b(Me,t(v)?"▲":"▼"),Y(Ge,"aria-expanded",t(y)),b(st,t(y)?"▲":"▼"),Y(X,"aria-expanded",t(k)),b(Re,t(k)?"▲":"▼"),Y(bt,"aria-expanded",t(E)),b(St,t(E)?"▲":"▼"),Y(ea,"aria-expanded",t(w)),b(Ze,t(w)?"▲":"▼"),Y(ne,"aria-expanded",t(B)),b(ft,t(B)?"▲":"▼")}),x("click",ve,()=>{O(p,!t(p))}),x("click",xe,()=>{O(m,!t(m))}),x("click",Se,()=>{O(h,!t(h))}),x("click",de,()=>{O(v,!t(v))}),x("click",Ge,()=>{O(y,!t(y))}),x("click",X,()=>{O(k,!t(k))}),x("click",bt,()=>{O(E,!t(E))}),x("click",ea,()=>{O(w,!t(w))}),x("click",ne,()=>{O(B,!t(B))}),f(a,ye),$t()}ta(["click"]);var Nm=g('<div class="space-y-4"></div> <!>',1),Fm=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p></div>'),jm=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p></div>'),Gm=g('<div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Shadow glow</div> <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div></div> <button><div></div></button></div> <!>',1),Hm=g('<div class="flex flex-col items-center gap-2"><div class="bg-[#1a1a2e] border border-white/8 rounded-lg"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),qm=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-4 flex-wrap items-end justify-center"></div>'),Vm=g('<div class="p-4 space-y-5"><!> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow appearance</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Glow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Elevation preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function Km(a,e){Qt(e,!0);const o=["xs","s","m","l","xl","2xl"],n=No.shadows??[];let l=u(()=>parseFloat(e.overrides["--sf-shadow-lightness"]??"0.15")),i=u(()=>e.overrides["--sf-shadow-color"]??""),c=u(()=>e.overrides["--sf-shadow-glow-color"]??""),d=u(()=>e.overrides["--sf-shadow-glow"]==="none"),p=G(!1),m=G(!1),h=G(!1),v=G(!1);var y=Vm(),k=s(y);Bi(k,{label:"Elevation preset",get presets(){return km},get overrides(){return e.overrides},get onApply(){return e.onBulkChange}});var w=r(k,4),E=s(w),B=r(s(E),2),U=s(B),P=r(E,2);{var S=M=>{var J=Nm(),xe=fe(J);re(xe,21,()=>n,W=>W.name,(W,we)=>{Fo(W,{get knob(){return t(we)},get overrides(){return e.overrides},onChange:(qe,at)=>at===null?e.onReset(qe):e.onSet(qe,at)})});var ke=r(xe,2);{let W=u(()=>"--sf-shadow-lightness"in e.overrides);ut(ke,{label:"Shadow lightness",get value(){return t(l)},min:0,max:.5,step:.01,help:"OKLCH lightness of the shadow color. Lower = darker, more visible shadows.",get overridden(){return t(W)},onChange:we=>e.onSet("--sf-shadow-lightness",String(we)),onReset:()=>e.onReset("--sf-shadow-lightness")})}f(M,J)};I(P,M=>{t(p)&&M(S)})}var _=r(w,4),z=s(_),L=r(s(z),2),R=s(L),D=r(z,2);{var A=M=>{var J=Fm(),xe=r(s(J),2);{let ke=u(()=>"--sf-shadow-color"in e.overrides);qa(xe,{token:"--sf-shadow-color",get value(){return t(i)},placeholder:"auto (neutral hue)",get isOverridden(){return t(ke)},onSet:W=>e.onSet("--sf-shadow-color",W),onReset:()=>e.onReset("--sf-shadow-color")})}f(M,J)};I(D,M=>{t(m)&&M(A)})}var T=r(_,4),N=s(T),$=r(s(N),2),He=s($),te=r(N,2);{var ye=M=>{var J=Gm(),xe=fe(J),ke=r(s(xe),2),W=s(ke),we=r(xe,2);{var qe=at=>{var Se=jm(),Ue=r(s(Se),2);{let ae=u(()=>"--sf-shadow-glow-color"in e.overrides);qa(Ue,{token:"--sf-shadow-glow-color",get value(){return t(c)},placeholder:"default (primary color)",get isOverridden(){return t(ae)},onSet:q=>e.onSet("--sf-shadow-glow-color",q),onReset:()=>e.onReset("--sf-shadow-glow-color")})}f(at,Se)};I(we,at=>{t(d)||at(qe)})}C(()=>{Ye(ke,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(d)?"bg-white/10":"bg-indigo-600"}`),Ye(W,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(d)?"translate-x-0.5":"translate-x-4"}`)}),x("click",ke,()=>{t(d)?e.onReset("--sf-shadow-glow"):e.onSet("--sf-shadow-glow","none")}),f(M,J)};I(te,M=>{t(h)&&M(ye)})}var Ie=r(T,4),he=s(Ie),ve=r(s(he),2),je=s(ve),$e=r(he,2);{var et=M=>{var J=qm();re(J,22,()=>o,xe=>xe,(xe,ke,W)=>{var we=Hm(),qe=s(we),at=r(qe,2),Se=s(at);C(()=>{lt(qe,`width: ${40+t(W)*4}px; height: ${40+t(W)*4}px; box-shadow: var(--sf-shadow-${ke})`),b(Se,ke)}),f(xe,we)}),f(M,J)};I($e,M=>{t(v)&&M(et)})}C(()=>{Y(E,"aria-expanded",t(p)),b(U,t(p)?"▲":"▼"),Y(z,"aria-expanded",t(m)),b(R,t(m)?"▲":"▼"),Y(N,"aria-expanded",t(h)),b(He,t(h)?"▲":"▼"),Y(he,"aria-expanded",t(v)),b(je,t(v)?"▲":"▼")}),x("click",E,()=>{O(p,!t(p))}),x("click",z,()=>{O(m,!t(m))}),x("click",N,()=>{O(h,!t(h))}),x("click",he,()=>{O(v,!t(v))}),f(a,y),$t()}ta(["click"]);var Wm=g('<div class="rounded-lg bg-amber-500/10 border border-amber-500/20 p-2.5"><p class="text-[10px] text-amber-300">Motion is disabled — duration sliders have no effect while scale is 0.</p></div>'),Ym=g('<div class="mt-3 space-y-4"></div>'),Zm=g('<span class="text-amber-400">(No effect while motion is disabled.)</span>'),Jm=g('<p class="text-[10px] text-slate-600 leading-relaxed">Set absolute ms values to override the fluid scale calculation. <!></p> <!>',1),Xm=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),Qm=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6"> </span> <div class="flex-1 h-1.5 bg-white/8 rounded-full"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>'),$m=g('<p class="text-[10px] text-slate-600 leading-relaxed">One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).</p> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Stagger base</span> <!></div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1"></div>',1),ev=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>'),tv=g('<div><div class="flex items-center justify-between mb-1.5"><span class="text-[10px] font-semibold text-slate-300"> </span> <!></div> <svg width="40" height="28" viewBox="0 0 40 28" class="overflow-visible"><path stroke="rgb(99 102 241 / 0.6)" stroke-width="1.5" fill="none" stroke-linecap="round"></path></svg> <div class="text-[8px] font-mono text-slate-600 mt-1 truncate"> </div></div>'),av=g('<p class="text-[10px] text-slate-600 leading-relaxed">Customize the named easing tokens used throughout the design system.</p> <div class="grid grid-cols-2 gap-1.5"></div>',1),ov=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4"><div class="relative h-10 overflow-hidden rounded"><div class="absolute top-1 h-8 w-8 bg-indigo-500 rounded-lg"></div></div> <button class="mt-3 w-full py-1.5 rounded-lg text-[10px] font-bold border border-indigo-500/40 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 transition-all cursor-pointer disabled:opacity-40"> </button></div>'),sv=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),rv=g('<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </div> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),nv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Default animation-range for scroll-driven animations using the <span class="font-mono text-slate-400">.sf-scroll-timeline</span> utility.</p> <!>',1),lv=g('<div class="flex items-center gap-3"><span class="text-[10px] text-slate-500 w-14 shrink-0"> </span> <div class="flex-1 h-1 bg-white/8 rounded-full overflow-hidden"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>'),iv=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3"></div>'),cv=g('<div class="p-4 space-y-5"><div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Disable motion</div> <div class="text-[9px] text-slate-500 mt-0.5">Respects prefers-reduced-motion</div></div> <button><div></div></button></div> <!> <div><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Global scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Theme transition</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Duration overrides</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Stagger base</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Easing curves</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Animation demo</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll timeline range</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Duration preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function dv(a,e){Qt(e,!0);const o=[{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}],n=[{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:"cubic-bezier(0.34, 1.56, 0.64, 1)",preview:"M0,40 C8,40 20,-10 40,0"}],l=["--sf-animation-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5"],i=No.motion??[];let c=u(()=>parseFloat(e.overrides["--sf-motion-scale"]??"1")),d=u(()=>e.overrides["--sf-motion-scale"]==="0"),p=u(()=>parseFloat(e.overrides["--sf-theme-transition-duration"]?.replace("ms","")??String(300*t(c)))),m=u(()=>()=>{const Ze=e.overrides[l[0]];return Ze?parseFloat(Ze.replace("ms","")):75*t(c)}),h=G(!1),v=G(0),y=G(!1),k=G(!1),w=G(!1),E=G(!1),B=G(!1),U=G(!1),P=G(!1),S=G(!1);function _(Ze,mt){const Ot=e.overrides[Ze];return Ot?parseFloat(Ot):Math.round(mt*t(c))}function z(){if(t(h))return;O(h,!0),O(v,180);const Ze=_("--sf-duration-normal",250);setTimeout(()=>{O(v,0),setTimeout(()=>{O(h,!1)},Ze)},Ze)}function L(Ze){const mt={};for(let Ot=1;Ot<=5;Ot++)mt[`--sf-animation-delay-${Ot}`]=`${Math.round(Ze*Ot)}ms`;e.onBulkChange(mt)}function R(){const Ze={};for(let mt=1;mt<=5;mt++)Ze[`--sf-animation-delay-${mt}`]=null;e.onBulkChange(Ze)}var D=cv(),A=s(D),T=r(s(A),2),N=s(T),$=r(A,2);{var He=Ze=>{var mt=Wm();f(Ze,mt)};I($,Ze=>{t(d)&&Ze(He)})}var te=r($,2),ye=s(te),Ie=r(s(ye),2),he=s(Ie),ve=r(ye,2);{var je=Ze=>{var mt=Ym();re(mt,21,()=>i,Ot=>Ot.name,(Ot,Rt)=>{Fo(Ot,{get knob(){return t(Rt)},get overrides(){return e.overrides},onChange:(ne,Je)=>Je===null?e.onReset(ne):e.onSet(ne,Je)})}),f(Ze,mt)};I(ve,Ze=>{t(y)&&Ze(je)})}var $e=r(te,4),et=s($e),M=r(s(et),2),J=s(M),xe=r(et,2);{var ke=Ze=>{{let mt=u(()=>"--sf-theme-transition-duration"in e.overrides);ut(Ze,{label:"Dark/light switch speed",get value(){return t(p)},min:0,max:600,step:10,unit:"ms",help:"--sf-theme-transition-duration — color-scheme switch animation speed",get overridden(){return t(mt)},onChange:Ot=>e.onSet("--sf-theme-transition-duration",`${Ot}ms`),onReset:()=>e.onReset("--sf-theme-transition-duration")})}};I(xe,Ze=>{t(k)&&Ze(ke)})}var W=r($e,4),we=s(W),qe=r(s(we),2),at=s(qe),Se=r(we,2);{var Ue=Ze=>{var mt=Jm(),Ot=fe(mt),Rt=r(s(Ot));{var ne=ft=>{var Lt=Zm();f(ft,Lt)};I(Rt,ft=>{t(d)&&ft(ne)})}var Je=r(Ot,2);re(Je,17,()=>o,ft=>ft.token,(ft,Lt)=>{const Yt=u(()=>_(t(Lt).token,t(Lt).base));{let ge=u(()=>t(Lt).token in e.overrides);ut(ft,{get label(){return t(Lt).label},get value(){return t(Yt)},min:0,get max(){return t(Lt).max},step:10,unit:"ms",get overridden(){return t(ge)},onChange:Fe=>e.onSet(t(Lt).token,`${Fe}ms`),onReset:()=>e.onReset(t(Lt).token)})}}),f(Ze,mt)};I(Se,Ze=>{t(w)&&Ze(Ue)})}var ae=r(W,4),q=s(ae),_e=r(s(q),2),ue=s(_e),de=r(q,2);{var me=Ze=>{var mt=$m(),Ot=r(fe(mt),2),Rt=s(Ot),ne=r(s(Rt),2);{var Je=ge=>{var Fe=Xm();x("click",Fe,R),f(ge,Fe)},ft=u(()=>l.some(ge=>ge in e.overrides));I(ne,ge=>{t(ft)&&ge(Je)})}var Lt=r(Rt,2);{let ge=u(()=>Math.round(t(m)())),Fe=u(()=>l.some(rt=>rt in e.overrides));ut(Lt,{label:"",get value(){return t(ge)},min:0,max:200,step:5,unit:"ms",help:"Base unit for --sf-animation-delay-1 through -5",get overridden(){return t(Fe)},onChange:rt=>L(rt),onReset:R})}var Yt=r(Ot,2);re(Yt,20,()=>[1,2,3,4,5],ge=>ge,(ge,Fe)=>{const rt=u(()=>Math.round(t(m)()*Fe));var Ve=Qm(),Mt=s(Ve),aa=s(Mt),zt=r(Mt,2),It=s(zt),Nt=r(zt,2),la=s(Nt);C(xa=>{b(aa,`–${Fe??""}`),lt(It,xa),b(la,`${t(rt)??""}ms`)},[()=>`width: ${Math.min(t(rt)/600*100,100)}%`]),f(ge,Ve)}),f(Ze,mt)};I(de,Ze=>{t(E)&&Ze(me)})}var Me=r(ae,4),Te=s(Me),ze=r(s(Te),2),Be=s(ze),Ge=r(Te,2);{var dt=Ze=>{var mt=av(),Ot=r(fe(mt),2);re(Ot,21,()=>n,Rt=>Rt.token,(Rt,ne)=>{const Je=u(()=>t(ne).token in e.overrides);var ft=tv(),Lt=s(ft),Yt=s(Lt),ge=s(Yt),Fe=r(Yt,2);{var rt=It=>{var Nt=ev();x("click",Nt,()=>e.onReset(t(ne).token)),f(It,Nt)};I(Fe,It=>{t(Je)&&It(rt)})}var Ve=r(Lt,2),Mt=s(Ve),aa=r(Ve,2),zt=s(aa);C(It=>{Ye(ft,1,`p-2.5 rounded-xl border transition-all ${t(Je)?"bg-indigo-500/10 border-indigo-500/30":"border-white/8 bg-white/3"}`),b(ge,t(ne).label),Y(Mt,"d",t(ne).preview),b(zt,It)},[()=>t(ne).token.replace("--sf-ease-","")]),f(Rt,ft)}),f(Ze,mt)};I(Ge,Ze=>{t(B)&&Ze(dt)})}var st=r(Me,4),pt=s(st),_t=r(s(pt),2),vt=s(_t),X=r(pt,2);{var Pe=Ze=>{var mt=ov(),Ot=s(mt),Rt=s(Ot),ne=r(Ot,2),Je=s(ne);C(ft=>{lt(Rt,ft),ne.disabled=t(h),b(Je,t(h)?"Animating…":"▶ Play")},[()=>`transform: translateX(${t(v)}px); transition: transform ${_("--sf-duration-normal",250)}ms ${e.overrides["--sf-ease-out"]??"cubic-bezier(0.25, 0, 0.15, 1)"}`]),x("click",ne,z),f(Ze,mt)};I(X,Ze=>{t(U)&&Ze(Pe)})}var Re=r(st,4),nt=s(Re),it=r(s(nt),2),Ct=s(it),bt=r(nt,2);{var Dt=Ze=>{var mt=nv(),Ot=r(fe(mt),2);re(Ot,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%"}],Rt=>Rt.token,(Rt,ne)=>{var Je=rv(),ft=s(Je),Lt=s(ft),Yt=r(ft,2),ge=r(Yt,2);{var Fe=rt=>{var Ve=sv();x("click",Ve,()=>e.onReset(ne.token)),f(rt,Ve)};I(ge,rt=>{ne.token in e.overrides&&rt(Fe)})}C(()=>{b(Lt,ne.label),Xt(Yt,e.overrides[ne.token]??""),Y(Yt,"placeholder",ne.placeholder)}),x("input",Yt,rt=>{const Ve=rt.target.value.trim();Ve?e.onSet(ne.token,Ve):e.onReset(ne.token)}),f(Rt,Je)}),f(Ze,mt)};I(bt,Ze=>{t(S)&&Ze(Dt)})}var St=r(Re,4),Ut=s(St),ct=r(s(Ut),2),jt=s(ct),ea=r(Ut,2);{var ia=Ze=>{var mt=iv();re(mt,21,()=>o,Ot=>Ot.label,(Ot,Rt)=>{const ne=u(()=>_(t(Rt).token,t(Rt).base));var Je=lv(),ft=s(Je),Lt=s(ft),Yt=r(ft,2),ge=s(Yt),Fe=r(Yt,2),rt=s(Fe);C(Ve=>{b(Lt,t(Rt).label),lt(ge,Ve),b(rt,`${t(ne)??""}ms`)},[()=>`width: ${Math.min(t(ne)/1200*100,100)}%`]),f(Ot,Je)}),f(Ze,mt)};I(ea,Ze=>{t(P)&&Ze(ia)})}C(()=>{Y(T,"title",t(d)?"Enable motion":"Disable motion"),Ye(T,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(d)?"bg-indigo-600":"bg-white/10"}`),Ye(N,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(d)?"translate-x-4":"translate-x-0.5"}`),Y(ye,"aria-expanded",t(y)),b(he,t(y)?"▲":"▼"),Y(et,"aria-expanded",t(k)),b(J,t(k)?"▲":"▼"),Y(we,"aria-expanded",t(w)),b(at,t(w)?"▲":"▼"),Y(q,"aria-expanded",t(E)),b(ue,t(E)?"▲":"▼"),Y(Te,"aria-expanded",t(B)),b(Be,t(B)?"▲":"▼"),Y(pt,"aria-expanded",t(U)),b(vt,t(U)?"▲":"▼"),Y(nt,"aria-expanded",t(S)),b(Ct,t(S)?"▲":"▼"),Y(Ut,"aria-expanded",t(P)),b(jt,t(P)?"▲":"▼")}),x("click",T,()=>{t(d)?e.onReset("--sf-motion-scale"):e.onSet("--sf-motion-scale","0")}),x("click",ye,()=>{O(y,!t(y))}),x("click",et,()=>{O(k,!t(k))}),x("click",we,()=>{O(w,!t(w))}),x("click",q,()=>{O(E,!t(E))}),x("click",Te,()=>{O(B,!t(B))}),x("click",pt,()=>{O(U,!t(U))}),x("click",nt,()=>{O(S,!t(S))}),x("click",Ut,()=>{O(P,!t(P))}),f(a,D),$t()}ta(["click","input"]);var fv=g("<div></div>"),uv=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-3 items-center justify-center overflow-hidden relative"><div class="absolute inset-0 grid grid-cols-4 grid-rows-3 gap-px opacity-30"></div> <div class="relative z-10 w-20 h-12 rounded-lg border border-white/20 bg-white/10 flex items-center justify-center"><span class="text-[9px] font-mono text-white/70"> </span></div></div>',1),pv=g('<div class="flex items-center gap-3"><span class="text-[9px] text-slate-600 w-14"> </span> <div class="flex-1 h-4 bg-indigo-400 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-8"> </span></div>'),mv=g('<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>',1),Wn=g("<button> </button>"),vv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Gradient overlay for hero images and media content. Used by the <code class="text-slate-400">.sf-scrim</code> macro.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Direction</div> <div class="grid grid-cols-2 gap-1"></div></div> <div class="rounded-xl overflow-hidden border border-white/8" style="height: 80px"><div class="w-full h-full relative" style="background: linear-gradient(135deg, oklch(0.3 0.15 264), oklch(0.25 0.1 300))"><div class="absolute inset-0"></div> <div class="absolute bottom-2 left-3 text-[10px] text-white/80 font-medium">Scrim preview</div></div></div>',1),hv=g('<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0"> </div> <!></div>'),gv=g('<!> <div class="flex items-center gap-2 p-2 rounded-lg bg-white/4 border border-white/8"><div class="w-16 h-3 rounded-full"><div class="w-6 h-3 rounded-full"></div></div> <span class="text-[9px] text-slate-600">Scrollbar preview</span></div>',1),bv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Controls text legibility over images. Applied via <code class="text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.</p> <div class="flex gap-2"></div>',1),yv=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Blur</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Opacity</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrollbar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function xv(a,e){Qt(e,!0);const o=[{label:"To top",value:"to top"},{label:"To bottom",value:"to bottom"},{label:"To left",value:"to left"},{label:"To right",value:"to right"}],n=[{label:"None",patch:{"--sf-text-shadow-s":"none","--sf-text-shadow-m":"none","--sf-text-shadow-l":"none"}},{label:"Subtle",patch:null},{label:"Strong",patch:{"--sf-shadow-strength":"calc(0.25 + var(--sf-is-dark) * 0.17)"}}];function l(Be,Ge,dt){if(!Be)return Ge;const st=parseFloat(dt?Be.replace(dt,""):Be);return isNaN(st)?Ge:st}let i=u(()=>l(e.overrides["--sf-blur"],12,"px")),c=u(()=>l(e.overrides["--sf-opacity-muted"],.5)),d=u(()=>l(e.overrides["--sf-opacity-disabled"],.45)),p=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),m=u(()=>e.overrides["--sf-scrim-color"]??""),h=u(()=>l(e.overrides["--sf-scroll-shadow-size"]?.replace("rem",""),2)),v=u(()=>l(e.overrides["--sf-state-pending-opacity"],.7)),y=u(()=>e.overrides["--sf-scrollbar-thumb"]??""),k=u(()=>e.overrides["--sf-scrollbar-track"]??""),w=G(!1),E=G(!1),B=G(!1),U=G(!1),P=G(!1),S=G(!1);var _=yv(),z=s(_),L=s(z),R=r(s(L),2),D=s(R),A=r(L,2);{var T=Be=>{var Ge=uv(),dt=fe(Ge);{let Pe=u(()=>"--sf-blur"in e.overrides);ut(dt,{label:"Blur radius",get value(){return t(i)},min:0,max:48,step:1,unit:"px",help:"--sf-blur — used for frosted glass, modals, tooltips",get overridden(){return t(Pe)},onChange:Re=>e.onSet("--sf-blur",`${Re}px`),onReset:()=>e.onReset("--sf-blur")})}var st=r(dt,2),pt=s(st);re(pt,20,()=>Array.from({length:12}),sn,(Pe,Re,nt)=>{var it=fv();Ye(it,1,ro(nt%3===0?"bg-indigo-500/50":nt%3===1?"bg-purple-500/40":"bg-blue-500/30")),f(Pe,it)});var _t=r(pt,2),vt=s(_t),X=s(vt);C(()=>{lt(_t,`backdrop-filter: blur(${t(i)}px)`),b(X,`${t(i)??""}px`)}),f(Be,Ge)};I(A,Be=>{t(w)&&Be(T)})}var N=r(z,4),$=s(N),He=r(s($),2),te=s(He),ye=r($,2);{var Ie=Be=>{var Ge=mv(),dt=fe(Ge);{let vt=u(()=>"--sf-opacity-muted"in e.overrides);ut(dt,{label:"Muted opacity",get value(){return t(c)},min:0,max:1,step:.05,help:"--sf-opacity-muted — secondary text, icons, and placeholder content",get overridden(){return t(vt)},onChange:X=>e.onSet("--sf-opacity-muted",String(X)),onReset:()=>e.onReset("--sf-opacity-muted")})}var st=r(dt,2);{let vt=u(()=>"--sf-opacity-disabled"in e.overrides);ut(st,{label:"Disabled opacity",get value(){return t(d)},min:0,max:1,step:.05,help:"--sf-opacity-disabled — disabled form controls and interactive elements",get overridden(){return t(vt)},onChange:X=>e.onSet("--sf-opacity-disabled",String(X)),onReset:()=>e.onReset("--sf-opacity-disabled")})}var pt=r(st,2);{let vt=u(()=>"--sf-state-pending-opacity"in e.overrides);ut(pt,{label:"Pending opacity",get value(){return t(v)},min:.1,max:1,step:.05,help:"--sf-state-pending-opacity — opacity of elements in loading/pending state",get overridden(){return t(vt)},onChange:X=>e.onSet("--sf-state-pending-opacity",String(X)),onReset:()=>e.onReset("--sf-state-pending-opacity")})}var _t=r(pt,2);re(_t,21,()=>[{label:"muted",val:t(c)},{label:"disabled",val:t(d)},{label:"pending",val:t(v)}],vt=>vt.label,(vt,X)=>{var Pe=pv(),Re=s(Pe),nt=s(Re),it=r(Re,2),Ct=r(it,2),bt=s(Ct);C(()=>{b(nt,t(X).label),lt(it,`opacity: ${t(X).val}`),b(bt,t(X).val)}),f(vt,Pe)}),f(Be,Ge)};I(ye,Be=>{t(E)&&Be(Ie)})}var he=r(N,4),ve=s(he),je=r(s(ve),2),$e=s(je),et=r(ve,2);{var M=Be=>{var Ge=vv(),dt=r(fe(Ge),2),st=r(s(dt),2);{let Re=u(()=>"--sf-scrim-color"in e.overrides);qa(st,{token:"--sf-scrim-color",get value(){return t(m)},placeholder:"default (base color)",get isOverridden(){return t(Re)},onSet:nt=>e.onSet("--sf-scrim-color",nt),onReset:()=>e.onReset("--sf-scrim-color")})}var pt=r(dt,2),_t=r(s(pt),2);re(_t,21,()=>o,Re=>Re.value,(Re,nt)=>{var it=Wn(),Ct=s(it);C(()=>{Ye(it,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${t(p)===t(nt).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"}`),b(Ct,t(nt).label)}),x("click",it,()=>t(nt).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(nt).value)),f(Re,it)});var vt=r(pt,2),X=s(vt),Pe=s(X);C(()=>lt(Pe,`background: linear-gradient(${t(p)}, ${t(m)||"oklch(0 0 0 / 0.6)"}, transparent)`)),f(Be,Ge)};I(et,Be=>{t(B)&&Be(M)})}var J=r(he,4),xe=s(J),ke=r(s(xe),2),W=s(ke),we=r(xe,2);{var qe=Be=>{var Ge=gv(),dt=fe(Ge);re(dt,17,()=>[{label:"Thumb color",token:"--sf-scrollbar-thumb",val:t(y)},{label:"Track color",token:"--sf-scrollbar-track",val:t(k)}],vt=>vt.token,(vt,X)=>{var Pe=hv(),Re=s(Pe),nt=s(Re),it=r(Re,2);{let Ct=u(()=>t(X).token in e.overrides);qa(it,{get token(){return t(X).token},get value(){return t(X).val},placeholder:"default",get isOverridden(){return t(Ct)},onSet:bt=>e.onSet(t(X).token,bt),onReset:()=>e.onReset(t(X).token)})}C(()=>b(nt,t(X).label)),f(vt,Pe)});var st=r(dt,2),pt=s(st),_t=s(pt);C(()=>{lt(pt,`background: ${t(k)||"rgba(255,255,255,0.08)"}`),lt(_t,`background: ${t(y)||"oklch(0.52 0.025 260)"}`)}),f(Be,Ge)};I(we,Be=>{t(U)&&Be(qe)})}var at=r(J,4),Se=s(at),Ue=r(s(Se),2),ae=s(Ue),q=r(Se,2);{var _e=Be=>{{let Ge=u(()=>"--sf-scroll-shadow-size"in e.overrides);ut(Be,{label:"Shadow size",get value(){return t(h)},min:0,max:6,step:.25,unit:"rem",help:"--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements",get overridden(){return t(Ge)},onChange:dt=>e.onSet("--sf-scroll-shadow-size",`${dt}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size")})}};I(q,Be=>{t(P)&&Be(_e)})}var ue=r(at,4),de=s(ue),me=r(s(de),2),Me=s(me),Te=r(de,2);{var ze=Be=>{var Ge=bv(),dt=r(fe(Ge),2);re(dt,21,()=>n,st=>st.label,(st,pt)=>{var _t=Wn(),vt=s(_t);C(()=>{Ye(_t,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(pt).label==="None"&&e.overrides["--sf-text-shadow-s"]==="none"||t(pt).patch===null&&!("--sf-text-shadow-s"in e.overrides)?"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"}`),b(vt,t(pt).label)}),x("click",_t,()=>{if(t(pt).patch===null)e.onReset("--sf-text-shadow-s"),e.onReset("--sf-text-shadow-m"),e.onReset("--sf-text-shadow-l");else for(const[X,Pe]of Object.entries(t(pt).patch))e.onSet(X,Pe)}),f(st,_t)}),f(Be,Ge)};I(Te,Be=>{t(S)&&Be(ze)})}C(()=>{Y(L,"aria-expanded",t(w)),b(D,t(w)?"▲":"▼"),Y($,"aria-expanded",t(E)),b(te,t(E)?"▲":"▼"),Y(ve,"aria-expanded",t(B)),b($e,t(B)?"▲":"▼"),Y(xe,"aria-expanded",t(U)),b(W,t(U)?"▲":"▼"),Y(Se,"aria-expanded",t(P)),b(ae,t(P)?"▲":"▼"),Y(de,"aria-expanded",t(S)),b(Me,t(S)?"▲":"▼")}),x("click",L,()=>{O(w,!t(w))}),x("click",$,()=>{O(E,!t(E))}),x("click",ve,()=>{O(B,!t(B))}),x("click",xe,()=>{O(U,!t(U))}),x("click",Se,()=>{O(P,!t(P))}),x("click",de,()=>{O(S,!t(S))}),f(a,_),$t()}ta(["click"]);var kv=g('<div class="h-2.5 rounded bg-indigo-500/40"></div>'),wv=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"></div>',1),_v=g(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-300 leading-relaxed">SLASHED is a token-first CSS framework. This sample paragraph repeats so you
+        controls, or edit the raw value for full control.</p> <!>`,1),up=g('<p class="text-[9px] text-slate-600 leading-relaxed">--sf-color-scheme — sets the CSS <span class="font-mono text-slate-400">color-scheme</span> property on the root, controlling browser UI (scrollbars, inputs) and default background.</p> <div class="flex gap-1"></div>',1),pp=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1"> </div> <!></div>'),mp=g('<p class="text-[10px] text-slate-600 leading-relaxed">Direct color overrides for tokens the framework auto-derives. Use for edge cases.</p> <div class="space-y-2"></div>',1),vp=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Brand color sources</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">LumLocker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status colors</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text contrast</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shade / tint curve</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Gradients</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Color scheme</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Semantic overrides</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — override individual color steps (50–950), semantic aliases, or surface tokens directly.</p></div></div>');function hp(a,e){Qt(e,!0);function o(se,V){return Fa.value,ho(se)||V}function n(se,V){Fa.value;const F=jf(se);return F&&F!=="none"?F:V}function l(se,V,F){return Fa.value,Nf(se,V)||F}const i=[{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))"}],c=[{key:"primary",label:"Primary"},{key:"secondary",label:"Secondary"},{key:"tertiary",label:"Tertiary"},{key:"action",label:"Action"}],d=[{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"}],p=[{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"}],m=[{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}],h=[{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(m.map(se=>[se.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%"}}],v=[{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)"}],y=["50","100","200","300","400","500","600","700","800","900","950"],k=["primary","secondary","tertiary","action","neutral"],w=(No.colors??[]).filter(se=>se.name==="--sf-contrast-bias"||se.name==="--sf-contrast-threshold"),E=(No.colors??[]).filter(se=>se.name==="--sf-focus-ring-width");let B=G(!1),U=G(!1),P=G(!1),S=G(!1),_=G(!1),z=G(!1),L=G(!1),R=G(!1),D=G("light"),A=da({}),T=u(()=>parseFloat(e.overrides["--sf-lumlocker"]??"0.65"));function N(se){const V=se.match(/^linear-gradient\(\s*in\s+(\S+)\s+(to\s+\w+|\d+deg)\s*,(.+)\)$/i);if(!V)return null;const F=V[1],ee=V[2].trim(),he=ee.startsWith("to "),Z=he?ee.slice(3).trim():"right",j=he?0:parseInt(ee);let le=0,ue=0;const K=[],ne=V[3];for(let Ne=0;Ne<ne.length;Ne++)ne[Ne]==="("?le++:ne[Ne]===")"?le--:ne[Ne]===","&&le===0&&(K.push(ne.slice(ue,Ne).trim()),ue=Ne+1);return K.push(ne.slice(ue).trim()),K.length<2?null:{space:F,kind:he?"dir":"angle",angle:j,dir:Z,stop1:K[0],stop2:K[1]}}function $(se){const V=e.overrides[se.name];return(V?N(V):null)??{space:se.space,kind:se.kind,angle:se.angle,dir:se.dir,stop1:se.stop1,stop2:se.stop2}}function Ge(se){return A[se.name]??$(se)}function te(se){const V=Ge(se),F=V.kind==="dir"?`to ${V.dir}`:`${V.angle}deg`;return`linear-gradient(in ${V.space} ${F}, ${V.stop1}, ${V.stop2})`}function ge(se,V,F){A[se.name]||(A[se.name]=$(se)),A[se.name][V]=F,e.onSet(se.name,te(se))}function Pe(se,V){const F=`--sf-color-${se}-source-${V}`,ee=e.overrides[F]??d.find(he=>he.name===F)?.default??"";return ee?`oklch(from ${ee} ${t(T)} c h)`:""}let ve=G(da(new Set(d.filter(se=>se.side==="light"&&!((d.find(V=>V.colorKey===se.colorKey&&V.side==="dark")?.name??"")in e.overrides)).map(se=>se.colorKey)))),me=u(()=>{const se={},V=[...d,...p];for(const F of e.tokens)V.some(ee=>ee.name===F.name)&&(se[F.name]=F);return se}),je=u(()=>h.find(se=>Object.entries(se.patch).every(([V,F])=>F===null?!(V in e.overrides):e.overrides[V]===F)));function $e(se){const V=e.overrides[se.name];return V?parseFloat(V):se.default}const tt=[];for(let se=0;se<d.length;se+=2)tt.push([d[se],d[se+1]]);const M=[];for(let se=0;se<p.length;se+=2)M.push([p[se],p[se+1]]);function J(se,V){const{l:F,c:ee,h:he,valid:Z}=Vs(se);if(!Z)return se;let j,le;return V==="base"?(j=Math.max(.16,Math.min(1.18-F,.24)),le=ee*.5):(j=Math.max(.65,Math.min(.95-F*.5,.88)),le=ee*.9),Ks(j,le,he)}function be(){return e.overrides["--sf-color-base-source-light"]??"oklch(0.96 0.006 250)"}function ye(){const se=e.overrides["--sf-color-base-source-dark"];return se||J(e.overrides["--sf-color-base-source-light"]??"oklch(0.96 0.006 250)","base")}function W(){const se=e.overrides["--sf-color-neutral-source-light"]??"oklch(0.52 0.025 260)",{l:V,c:F,h:ee,valid:he}=Vs(se);return he?Ks(Math.max(.05,Math.min(V-.38,.3)),F*.8,ee):"oklch(0.12 0.02 260)"}function ke(){const se=e.overrides["--sf-color-neutral-source-dark"]??"oklch(0.69 0.0225 260)",{l:V,c:F,h:ee,valid:he}=Vs(se);return he?Ks(Math.min(1,Math.max(V+.22,.88)),F*.8,ee):"oklch(0.92 0.02 260)"}function He(se,V,F,ee){if(Fa.value,V==="500")return ho(se)||se;const he=parseInt(V)<500,Z=m.find(K=>K.label===V);if(!Z)return se;const j=$e(Z),ue=`color-mix(in oklab, ${se} ${j}%, ${he?F:ee})`;return ho(ue)||ue}function st(se,V,F){e.onSet(se.name,F)}function Se(se,V,F){const ee=!!(V&&V.name in e.overrides);if(t(ve).has(se)&&!ee){const Z=e.overrides[F]??d.find(j=>j.name===F)?.default??"";V&&e.onSet(V.name,J(Z,se)),O(ve,new Set([...t(ve)].filter(j=>j!==se)),!0)}else V&&e.onBulkChange({[V.name]:null}),O(ve,new Set([...t(ve),se]),!0)}const Be=[{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 ae(se,V){Fa.value;const F=Cs(se),ee=Cs(V);return!F||!ee?null:qs(Bo(...F),Bo(...ee))}var q=vp(),we=s(q),fe=s(we),ce=r(s(fe),2),xe=s(ce),ze=r(fe,2);{var De=se=>{var V=Vu(),F=r(de(V),2);re(F,21,()=>tt,([ee,he])=>ee.name,(ee,he)=>{var Z=u(()=>Pa(t(he),2));let j=()=>t(Z)[0],le=()=>t(Z)[1];const ue=u(()=>!!(le()&&le().name in e.overrides)),K=u(()=>t(ve).has(j().colorKey)&&!t(ue));var ne=qu(),Ne=s(ne),H=s(Ne),_e=s(H),ie=r(H,2);{var Le=X=>{var oe=ms(),Re=s(oe);C(()=>{Ye(oe,1,`text-[8px] px-1.5 py-0.5 rounded border transition-all cursor-pointer ${t(K)?"border-indigo-500/40 bg-indigo-500/15 text-indigo-300":"border-white/10 text-slate-500 hover:text-slate-300"}`),b(Re,t(K)?"Auto dark":"Manual dark")}),x("click",oe,()=>Se(j().colorKey,le(),j().name)),f(X,oe)};I(ie,X=>{le()&&X(Le)})}var Fe=r(Ne,2);{let X=u(()=>`${j().label} (light)`),oe=u(()=>e.overrides[j().name]??t(me)[j().name]?.value??j().default),Re=u(()=>j().name in e.overrides);Ms(Fe,{get label(){return t(X)},get tokenName(){return j().name},get value(){return t(oe)},get overridden(){return t(Re)},onChange:Ke=>st(j(),le(),Ke),onReset:()=>e.onReset(j().name)})}var Qe=r(Fe,2);{var Xe=X=>{const oe=u(()=>e.overrides[j().name]??t(me)[j().name]?.value??j().default),Re=u(()=>t(K)?J(t(oe),j().colorKey):le()?e.overrides[le().name]??t(me)[le().name]?.value??le().default:t(oe)),Ke=u(be),We=u(ye),gt=u(W),yt=u(ke);var ht=Gu(),Te=s(ht),Ce=r(s(Te),2);re(Ce,20,()=>y,Vt=>Vt,(Vt,Zt)=>{const pa=u(()=>He(t(oe),Zt,t(Ke),t(gt)));var _a=Fu();C(()=>{lt(_a,`background: ${t(pa)}`),Y(_a,"title",`${j().colorKey}-${Zt} (light) — ${t(pa)}`)}),f(Vt,_a)});var At=r(Te,2),oa=r(s(At),2);re(oa,20,()=>y,Vt=>Vt,(Vt,Zt)=>{const pa=u(()=>He(t(Re),Zt,t(We),t(yt)));var _a=ju();C(()=>{lt(_a,`background: ${t(pa)}`),Y(_a,"title",`${j().colorKey}-${Zt} (dark) — ${t(pa)}`)}),f(Vt,_a)}),f(X,ht)},bt=u(()=>k.includes(j().colorKey));I(Qe,X=>{t(bt)&&X(Xe)})}var kt=r(Qe,2);{var Pt=X=>{{let oe=u(()=>`${le().label} (dark mode)`),Re=u(()=>e.overrides[le().name]??t(me)[le().name]?.value??le().default),Ke=u(()=>le().name in e.overrides);Ms(X,{get label(){return t(oe)},get tokenName(){return le().name},get value(){return t(Re)},get overridden(){return t(Ke)},onChange:We=>e.onSet(le().name,We),onReset:()=>e.onReset(le().name)})}},wt=X=>{const oe=u(()=>J(e.overrides[j().name]??j().default,j().colorKey));var Re=Hu(),Ke=s(Re),We=r(Ke);C(gt=>{lt(Ke,gt),Y(Ke,"title",t(oe)),b(We,` Dark: auto-derived (${t(oe)??""})`)},[()=>`background: ${o(t(oe),t(oe))}`]),f(X,Re)};I(kt,X=>{le()&&!t(K)?X(Pt):le()&&t(K)&&X(wt,1)})}C(()=>b(_e,j().label)),f(ee,ne)}),f(se,V)};I(ze,se=>{t(B)&&se(De)})}var Ae=r(we,4),Ie=s(Ae),Ve=r(s(Ie),2),nt=s(Ve),ct=r(Ie,2);{var dt=se=>{var V=Wu(),F=r(de(V),2);{let le=u(()=>"--sf-lumlocker"in e.overrides);pt(F,{label:"LumLocker lightness (L)",get value(){return t(T)},min:0,max:1,step:.01,help:"--sf-lumlocker — fixed OKLCH L applied to lockable brand colors under [data-lumlocker]",get overridden(){return t(le)},onChange:ue=>e.onSet("--sf-lumlocker",String(ue)),onReset:()=>e.onReset("--sf-lumlocker")})}var ee=r(F,2),he=r(s(ee),2);re(he,17,()=>c,le=>le.key,(le,ue)=>{var K=Bt(),ne=de(K);re(ne,16,()=>["light","dark"],Ne=>Ne,(Ne,H)=>{const _e=u(()=>l(`var(--sf-color-${t(ue).key}-source-${H})`,H,"")),ie=u(()=>Pe(t(ue).key,H));var Le=Ku(),Fe=s(Le),Qe=s(Fe),Xe=r(Qe),bt=s(Xe),kt=r(Fe,2),Pt=r(kt,4);C(wt=>{b(Qe,`${t(ue).label??""} `),b(bt,H==="light"?"L":"D"),lt(kt,`background:${t(_e)||`var(--sf-color-${t(ue).key})`}`),lt(Pt,wt),Y(Pt,"title",t(ie))},[()=>`background:${o(t(ie),t(ie))}`]),f(Ne,Le)}),f(le,K)});var Z=r(ee,2),j=s(Z);C(()=>{Ye(Z,1,`w-full py-2 rounded-lg text-[10px] font-bold border transition-all cursor-pointer ${Ko.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"}`),b(j,Ko.value?"✓ LumLocker active on canvas — click to disable":"Preview LumLocker on live canvas")}),x("click",Z,()=>{Ko.value=!Ko.value}),f(se,V)};I(ct,se=>{t(R)&&se(dt)})}var Ot=r(Ae,4),mt=s(Ot),Q=r(s(mt),2),Oe=s(Q),Me=r(mt,2);{var at=se=>{var V=Xu();re(V,21,()=>M,([F,ee])=>F.name,(F,ee)=>{var he=u(()=>Pa(t(ee),2));let Z=()=>t(he)[0],j=()=>t(he)[1];var le=Ju(),ue=s(le),K=s(ue),ne=r(ue,2);{let ie=u(()=>`${Z().label} light`),Le=u(()=>e.overrides[Z().name]??t(me)[Z().name]?.value??Z().default),Fe=u(()=>Z().name in e.overrides);Ms(ne,{get label(){return t(ie)},get tokenName(){return Z().name},get value(){return t(Le)},get overridden(){return t(Fe)},onChange:Qe=>e.onSet(Z().name,Qe),onReset:()=>e.onReset(Z().name)})}var Ne=r(ne,2);{var H=ie=>{{let Le=u(()=>`${j().label} dark`),Fe=u(()=>e.overrides[j().name]??t(me)[j().name]?.value??j().default),Qe=u(()=>j().name in e.overrides);Ms(ie,{get label(){return t(Le)},get tokenName(){return j().name},get value(){return t(Fe)},get overridden(){return t(Qe)},onChange:Xe=>e.onSet(j().name,Xe),onReset:()=>e.onReset(j().name)})}};I(Ne,ie=>{j()&&ie(H)})}var _e=r(Ne,2);re(_e,21,()=>[["L","light",e.overrides[Z().name]??Z().default,be(),W()],["D","dark",j()?e.overrides[j().name]??j().default:e.overrides[Z().name]??Z().default,ye(),ke()]],([ie,Le,Fe,Qe,Xe])=>ie,(ie,Le)=>{var Fe=u(()=>Pa(t(Le),5));let Qe=()=>t(Fe)[0],Xe=()=>t(Fe)[1],bt=()=>t(Fe)[2],kt=()=>t(Fe)[3],Pt=()=>t(Fe)[4];var wt=Zu(),X=s(wt),oe=s(X),Re=r(X,2);re(Re,20,()=>y,Ke=>Ke,(Ke,We)=>{const gt=u(()=>He(bt(),We,kt(),Pt()));var yt=Yu();C(()=>{lt(yt,`background: ${t(gt)}`),Y(yt,"title",`${Z().colorKey}-${We} (${Xe()}) — ${t(gt)}`)}),f(Ke,yt)}),C(()=>b(oe,Qe())),f(ie,wt)}),C(()=>b(K,Z().label)),f(F,le)}),f(se,V)};I(Me,se=>{t(S)&&se(at)})}var ft=r(Ot,4),_t=s(ft),xt=r(s(_t),2),Nt=s(xt),St=r(_t,2);{var Et=se=>{var V=ep(),F=r(de(V),2);re(F,17,()=>w,ue=>ue.name,(ue,K)=>{Fo(ue,{get knob(){return t(K)},get overrides(){return e.overrides},onChange:(ne,Ne)=>Ne===null?e.onReset(ne):e.onSet(ne,Ne)})});var ee=r(F,2),he=s(ee);re(he,17,()=>Be,ue=>ue.label,(ue,K)=>{const ne=u(()=>ae(t(K).fg,t(K).bg));var Ne=Bt(),H=de(Ne);{var _e=ie=>{var Le=Qu(),Fe=s(Le),Qe=r(Fe,2),Xe=s(Qe),bt=r(Qe,2),kt=s(bt),Pt=r(bt,2),wt=s(Pt);C((X,oe)=>{lt(Fe,X),b(Xe,t(K).label),b(kt,`${oe??""}:1`),Ye(Pt,1,`text-[9px] font-bold px-1.5 py-0.5 rounded ${t(ne)>=4.5?"bg-emerald-500/20 text-emerald-300":"bg-amber-500/20 text-amber-300"}`),b(wt,t(ne)>=4.5?"AA":t(ne)>=3?"AA-L":"✗")},[()=>`background:${o(t(K).bg,t(K).bg)}; color:${o(t(K).fg,t(K).fg)}`,()=>t(ne).toFixed(2)]),f(ie,Le)};I(H,ie=>{t(ne)!==null&&ie(_e)})}f(ue,Ne)});var Z=r(he,2);{var j=ue=>{var K=$u();x("click",K,()=>e.onSelectDomain?.("wcag")),f(ue,K)};I(Z,ue=>{e.onSelectDomain&&ue(j)})}var le=r(ee,2);re(le,17,()=>E,ue=>ue.name,(ue,K)=>{Fo(ue,{get knob(){return t(K)},get overrides(){return e.overrides},onChange:(ne,Ne)=>Ne===null?e.onReset(ne):e.onSet(ne,Ne)})}),f(se,V)};I(St,se=>{t(U)&&se(Et)})}var it=r(ft,4),Gt=s(it),ea=r(s(Gt),2),ia=s(ea),Je=r(Gt,2);{var ut=se=>{const V=u(()=>e.overrides["--sf-color-primary-source-light"]??d.find(X=>X.name==="--sf-color-primary-source-light")?.default??"oklch(0.47 0.27 264)"),F=u(()=>e.overrides["--sf-color-primary-source-dark"]),ee=u(()=>t(F)??(!t(ve).has("primary")||t(F)?d.find(X=>X.name==="--sf-color-primary-source-dark")?.default??J(t(V),"primary"):J(t(V),"primary"))),he=u(()=>t(D)==="light"?t(V):t(ee)),Z=u(()=>t(D)==="light"?be():ye()),j=u(()=>t(D)==="light"?W():ke()),le=u(()=>t(D)==="light"?be():ye()),ue=u(()=>t(D)==="light"?W():ke());var K=rp(),ne=r(de(K),2);re(ne,21,()=>h,X=>X.label,(X,oe)=>{var Re=tp(),Ke=s(Re),We=s(Ke),gt=r(Ke,2),yt=s(gt);C(()=>{Ye(Re,1,`flex flex-col items-center gap-0.5 p-2.5 rounded-xl border transition-all cursor-pointer ${t(je)?.label===t(oe).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"}`),b(We,t(oe).label),b(yt,t(oe).desc)}),x("click",Re,()=>e.onBulkChange(t(oe).patch)),f(X,Re)});var Ne=r(ne,2),H=r(s(Ne),2);re(H,21,()=>m.filter(X=>X.step==="tint"),X=>X.name,(X,oe)=>{{let Re=u(()=>$e(t(oe))),Ke=u(()=>t(oe).name in e.overrides);pt(X,{get label(){return t(oe).label},get value(){return t(Re)},min:0,max:100,step:1,unit:"%",get overridden(){return t(Ke)},onChange:We=>e.onSet(t(oe).name,`${We}%`),onReset:()=>e.onReset(t(oe).name)})}});var _e=r(Ne,2),ie=r(s(_e),2);re(ie,21,()=>m.filter(X=>X.step==="shade"),X=>X.name,(X,oe)=>{{let Re=u(()=>$e(t(oe))),Ke=u(()=>t(oe).name in e.overrides);pt(X,{get label(){return t(oe).label},get value(){return t(Re)},min:0,max:100,step:1,unit:"%",get overridden(){return t(Ke)},onChange:We=>e.onSet(t(oe).name,`${We}%`),onReset:()=>e.onReset(t(oe).name)})}});var Le=r(_e,2),Fe=s(Le),Qe=r(s(Fe),2);re(Qe,20,()=>["light","dark"],X=>X,(X,oe)=>{var Re=ms(),Ke=s(Re);C(()=>{Ye(Re,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(D)===oe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(Ke,oe==="light"?"Light":"Dark")}),x("click",Re,()=>{O(D,oe,!0)}),f(X,Re)});var Xe=r(Fe,2);re(Xe,21,()=>m,X=>X.name,(X,oe)=>{const Re=u(()=>$e(t(oe))),Ke=u(()=>t(oe).label),We=u(()=>He(t(he),t(Ke),t(Z),t(j)));var gt=ap(),yt=s(gt),ht=s(yt),Te=r(yt,2),Ce=r(Te,2),At=s(Ce);C((oa,Vt,Zt)=>{b(ht,oa),lt(Te,Vt),Y(Te,"title",Zt),b(At,t(Ke))},[()=>Math.round(t(Re)),()=>`background:${t(We)}; height: ${Math.max(t(Re)/100*56,6)}px`,()=>`primary-${t(Ke)} (${t(D)}) · mix ${Math.round(t(Re))}%`]),f(X,gt)});var bt=r(Le,2),kt=s(bt),Pt=r(s(kt),2);re(Pt,20,()=>["light","dark"],X=>X,(X,oe)=>{var Re=ms(),Ke=s(Re);C(()=>{Ye(Re,1,`px-1.5 py-0.5 rounded text-[8px] font-bold cursor-pointer transition-all ${t(D)===oe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(Ke,oe==="light"?"Light":"Dark")}),x("click",Re,()=>{O(D,oe,!0)}),f(X,Re)});var wt=r(kt,2);re(wt,16,()=>k,X=>X,(X,oe)=>{const Re=u(()=>e.overrides[`--sf-color-${oe}-source-light`]??d.find(At=>At.name===`--sf-color-${oe}-source-light`)?.default??"oklch(0.5 0.15 264)"),Ke=u(()=>`--sf-color-${oe}-source-dark`),We=u(()=>e.overrides[t(Ke)]??(t(ve).has(oe)&&!e.overrides[t(Ke)]?J(t(Re),oe):d.find(At=>At.name===t(Ke))?.default??J(t(Re),oe))),gt=u(()=>t(D)==="light"?t(Re):t(We));var yt=sp(),ht=s(yt),Te=s(ht),Ce=r(ht,2);re(Ce,20,()=>y,At=>At,(At,oa)=>{const Vt=u(()=>He(t(gt),oa,t(le),t(ue)));var Zt=op();C(()=>{lt(Zt,`background:${t(Vt)}`),Y(Zt,"title",`${oe}-${oa} (${t(D)})`)}),f(At,Zt)}),C(()=>b(Te,oe)),f(X,yt)}),f(se,K)};I(Je,se=>{t(P)&&se(ut)})}var Lt=r(it,4),Dt=s(Lt),Rt=r(s(Dt),2),pe=s(Rt),Ze=r(Dt,2);{var vt=se=>{var V=fp(),F=r(de(V),2);re(F,16,()=>["brand","fade"],ee=>ee,(ee,he)=>{var Z=dp(),j=de(Z),le=s(j),ue=r(j,2);re(ue,21,()=>i.filter(K=>K.group===he),K=>K.name,(K,ne)=>{const Ne=u(()=>`var(${t(ne).name})`),H=u(()=>Ge(t(ne)));var _e=cp(),ie=s(_e),Le=r(ie,2),Fe=s(Le),Qe=s(Fe),Xe=s(Qe),bt=r(Qe,2);{var kt=ht=>{var Te=np();x("click",Te,()=>{delete A[t(ne).name],e.onReset(t(ne).name)}),f(ht,Te)};I(bt,ht=>{t(ne).name in e.overrides&&ht(kt)})}var Pt=r(Fe,2);{var wt=ht=>{var Te=lp(),Ce=r(s(Te),2);re(Ce,16,()=>["top","right","bottom","left"],At=>At,(At,oa)=>{var Vt=ms(),Zt=s(Vt);C(()=>{Ye(Vt,1,`flex-1 py-0.5 rounded text-[9px] border transition-all cursor-pointer capitalize ${t(H).dir===oa?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),b(Zt,oa)}),x("click",Vt,()=>ge(t(ne),"dir",oa)),f(At,Vt)}),f(ht,Te)},X=ht=>{var Te=ip(),Ce=r(s(Te),2),At=r(Ce,2),oa=s(At);C(()=>{Xt(Ce,t(H).angle),b(oa,`${t(H).angle??""}°`)}),x("input",Ce,Vt=>ge(t(ne),"angle",parseInt(Vt.target.value))),f(ht,Te)};I(Pt,ht=>{t(ne).kind==="dir"&&t(ne).group!=="fade"?ht(wt):t(ne).kind!=="dir"&&ht(X,1)})}var oe=r(Pt,2),Re=r(s(oe),2),Ke=r(Re,2),We=r(oe,2),gt=r(s(We)),yt=r(We,2);C(ht=>{lt(ie,ht),b(Xe,t(ne).label),Xt(Re,t(H).stop1),Xt(Ke,t(H).stop2),b(gt,` ${t(ne).formula??""}`),Xt(yt,e.overrides[t(ne).name]??"")},[()=>`background:${n(t(Ne),t(Ne))}`]),x("change",Re,ht=>ge(t(ne),"stop1",ht.target.value.trim())),x("change",Ke,ht=>ge(t(ne),"stop2",ht.target.value.trim())),x("change",yt,ht=>{const Te=ht.target.value.trim();delete A[t(ne).name],Te?e.onSet(t(ne).name,Te):e.onReset(t(ne).name)}),f(K,_e)}),C(()=>b(le,he==="brand"?"Brand & surface":"Edge fades")),f(ee,Z)}),f(se,V)};I(Ze,se=>{t(L)&&se(vt)})}var Ut=r(Lt,4),Ue=s(Ut),Ee=r(s(Ue),2),qe=s(Ee),et=r(Ue,2);{var Ct=se=>{var V=up(),F=r(de(V),2);re(F,20,()=>[["light dark","light dark (default)"],["light","Light only"],["dark","Dark only"]],([ee,he])=>ee,(ee,he)=>{var Z=u(()=>Pa(he,2));let j=()=>t(Z)[0],le=()=>t(Z)[1];const ue=u(()=>e.overrides["--sf-color-scheme"]??"light dark");var K=ms(),ne=s(K);C(()=>{Ye(K,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(ue)===j()?"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"}`),b(ne,le())}),x("click",K,()=>j()==="light dark"?e.onReset("--sf-color-scheme"):e.onSet("--sf-color-scheme",j())),f(ee,K)}),f(se,V)};I(et,se=>{t(z)&&se(Ct)})}var ta=r(Ut,4),zt=s(ta),It=r(s(zt),2),Ft=s(It),la=r(zt,2);{var xa=se=>{var V=mp(),F=r(de(V),2);re(F,21,()=>v,ee=>ee.name,(ee,he)=>{const Z=u(()=>o(`var(${t(he).name})`,""));var j=pp(),le=s(j),ue=s(le),K=r(le,2);{let ne=u(()=>e.overrides[t(he).name]??""),Ne=u(()=>t(Z)?`auto-derived · ${t(Z)}`:"auto-derived"),H=u(()=>t(he).name in e.overrides);qa(K,{get token(){return t(he).name},get value(){return t(ne)},get placeholder(){return t(Ne)},get isOverridden(){return t(H)},onSet:_e=>e.onSet(t(he).name,_e),onReset:()=>e.onReset(t(he).name)})}C(()=>b(ue,t(he).label)),f(ee,j)}),f(se,V)};I(la,se=>{t(_)&&se(xa)})}C(()=>{Y(fe,"aria-expanded",t(B)),b(xe,t(B)?"▲":"▼"),Y(Ie,"aria-expanded",t(R)),b(nt,t(R)?"▲":"▼"),Y(mt,"aria-expanded",t(S)),b(Oe,t(S)?"▲":"▼"),Y(_t,"aria-expanded",t(U)),b(Nt,t(U)?"▲":"▼"),Y(Gt,"aria-expanded",t(P)),b(ia,t(P)?"▲":"▼"),Y(Dt,"aria-expanded",t(L)),b(pe,t(L)?"▲":"▼"),Y(Ue,"aria-expanded",t(z)),b(qe,t(z)?"▲":"▼"),Y(zt,"aria-expanded",t(_)),b(Ft,t(_)?"▲":"▼")}),x("click",fe,()=>{O(B,!t(B))}),x("click",Ie,()=>{O(R,!t(R))}),x("click",mt,()=>{O(S,!t(S))}),x("click",_t,()=>{O(U,!t(U))}),x("click",Gt,()=>{O(P,!t(P))}),x("click",Dt,()=>{O(L,!t(L))}),x("click",Ue,()=>{O(z,!t(z))}),x("click",zt,()=>{O(_,!t(_))}),f(a,q),$t()}aa(["click","input","change"]);var gp=g('<div class="flex items-baseline justify-between gap-3 mt-2 px-1 overflow-hidden"><span class="text-slate-500 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span> <span class="text-white/80 leading-none truncate">Aa<span class="text-[8px] font-mono align-middle ml-1"> </span></span></div>'),bp=g('<div class="flex items-center gap-2 mt-2 px-1"><div class="h-2 bg-indigo-500/40 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">min</span> <div class="h-2 bg-indigo-500/70 rounded shrink-0"></div> <span class="text-[8px] font-mono text-slate-600">max</span></div>'),yp=g('<option style="background:#16161e;">Custom</option>'),xp=g('<option style="background:#16161e;"> </option>'),kp=g('<div class="flex items-center gap-2"><span class="text-[9px] text-slate-500 w-14 shrink-0"> </span> <select class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded text-[10px] text-slate-200 px-1.5 py-1 focus:outline-none focus:border-indigo-500 cursor-pointer"><!><!></select> <input type="number" class="w-16 shrink-0 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"/></div>'),wp=g('<div class="mt-3 pt-3 border-t border-white/6"><div class="text-[9px] font-semibold text-slate-500 mb-2">Modular scale ratio</div> <div class="space-y-2"></div></div>'),_p=g('<div class="flex justify-end mt-2"><button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button></div>'),Cp=g('<div><div class="flex items-center justify-between mb-2"><span class="text-[10px] font-bold text-slate-300"> </span> <span class="text-[9px] font-mono text-slate-500">clamp(<span class="text-indigo-300"> </span> … <span class="text-indigo-300"> </span>)</span></div> <div class="clampTrack relative h-5 flex items-center mb-2"><div class="absolute inset-x-0 h-1 bg-white/8 rounded-full"></div> <div class="absolute h-1 bg-indigo-500 rounded-full"></div> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <input type="range" class="clampRange absolute inset-0 w-full svelte-iy59wr"/> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div> <div class="absolute w-3 h-3 bg-white rounded-full shadow-md border border-indigo-400/40 pointer-events-none"></div></div> <div class="grid grid-cols-2 gap-2"><label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full 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"/></label> <label class="flex items-center gap-1.5"><span class="text-[9px] text-slate-500 shrink-0"> </span> <input type="number" class="w-full 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"/></label></div> <!> <!> <!></div>');function Os(a,e){Qt(e,!0);let o=ka(e,"unit",3,"rem"),n=ka(e,"minLabel",3,"Min"),l=ka(e,"maxLabel",3,"Max"),i=ka(e,"overridden",3,!1),c=ka(e,"ratioMin_bound",3,1.05),d=ka(e,"ratioMax_bound",3,1.8),p=ka(e,"previewKind",3,"none");function m(Se){return Math.min(e.max,Math.max(e.min,Se))}let h=u(()=>(e.minValue-e.min)/(e.max-e.min)*100),v=u(()=>(e.maxValue-e.min)/(e.max-e.min)*100);function y(Se){return Math.min(d(),Math.max(c(),Se))}let k=u(()=>e.ratioPresets?.find(Se=>e.ratioMin!==void 0&&Math.abs(Se.value-e.ratioMin)<.0015)?.value),w=u(()=>e.ratioPresets?.find(Se=>e.ratioMax!==void 0&&Math.abs(Se.value-e.ratioMax)<.0015)?.value);var E=Cp(),B=s(E),U=s(B),P=s(U),S=r(U,2),_=r(s(S)),z=s(_),L=r(_,2),R=s(L),D=r(B,2),A=r(s(D),2),T=r(A,2),N=r(T,2),$=r(N,2),Ge=r($,2),te=r(D,2),ge=s(te),Pe=s(ge),ve=s(Pe),me=r(Pe,2),je=r(ge,2),$e=s(je),tt=s($e),M=r($e,2),J=r(te,2);{var be=Se=>{var Be=gp(),ae=s(Be),q=r(s(ae)),we=s(q),fe=r(ae,2),ce=r(s(fe)),xe=s(ce);C((ze,De,Ae,Ie)=>{lt(ae,ze),b(we,De),lt(fe,Ae),b(xe,Ie)},[()=>`font-size:${Math.min(e.minValue,2)}rem`,()=>n().toLowerCase(),()=>`font-size:${Math.min(e.maxValue,2.6)}rem`,()=>l().toLowerCase()]),f(Se,Be)},ye=Se=>{var Be=bp(),ae=s(Be),q=r(ae,4);C((we,fe)=>{lt(ae,we),lt(q,fe)},[()=>`width:${Math.min(e.minValue*28,120)}px`,()=>`width:${Math.min(e.maxValue*28,200)}px`]),f(Se,Be)};I(J,Se=>{p()==="type"?Se(be):p()==="space"&&Se(ye,1)})}var W=r(J,2);{var ke=Se=>{var Be=wp(),ae=r(s(Be),2);re(ae,21,()=>[{side:n(),value:e.ratioMin,active:t(k),onChange:e.onRatioMinChange},{side:l(),value:e.ratioMax,active:t(w),onChange:e.onRatioMaxChange}],q=>q.side,(q,we)=>{var fe=kp(),ce=s(fe),xe=s(ce),ze=r(ce,2),De=s(ze);{var Ae=ct=>{var dt=yp();dt.value=dt.__value="",f(ct,dt)};I(De,ct=>{t(we).active===void 0&&ct(Ae)})}var Ie=r(De);re(Ie,17,()=>e.ratioPresets,ct=>ct.value,(ct,dt)=>{var Ot=xp(),mt=s(Ot),Q={};C(Oe=>{b(mt,t(dt).label),Q!==(Q=Oe)&&(Ot.value=(Ot.__value=Oe)??"")},[()=>String(t(dt).value)]),f(ct,Ot)});var Ve;Na(ze);var nt=r(ze,2);Y(nt,"step",.001),C(ct=>{b(xe,t(we).side),Y(ze,"aria-label",`${t(we).side} modular scale ratio preset`),Ve!==(Ve=ct)&&(ze.value=(ze.__value=ct)??"",Ba(ze,ct)),Y(nt,"aria-label",`${t(we).side} modular scale custom ratio`),Y(nt,"min",c()),Y(nt,"max",d()),Xt(nt,t(we).value)},[()=>t(we).active!==void 0?String(t(we).active):""]),x("change",ze,ct=>{const dt=parseFloat(ct.target.value);Number.isFinite(dt)&&t(we).onChange?.(y(dt))}),x("change",nt,ct=>{const dt=parseFloat(ct.target.value);Number.isFinite(dt)&&t(we).onChange?.(y(dt))}),f(q,fe)}),f(Se,Be)};I(W,Se=>{e.ratioPresets&&Se(ke)})}var He=r(W,2);{var st=Se=>{var Be=_p(),ae=s(Be);x("click",ae,function(...q){e.onReset?.apply(this,q)}),f(Se,Be)};I(He,Se=>{i()&&e.onReset&&Se(st)})}C(Se=>{Ye(E,1,`rounded-xl border p-3 ${i()?"bg-indigo-500/8 border-indigo-500/25":"bg-white/4 border-white/8"}`,"svelte-iy59wr"),b(P,e.title),b(z,`${e.minValue??""}${o()??""}`),b(R,`${e.maxValue??""}${o()??""}`),lt(A,Se),Y(T,"min",e.min),Y(T,"max",e.max),Y(T,"step",e.step),Xt(T,e.minValue),Y(T,"aria-label",`${e.title} min`),Y(N,"min",e.min),Y(N,"max",e.max),Y(N,"step",e.step),Xt(N,e.maxValue),Y(N,"aria-label",`${e.title} max`),lt($,`left: calc(${t(h)}% - 6px)`),lt(Ge,`left: calc(${t(v)}% - 6px)`),b(ve,n()),Y(me,"min",e.min),Y(me,"max",e.max),Y(me,"step",e.step),Xt(me,e.minValue),b(tt,l()),Y(M,"min",e.min),Y(M,"max",e.max),Y(M,"step",e.step),Xt(M,e.maxValue)},[()=>`left:${Math.min(t(h),t(v))}%; right:${100-Math.max(t(h),t(v))}%`]),x("input",T,Se=>e.onMinChange(Math.min(m(parseFloat(Se.target.value)),e.maxValue))),x("input",N,Se=>e.onMaxChange(Math.max(m(parseFloat(Se.target.value)),e.minValue))),x("change",me,Se=>e.onMinChange(m(parseFloat(Se.target.value)||e.min))),x("change",M,Se=>e.onMaxChange(m(parseFloat(Se.target.value)||e.max))),f(a,E),$t()}aa(["input","change","click"]);var Op=g('<option style="font-family:inherit;background:#16161e;"> </option>'),vs=g('<option style="background:#16161e;"> </option>'),wr=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Sp=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <select 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"><!><!></select> <!></div>'),Lp=g('<!> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="text-[10px] font-semibold text-slate-400">Google Font</div> <div class="flex gap-2"><select 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"><option style="background:#16161e;">Pick a font…</option><!></select> <div class="flex gap-1 shrink-0"><button>Body</button> <button>Heading</button></div></div> <input type="text" placeholder="…or type any Google font name" class="w-full 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"/> <button class="w-full py-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 text-[11px] font-bold cursor-pointer hover:bg-indigo-600/30 transition-all"> </button></div>',1),Pp=g('<span class="absolute top-0.5 right-0.5 w-1 h-1 rounded-full bg-indigo-400"></span>'),Ip=g("<button> <!></button>"),_r=g('<option style="background:#16161e;">custom</option>'),Lo=g("<button> </button>"),Bp=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Tracking</span> <select 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"><!><!></select></div>'),Up=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Max width</span> <input type="text" placeholder="none" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>'),zp=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer"> </button>'),Ap=g('<div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 px-3 py-3 overflow-hidden"><div class="text-white/85 truncate">The quick brown fox</div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Size</span> <select 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"><!><!></select></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Line height</span> <select 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"><!><!></select></div> <div><span class="text-[10px] font-semibold text-slate-400">Weight</span> <div class="flex gap-1 mt-1"></div></div> <!> <!> <div class="flex justify-end"><!></div>',1),jn=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100 transition-colors">reset</button>'),Gn=g('<div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>'),Ep=g("<button><span> </span></button>"),Rp=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5"> </div> <div class="flex gap-1"></div></div>'),Tp=g('<!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Emphasis style</div> <div class="flex gap-1"></div></div> <!> <!> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">External marker</span> <input type="text" class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] font-mono text-slate-300 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <!></div>',1),Hn=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),Dp=g('<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <div class="flex gap-1"></div></div>'),Mp=g('<p class="text-[9px] text-slate-600 leading-relaxed">Named weight tokens. Override if your font uses non-standard axis values.</p> <!>',1),Np=g('<div><div class="text-[9px] text-slate-600 mb-1"> </div> <!></div>'),Fp=g('<!> <div class="grid grid-cols-2 gap-3"></div> <!>',1),jp=g('<div class="group"><div class="flex items-center justify-between mb-1"><span class="text-[10px] font-semibold text-slate-200"> </span> <!></div> <!></div>'),Gp=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale. Each endpoint has three values — viewport width,
+      base size, and modular ratio. Sizes interpolate fluidly between mobile and desktop.</p> <!> <!> <div class="space-y-4"></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Line height scale</div> <div class="space-y-2"></div></div> <!> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Letter-spacing scale</div> <p class="text-[9px] text-slate-600 mb-2">Overriding these propagates to heading sizes that reference them.</p> <div class="space-y-2"></div></div>`,1),Hp=g('<div class="flex items-baseline gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 shrink-0 text-right"> </span> <span class="text-white/80 font-medium leading-none truncate">Aa</span> <span class="text-[9px] font-mono text-slate-600 ml-auto shrink-0"> </span></div>'),qp=g('<div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1 overflow-hidden"></div>'),Cr=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Vp=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-400 w-6 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),Kp=g('<p class="text-[9px] text-slate-600 leading-relaxed">Per-text-size max-width caps on <span class="font-mono text-slate-400">.sf-text-*</span> elements. Set to <span class="font-mono text-slate-400">none</span> to remove the constraint; use <span class="font-mono text-slate-400">ch</span> units for character-based measures.</p> <div class="space-y-1.5"></div>',1),Wp=g('<p class="text-[9px] text-slate-600 leading-relaxed">Advanced OpenType and variable-font axes. Leave as <span class="font-mono text-slate-400">normal</span> unless your font supports these features.</p> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Numeric figures</div> <div class="flex gap-1"></div></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Optical sizing</div> <div class="flex gap-1"></div></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Font features</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 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"/> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Variation</span> <input type="text" placeholder="normal" class="flex-1 min-w-0 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"/> <!></div>',1),Yp=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font families</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Per-type styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Body text</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Font weight scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Display type</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section><button class="w-full flex items-center justify-between cursor-pointer mb-3"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scale preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line lengths (max-width)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Advanced typography</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function Zp(a,e){Qt(e,!0);const o=[{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}],n=[{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"}],l=[{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"}],i=[{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"}],c=["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"],d=[{label:"balance",value:"balance"},{label:"pretty",value:"pretty"},{label:"normal",value:"normal"}],p=["300","400","500","600","700","800"],m={"--sf-font-weight-body":"400","--sf-font-weight-heading":"600","--sf-font-weight-display":"700","--sf-font-weight-interactive":"600"},h=[{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}],v=[{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}],y=[{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}],k=[{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}],w=y.map(H=>({label:H.label,value:`var(${H.token})`,num:H.default})),E=v.map(H=>({label:H.label,value:`var(${H.token})`,em:H.default})),B=[{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)"}];let U=G("h1"),P=u(()=>B.find(H=>H.id===t(U)));const S=No.typography??[];function _(H,_e){const ie=parseFloat(e.overrides[H]??"");return isNaN(ie)?_e:ie}let z=u(()=>_("--sf-text-ratio-min",1.25)),L=u(()=>_("--sf-text-ratio-max",1.333)),R=u(()=>_("--sf-text-base-min",1)),D=u(()=>_("--sf-text-base-max",1.25)),A=u(()=>_("--sf-text-display-base-min",2.4)),T=u(()=>_("--sf-text-display-base-max",3)),N=u(()=>_("--sf-leading-taper",0)),$=u(()=>_("--sf-text-scale",1)),Ge=u(()=>_("--sf-fluid-min-vw",22.5)),te=u(()=>_("--sf-fluid-max-vw",90)),ge=G(!1),Pe=G(!1),ve=G(!1),me=G(!1),je=G(!1),$e=G(!1),tt=G(!1),M=G(!1),J=G(!1),be=u(()=>e.overrides["--sf-font-body"]??""),ye=u(()=>e.overrides["--sf-font-heading"]??""),W=u(()=>e.overrides["--sf-font-mono"]??"ui-monospace, monospace"),ke=G(""),He=G("body");function st(H){const _e=e.overrides[H.token];return _e?parseFloat(_e.replace("em","")):H.default}function Se(H){return _(H.token,H.default)}function Be(H){if(!H.trim())return;const _e=`gf-${H.replace(/\s+/g,"-")}`;if(!document.getElementById(_e)){const ie=document.createElement("link");ie.id=_e,ie.rel="stylesheet",ie.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(H)}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(ie)}}function ae(H,_e){if(!H.trim())return;Be(H);const ie=_e==="body"?"--sf-font-body":"--sf-font-heading";e.onSet(ie,`'${H}', sans-serif`)}function q(H,_e){return H?e.overrides[H]??_e:_e}function we(H,_e,ie){H&&(_e===ie?e.onReset(H):e.onSet(H,_e))}let fe=u(()=>{const H=q(t(P).size,t(P).dSize),_e=k.find(Le=>Le.value===H),ie=(t(R)+t(D))/2;return Math.min((_e?.approx??1)*ie*t($),2.4)}),ce=u(()=>{const H=q(t(P).wt,t(P).dWt),_e=parseInt(H);return isNaN(_e)?600:_e}),xe=u(()=>{if(!t(P).ls)return 0;const H=q(t(P).ls,t(P).dLs),_e=E.find(Le=>Le.value===H);if(_e)return _e.em;const ie=parseFloat(H.replace("em",""));return isNaN(ie)?0:ie}),ze=u(()=>{const H=q(t(P).lh,t(P).dLh),_e=w.find(Le=>Le.value===H);if(_e)return _e.num;const ie=parseFloat(H);return isNaN(ie)?1.3:ie});var De=Yp(),Ae=s(De),Ie=s(Ae),Ve=r(s(Ie),2),nt=s(Ve),ct=r(Ie,2);{var dt=H=>{var _e=Lp(),ie=de(_e);re(ie,17,()=>[{label:"Body",token:"--sf-font-body",current:t(be),opts:n},{label:"Heading",token:"--sf-font-heading",current:t(ye),opts:l},{label:"Mono",token:"--sf-font-mono",current:t(W),opts:i}],We=>We.token,(We,gt)=>{var yt=Sp(),ht=s(yt),Te=s(ht),Ce=r(ht,2),At=s(Ce);re(At,17,()=>t(gt).opts,ot=>ot.label,(ot,rt)=>{var Tt=Op(),Kt=s(Tt),ca={};C(()=>{b(Kt,t(rt).label),ca!==(ca=t(rt).value)&&(Tt.value=(Tt.__value=t(rt).value)??"")}),f(ot,Tt)});var oa=r(At);{var Vt=ot=>{var rt=vs(),Tt=s(rt),Kt={};C(ca=>{b(Tt,`Custom: ${ca??""}`),Kt!==(Kt=t(gt).current)&&(rt.value=(rt.__value=t(gt).current)??"")},[()=>t(gt).current.split(",")[0].replace(/['"]/g,"")]),f(ot,rt)},Zt=u(()=>t(gt).current&&!t(gt).opts.some(ot=>ot.value===t(gt).current));I(oa,ot=>{t(Zt)&&ot(Vt)})}var pa;Na(Ce);var _a=r(Ce,2);{var _o=ot=>{var rt=wr();x("click",rt,()=>e.onReset(t(gt).token)),f(ot,rt)};I(_a,ot=>{t(gt).token in e.overrides&&ot(_o)})}C(()=>{b(Te,t(gt).label),lt(Ce,`font-family: ${t(gt).current||"inherit"}`),pa!==(pa=t(gt).current)&&(Ce.value=(Ce.__value=t(gt).current)??"",Ba(Ce,t(gt).current))}),x("change",Ce,ot=>{const rt=ot.target.value;rt?e.onSet(t(gt).token,rt):e.onReset(t(gt).token)}),f(We,yt)});var Le=r(ie,2),Fe=r(s(Le),2),Qe=s(Fe),Xe=s(Qe);Xe.value=Xe.__value="";var bt=r(Xe);re(bt,16,()=>c,We=>We,(We,gt)=>{var yt=vs(),ht=s(yt),Te={};C(()=>{b(ht,gt),Te!==(Te=gt)&&(yt.value=(yt.__value=gt)??"")}),f(We,yt)});var kt;Na(Qe);var Pt=r(Qe,2),wt=s(Pt),X=r(wt,2),oe=r(Fe,2),Re=r(oe,2),Ke=s(Re);C(()=>{kt!==(kt=t(ke))&&(Qe.value=(Qe.__value=t(ke))??"",Ba(Qe,t(ke))),Ye(wt,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(He)==="body"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Ye(X,1,`px-2 rounded text-[10px] border transition-all cursor-pointer ${t(He)==="heading"?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400"}`),Xt(oe,t(ke)),b(Ke,`Load & apply to ${t(He)??""}`)}),x("change",Qe,We=>{O(ke,We.target.value,!0)}),x("click",wt,()=>{O(He,"body")}),x("click",X,()=>{O(He,"heading")}),x("input",oe,We=>{O(ke,We.target.value,!0)}),x("click",Re,()=>ae(t(ke),t(He))),f(H,_e)};I(ct,H=>{t(ge)&&H(dt)})}var Ot=r(Ae,4),mt=s(Ot),Q=r(s(mt),2),Oe=s(Q),Me=r(mt,2);{var at=H=>{var _e=Ap(),ie=de(_e);re(ie,21,()=>B,ot=>ot.id,(ot,rt)=>{const Tt=u(()=>t(rt).size in e.overrides||t(rt).lh in e.overrides||t(rt).wt in e.overrides||!!t(rt).ls&&t(rt).ls in e.overrides);var Kt=Ip(),ca=s(Kt),Co=r(ca);{var to=Aa=>{var va=Pp();f(Aa,va)};I(Co,Aa=>{t(Tt)&&Aa(to)})}C(()=>{Ye(Kt,1,`relative flex-1 py-1 rounded-md text-[10px] font-bold transition-all cursor-pointer ${t(U)===t(rt).id?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(ca,`${t(rt).label??""} `)}),x("click",Kt,()=>{O(U,t(rt).id,!0)}),f(ot,Kt)});var Le=r(ie,2),Fe=s(Le),Qe=r(Le,2),Xe=r(s(Qe),2),bt=s(Xe);re(bt,17,()=>k,ot=>ot.value,(ot,rt)=>{var Tt=vs(),Kt=s(Tt),ca={};C(()=>{b(Kt,t(rt).label),ca!==(ca=t(rt).value)&&(Tt.value=(Tt.__value=t(rt).value)??"")}),f(ot,Tt)});var kt=r(bt);{var Pt=ot=>{var rt=_r(),Tt={};C(Kt=>{Tt!==(Tt=Kt)&&(rt.value=(rt.__value=Kt)??"")},[()=>q(t(P).size,t(P).dSize)]),f(ot,rt)},wt=u(()=>!k.some(ot=>ot.value===q(t(P).size,t(P).dSize)));I(kt,ot=>{t(wt)&&ot(Pt)})}var X;Na(Xe);var oe=r(Qe,2),Re=r(s(oe),2),Ke=s(Re);re(Ke,17,()=>w,ot=>ot.value,(ot,rt)=>{var Tt=vs(),Kt=s(Tt),ca={};C(()=>{b(Kt,`${t(rt).label??""} · ${t(rt).num??""}`),ca!==(ca=t(rt).value)&&(Tt.value=(Tt.__value=t(rt).value)??"")}),f(ot,Tt)});var We=r(Ke);{var gt=ot=>{var rt=_r(),Tt={};C(Kt=>{Tt!==(Tt=Kt)&&(rt.value=(rt.__value=Kt)??"")},[()=>q(t(P).lh,t(P).dLh)]),f(ot,rt)},yt=u(()=>!w.some(ot=>ot.value===q(t(P).lh,t(P).dLh)));I(We,ot=>{t(yt)&&ot(gt)})}var ht;Na(Re);var Te=r(oe,2),Ce=r(s(Te),2);re(Ce,20,()=>p,ot=>ot,(ot,rt)=>{const Tt=u(()=>q(t(P).wt,t(P).dWt));var Kt=Lo(),ca=s(Kt);C(Co=>{lt(Kt,Co),Ye(Kt,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Tt)===rt?"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"}`),b(ca,rt)},[()=>`font-weight:${parseInt(rt)}`]),x("click",Kt,()=>we(t(P).wt,rt,t(P).dWt)),f(ot,Kt)});var At=r(Te,2);{var oa=ot=>{var rt=Bp(),Tt=r(s(rt),2),Kt=s(Tt);re(Kt,17,()=>E,va=>va.value,(va,Oo)=>{var So=vs(),Es=s(So),dn={};C(()=>{b(Es,t(Oo).label),dn!==(dn=t(Oo).value)&&(So.value=(So.__value=t(Oo).value)??"")}),f(va,So)});var ca=r(Kt);{var Co=va=>{var Oo=_r(),So={};C(Es=>{So!==(So=Es)&&(Oo.value=(Oo.__value=Es)??"")},[()=>q(t(P).ls,t(P).dLs)]),f(va,Oo)},to=u(()=>!E.some(va=>va.value===q(t(P).ls,t(P).dLs)));I(ca,va=>{t(to)&&va(Co)})}var Aa;Na(Tt),C(va=>{Aa!==(Aa=va)&&(Tt.value=(Tt.__value=va)??"",Ba(Tt,va))},[()=>q(t(P).ls,t(P).dLs)]),x("change",Tt,va=>we(t(P).ls,va.target.value,t(P).dLs)),f(ot,rt)};I(At,ot=>{t(P).ls&&ot(oa)})}var Vt=r(At,2);{var Zt=ot=>{const rt=u(()=>`--sf-${t(P).id}-max-width`);var Tt=Up(),Kt=r(s(Tt),2),ca=r(Kt,2);{var Co=to=>{var Aa=wr();x("click",Aa,()=>e.onReset(t(rt))),f(to,Aa)};I(ca,to=>{t(rt)in e.overrides&&to(Co)})}C(()=>Xt(Kt,e.overrides[t(rt)]??"")),x("input",Kt,to=>{const Aa=to.target.value.trim();Aa?e.onSet(t(rt),Aa):e.onReset(t(rt))}),f(ot,Tt)};I(Vt,ot=>{t(P).id!=="body"&&ot(Zt)})}var pa=r(Vt,2),_a=s(pa);{var _o=ot=>{var rt=zp(),Tt=s(rt);C(()=>b(Tt,`reset ${t(P).label??""}`)),x("click",rt,()=>{const Kt={[t(P).size]:null,[t(P).lh]:null,[t(P).wt]:null};t(P).ls&&(Kt[t(P).ls]=null),e.onBulkChange(Kt)}),f(ot,rt)};I(_a,ot=>{(t(P).size in e.overrides||t(P).lh in e.overrides||t(P).wt in e.overrides||t(P).ls&&t(P).ls in e.overrides)&&ot(_o)})}C((ot,rt)=>{lt(Fe,`font-size:${t(fe)}rem; font-weight:${t(ce)}; letter-spacing:${t(xe)}em; line-height:${t(ze)}; font-family:${t(P).id==="body"?t(be)||"inherit":t(ye)||t(be)||"inherit"}`),X!==(X=ot)&&(Xe.value=(Xe.__value=ot)??"",Ba(Xe,ot)),ht!==(ht=rt)&&(Re.value=(Re.__value=rt)??"",Ba(Re,rt))},[()=>q(t(P).size,t(P).dSize),()=>q(t(P).lh,t(P).dLh)]),x("change",Xe,ot=>we(t(P).size,ot.target.value,t(P).dSize)),x("change",Re,ot=>we(t(P).lh,ot.target.value,t(P).dLh)),f(H,_e)};I(Me,H=>{t(Pe)&&H(at)})}var ft=r(Ot,4),_t=s(ft),xt=r(s(_t),2),Nt=s(xt),St=r(_t,2);{var Et=H=>{var _e=Tp(),ie=de(_e);re(ie,16,()=>[{label:"Body strong",tokenName:"--sf-font-weight-strong"},{label:"Interactive",tokenName:"--sf-font-weight-interactive"}],X=>X.tokenName,(X,oe)=>{const Re=u(()=>m[oe.tokenName]??"600"),Ke=u(()=>e.overrides[oe.tokenName]??t(Re)),We=u(()=>oe.tokenName in e.overrides);var gt=Gn(),yt=s(gt),ht=s(yt),Te=s(ht),Ce=r(ht,2);{var At=Vt=>{var Zt=jn();x("click",Zt,()=>e.onReset(oe.tokenName)),f(Vt,Zt)};I(Ce,Vt=>{t(We)&&Vt(At)})}var oa=r(yt,2);re(oa,20,()=>p,Vt=>Vt,(Vt,Zt)=>{var pa=Lo(),_a=s(pa);C(_o=>{lt(pa,_o),Ye(pa,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ke)===Zt?"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"}`),b(_a,Zt)},[()=>`font-weight: ${parseInt(Zt)}`]),x("click",pa,()=>Zt===t(Re)&&!t(We)?void 0:Zt===t(Re)?e.onReset(oe.tokenName):e.onSet(oe.tokenName,Zt)),f(Vt,pa)}),C(()=>b(Te,`${oe.label??""} weight`)),f(X,gt)});var Le=r(ie,2),Fe=r(s(Le),2);re(Fe,20,()=>[["Italic","italic"],["Normal","normal"]],([X,oe])=>oe,(X,oe)=>{var Re=u(()=>Pa(oe,2));let Ke=()=>t(Re)[0],We=()=>t(Re)[1];const gt=u(()=>e.overrides["--sf-body-em-style"]??"italic");var yt=Ep(),ht=s(yt),Te=s(ht);C(()=>{Ye(yt,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(gt)===We()?"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"}`),lt(ht,`font-style: ${We()}`),b(Te,Ke())}),x("click",yt,()=>We()==="italic"?e.onReset("--sf-body-em-style"):e.onSet("--sf-body-em-style",We())),f(X,yt)});var Qe=r(Le,2);{let X=u(()=>_("--sf-code-font-size",.875)),oe=u(()=>"--sf-code-font-size"in e.overrides);pt(Qe,{label:"Code font size",get value(){return t(X)},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 t(oe)},onChange:Re=>e.onSet("--sf-code-font-size",`${Re}em`),onReset:()=>e.onReset("--sf-code-font-size")})}var Xe=r(Qe,2);re(Xe,16,()=>[{label:"Heading wrap",token:"--sf-heading-text-wrap",defaultVal:"balance"},{label:"Body wrap",token:"--sf-body-text-wrap",defaultVal:"pretty"}],X=>X.token,(X,oe)=>{const Re=u(()=>e.overrides[oe.token]??oe.defaultVal);var Ke=Rp(),We=s(Ke),gt=s(We),yt=r(We,2);re(yt,21,()=>d,ht=>ht.value,(ht,Te)=>{var Ce=Lo(),At=s(Ce);C(()=>{Ye(Ce,1,`flex-1 px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Re)===t(Te).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"}`),b(At,t(Te).label)}),x("click",Ce,()=>t(Te).value===oe.defaultVal&&!(oe.token in e.overrides)?void 0:t(Te).value===oe.defaultVal?e.onReset(oe.token):e.onSet(oe.token,t(Te).value)),f(ht,Ce)}),C(()=>b(gt,oe.label)),f(X,Ke)});var bt=r(Xe,2),kt=r(s(bt),2);Y(kt,"placeholder",'" ↗"');var Pt=r(kt,2);{var wt=X=>{var oe=wr();x("click",oe,()=>e.onReset("--sf-link-external-marker")),f(X,oe)};I(Pt,X=>{"--sf-link-external-marker"in e.overrides&&X(wt)})}C(()=>Xt(kt,e.overrides["--sf-link-external-marker"]??"")),x("input",kt,X=>{const oe=X.target.value;oe?e.onSet("--sf-link-external-marker",oe):e.onReset("--sf-link-external-marker")}),f(H,_e)};I(St,H=>{t(ve)&&H(Et)})}var it=r(ft,4),Gt=s(it),ea=r(s(Gt),2),ia=s(ea),Je=r(Gt,2);{var ut=H=>{var _e=Mp(),ie=r(de(_e),2);re(ie,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}],Le=>Le.token,(Le,Fe)=>{var Qe=Dp(),Xe=s(Qe),bt=s(Xe),kt=s(bt),Pt=r(bt,2);{var wt=oe=>{var Re=Hn();x("click",Re,()=>e.onReset(Fe.token)),f(oe,Re)};I(Pt,oe=>{Fe.token in e.overrides&&oe(wt)})}var X=r(Xe,2);re(X,20,()=>p,oe=>oe,(oe,Re)=>{const Ke=u(()=>e.overrides[Fe.token]??String(Fe.def));var We=Lo(),gt=s(We);C(yt=>{lt(We,yt),Ye(We,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(Ke)===Re?"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"}`),b(gt,Re)},[()=>`font-weight:${parseInt(Re)}`]),x("click",We,()=>Re===String(Fe.def)&&!(Fe.token in e.overrides)?void 0:Re===String(Fe.def)?e.onReset(Fe.token):e.onSet(Fe.token,Re)),f(oe,We)}),C(()=>b(kt,Fe.label)),f(Le,Qe)}),f(H,_e)};I(Je,H=>{t(J)&&H(ut)})}var Lt=r(it,4),Dt=s(Lt),Rt=r(s(Dt),2),pe=s(Rt),Ze=r(Dt,2);{var vt=H=>{var _e=Fp(),ie=de(_e);{let Qe=u(()=>"--sf-text-display-base-min"in e.overrides||"--sf-text-display-base-max"in e.overrides);Os(ie,{title:"Display base size",get minValue(){return t(A)},get maxValue(){return t(T)},min:1.5,max:6,step:.05,unit:"rem",previewKind:"type",get overridden(){return t(Qe)},onReset:()=>{e.onReset("--sf-text-display-base-min"),e.onReset("--sf-text-display-base-max")},onMinChange:Xe=>e.onSet("--sf-text-display-base-min",String(Xe)),onMaxChange:Xe=>e.onSet("--sf-text-display-base-max",String(Xe))})}var Le=r(ie,2);re(Le,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}],Qe=>Qe.token,(Qe,Xe)=>{var bt=Np(),kt=s(bt),Pt=s(kt),wt=r(kt,2);{let X=u(()=>_(Xe.token,Xe.def)),oe=u(()=>Xe.token in e.overrides);pt(wt,{label:"",get value(){return t(X)},min:.8,max:1.5,step:.025,get overridden(){return t(oe)},onChange:Re=>e.onSet(Xe.token,String(Re)),onReset:()=>e.onReset(Xe.token)})}C(()=>b(Pt,Xe.label)),f(Qe,bt)});var Fe=r(Le,2);re(Fe,16,()=>[{label:"Display",tokenName:"--sf-font-weight-display"},{label:"Heading",tokenName:"--sf-font-weight-heading"}],Qe=>Qe.tokenName,(Qe,Xe)=>{const bt=u(()=>m[Xe.tokenName]??"700"),kt=u(()=>e.overrides[Xe.tokenName]??t(bt)),Pt=u(()=>Xe.tokenName in e.overrides);var wt=Gn(),X=s(wt),oe=s(X),Re=s(oe),Ke=r(oe,2);{var We=yt=>{var ht=jn();x("click",ht,()=>e.onReset(Xe.tokenName)),f(yt,ht)};I(Ke,yt=>{t(Pt)&&yt(We)})}var gt=r(X,2);re(gt,20,()=>p,yt=>yt,(yt,ht)=>{var Te=Lo(),Ce=s(Te);C(At=>{lt(Te,At),Ye(Te,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(kt)===ht?"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"}`),b(Ce,ht)},[()=>`font-weight: ${parseInt(ht)}`]),x("click",Te,()=>ht===t(bt)&&!t(Pt)?void 0:ht===t(bt)?e.onReset(Xe.tokenName):e.onSet(Xe.tokenName,ht)),f(yt,Te)}),C(()=>b(Re,`${Xe.label??""} weight`)),f(Qe,wt)}),f(H,_e)};I(Ze,H=>{t(me)&&H(vt)})}var Ut=r(Lt,4),Ue=s(Ut),Ee=r(s(Ue),2),qe=s(Ee),et=r(Ue,2);{var Ct=H=>{var _e=Gp(),ie=r(de(_e),2);{let wt=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Os(ie,{title:"Viewport range",get minValue(){return t(Ge)},get maxValue(){return t(te)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(wt)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:X=>e.onSet("--sf-fluid-min-vw",String(X)),onMaxChange:X=>e.onSet("--sf-fluid-max-vw",String(X))})}var Le=r(ie,2);{let wt=u(()=>"--sf-text-base-min"in e.overrides||"--sf-text-base-max"in e.overrides);Os(Le,{title:"Base size & ratio",get minValue(){return t(R)},get maxValue(){return t(D)},min:.7,max:2,step:.01,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"type",get overridden(){return t(wt)},onReset:()=>{e.onReset("--sf-text-base-min"),e.onReset("--sf-text-base-max")},onMinChange:X=>e.onSet("--sf-text-base-min",String(X)),onMaxChange:X=>e.onSet("--sf-text-base-max",String(X)),get ratioPresets(){return o},get ratioMin(){return t(z)},get ratioMax(){return t(L)},ratioMin_bound:1.05,ratioMax_bound:1.8,onRatioMinChange:X=>e.onSet("--sf-text-ratio-min",String(X)),onRatioMaxChange:X=>e.onSet("--sf-text-ratio-max",String(X))})}var Fe=r(Le,2);re(Fe,21,()=>S,wt=>wt.name,(wt,X)=>{Fo(wt,{get knob(){return t(X)},get overrides(){return e.overrides},onChange:(oe,Re)=>Re===null?e.onReset(oe):e.onSet(oe,Re)})});var Qe=r(Fe,2),Xe=r(s(Qe),2);re(Xe,21,()=>y,wt=>wt.token,(wt,X)=>{{let oe=u(()=>Se(t(X))),Re=u(()=>`${t(X).token} — ${t(X).label.toLowerCase()} line height`),Ke=u(()=>t(X).token in e.overrides);pt(wt,{get label(){return t(X).label},get value(){return t(oe)},min:1,max:2.2,step:.05,get help(){return t(Re)},get overridden(){return t(Ke)},onChange:We=>e.onSet(t(X).token,String(We)),onReset:()=>e.onReset(t(X).token)})}});var bt=r(Qe,2);{let wt=u(()=>"--sf-leading-taper"in e.overrides);pt(bt,{label:"Leading taper",get value(){return t(N)},min:0,max:.5,step:.01,help:"How aggressively large display sizes shrink their line-height.",get overridden(){return t(wt)},onChange:X=>e.onSet("--sf-leading-taper",String(X)),onReset:()=>e.onReset("--sf-leading-taper")})}var kt=r(bt,2),Pt=r(s(kt),4);re(Pt,21,()=>v,wt=>wt.token,(wt,X)=>{var oe=jp(),Re=s(oe),Ke=s(Re),We=s(Ke),gt=r(Ke,2);{var yt=Te=>{var Ce=Hn();x("click",Ce,()=>e.onReset(t(X).token)),f(Te,Ce)};I(gt,Te=>{t(X).token in e.overrides&&Te(yt)})}var ht=r(Re,2);{let Te=u(()=>st(t(X)));Zo(ht,{get value(){return t(Te)},min:-.1,max:.2,step:.005,unit:"em",onChange:Ce=>e.onSet(t(X).token,`${Ce}em`)})}C(()=>b(We,t(X).label)),f(wt,oe)}),f(H,_e)};I(et,H=>{t(je)&&H(Ct)})}var ta=r(Ut,4),zt=s(ta),It=r(s(zt),2),Ft=s(It),la=r(zt,2);{var xa=H=>{var _e=qp();re(_e,21,()=>[...h].reverse(),({label:ie,factor:Le})=>ie,(ie,Le)=>{let Fe=()=>t(Le).label,Qe=()=>t(Le).factor;const Xe=u(()=>(t(R)+t(D))/2),bt=u(()=>t(Xe)*Qe()*t($));var kt=Hp(),Pt=s(kt),wt=s(Pt),X=r(Pt,2),oe=r(X,2),Re=s(oe);C((Ke,We)=>{b(wt,Fe()),lt(X,Ke),b(Re,`${We??""}rem`)},[()=>`font-size: ${Math.min(t(bt),2.5)}rem; font-family: ${t(be)||"inherit"}`,()=>t(bt).toFixed(2)]),f(ie,kt)}),f(H,_e)};I(la,H=>{t($e)&&H(xa)})}var se=r(ta,4),V=s(se),F=r(s(V),2),ee=s(F),he=r(V,2);{var Z=H=>{var _e=Kp(),ie=r(de(_e),2);re(ie,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"}],Le=>Le.token,(Le,Fe)=>{var Qe=Vp(),Xe=s(Qe),bt=s(Xe),kt=r(Xe,2),Pt=r(kt,2);{var wt=X=>{var oe=Cr();x("click",oe,()=>e.onReset(Fe.token)),f(X,oe)};I(Pt,X=>{Fe.token in e.overrides&&X(wt)})}C(()=>{b(bt,Fe.label),Xt(kt,e.overrides[Fe.token]??""),Y(kt,"placeholder",Fe.def)}),x("input",kt,X=>{const oe=X.target.value.trim();oe?e.onSet(Fe.token,oe):e.onReset(Fe.token)}),f(Le,Qe)}),f(H,_e)};I(he,H=>{t(M)&&H(Z)})}var j=r(se,4),le=s(j),ue=r(s(le),2),K=s(ue),ne=r(le,2);{var Ne=H=>{var _e=Wp(),ie=r(de(_e),2),Le=r(s(ie),2);re(Le,20,()=>[["tabular-nums","tabular-nums (default)"],["proportional-nums","proportional-nums"],["normal","normal"]],([Ke,We])=>Ke,(Ke,We)=>{var gt=u(()=>Pa(We,2));let yt=()=>t(gt)[0],ht=()=>t(gt)[1];const Te=u(()=>e.overrides["--sf-font-numeric"]??"tabular-nums");var Ce=Lo(),At=s(Ce);C(()=>{Ye(Ce,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(Te)===yt()?"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"}`),b(At,ht())}),x("click",Ce,()=>yt()==="tabular-nums"?e.onReset("--sf-font-numeric"):e.onSet("--sf-font-numeric",yt())),f(Ke,Ce)});var Fe=r(ie,2),Qe=r(s(Fe),2);re(Qe,20,()=>[["auto","auto (default)"],["none","none"]],([Ke,We])=>Ke,(Ke,We)=>{var gt=u(()=>Pa(We,2));let yt=()=>t(gt)[0],ht=()=>t(gt)[1];const Te=u(()=>e.overrides["--sf-optical-sizing"]??"auto");var Ce=Lo(),At=s(Ce);C(()=>{Ye(Ce,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(Te)===yt()?"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"}`),b(At,ht())}),x("click",Ce,()=>yt()==="auto"?e.onReset("--sf-optical-sizing"):e.onSet("--sf-optical-sizing",yt())),f(Ke,Ce)});var Xe=r(Fe,2),bt=r(s(Xe),2),kt=r(bt,2);{var Pt=Ke=>{var We=Cr();x("click",We,()=>e.onReset("--sf-font-features")),f(Ke,We)};I(kt,Ke=>{"--sf-font-features"in e.overrides&&Ke(Pt)})}var wt=r(Xe,2),X=r(s(wt),2),oe=r(X,2);{var Re=Ke=>{var We=Cr();x("click",We,()=>e.onReset("--sf-font-variation")),f(Ke,We)};I(oe,Ke=>{"--sf-font-variation"in e.overrides&&Ke(Re)})}C(()=>{Xt(bt,e.overrides["--sf-font-features"]??""),Xt(X,e.overrides["--sf-font-variation"]??"")}),x("input",bt,Ke=>{const We=Ke.target.value.trim();We?e.onSet("--sf-font-features",We):e.onReset("--sf-font-features")}),x("input",X,Ke=>{const We=Ke.target.value.trim();We?e.onSet("--sf-font-variation",We):e.onReset("--sf-font-variation")}),f(H,_e)};I(ne,H=>{t(tt)&&H(Ne)})}C(()=>{Y(Ie,"aria-expanded",t(ge)),b(nt,t(ge)?"▲":"▼"),Y(mt,"aria-expanded",t(Pe)),b(Oe,t(Pe)?"▲":"▼"),Y(_t,"aria-expanded",t(ve)),b(Nt,t(ve)?"▲":"▼"),Y(Gt,"aria-expanded",t(J)),b(ia,t(J)?"▲":"▼"),Y(Dt,"aria-expanded",t(me)),b(pe,t(me)?"▲":"▼"),Y(Ue,"aria-expanded",t(je)),b(qe,t(je)?"▲":"▼"),Y(zt,"aria-expanded",t($e)),b(Ft,t($e)?"▲":"▼"),Y(V,"aria-expanded",t(M)),b(ee,t(M)?"▲":"▼"),Y(le,"aria-expanded",t(tt)),b(K,t(tt)?"▲":"▼")}),x("click",Ie,()=>{O(ge,!t(ge))}),x("click",mt,()=>{O(Pe,!t(Pe))}),x("click",_t,()=>{O(ve,!t(ve))}),x("click",Gt,()=>{O(J,!t(J))}),x("click",Dt,()=>{O(me,!t(me))}),x("click",Ue,()=>{O(je,!t(je))}),x("click",zt,()=>{O($e,!t($e))}),x("click",V,()=>{O(M,!t(M))}),x("click",le,()=>{O(tt,!t(tt))}),f(a,De),$t()}aa(["click","change","input"]);var Jp=g('<p class="text-[10px] text-slate-600 leading-relaxed">The two most-referenced spacing tokens. Referenced by every layout primitive (cluster, grid, stack, bento…).</p> <!> <!> <!>',1),Xp=g('<button><span class="text-[11px] font-bold"> </span> <span class="text-[9px] text-slate-500 text-center"> </span></button>'),Qp=g('<div class="grid grid-cols-3 gap-2"></div>'),$p=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Utopia-style fluid scale — viewport width, base unit and ratio per endpoint.
+        The viewport range is shared with the type scale.</p> <!> <!> <div class="space-y-4"></div>`,1),em=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6 text-right shrink-0"> </span> <div class="bg-indigo-500/50 rounded shrink-0 h-3"></div> <span class="text-[9px] font-mono text-slate-500 shrink-0"> </span></div>'),tm=g('<div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>'),am=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Layout gap</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Density presets</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Modular scale (Mobile → Desktop)</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Space scale preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function om(a,e){Qt(e,!0);const o=[{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}],n=[{label:"Compact",desc:"Tight UI, data-heavy",patch:{"--sf-space-scale":"0.75","--sf-section-scale":"0.7","--sf-space-base-min":"0.75","--sf-space-base-max":"1.25"}},{label:"Comfortable",desc:"Balanced — default",patch:{"--sf-space-scale":null,"--sf-section-scale":null,"--sf-space-base-min":null,"--sf-space-base-max":null}},{label:"Spacious",desc:"Generous, editorial",patch:{"--sf-space-scale":"1.3","--sf-section-scale":"1.4","--sf-space-base-min":"1.25","--sf-space-base-max":"2.75"}}],l=["2xs","xs","s","m","l","xl","2xl","3xl","4xl"],i=No.spacing??[];function c(Be,ae){const q=parseFloat(e.overrides[Be]??"");return isNaN(q)?ae:q}let d=u(()=>c("--sf-space-ratio-min",1.25)),p=u(()=>c("--sf-space-ratio-max",1.333)),m=u(()=>c("--sf-space-base-min",1)),h=u(()=>c("--sf-space-base-max",2)),v=u(()=>c("--sf-space-scale",1)),y=u(()=>c("--sf-gap",1)),k=u(()=>c("--sf-gutter",1.5)),w=u(()=>c("--sf-content-gap",.5)),E=u(()=>c("--sf-fluid-min-vw",22.5)),B=u(()=>c("--sf-fluid-max-vw",90)),U=u(()=>n.find(Be=>Object.entries(Be.patch).every(([ae,q])=>q===null?!(ae in e.overrides):e.overrides[ae]===q))),P=G(!1),S=G(!1),_=G(!1),z=G(!1);var L=am(),R=s(L),D=s(R),A=r(s(D),2),T=s(A),N=r(D,2);{var $=Be=>{var ae=Jp(),q=r(de(ae),2);{let ce=u(()=>"--sf-gap"in e.overrides);pt(q,{label:"Gap",get value(){return t(y)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-gap — spacing between layout items (cluster, grid, reel, stack, sidebar, bento)",get overridden(){return t(ce)},onChange:xe=>e.onSet("--sf-gap",`${xe}rem`),onReset:()=>e.onReset("--sf-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-gap"]},onRawSet:xe=>e.onSet("--sf-gap",xe)})}var we=r(q,2);{let ce=u(()=>"--sf-content-gap"in e.overrides);pt(we,{label:"Content gap",get value(){return t(w)},min:0,max:2,step:.0625,unit:"rem",help:"--sf-content-gap — tighter gap within components (defaults to space-s)",get overridden(){return t(ce)},onChange:xe=>e.onSet("--sf-content-gap",`${xe}rem`),onReset:()=>e.onReset("--sf-content-gap"),rawDefault:"var(--sf-space-s)",get currentRaw(){return e.overrides["--sf-content-gap"]},onRawSet:xe=>e.onSet("--sf-content-gap",xe)})}var fe=r(we,2);{let ce=u(()=>"--sf-gutter"in e.overrides);pt(fe,{label:"Gutter",get value(){return t(k)},min:0,max:6,step:.0625,unit:"rem",help:"--sf-gutter — wide page/section side gutter (containers, .sf-section--guttered)",get overridden(){return t(ce)},onChange:xe=>e.onSet("--sf-gutter",`${xe}rem`),onReset:()=>e.onReset("--sf-gutter"),rawDefault:"var(--sf-space-l)",get currentRaw(){return e.overrides["--sf-gutter"]},onRawSet:xe=>e.onSet("--sf-gutter",xe)})}f(Be,ae)};I(N,Be=>{t(P)&&Be($)})}var Ge=r(R,4),te=s(Ge),ge=r(s(te),2),Pe=s(ge),ve=r(te,2);{var me=Be=>{var ae=Qp();re(ae,21,()=>n,q=>q.label,(q,we)=>{var fe=Xp(),ce=s(fe),xe=s(ce),ze=r(ce,2),De=s(ze);C(()=>{Ye(fe,1,`flex flex-col items-center gap-1 p-3 rounded-xl border transition-all cursor-pointer ${t(U)?.label===t(we).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"}`),b(xe,t(we).label),b(De,t(we).desc)}),x("click",fe,()=>e.onBulkChange(t(we).patch)),f(q,fe)}),f(Be,ae)};I(ve,Be=>{t(S)&&Be(me)})}var je=r(Ge,4),$e=s(je),tt=r(s($e),2),M=s(tt),J=r($e,2);{var be=Be=>{var ae=$p(),q=r(de(ae),2);{let ce=u(()=>"--sf-fluid-min-vw"in e.overrides||"--sf-fluid-max-vw"in e.overrides);Os(q,{title:"Viewport range",get minValue(){return t(E)},get maxValue(){return t(B)},min:15,max:120,step:.5,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",get overridden(){return t(ce)},onReset:()=>{e.onReset("--sf-fluid-min-vw"),e.onReset("--sf-fluid-max-vw")},onMinChange:xe=>e.onSet("--sf-fluid-min-vw",String(xe)),onMaxChange:xe=>e.onSet("--sf-fluid-max-vw",String(xe))})}var we=r(q,2);{let ce=u(()=>"--sf-space-base-min"in e.overrides||"--sf-space-base-max"in e.overrides);Os(we,{title:"Base unit & ratio",get minValue(){return t(m)},get maxValue(){return t(h)},min:.5,max:4,step:.05,unit:"rem",minLabel:"Mobile",maxLabel:"Desktop",previewKind:"space",get overridden(){return t(ce)},onReset:()=>{e.onReset("--sf-space-base-min"),e.onReset("--sf-space-base-max")},onMinChange:xe=>e.onSet("--sf-space-base-min",String(xe)),onMaxChange:xe=>e.onSet("--sf-space-base-max",String(xe)),get ratioPresets(){return o},get ratioMin(){return t(d)},get ratioMax(){return t(p)},ratioMin_bound:1.1,ratioMax_bound:1.8,onRatioMinChange:xe=>e.onSet("--sf-space-ratio-min",String(xe)),onRatioMaxChange:xe=>e.onSet("--sf-space-ratio-max",String(xe))})}var fe=r(we,2);re(fe,21,()=>i,ce=>ce.name,(ce,xe)=>{Fo(ce,{get knob(){return t(xe)},get overrides(){return e.overrides},onChange:(ze,De)=>De===null?e.onReset(ze):e.onSet(ze,De)})}),f(Be,ae)};I(J,Be=>{t(_)&&Be(be)})}var ye=r(je,4),W=s(ye),ke=r(s(W),2),He=s(ke),st=r(W,2);{var Se=Be=>{var ae=tm();re(ae,22,()=>l,q=>q,(q,we,fe)=>{const ce=u(()=>(t(m)+t(h))/2),xe=u(()=>(t(d)+t(p))/2),ze=u(()=>t(fe)-4),De=u(()=>t(ze)>=0?t(ce)*Math.pow(t(xe),t(ze)):t(ce)/Math.pow(t(xe),-t(ze))),Ae=u(()=>t(De)*t(v)),Ie=u(()=>Math.min(t(Ae)*28,240));var Ve=em(),nt=s(Ve),ct=s(nt),dt=r(nt,2),Ot=r(dt,2),mt=s(Ot);C(Q=>{b(ct,we),lt(dt,`width: ${t(Ie)}px; min-width: 3px`),b(mt,`${Q??""}rem`)},[()=>t(Ae).toFixed(2)]),f(q,Ve)}),f(Be,ae)};I(st,Be=>{t(z)&&Be(Se)})}C(()=>{Y(D,"aria-expanded",t(P)),b(T,t(P)?"▲":"▼"),Y(te,"aria-expanded",t(S)),b(Pe,t(S)?"▲":"▼"),Y($e,"aria-expanded",t(_)),b(M,t(_)?"▲":"▼"),Y(W,"aria-expanded",t(z)),b(He,t(z)?"▲":"▼")}),x("click",D,()=>{O(P,!t(P))}),x("click",te,()=>{O(S,!t(S))}),x("click",$e,()=>{O(_,!t(_))}),x("click",W,()=>{O(z,!t(z))}),f(a,L),$t()}aa(["click"]);var sm=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-12 text-right shrink-0"> </span> <div class="flex-1 h-4 bg-white/5 rounded overflow-hidden"><div class="h-full bg-indigo-500/30 border-r border-indigo-400/40 rounded"></div></div> <span class="text-[9px] font-mono text-slate-500 w-14 shrink-0"> </span></div>'),rm=g('<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Narrow</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Prose</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Default</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Wide</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>',1),nm=g("<!> <!>",1),lm=g('<div class="h-8 bg-indigo-500/20 border border-indigo-500/20 rounded text-[8px] font-mono text-indigo-400/60 flex items-center justify-center">col</div>'),im=g('<!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named sizes (grid-min-xs → 2xl)</div> <div class="space-y-1.5"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="text-[9px] text-slate-600 mb-2 font-mono">Preview at 360px panel width</div> <div class="grid gap-1"></div></div>',1),cm=g('<div class="w-8 h-1.5 bg-slate-600/60 rounded"></div>'),dm=g('<div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div> <div class="bg-white/4 rounded-xl border border-white/8 overflow-hidden"><div class="flex items-center px-3 bg-indigo-500/10 border-b border-white/8"><div class="w-16 h-2 bg-indigo-400/40 rounded"></div> <div class="ml-auto flex gap-2"></div></div> <div class="p-2 text-[9px] text-slate-600 font-mono"> </div></div>',1),fm=g('<p class="text-[9px] text-slate-600">Offsets position:sticky elements below a fixed header. Defaults to header heights.</p> <div class="grid grid-cols-2 gap-3"><div><div class="text-[9px] text-slate-600 mb-1">Mobile</div> <!></div> <div><div class="text-[9px] text-slate-600 mb-1">Desktop</div> <!></div></div>',1),um=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex gap-2 items-stretch" style="height: 60px"><div class="bg-indigo-500/15 border border-indigo-500/20 rounded flex-shrink-0 flex items-center justify-center"><span class="text-[8px] font-mono text-indigo-400/60 rotate-90 whitespace-nowrap"> </span></div> <div class="flex-1 bg-white/4 rounded"></div></div>',1),pm=g('<div class="mt-2 space-y-2"></div>'),qn=g('<option style="background:#16161e;"> </option>'),Ns=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Vn=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <select class="flex-1 bg-white/5 border border-white/10 rounded px-1.5 py-1 text-[9px] font-mono text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"></select> <!></div>'),Kn=g("<button> </button>"),mm=g('<div id="more-layout-primitives" class="mt-3 space-y-5"><section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Switcher</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Sidebar content</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cluster</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Equal grid</div> <!> <div><div class="text-[9px] text-slate-600 mb-1.5">Named column counts (equal-min-col-2/3/4/6)</div> <div class="space-y-1.5"></div></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Cover</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Frame ratio</div> <p class="text-[9px] text-slate-600">--sf-frame-ratio — aspect ratio for .sf-frame</p> <div class="grid grid-cols-5 gap-1"></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Reel</div> <p class="text-[9px] text-slate-600">--sf-reel-item-width — width of each item in a horizontal .sf-reel</p> <div class="grid grid-cols-4 gap-1"></div> <div class="flex items-center gap-2 pt-0.5"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Height</span> <input type="text" placeholder="auto" class="flex-1 min-w-0 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"/> <!></div></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Imposter</div> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Content grid (breakout)</div> <!> <!></section> <section class="space-y-2"><div class="text-[9px] font-semibold text-slate-500 uppercase tracking-widest">Alternate (zigzag)</div> <!></section></div>'),vm=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),hm=g('<div class="mt-2 space-y-2"><p class="text-[9px] text-slate-600">Override the built-in named aspect ratios used by <span class="font-mono text-slate-400">.sf-ratio-*</span> utilities.</p> <!></div>'),gm=g('<div class="mt-2 space-y-3"><p class="text-[9px] text-slate-600">Default values for the <span class="font-mono text-slate-400">.sf-bg</span> full-bleed background utility.</p> <!> <!> <!> <!></div>'),bm=g('<div class="p-4 space-y-6"><section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Container widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Center wrapper</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Auto grid</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Header height</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sticky offset</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sidebar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button 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"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Bento grid</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button 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"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">More layout primitives</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Named ratios</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer py-1"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Background layer (.sf-bg)</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function ym(a,e){Qt(e,!0);function o(F,ee){if(!F)return ee;const he=parseFloat(F);return isNaN(he)?ee:he}let n=u(()=>o(e.overrides["--sf-container-narrow"],38)),l=u(()=>o(e.overrides["--sf-container-prose"],65)),i=u(()=>o(e.overrides["--sf-container-default"],75)),c=u(()=>o(e.overrides["--sf-container-wide"],90)),d=u(()=>o(e.overrides["--sf-center-max"],75)),p=u(()=>o(e.overrides["--sf-center-gutter"],1)),m=u(()=>o(e.overrides["--sf-grid-min"],16)),h=u(()=>o(e.overrides["--sf-header-height-mobile"],3.5)),v=u(()=>o(e.overrides["--sf-header-height-desktop"],5)),y=u(()=>o(e.overrides["--sf-sidebar-width"],18)),k=u(()=>o(e.overrides["--sf-sticky-offset-mobile"],3.5)),w=u(()=>o(e.overrides["--sf-sticky-offset-desktop"],5));const E=[{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}];let B=G(!1),U=G(!1),P=G(!1),S=G(!1),_=G(!1),z=G(!1),L=G(!1),R=G(!1),D=G(!1),A=G(!1);function T(F){const ee=e.overrides[F.token];return ee?parseFloat(ee):F.default}let N=u(()=>o(e.overrides["--sf-switcher-threshold"],30)),$=u(()=>o(e.overrides["--sf-sidebar-min-width"],50)),Ge=u(()=>o(e.overrides["--sf-equal-min-col"],16)),te=u(()=>o(e.overrides["--sf-cover-min-height"],100)),ge=u(()=>o(e.overrides["--sf-imposter-margin"],1)),Pe=u(()=>o(e.overrides["--sf-breakout-width"],90)),ve=u(()=>o(e.overrides["--sf-content-width"],75)),me=u(()=>o(e.overrides["--sf-alternate-inner-gap"],1)),je=u(()=>e.overrides["--sf-frame-ratio"]??"16 / 9"),$e=u(()=>e.overrides["--sf-reel-item-width"]??"max-content");const tt=["16 / 9","4 / 3","3 / 2","1 / 1","21 / 9"],M=[{label:"auto",value:"max-content"},{label:"12rem",value:"12rem"},{label:"16rem",value:"16rem"},{label:"20rem",value:"20rem"}];var J=bm(),be=s(J),ye=s(be),W=r(s(ye),2),ke=s(W),He=r(ye,2);{var st=F=>{var ee=rm(),he=de(ee),Z=s(he),j=r(s(Z),2);{let ie=u(()=>"--sf-container-narrow"in e.overrides);pt(j,{label:"",get value(){return t(n)},min:20,max:60,step:1,unit:"rem",get overridden(){return t(ie)},onChange:Le=>e.onSet("--sf-container-narrow",`${Le}rem`),onReset:()=>e.onReset("--sf-container-narrow")})}var le=r(Z,2),ue=r(s(le),2);{let ie=u(()=>"--sf-container-prose"in e.overrides);pt(ue,{label:"",get value(){return t(l)},min:40,max:90,step:1,unit:"ch",get overridden(){return t(ie)},onChange:Le=>e.onSet("--sf-container-prose",`${Le}ch`),onReset:()=>e.onReset("--sf-container-prose")})}var K=r(le,2),ne=r(s(K),2);{let ie=u(()=>"--sf-container-default"in e.overrides);pt(ne,{label:"",get value(){return t(i)},min:50,max:120,step:1,unit:"rem",get overridden(){return t(ie)},onChange:Le=>e.onSet("--sf-container-default",`${Le}rem`),onReset:()=>e.onReset("--sf-container-default")})}var Ne=r(K,2),H=r(s(Ne),2);{let ie=u(()=>"--sf-container-wide"in e.overrides);pt(H,{label:"",get value(){return t(c)},min:60,max:160,step:1,unit:"rem",get overridden(){return t(ie)},onChange:Le=>e.onSet("--sf-container-wide",`${Le}rem`),onReset:()=>e.onReset("--sf-container-wide")})}var _e=r(he,2);re(_e,21,()=>[{label:"narrow",value:t(n),max:t(c),unit:"rem"},{label:"prose",value:t(l),max:t(c)*1.5,unit:"ch"},{label:"default",value:t(i),max:t(c),unit:"rem"},{label:"wide",value:t(c),max:t(c),unit:"rem"}],ie=>ie.label,(ie,Le)=>{var Fe=sm(),Qe=s(Fe),Xe=s(Qe),bt=r(Qe,2),kt=s(bt),Pt=r(bt,2),wt=s(Pt);C(X=>{b(Xe,t(Le).label),lt(kt,X),b(wt,`${t(Le).value??""}${t(Le).unit??""}`)},[()=>`width: ${Math.min(t(Le).value/t(Le).max*100,100)}%`]),f(ie,Fe)}),f(F,ee)};I(He,F=>{t(B)&&F(st)})}var Se=r(be,4),Be=s(Se),ae=r(s(Be),2),q=s(ae),we=r(Be,2);{var fe=F=>{var ee=nm(),he=de(ee);{let j=u(()=>"--sf-center-max"in e.overrides);pt(he,{label:"Max width",get value(){return t(d)},min:30,max:160,step:1,unit:"rem",help:"--sf-center-max — max-width of the .sf-center centering wrapper",get overridden(){return t(j)},onChange:le=>e.onSet("--sf-center-max",`${le}rem`),onReset:()=>e.onReset("--sf-center-max"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-center-max"]},onRawSet:le=>e.onSet("--sf-center-max",le)})}var Z=r(he,2);{let j=u(()=>"--sf-center-gutter"in e.overrides);pt(Z,{label:"Gutter",get value(){return t(p)},min:0,max:4,step:.125,unit:"rem",help:"--sf-center-gutter — minimum side padding inside the center wrapper",get overridden(){return t(j)},onChange:le=>e.onSet("--sf-center-gutter",`${le}rem`),onReset:()=>e.onReset("--sf-center-gutter"),rawDefault:"var(--sf-gutter)",get currentRaw(){return e.overrides["--sf-center-gutter"]},onRawSet:le=>e.onSet("--sf-center-gutter",le)})}f(F,ee)};I(we,F=>{t(U)&&F(fe)})}var ce=r(Se,4),xe=s(ce),ze=r(s(xe),2),De=s(ze),Ae=r(xe,2);{var Ie=F=>{var ee=im(),he=de(ee);{let K=u(()=>"--sf-grid-min"in e.overrides);pt(he,{label:"Grid min cell width",get value(){return t(m)},min:8,max:40,step:.5,unit:"rem",help:"sf-grid minimum column width — browser auto-fills columns",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-grid-min",`${ne}rem`),onReset:()=>e.onReset("--sf-grid-min")})}var Z=r(he,2),j=r(s(Z),2);re(j,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}],K=>K.token,(K,ne)=>{{let Ne=u(()=>o(e.overrides[ne.token],ne.def)),H=u(()=>ne.token in e.overrides);pt(K,{get label(){return ne.label},get value(){return t(Ne)},min:6,max:40,step:.5,unit:"rem",get overridden(){return t(H)},onChange:_e=>e.onSet(ne.token,`${_e}rem`),onReset:()=>e.onReset(ne.token)})}});var le=r(Z,2),ue=r(s(le),2);re(ue,20,()=>Array.from({length:8}),sn,(K,ne)=>{var Ne=lm();f(K,Ne)}),C(K=>lt(ue,K),[()=>`grid-template-columns: repeat(auto-fill, minmax(${Math.min(t(m)*16*.3,120)}px, 1fr))`]),f(F,ee)};I(Ae,F=>{t(P)&&F(Ie)})}var Ve=r(ce,4),nt=s(Ve),ct=r(s(nt),2),dt=s(ct),Ot=r(nt,2);{var mt=F=>{var ee=dm(),he=de(ee),Z=s(he),j=r(s(Z),2);{let ie=u(()=>"--sf-header-height-mobile"in e.overrides);pt(j,{label:"",get value(){return t(h)},min:2,max:8,step:.25,unit:"rem",get overridden(){return t(ie)},onChange:Le=>e.onSet("--sf-header-height-mobile",`${Le}rem`),onReset:()=>e.onReset("--sf-header-height-mobile")})}var le=r(Z,2),ue=r(s(le),2);{let ie=u(()=>"--sf-header-height-desktop"in e.overrides);pt(ue,{label:"",get value(){return t(v)},min:3,max:10,step:.25,unit:"rem",get overridden(){return t(ie)},onChange:Le=>e.onSet("--sf-header-height-desktop",`${Le}rem`),onReset:()=>e.onReset("--sf-header-height-desktop")})}var K=r(he,2),ne=s(K),Ne=r(s(ne),2);re(Ne,20,()=>[1,2,3],ie=>ie,(ie,Le)=>{var Fe=cm();f(ie,Fe)});var H=r(ne,2),_e=s(H);C(ie=>{lt(ne,ie),b(_e,`${t(h)??""}rem mobile · ${t(v)??""}rem desktop`)},[()=>`height: ${Math.min(t(h)*12,64)}px`]),f(F,ee)};I(Ot,F=>{t(S)&&F(mt)})}var Q=r(Ve,4),Oe=s(Q),Me=r(s(Oe),2),at=s(Me),ft=r(Oe,2);{var _t=F=>{var ee=fm(),he=r(de(ee),2),Z=s(he),j=r(s(Z),2);{let K=u(()=>"--sf-sticky-offset-mobile"in e.overrides);pt(j,{label:"",get value(){return t(k)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-sticky-offset-mobile",`${ne}rem`),onReset:()=>e.onReset("--sf-sticky-offset-mobile"),rawDefault:"var(--sf-header-height-mobile)",get currentRaw(){return e.overrides["--sf-sticky-offset-mobile"]},onRawSet:ne=>e.onSet("--sf-sticky-offset-mobile",ne)})}var le=r(Z,2),ue=r(s(le),2);{let K=u(()=>"--sf-sticky-offset-desktop"in e.overrides);pt(ue,{label:"",get value(){return t(w)},min:0,max:12,step:.25,unit:"rem",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-sticky-offset-desktop",`${ne}rem`),onReset:()=>e.onReset("--sf-sticky-offset-desktop"),rawDefault:"var(--sf-header-height-desktop)",get currentRaw(){return e.overrides["--sf-sticky-offset-desktop"]},onRawSet:ne=>e.onSet("--sf-sticky-offset-desktop",ne)})}f(F,ee)};I(ft,F=>{t(_)&&F(_t)})}var xt=r(Q,4),Nt=s(xt),St=r(s(Nt),2),Et=s(St),it=r(Nt,2);{var Gt=F=>{var ee=um(),he=de(ee);{let K=u(()=>"--sf-sidebar-width"in e.overrides);pt(he,{label:"Sidebar width",get value(){return t(y)},min:10,max:32,step:.5,unit:"rem",help:"--sf-sidebar-width — default sidebar / drawer width",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-sidebar-width",`${ne}rem`),onReset:()=>e.onReset("--sf-sidebar-width")})}var Z=r(he,2),j=s(Z),le=s(j),ue=s(le);C(K=>{lt(j,K),b(ue,`${t(y)??""}rem`)},[()=>`width: ${Math.min(t(y)*3.5,100)}px`]),f(F,ee)};I(it,F=>{t(z)&&F(Gt)})}var ea=r(xt,4),ia=s(ea),Je=r(s(ia),2),ut=s(Je),Lt=r(ia,2);{var Dt=F=>{var ee=pm();re(ee,21,()=>E,he=>he.token,(he,Z)=>{{let j=u(()=>T(t(Z))),le=u(()=>t(Z).token in e.overrides);pt(he,{get label(){return t(Z).label},get value(){return t(j)},get min(){return t(Z).min},get max(){return t(Z).max},get step(){return t(Z).step},get unit(){return t(Z).unit},get help(){return t(Z).token},get overridden(){return t(le)},onChange:ue=>e.onSet(t(Z).token,t(Z).unit?`${ue}${t(Z).unit}`:String(ue)),onReset:()=>e.onReset(t(Z).token)})}}),f(F,ee)};I(Lt,F=>{t(L)&&F(Dt)})}var Rt=r(ea,4),pe=s(Rt),Ze=r(s(pe),2),vt=s(Ze),Ut=r(pe,2);{var Ue=F=>{var ee=mm(),he=s(ee),Z=r(s(he),2);{let Te=u(()=>"--sf-switcher-threshold"in e.overrides);pt(Z,{label:"Threshold",get value(){return t(N)},min:10,max:60,step:1,unit:"rem",help:"--sf-switcher-threshold — width below which .sf-switcher stacks vertically",get overridden(){return t(Te)},onChange:Ce=>e.onSet("--sf-switcher-threshold",`${Ce}rem`),onReset:()=>e.onReset("--sf-switcher-threshold")})}var j=r(he,2),le=r(s(j),2);{let Te=u(()=>"--sf-sidebar-min-width"in e.overrides);pt(le,{label:"Content min width",get value(){return t($)},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 t(Te)},onChange:Ce=>e.onSet("--sf-sidebar-min-width",`${Ce}%`),onReset:()=>e.onReset("--sf-sidebar-min-width")})}var ue=r(j,2),K=r(s(ue),2);re(K,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"]}],Te=>Te.token,(Te,Ce)=>{var At=Vn(),oa=s(At),Vt=s(oa),Zt=r(oa,2);re(Zt,20,()=>Ce.opts,ot=>ot,(ot,rt)=>{var Tt=qn(),Kt=s(Tt),ca={};C(()=>{b(Kt,rt),ca!==(ca=rt)&&(Tt.value=(Tt.__value=rt)??"")}),f(ot,Tt)});var pa;Na(Zt);var _a=r(Zt,2);{var _o=ot=>{var rt=Ns();x("click",rt,()=>e.onReset(Ce.token)),f(ot,rt)};I(_a,ot=>{Ce.token in e.overrides&&ot(_o)})}C(()=>{b(Vt,Ce.label),pa!==(pa=e.overrides[Ce.token]??Ce.def)&&(Zt.value=(Zt.__value=e.overrides[Ce.token]??Ce.def)??"",Ba(Zt,e.overrides[Ce.token]??Ce.def))}),x("change",Zt,ot=>{const rt=ot.target.value;rt===Ce.def?e.onReset(Ce.token):e.onSet(Ce.token,rt)}),f(Te,At)});var ne=r(ue,2),Ne=r(s(ne),2);{let Te=u(()=>"--sf-equal-min-col"in e.overrides);pt(Ne,{label:"Min column",get value(){return t(Ge)},min:6,max:36,step:.5,unit:"rem",help:"--sf-equal-min-col — minimum column width for .sf-equal",get overridden(){return t(Te)},onChange:Ce=>e.onSet("--sf-equal-min-col",`${Ce}rem`),onReset:()=>e.onReset("--sf-equal-min-col")})}var H=r(Ne,2),_e=r(s(H),2);re(_e,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}],Te=>Te.token,(Te,Ce)=>{{let At=u(()=>o(e.overrides[Ce.token],Ce.def)),oa=u(()=>Ce.token in e.overrides);pt(Te,{get label(){return Ce.label},get value(){return t(At)},min:4,max:36,step:.5,unit:"rem",get overridden(){return t(oa)},onChange:Vt=>e.onSet(Ce.token,`${Vt}rem`),onReset:()=>e.onReset(Ce.token)})}});var ie=r(ne,2),Le=r(s(ie),2);{let Te=u(()=>"--sf-cover-min-height"in e.overrides);pt(Le,{label:"Min height",get value(){return t(te)},min:20,max:100,step:1,unit:"dvh",help:"--sf-cover-min-height — minimum height of the .sf-cover layout",get overridden(){return t(Te)},onChange:Ce=>e.onSet("--sf-cover-min-height",`${Ce}dvh`),onReset:()=>e.onReset("--sf-cover-min-height")})}var Fe=r(ie,2),Qe=r(s(Fe),4);re(Qe,20,()=>tt,Te=>Te,(Te,Ce)=>{var At=Kn(),oa=s(At);C(Vt=>{Ye(At,1,Vt),b(oa,Ce)},[()=>`py-1 rounded-lg text-[9px] border transition-all cursor-pointer font-mono ${t(je).replace(/\s/g,"")===Ce.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"}`]),x("click",At,()=>Ce==="16 / 9"?e.onReset("--sf-frame-ratio"):e.onSet("--sf-frame-ratio",Ce)),f(Te,At)});var Xe=r(Fe,2),bt=r(s(Xe),4);re(bt,21,()=>M,Te=>Te.value,(Te,Ce)=>{var At=Kn(),oa=s(At);C(()=>{Ye(At,1,`py-1 rounded-lg text-[9px] border transition-all cursor-pointer ${t($e)===t(Ce).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"}`),b(oa,t(Ce).label)}),x("click",At,()=>t(Ce).value==="max-content"?e.onReset("--sf-reel-item-width"):e.onSet("--sf-reel-item-width",t(Ce).value)),f(Te,At)});var kt=r(bt,2),Pt=r(s(kt),2),wt=r(Pt,2);{var X=Te=>{var Ce=Ns();x("click",Ce,()=>e.onReset("--sf-reel-height")),f(Te,Ce)};I(wt,Te=>{"--sf-reel-height"in e.overrides&&Te(X)})}var oe=r(Xe,2),Re=r(s(oe),2);{let Te=u(()=>"--sf-imposter-margin"in e.overrides);pt(Re,{label:"Margin",get value(){return t(ge)},min:0,max:4,step:.125,unit:"rem",help:"--sf-imposter-margin — viewport inset for the centered .sf-imposter overlay",get overridden(){return t(Te)},onChange:Ce=>e.onSet("--sf-imposter-margin",`${Ce}rem`),onReset:()=>e.onReset("--sf-imposter-margin"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-imposter-margin"]},onRawSet:Ce=>e.onSet("--sf-imposter-margin",Ce)})}var Ke=r(oe,2),We=r(s(Ke),2);{let Te=u(()=>"--sf-content-width"in e.overrides);pt(We,{label:"Content width",get value(){return t(ve)},min:40,max:120,step:1,unit:"rem",help:"--sf-content-width — default reading column width in .sf-content-grid",get overridden(){return t(Te)},onChange:Ce=>e.onSet("--sf-content-width",`${Ce}rem`),onReset:()=>e.onReset("--sf-content-width"),rawDefault:"var(--sf-container-default)",get currentRaw(){return e.overrides["--sf-content-width"]},onRawSet:Ce=>e.onSet("--sf-content-width",Ce)})}var gt=r(We,2);{let Te=u(()=>"--sf-breakout-width"in e.overrides);pt(gt,{label:"Breakout width",get value(){return t(Pe)},min:50,max:160,step:1,unit:"rem",help:"--sf-breakout-width — wide breakout column width in .sf-content-grid",get overridden(){return t(Te)},onChange:Ce=>e.onSet("--sf-breakout-width",`${Ce}rem`),onReset:()=>e.onReset("--sf-breakout-width"),rawDefault:"var(--sf-container-wide)",get currentRaw(){return e.overrides["--sf-breakout-width"]},onRawSet:Ce=>e.onSet("--sf-breakout-width",Ce)})}var yt=r(Ke,2),ht=r(s(yt),2);{let Te=u(()=>"--sf-alternate-inner-gap"in e.overrides);pt(ht,{label:"Inner gap",get value(){return t(me)},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 t(Te)},onChange:Ce=>e.onSet("--sf-alternate-inner-gap",`${Ce}rem`),onReset:()=>e.onReset("--sf-alternate-inner-gap"),rawDefault:"var(--sf-gap)",get currentRaw(){return e.overrides["--sf-alternate-inner-gap"]},onRawSet:Ce=>e.onSet("--sf-alternate-inner-gap",Ce)})}C(()=>Xt(Pt,e.overrides["--sf-reel-height"]??"")),x("input",Pt,Te=>{const Ce=Te.target.value.trim();Ce?e.onSet("--sf-reel-height",Ce):e.onReset("--sf-reel-height")}),f(F,ee)};I(Ut,F=>{t(R)&&F(Ue)})}var Ee=r(Rt,4),qe=s(Ee),et=r(s(qe),2),Ct=s(et),ta=r(qe,2);{var zt=F=>{var ee=hm(),he=r(s(ee),2);re(he,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"}],Z=>Z.token,(Z,j)=>{var le=vm(),ue=s(le),K=s(ue),ne=r(ue,2),Ne=r(ne,2);{var H=_e=>{var ie=Ns();x("click",ie,()=>e.onReset(j.token)),f(_e,ie)};I(Ne,_e=>{j.token in e.overrides&&_e(H)})}C(()=>{b(K,j.label),Xt(ne,e.overrides[j.token]??""),Y(ne,"placeholder",j.def)}),x("input",ne,_e=>{const ie=_e.target.value.trim();ie?e.onSet(j.token,ie):e.onReset(j.token)}),f(Z,le)}),f(F,ee)};I(ta,F=>{t(A)&&F(zt)})}var It=r(Ee,4),Ft=s(It),la=r(s(Ft),2),xa=s(la),se=r(Ft,2);{var V=F=>{var ee=gm(),he=r(s(ee),2);re(he,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"]}],ue=>ue.token,(ue,K)=>{var ne=Vn(),Ne=s(ne),H=s(Ne),_e=r(Ne,2);re(_e,20,()=>K.opts,Qe=>Qe,(Qe,Xe)=>{var bt=qn(),kt=s(bt),Pt={};C(()=>{b(kt,Xe),Pt!==(Pt=Xe)&&(bt.value=(bt.__value=Xe)??"")}),f(Qe,bt)});var ie;Na(_e);var Le=r(_e,2);{var Fe=Qe=>{var Xe=Ns();x("click",Xe,()=>e.onReset(K.token)),f(Qe,Xe)};I(Le,Qe=>{K.token in e.overrides&&Qe(Fe)})}C(()=>{b(H,K.label),ie!==(ie=e.overrides[K.token]??K.placeholder)&&(_e.value=(_e.__value=e.overrides[K.token]??K.placeholder)??"",Ba(_e,e.overrides[K.token]??K.placeholder))}),x("change",_e,Qe=>{const Xe=Qe.target.value;Xe===K.placeholder?e.onReset(K.token):e.onSet(K.token,Xe)}),f(ue,ne)});var Z=r(he,2);{let ue=u(()=>o(e.overrides["--sf-bg-inset"],0)),K=u(()=>"--sf-bg-inset"in e.overrides);pt(Z,{label:"Inset",get value(){return t(ue)},min:0,max:4,step:.25,unit:"rem",help:"--sf-bg-inset — inset the background from the container edges",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-bg-inset",`${ne}rem`),onReset:()=>e.onReset("--sf-bg-inset")})}var j=r(Z,2);{let ue=u(()=>o(e.overrides["--sf-bg-radius"],0)),K=u(()=>"--sf-bg-radius"in e.overrides);pt(j,{label:"Radius",get value(){return t(ue)},min:0,max:4,step:.125,unit:"rem",help:"--sf-bg-radius — corner radius of the background element",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-bg-radius",`${ne}rem`),onReset:()=>e.onReset("--sf-bg-radius")})}var le=r(j,2);{let ue=u(()=>o(e.overrides["--sf-bg-z"],-2)),K=u(()=>"--sf-bg-z"in e.overrides);pt(le,{label:"Z-index",get value(){return t(ue)},min:-10,max:0,step:1,help:"--sf-bg-z — stack order of the background pseudo-element (typically negative)",get overridden(){return t(K)},onChange:ne=>e.onSet("--sf-bg-z",String(ne)),onReset:()=>e.onReset("--sf-bg-z")})}f(F,ee)};I(se,F=>{t(D)&&F(V)})}C(()=>{Y(ye,"aria-expanded",t(B)),b(ke,t(B)?"▲":"▼"),Y(Be,"aria-expanded",t(U)),b(q,t(U)?"▲":"▼"),Y(xe,"aria-expanded",t(P)),b(De,t(P)?"▲":"▼"),Y(nt,"aria-expanded",t(S)),b(dt,t(S)?"▲":"▼"),Y(Oe,"aria-expanded",t(_)),b(at,t(_)?"▲":"▼"),Y(Nt,"aria-expanded",t(z)),b(Et,t(z)?"▲":"▼"),Y(ia,"aria-expanded",t(L)),b(ut,t(L)?"▲":"▼"),Y(pe,"aria-expanded",t(R)),b(vt,t(R)?"▲":"▼"),Y(qe,"aria-expanded",t(A)),b(Ct,t(A)?"▲":"▼"),Y(Ft,"aria-expanded",t(D)),b(xa,t(D)?"▲":"▼")}),x("click",ye,()=>{O(B,!t(B))}),x("click",Be,()=>{O(U,!t(U))}),x("click",xe,()=>{O(P,!t(P))}),x("click",nt,()=>{O(S,!t(S))}),x("click",Oe,()=>{O(_,!t(_))}),x("click",Nt,()=>{O(z,!t(z))}),x("click",ia,()=>{O(L,!t(L))}),x("click",pe,()=>{O(R,!t(R))}),x("click",qe,()=>{O(A,!t(A))}),x("click",Ft,()=>{O(D,!t(D))}),f(a,J),$t()}aa(["click","change","input"]);const xm=[{id:"default",label:"Default",patch:{"--sf-radius-scale":null}},{id:"sharp",label:"Sharp",patch:{"--sf-radius-scale":"0"}},{id:"subtle",label:"Subtle",patch:{"--sf-radius-scale":"0.5"}},{id:"rounded",label:"Rounded",patch:{"--sf-radius-scale":"1"}},{id:"pill",label:"Pill",patch:{"--sf-radius-scale":"2"}}],km=[{id:"default",label:"Default",patch:{"--sf-shadow-strength":null}},{id:"none",label:"None",patch:{"--sf-shadow-strength":"0"}},{id:"subtle",label:"Subtle",patch:{"--sf-shadow-strength":"calc(0.04 + var(--sf-is-dark) * 0.08)"}},{id:"soft",label:"Soft",patch:{"--sf-shadow-strength":"calc(0.08 + var(--sf-is-dark) * 0.12)"}},{id:"strong",label:"Strong",patch:{"--sf-shadow-strength":"calc(0.18 + var(--sf-is-dark) * 0.22)"}}];var wm=g("<button> </button>"),_m=g('<div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2"> </div> <div class="flex gap-1.5 flex-wrap"></div></div>');function Bi(a,e){Qt(e,!0);function o(p,m){for(const v of p){if(v.id==="default")continue;if(Object.entries(v.patch).every(([k,w])=>w===null?!(k in m):m[k]===w))return v.id}return p.filter(v=>v.id!=="default").flatMap(v=>Object.keys(v.patch)).every(v=>!(v in m))?"default":""}let n=u(()=>o(e.presets,e.overrides));var l=_m(),i=s(l),c=s(i),d=r(i,2);re(d,21,()=>e.presets,p=>p.id,(p,m)=>{var h=wm(),v=s(h);C(()=>{Ye(h,1,`px-3 py-1.5 rounded-lg text-[11px] font-bold border transition-all cursor-pointer ${t(n)===t(m).id?"bg-indigo-600/20 border-indigo-500/50 text-indigo-300":"bg-white/4 border-white/8 text-slate-400 hover:text-slate-200 hover:bg-white/8"}`),b(v,t(m).label)}),x("click",h,()=>e.onApply(t(m).patch)),f(p,h)}),C(()=>b(c,e.label)),f(a,l),$t()}aa(["click"]);var Cm=g('<!> <p class="text-[9px] text-slate-600">Drives --sf-color-border--strong, --subtle, --translucent automatically.</p>',1),Om=g('<div class="flex items-center gap-3"><span class="text-[9px] font-mono text-slate-600 w-10"> </span> <div class="flex-1 bg-indigo-400/50 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>'),Sm=g('<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>',1),Lm=g('<button><span class="block mx-auto mb-0.5"></span> </button>'),Pm=g('<div><div class="text-[9px] text-slate-500 mb-1.5"> </div> <div class="flex flex-col gap-1"></div></div>'),Im=g('<div class="grid grid-cols-2 gap-3"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center gap-3"><div class="px-4 py-2 rounded-lg text-[11px] text-slate-300 bg-white/4">Border sample</div> <span class="text-[9px] font-mono text-slate-600"> </span></div>',1),Bm=g('<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Color</div> <!></div> <!> <!>',1),Um=g('<!> <!> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Ring color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200">Focus preview</div></div>',1),zm=g('<div class="mt-3 space-y-4"></div>'),Am=g('<div class="mt-2 space-y-2 pl-2 border-l border-white/10"></div>'),Em=g('<div class="flex flex-col items-center gap-1"><div class="w-10 h-10 bg-indigo-500/40 border border-indigo-500/30"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),Rm=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4"><div class="flex gap-3 flex-wrap"></div></div>'),Tm=g('<div class="mt-2 space-y-2"></div>'),Dm=g('<div class="p-4 space-y-5"><!> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Border widths</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Dividers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div><button 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"><span>Fine-tune radius steps</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Radius preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <div><button 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"><span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component shape</span> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function Mm(a,e){Qt(e,!0);const o=["solid","dashed","dotted"],n=["xs","s","m","l","xl","2xl","full"],l={xs:2,s:4,m:8,l:12,xl:16,"2xl":24,full:9999},i=[{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))"}],c=[{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"}],d=No.borders??[];let p=G(!1),m=G(!1),h=G(!1),v=G(!1),y=G(!1),k=G(!1),w=G(!1),E=G(!1),B=G(!1);function U(Ue,Ee,qe){if(!Ue)return Ee;const et=parseFloat(qe?Ue.replace(qe,""):Ue);return isNaN(et)?Ee:et}let P=u(()=>U(e.overrides["--sf-radius-scale"],1)),S=u(()=>U(e.overrides["--sf-border-scale"],1)),_=u(()=>U(e.overrides["--sf-focus-ring-width"],2,"px")),z=u(()=>U(e.overrides["--sf-focus-ring-offset"],2,"px")),L=u(()=>U(e.overrides["--sf-divider-width"]?.replace("px",""),1)),R=u(()=>U(e.overrides["--sf-divider-gap"]?.replace("rem",""),1)),D=u(()=>e.overrides["--sf-color-border"]??""),A=u(()=>e.overrides["--sf-border-style"]??"solid"),T=u(()=>e.overrides["--sf-focus-ring-color"]??""),N=u(()=>e.overrides["--sf-divider-color"]??"");function $(Ue,Ee){return e.overrides[Ue]??Ee}function Ge(Ue){const Ee=e.overrides[Ue.name];if(!Ee||/^(var|calc|clamp)\(/.test(Ee.trim()))return Ue.default;const qe=parseFloat(Ee);return isNaN(qe)?Ue.default:qe}function te(Ue){const Ee=e.overrides[Ue.token];if(!Ee||/^(var|calc|clamp)\(/.test(Ee.trim()))return Ue.default;const qe=parseFloat(Ee);return isNaN(qe)?Ue.default:qe}var ge=Dm(),Pe=s(ge);Bi(Pe,{label:"Corner style",get presets(){return xm},get overrides(){return e.overrides},get onApply(){return e.onBulkChange}});var ve=r(Pe,4),me=s(ve),je=r(s(me),2),$e=s(je),tt=r(me,2);{var M=Ue=>{var Ee=Cm(),qe=de(Ee);{let et=u(()=>"--sf-color-border"in e.overrides);qa(qe,{token:"--sf-color-border",get value(){return t(D)},placeholder:"auto-derived",get isOverridden(){return t(et)},onSet:Ct=>e.onSet("--sf-color-border",Ct),onReset:()=>e.onReset("--sf-color-border")})}f(Ue,Ee)};I(tt,Ue=>{t(p)&&Ue(M)})}var J=r(ve,4),be=s(J),ye=r(s(be),2),W=s(ye),ke=r(be,2);{var He=Ue=>{var Ee=Sm(),qe=de(Ee);{let zt=u(()=>"--sf-border-scale"in e.overrides);pt(qe,{label:"Border scale",get value(){return t(S)},min:0,max:4,step:.25,help:"Multiplier applied to all border widths. 0 hides all borders.",get overridden(){return t(zt)},onChange:It=>e.onSet("--sf-border-scale",String(It)),onReset:()=>e.onReset("--sf-border-scale")})}var et=r(qe,2);{let zt=u(()=>U(e.overrides["--sf-border-width-hairline"]?.replace("px",""),.5)),It=u(()=>"--sf-border-width-hairline"in e.overrides);pt(et,{label:"Hairline",get value(){return t(zt)},min:0,max:1,step:.25,unit:"px",help:"--sf-border-width-hairline — ultra-thin border for retina displays",get overridden(){return t(It)},onChange:Ft=>e.onSet("--sf-border-width-hairline",`${Ft}px`),onReset:()=>e.onReset("--sf-border-width-hairline")})}var Ct=r(et,2);{let zt=u(()=>U(e.overrides["--sf-box-border-width"]?.replace("px",""),0)),It=u(()=>"--sf-box-border-width"in e.overrides);pt(Ct,{label:"Box border",get value(){return t(zt)},min:0,max:4,step:.5,unit:"px",help:"--sf-box-border-width — box-shadow border drawn without affecting layout",get overridden(){return t(It)},onChange:Ft=>e.onSet("--sf-box-border-width",`${Ft}px`),onReset:()=>e.onReset("--sf-box-border-width")})}var ta=r(Ct,2);re(ta,20,()=>[1,2,3,4],zt=>zt,(zt,It)=>{var Ft=Om(),la=s(Ft),xa=s(la),se=r(la,2),V=r(se,2),F=s(V);C((ee,he)=>{b(xa,`${It??""}px →`),lt(se,ee),b(F,`${he??""}px`)},[()=>`height: ${Math.max(It*t(S),.5)}px`,()=>(It*t(S)).toFixed(1)]),f(zt,Ft)}),f(Ue,Ee)};I(ke,Ue=>{t(m)&&Ue(He)})}var st=r(J,4),Se=s(st),Be=r(s(Se),2),ae=s(Be),q=r(Se,2);{var we=Ue=>{var Ee=Im(),qe=de(Ee);re(qe,20,()=>[{label:"Border",token:"--sf-border-style",default:"solid"},{label:"Divider",token:"--sf-divider-style",default:"solid"}],It=>It.token,(It,Ft)=>{var la=Pm(),xa=s(la),se=s(xa),V=r(xa,2);re(V,20,()=>o,F=>F,(F,ee)=>{const he=u(()=>$(Ft.token,Ft.default));var Z=Lm(),j=s(Z),le=r(j);C(()=>{Ye(Z,1,`px-2 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer text-center ${t(he)===ee?"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"}`),lt(j,`width: 20px; height: 0; border-bottom: 2px ${ee} currentColor; opacity: 0.7`),b(le,` ${ee??""}`)}),x("click",Z,()=>ee===Ft.default?e.onReset(Ft.token):e.onSet(Ft.token,ee)),f(F,Z)}),C(()=>b(se,Ft.label)),f(It,la)});var et=r(qe,2),Ct=s(et),ta=r(Ct,2),zt=s(ta);C((It,Ft)=>{lt(Ct,It),b(zt,`${Ft??""}px · ${t(A)??""}`)},[()=>`border: ${Math.max(t(S),.5)}px ${t(A)} ${t(D)||"var(--sf-color-border, #64748b)"}`,()=>(1*t(S)).toFixed(1)]),f(Ue,Ee)};I(q,Ue=>{t(h)&&Ue(we)})}var fe=r(st,4),ce=s(fe),xe=r(s(ce),2),ze=s(xe),De=r(ce,2);{var Ae=Ue=>{var Ee=Bm(),qe=de(Ee),et=r(s(qe),2);{let zt=u(()=>"--sf-divider-color"in e.overrides);qa(et,{token:"--sf-divider-color",get value(){return t(N)},placeholder:"inherits border",get isOverridden(){return t(zt)},onSet:It=>e.onSet("--sf-divider-color",It),onReset:()=>e.onReset("--sf-divider-color")})}var Ct=r(qe,2);{let zt=u(()=>"--sf-divider-width"in e.overrides);pt(Ct,{label:"Width",get value(){return t(L)},min:.5,max:4,step:.5,unit:"px",help:"--sf-divider-width",get overridden(){return t(zt)},onChange:It=>e.onSet("--sf-divider-width",`${It}px`),onReset:()=>e.onReset("--sf-divider-width"),rawDefault:"var(--sf-border-width-1)",get currentRaw(){return e.overrides["--sf-divider-width"]},onRawSet:It=>e.onSet("--sf-divider-width",It)})}var ta=r(Ct,2);{let zt=u(()=>"--sf-divider-gap"in e.overrides);pt(ta,{label:"Gap",get value(){return t(R)},min:0,max:4,step:.125,unit:"rem",help:"--sf-divider-gap — spacing around divider lines",get overridden(){return t(zt)},onChange:It=>e.onSet("--sf-divider-gap",`${It}rem`),onReset:()=>e.onReset("--sf-divider-gap"),rawDefault:"var(--sf-space-m)",get currentRaw(){return e.overrides["--sf-divider-gap"]},onRawSet:It=>e.onSet("--sf-divider-gap",It)})}f(Ue,Ee)};I(De,Ue=>{t(v)&&Ue(Ae)})}var Ie=r(fe,4),Ve=s(Ie),nt=r(s(Ve),2),ct=s(nt),dt=r(Ve,2);{var Ot=Ue=>{var Ee=Um(),qe=de(Ee);{let Ft=u(()=>"--sf-focus-ring-width"in e.overrides);pt(qe,{label:"Ring width",get value(){return t(_)},min:0,max:6,step:.5,unit:"px",help:"Thickness of the keyboard focus indicator",get overridden(){return t(Ft)},onChange:la=>e.onSet("--sf-focus-ring-width",`${la}px`),onReset:()=>e.onReset("--sf-focus-ring-width")})}var et=r(qe,2);{let Ft=u(()=>"--sf-focus-ring-offset"in e.overrides);pt(et,{label:"Ring offset",get value(){return t(z)},min:0,max:8,step:.5,unit:"px",help:"Gap between element edge and focus ring",get overridden(){return t(Ft)},onChange:la=>e.onSet("--sf-focus-ring-offset",`${la}px`),onReset:()=>e.onReset("--sf-focus-ring-offset")})}var Ct=r(et,2),ta=r(s(Ct),2);{let Ft=u(()=>"--sf-focus-ring-color"in e.overrides);qa(ta,{token:"--sf-focus-ring-color",get value(){return t(T)},placeholder:"default (action)",get isOverridden(){return t(Ft)},onSet:la=>e.onSet("--sf-focus-ring-color",la),onReset:()=>e.onReset("--sf-focus-ring-color")})}var zt=r(Ct,2),It=s(zt);C(()=>lt(It,`outline: ${t(_)}px solid ${t(T)||"oklch(0.7 0.2 235)"}; outline-offset: ${t(z)}px`)),f(Ue,Ee)};I(dt,Ue=>{t(y)&&Ue(Ot)})}var mt=r(Ie,4),Q=s(mt),Oe=r(s(Q),2),Me=s(Oe),at=r(Q,2);{var ft=Ue=>{var Ee=zm();re(Ee,21,()=>d,qe=>qe.name,(qe,et)=>{Fo(qe,{get knob(){return t(et)},get overrides(){return e.overrides},onChange:(Ct,ta)=>ta===null?e.onReset(Ct):e.onSet(Ct,ta)})}),f(Ue,Ee)};I(at,Ue=>{t(k)&&Ue(ft)})}var _t=r(mt,2),xt=s(_t),Nt=r(s(xt),2),St=s(Nt),Et=r(xt,2);{var it=Ue=>{var Ee=Am();re(Ee,21,()=>i,qe=>qe.name,(qe,et)=>{{let Ct=u(()=>Ge(t(et))),ta=u(()=>t(et).name in e.overrides);pt(qe,{get label(){return t(et).step},get value(){return t(Ct)},min:0,get max(){return t(et).max},get step(){return t(et).step_size},unit:"px",get overridden(){return t(ta)},onChange:zt=>e.onSet(t(et).name,`${zt}px`),onReset:()=>e.onReset(t(et).name),get rawDefault(){return t(et).rawDefault},get currentRaw(){return e.overrides[t(et).name]},onRawSet:zt=>e.onSet(t(et).name,zt)})}}),f(Ue,Ee)};I(Et,Ue=>{t(E)&&Ue(it)})}var Gt=r(_t,2),ea=s(Gt),ia=r(s(ea),2),Je=s(ia),ut=r(ea,2);{var Lt=Ue=>{var Ee=Rm(),qe=s(Ee);re(qe,20,()=>n,et=>et,(et,Ct)=>{const ta=u(()=>l[Ct]??6),zt=u(()=>Ct==="full"?9999:t(ta)*t(P));var It=Em(),Ft=s(It),la=r(Ft,2),xa=s(la);C(se=>{lt(Ft,se),b(xa,Ct)},[()=>`border-radius: ${Math.min(t(zt),9999)}px`]),f(et,It)}),f(Ue,Ee)};I(ut,Ue=>{t(w)&&Ue(Lt)})}var Dt=r(Gt,4),Rt=s(Dt),pe=r(s(Rt),2),Ze=s(pe),vt=r(Rt,2);{var Ut=Ue=>{var Ee=Tm();re(Ee,21,()=>c,qe=>qe.token,(qe,et)=>{{let Ct=u(()=>te(t(et))),ta=u(()=>t(et).token in e.overrides);pt(qe,{get label(){return t(et).label},get value(){return t(Ct)},get min(){return t(et).min},get max(){return t(et).max},get step(){return t(et).step},get unit(){return t(et).unit},get help(){return t(et).help},get overridden(){return t(ta)},onChange:zt=>e.onSet(t(et).token,`${zt}${t(et).unit}`),onReset:()=>e.onReset(t(et).token),get rawDefault(){return t(et).rawDefault},get currentRaw(){return e.overrides[t(et).token]},onRawSet:zt=>e.onSet(t(et).token,zt)})}}),f(Ue,Ee)};I(vt,Ue=>{t(B)&&Ue(Ut)})}C(()=>{Y(me,"aria-expanded",t(p)),b($e,t(p)?"▲":"▼"),Y(be,"aria-expanded",t(m)),b(W,t(m)?"▲":"▼"),Y(Se,"aria-expanded",t(h)),b(ae,t(h)?"▲":"▼"),Y(ce,"aria-expanded",t(v)),b(ze,t(v)?"▲":"▼"),Y(Ve,"aria-expanded",t(y)),b(ct,t(y)?"▲":"▼"),Y(Q,"aria-expanded",t(k)),b(Me,t(k)?"▲":"▼"),Y(xt,"aria-expanded",t(E)),b(St,t(E)?"▲":"▼"),Y(ea,"aria-expanded",t(w)),b(Je,t(w)?"▲":"▼"),Y(Rt,"aria-expanded",t(B)),b(Ze,t(B)?"▲":"▼")}),x("click",me,()=>{O(p,!t(p))}),x("click",be,()=>{O(m,!t(m))}),x("click",Se,()=>{O(h,!t(h))}),x("click",ce,()=>{O(v,!t(v))}),x("click",Ve,()=>{O(y,!t(y))}),x("click",Q,()=>{O(k,!t(k))}),x("click",xt,()=>{O(E,!t(E))}),x("click",ea,()=>{O(w,!t(w))}),x("click",Rt,()=>{O(B,!t(B))}),f(a,ge),$t()}aa(["click"]);var Nm=g('<div class="space-y-4"></div> <!>',1),Fm=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Shadow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Warm, cool or brand-tinted shadows. Default uses neutral hue.</p></div>'),jm=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Glow color</div> <!> <p class="text-[9px] text-slate-600 mt-1">Which brand color radiates the glow. Defaults to primary.</p></div>'),Gm=g('<div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Shadow glow</div> <div class="text-[9px] text-slate-500 mt-0.5">Ambient glow on elevated surfaces</div></div> <button><div></div></button></div> <!>',1),Hm=g('<div class="flex flex-col items-center gap-2"><div class="bg-[#1a1a2e] border border-white/8 rounded-lg"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),qm=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-4 flex-wrap items-end justify-center"></div>'),Vm=g('<div class="p-4 space-y-5"><!> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow appearance</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Shadow color</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Glow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Elevation preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function Km(a,e){Qt(e,!0);const o=["xs","s","m","l","xl","2xl"],n=No.shadows??[];let l=u(()=>parseFloat(e.overrides["--sf-shadow-lightness"]??"0.15")),i=u(()=>e.overrides["--sf-shadow-color"]??""),c=u(()=>e.overrides["--sf-shadow-glow-color"]??""),d=u(()=>e.overrides["--sf-shadow-glow"]==="none"),p=G(!1),m=G(!1),h=G(!1),v=G(!1);var y=Vm(),k=s(y);Bi(k,{label:"Elevation preset",get presets(){return km},get overrides(){return e.overrides},get onApply(){return e.onBulkChange}});var w=r(k,4),E=s(w),B=r(s(E),2),U=s(B),P=r(E,2);{var S=M=>{var J=Nm(),be=de(J);re(be,21,()=>n,W=>W.name,(W,ke)=>{Fo(W,{get knob(){return t(ke)},get overrides(){return e.overrides},onChange:(He,st)=>st===null?e.onReset(He):e.onSet(He,st)})});var ye=r(be,2);{let W=u(()=>"--sf-shadow-lightness"in e.overrides);pt(ye,{label:"Shadow lightness",get value(){return t(l)},min:0,max:.5,step:.01,help:"OKLCH lightness of the shadow color. Lower = darker, more visible shadows.",get overridden(){return t(W)},onChange:ke=>e.onSet("--sf-shadow-lightness",String(ke)),onReset:()=>e.onReset("--sf-shadow-lightness")})}f(M,J)};I(P,M=>{t(p)&&M(S)})}var _=r(w,4),z=s(_),L=r(s(z),2),R=s(L),D=r(z,2);{var A=M=>{var J=Fm(),be=r(s(J),2);{let ye=u(()=>"--sf-shadow-color"in e.overrides);qa(be,{token:"--sf-shadow-color",get value(){return t(i)},placeholder:"auto (neutral hue)",get isOverridden(){return t(ye)},onSet:W=>e.onSet("--sf-shadow-color",W),onReset:()=>e.onReset("--sf-shadow-color")})}f(M,J)};I(D,M=>{t(m)&&M(A)})}var T=r(_,4),N=s(T),$=r(s(N),2),Ge=s($),te=r(N,2);{var ge=M=>{var J=Gm(),be=de(J),ye=r(s(be),2),W=s(ye),ke=r(be,2);{var He=st=>{var Se=jm(),Be=r(s(Se),2);{let ae=u(()=>"--sf-shadow-glow-color"in e.overrides);qa(Be,{token:"--sf-shadow-glow-color",get value(){return t(c)},placeholder:"default (primary color)",get isOverridden(){return t(ae)},onSet:q=>e.onSet("--sf-shadow-glow-color",q),onReset:()=>e.onReset("--sf-shadow-glow-color")})}f(st,Se)};I(ke,st=>{t(d)||st(He)})}C(()=>{Ye(ye,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(d)?"bg-white/10":"bg-indigo-600"}`),Ye(W,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(d)?"translate-x-0.5":"translate-x-4"}`)}),x("click",ye,()=>{t(d)?e.onReset("--sf-shadow-glow"):e.onSet("--sf-shadow-glow","none")}),f(M,J)};I(te,M=>{t(h)&&M(ge)})}var Pe=r(T,4),ve=s(Pe),me=r(s(ve),2),je=s(me),$e=r(ve,2);{var tt=M=>{var J=qm();re(J,22,()=>o,be=>be,(be,ye,W)=>{var ke=Hm(),He=s(ke),st=r(He,2),Se=s(st);C(()=>{lt(He,`width: ${40+t(W)*4}px; height: ${40+t(W)*4}px; box-shadow: var(--sf-shadow-${ye})`),b(Se,ye)}),f(be,ke)}),f(M,J)};I($e,M=>{t(v)&&M(tt)})}C(()=>{Y(E,"aria-expanded",t(p)),b(U,t(p)?"▲":"▼"),Y(z,"aria-expanded",t(m)),b(R,t(m)?"▲":"▼"),Y(N,"aria-expanded",t(h)),b(Ge,t(h)?"▲":"▼"),Y(ve,"aria-expanded",t(v)),b(je,t(v)?"▲":"▼")}),x("click",E,()=>{O(p,!t(p))}),x("click",z,()=>{O(m,!t(m))}),x("click",N,()=>{O(h,!t(h))}),x("click",ve,()=>{O(v,!t(v))}),f(a,y),$t()}aa(["click"]);var Wm=g('<div class="rounded-lg bg-amber-500/10 border border-amber-500/20 p-2.5"><p class="text-[10px] text-amber-300">Motion is disabled — duration sliders have no effect while scale is 0.</p></div>'),Ym=g('<div class="mt-3 space-y-4"></div>'),Zm=g('<span class="text-amber-400">(No effect while motion is disabled.)</span>'),Jm=g('<p class="text-[10px] text-slate-600 leading-relaxed">Set absolute ms values to override the fluid scale calculation. <!></p> <!>',1),Xm=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),Qm=g('<div class="flex items-center gap-2"><span class="text-[9px] font-mono text-slate-600 w-6"> </span> <div class="flex-1 h-1.5 bg-white/8 rounded-full"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>'),$m=g('<p class="text-[10px] text-slate-600 leading-relaxed">One slider sets all five stagger delays (delay-1 through delay-5 are multiples of this base).</p> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Stagger base</span> <!></div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1"></div>',1),ev=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>'),tv=g('<div><div class="flex items-center justify-between mb-1.5"><span class="text-[10px] font-semibold text-slate-300"> </span> <!></div> <svg width="40" height="28" viewBox="0 0 40 28" class="overflow-visible"><path stroke="rgb(99 102 241 / 0.6)" stroke-width="1.5" fill="none" stroke-linecap="round"></path></svg> <div class="text-[8px] font-mono text-slate-600 mt-1 truncate"> </div></div>'),av=g('<p class="text-[10px] text-slate-600 leading-relaxed">Customize the named easing tokens used throughout the design system.</p> <div class="grid grid-cols-2 gap-1.5"></div>',1),ov=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4"><div class="relative h-10 overflow-hidden rounded"><div class="absolute top-1 h-8 w-8 bg-indigo-500 rounded-lg"></div></div> <button class="mt-3 w-full py-1.5 rounded-lg text-[10px] font-bold border border-indigo-500/40 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 transition-all cursor-pointer disabled:opacity-40"> </button></div>'),sv=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),rv=g('<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </div> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),nv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Default animation-range for scroll-driven animations using the <span class="font-mono text-slate-400">.sf-scroll-timeline</span> utility.</p> <!>',1),lv=g('<div class="flex items-center gap-3"><span class="text-[10px] text-slate-500 w-14 shrink-0"> </span> <div class="flex-1 h-1 bg-white/8 rounded-full overflow-hidden"><div class="h-full bg-indigo-500 rounded-full"></div></div> <span class="text-[9px] font-mono text-slate-500 w-10 text-right"> </span></div>'),iv=g('<div class="bg-white/4 rounded-xl border border-white/8 p-4 space-y-3"></div>'),cv=g('<div class="p-4 space-y-5"><div class="flex items-center justify-between p-3 rounded-xl bg-white/4 border border-white/8"><div><div class="text-[11px] font-semibold text-slate-200">Disable motion</div> <div class="text-[9px] text-slate-500 mt-0.5">Respects prefers-reduced-motion</div></div> <button><div></div></button></div> <!> <div><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Global scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Theme transition</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Duration overrides</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Stagger base</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Easing curves</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Animation demo</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll timeline range</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div><button class="w-full flex items-center justify-between cursor-pointer mb-2"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Duration preview</div> <span class="text-[10px] text-slate-500"> </span></button> <!></div></div>');function dv(a,e){Qt(e,!0);const o=[{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}],n=[{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:"cubic-bezier(0.34, 1.56, 0.64, 1)",preview:"M0,40 C8,40 20,-10 40,0"}],l=["--sf-animation-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5"],i=No.motion??[];let c=u(()=>parseFloat(e.overrides["--sf-motion-scale"]??"1")),d=u(()=>e.overrides["--sf-motion-scale"]==="0"),p=u(()=>parseFloat(e.overrides["--sf-theme-transition-duration"]?.replace("ms","")??String(300*t(c)))),m=u(()=>()=>{const Je=e.overrides[l[0]];return Je?parseFloat(Je.replace("ms","")):75*t(c)}),h=G(!1),v=G(0),y=G(!1),k=G(!1),w=G(!1),E=G(!1),B=G(!1),U=G(!1),P=G(!1),S=G(!1);function _(Je,ut){const Lt=e.overrides[Je];return Lt?parseFloat(Lt):Math.round(ut*t(c))}function z(){if(t(h))return;O(h,!0),O(v,180);const Je=_("--sf-duration-normal",250);setTimeout(()=>{O(v,0),setTimeout(()=>{O(h,!1)},Je)},Je)}function L(Je){const ut={};for(let Lt=1;Lt<=5;Lt++)ut[`--sf-animation-delay-${Lt}`]=`${Math.round(Je*Lt)}ms`;e.onBulkChange(ut)}function R(){const Je={};for(let ut=1;ut<=5;ut++)Je[`--sf-animation-delay-${ut}`]=null;e.onBulkChange(Je)}var D=cv(),A=s(D),T=r(s(A),2),N=s(T),$=r(A,2);{var Ge=Je=>{var ut=Wm();f(Je,ut)};I($,Je=>{t(d)&&Je(Ge)})}var te=r($,2),ge=s(te),Pe=r(s(ge),2),ve=s(Pe),me=r(ge,2);{var je=Je=>{var ut=Ym();re(ut,21,()=>i,Lt=>Lt.name,(Lt,Dt)=>{Fo(Lt,{get knob(){return t(Dt)},get overrides(){return e.overrides},onChange:(Rt,pe)=>pe===null?e.onReset(Rt):e.onSet(Rt,pe)})}),f(Je,ut)};I(me,Je=>{t(y)&&Je(je)})}var $e=r(te,4),tt=s($e),M=r(s(tt),2),J=s(M),be=r(tt,2);{var ye=Je=>{{let ut=u(()=>"--sf-theme-transition-duration"in e.overrides);pt(Je,{label:"Dark/light switch speed",get value(){return t(p)},min:0,max:600,step:10,unit:"ms",help:"--sf-theme-transition-duration — color-scheme switch animation speed",get overridden(){return t(ut)},onChange:Lt=>e.onSet("--sf-theme-transition-duration",`${Lt}ms`),onReset:()=>e.onReset("--sf-theme-transition-duration")})}};I(be,Je=>{t(k)&&Je(ye)})}var W=r($e,4),ke=s(W),He=r(s(ke),2),st=s(He),Se=r(ke,2);{var Be=Je=>{var ut=Jm(),Lt=de(ut),Dt=r(s(Lt));{var Rt=Ze=>{var vt=Zm();f(Ze,vt)};I(Dt,Ze=>{t(d)&&Ze(Rt)})}var pe=r(Lt,2);re(pe,17,()=>o,Ze=>Ze.token,(Ze,vt)=>{const Ut=u(()=>_(t(vt).token,t(vt).base));{let Ue=u(()=>t(vt).token in e.overrides);pt(Ze,{get label(){return t(vt).label},get value(){return t(Ut)},min:0,get max(){return t(vt).max},step:10,unit:"ms",get overridden(){return t(Ue)},onChange:Ee=>e.onSet(t(vt).token,`${Ee}ms`),onReset:()=>e.onReset(t(vt).token)})}}),f(Je,ut)};I(Se,Je=>{t(w)&&Je(Be)})}var ae=r(W,4),q=s(ae),we=r(s(q),2),fe=s(we),ce=r(q,2);{var xe=Je=>{var ut=$m(),Lt=r(de(ut),2),Dt=s(Lt),Rt=r(s(Dt),2);{var pe=Ue=>{var Ee=Xm();x("click",Ee,R),f(Ue,Ee)},Ze=u(()=>l.some(Ue=>Ue in e.overrides));I(Rt,Ue=>{t(Ze)&&Ue(pe)})}var vt=r(Dt,2);{let Ue=u(()=>Math.round(t(m)())),Ee=u(()=>l.some(qe=>qe in e.overrides));pt(vt,{label:"",get value(){return t(Ue)},min:0,max:200,step:5,unit:"ms",help:"Base unit for --sf-animation-delay-1 through -5",get overridden(){return t(Ee)},onChange:qe=>L(qe),onReset:R})}var Ut=r(Lt,2);re(Ut,20,()=>[1,2,3,4,5],Ue=>Ue,(Ue,Ee)=>{const qe=u(()=>Math.round(t(m)()*Ee));var et=Qm(),Ct=s(et),ta=s(Ct),zt=r(Ct,2),It=s(zt),Ft=r(zt,2),la=s(Ft);C(xa=>{b(ta,`–${Ee??""}`),lt(It,xa),b(la,`${t(qe)??""}ms`)},[()=>`width: ${Math.min(t(qe)/600*100,100)}%`]),f(Ue,et)}),f(Je,ut)};I(ce,Je=>{t(E)&&Je(xe)})}var ze=r(ae,4),De=s(ze),Ae=r(s(De),2),Ie=s(Ae),Ve=r(De,2);{var nt=Je=>{var ut=av(),Lt=r(de(ut),2);re(Lt,21,()=>n,Dt=>Dt.token,(Dt,Rt)=>{const pe=u(()=>t(Rt).token in e.overrides);var Ze=tv(),vt=s(Ze),Ut=s(vt),Ue=s(Ut),Ee=r(Ut,2);{var qe=It=>{var Ft=ev();x("click",Ft,()=>e.onReset(t(Rt).token)),f(It,Ft)};I(Ee,It=>{t(pe)&&It(qe)})}var et=r(vt,2),Ct=s(et),ta=r(et,2),zt=s(ta);C(It=>{Ye(Ze,1,`p-2.5 rounded-xl border transition-all ${t(pe)?"bg-indigo-500/10 border-indigo-500/30":"border-white/8 bg-white/3"}`),b(Ue,t(Rt).label),Y(Ct,"d",t(Rt).preview),b(zt,It)},[()=>t(Rt).token.replace("--sf-ease-","")]),f(Dt,Ze)}),f(Je,ut)};I(Ve,Je=>{t(B)&&Je(nt)})}var ct=r(ze,4),dt=s(ct),Ot=r(s(dt),2),mt=s(Ot),Q=r(dt,2);{var Oe=Je=>{var ut=ov(),Lt=s(ut),Dt=s(Lt),Rt=r(Lt,2),pe=s(Rt);C(Ze=>{lt(Dt,Ze),Rt.disabled=t(h),b(pe,t(h)?"Animating…":"▶ Play")},[()=>`transform: translateX(${t(v)}px); transition: transform ${_("--sf-duration-normal",250)}ms ${e.overrides["--sf-ease-out"]??"cubic-bezier(0.25, 0, 0.15, 1)"}`]),x("click",Rt,z),f(Je,ut)};I(Q,Je=>{t(U)&&Je(Oe)})}var Me=r(ct,4),at=s(Me),ft=r(s(at),2),_t=s(ft),xt=r(at,2);{var Nt=Je=>{var ut=nv(),Lt=r(de(ut),2);re(Lt,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%"}],Dt=>Dt.token,(Dt,Rt)=>{var pe=rv(),Ze=s(pe),vt=s(Ze),Ut=r(Ze,2),Ue=r(Ut,2);{var Ee=qe=>{var et=sv();x("click",et,()=>e.onReset(Rt.token)),f(qe,et)};I(Ue,qe=>{Rt.token in e.overrides&&qe(Ee)})}C(()=>{b(vt,Rt.label),Xt(Ut,e.overrides[Rt.token]??""),Y(Ut,"placeholder",Rt.placeholder)}),x("input",Ut,qe=>{const et=qe.target.value.trim();et?e.onSet(Rt.token,et):e.onReset(Rt.token)}),f(Dt,pe)}),f(Je,ut)};I(xt,Je=>{t(S)&&Je(Nt)})}var St=r(Me,4),Et=s(St),it=r(s(Et),2),Gt=s(it),ea=r(Et,2);{var ia=Je=>{var ut=iv();re(ut,21,()=>o,Lt=>Lt.label,(Lt,Dt)=>{const Rt=u(()=>_(t(Dt).token,t(Dt).base));var pe=lv(),Ze=s(pe),vt=s(Ze),Ut=r(Ze,2),Ue=s(Ut),Ee=r(Ut,2),qe=s(Ee);C(et=>{b(vt,t(Dt).label),lt(Ue,et),b(qe,`${t(Rt)??""}ms`)},[()=>`width: ${Math.min(t(Rt)/1200*100,100)}%`]),f(Lt,pe)}),f(Je,ut)};I(ea,Je=>{t(P)&&Je(ia)})}C(()=>{Y(T,"title",t(d)?"Enable motion":"Disable motion"),Ye(T,1,`w-9 h-5 rounded-full transition-colors relative cursor-pointer ${t(d)?"bg-indigo-600":"bg-white/10"}`),Ye(N,1,`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${t(d)?"translate-x-4":"translate-x-0.5"}`),Y(ge,"aria-expanded",t(y)),b(ve,t(y)?"▲":"▼"),Y(tt,"aria-expanded",t(k)),b(J,t(k)?"▲":"▼"),Y(ke,"aria-expanded",t(w)),b(st,t(w)?"▲":"▼"),Y(q,"aria-expanded",t(E)),b(fe,t(E)?"▲":"▼"),Y(De,"aria-expanded",t(B)),b(Ie,t(B)?"▲":"▼"),Y(dt,"aria-expanded",t(U)),b(mt,t(U)?"▲":"▼"),Y(at,"aria-expanded",t(S)),b(_t,t(S)?"▲":"▼"),Y(Et,"aria-expanded",t(P)),b(Gt,t(P)?"▲":"▼")}),x("click",T,()=>{t(d)?e.onReset("--sf-motion-scale"):e.onSet("--sf-motion-scale","0")}),x("click",ge,()=>{O(y,!t(y))}),x("click",tt,()=>{O(k,!t(k))}),x("click",ke,()=>{O(w,!t(w))}),x("click",q,()=>{O(E,!t(E))}),x("click",De,()=>{O(B,!t(B))}),x("click",dt,()=>{O(U,!t(U))}),x("click",at,()=>{O(S,!t(S))}),x("click",Et,()=>{O(P,!t(P))}),f(a,D),$t()}aa(["click","input"]);var fv=g("<div></div>"),uv=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex gap-3 items-center justify-center overflow-hidden relative"><div class="absolute inset-0 grid grid-cols-4 grid-rows-3 gap-px opacity-30"></div> <div class="relative z-10 w-20 h-12 rounded-lg border border-white/20 bg-white/10 flex items-center justify-center"><span class="text-[9px] font-mono text-white/70"> </span></div></div>',1),pv=g('<div class="flex items-center gap-3"><span class="text-[9px] text-slate-600 w-14"> </span> <div class="flex-1 h-4 bg-indigo-400 rounded"></div> <span class="text-[9px] font-mono text-slate-500 w-8"> </span></div>'),mv=g('<!> <!> <!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"></div>',1),Wn=g("<button> </button>"),vv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Gradient overlay for hero images and media content. Used by the <code class="text-slate-400">.sf-scrim</code> macro.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Color</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-2">Direction</div> <div class="grid grid-cols-2 gap-1"></div></div> <div class="rounded-xl overflow-hidden border border-white/8" style="height: 80px"><div class="w-full h-full relative" style="background: linear-gradient(135deg, oklch(0.3 0.15 264), oklch(0.25 0.1 300))"><div class="absolute inset-0"></div> <div class="absolute bottom-2 left-3 text-[10px] text-white/80 font-medium">Scrim preview</div></div></div>',1),hv=g('<div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0"> </div> <!></div>'),gv=g('<!> <div class="flex items-center gap-2 p-2 rounded-lg bg-white/4 border border-white/8"><div class="w-16 h-3 rounded-full"><div class="w-6 h-3 rounded-full"></div></div> <span class="text-[9px] text-slate-600">Scrollbar preview</span></div>',1),bv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Controls text legibility over images. Applied via <code class="text-slate-400">text-shadow: var(--sf-text-shadow-m)</code>.</p> <div class="flex gap-2"></div>',1),yv=g('<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Blur</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Opacity</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-4"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrollbar</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function xv(a,e){Qt(e,!0);const o=[{label:"To top",value:"to top"},{label:"To bottom",value:"to bottom"},{label:"To left",value:"to left"},{label:"To right",value:"to right"}],n=[{label:"None",patch:{"--sf-text-shadow-s":"none","--sf-text-shadow-m":"none","--sf-text-shadow-l":"none"}},{label:"Subtle",patch:null},{label:"Strong",patch:{"--sf-shadow-strength":"calc(0.25 + var(--sf-is-dark) * 0.17)"}}];function l(Ie,Ve,nt){if(!Ie)return Ve;const ct=parseFloat(nt?Ie.replace(nt,""):Ie);return isNaN(ct)?Ve:ct}let i=u(()=>l(e.overrides["--sf-blur"],12,"px")),c=u(()=>l(e.overrides["--sf-opacity-muted"],.5)),d=u(()=>l(e.overrides["--sf-opacity-disabled"],.45)),p=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),m=u(()=>e.overrides["--sf-scrim-color"]??""),h=u(()=>l(e.overrides["--sf-scroll-shadow-size"]?.replace("rem",""),2)),v=u(()=>l(e.overrides["--sf-state-pending-opacity"],.7)),y=u(()=>e.overrides["--sf-scrollbar-thumb"]??""),k=u(()=>e.overrides["--sf-scrollbar-track"]??""),w=G(!1),E=G(!1),B=G(!1),U=G(!1),P=G(!1),S=G(!1);var _=yv(),z=s(_),L=s(z),R=r(s(L),2),D=s(R),A=r(L,2);{var T=Ie=>{var Ve=uv(),nt=de(Ve);{let Oe=u(()=>"--sf-blur"in e.overrides);pt(nt,{label:"Blur radius",get value(){return t(i)},min:0,max:48,step:1,unit:"px",help:"--sf-blur — used for frosted glass, modals, tooltips",get overridden(){return t(Oe)},onChange:Me=>e.onSet("--sf-blur",`${Me}px`),onReset:()=>e.onReset("--sf-blur")})}var ct=r(nt,2),dt=s(ct);re(dt,20,()=>Array.from({length:12}),sn,(Oe,Me,at)=>{var ft=fv();Ye(ft,1,ro(at%3===0?"bg-indigo-500/50":at%3===1?"bg-purple-500/40":"bg-blue-500/30")),f(Oe,ft)});var Ot=r(dt,2),mt=s(Ot),Q=s(mt);C(()=>{lt(Ot,`backdrop-filter: blur(${t(i)}px)`),b(Q,`${t(i)??""}px`)}),f(Ie,Ve)};I(A,Ie=>{t(w)&&Ie(T)})}var N=r(z,4),$=s(N),Ge=r(s($),2),te=s(Ge),ge=r($,2);{var Pe=Ie=>{var Ve=mv(),nt=de(Ve);{let mt=u(()=>"--sf-opacity-muted"in e.overrides);pt(nt,{label:"Muted opacity",get value(){return t(c)},min:0,max:1,step:.05,help:"--sf-opacity-muted — secondary text, icons, and placeholder content",get overridden(){return t(mt)},onChange:Q=>e.onSet("--sf-opacity-muted",String(Q)),onReset:()=>e.onReset("--sf-opacity-muted")})}var ct=r(nt,2);{let mt=u(()=>"--sf-opacity-disabled"in e.overrides);pt(ct,{label:"Disabled opacity",get value(){return t(d)},min:0,max:1,step:.05,help:"--sf-opacity-disabled — disabled form controls and interactive elements",get overridden(){return t(mt)},onChange:Q=>e.onSet("--sf-opacity-disabled",String(Q)),onReset:()=>e.onReset("--sf-opacity-disabled")})}var dt=r(ct,2);{let mt=u(()=>"--sf-state-pending-opacity"in e.overrides);pt(dt,{label:"Pending opacity",get value(){return t(v)},min:.1,max:1,step:.05,help:"--sf-state-pending-opacity — opacity of elements in loading/pending state",get overridden(){return t(mt)},onChange:Q=>e.onSet("--sf-state-pending-opacity",String(Q)),onReset:()=>e.onReset("--sf-state-pending-opacity")})}var Ot=r(dt,2);re(Ot,21,()=>[{label:"muted",val:t(c)},{label:"disabled",val:t(d)},{label:"pending",val:t(v)}],mt=>mt.label,(mt,Q)=>{var Oe=pv(),Me=s(Oe),at=s(Me),ft=r(Me,2),_t=r(ft,2),xt=s(_t);C(()=>{b(at,t(Q).label),lt(ft,`opacity: ${t(Q).val}`),b(xt,t(Q).val)}),f(mt,Oe)}),f(Ie,Ve)};I(ge,Ie=>{t(E)&&Ie(Pe)})}var ve=r(N,4),me=s(ve),je=r(s(me),2),$e=s(je),tt=r(me,2);{var M=Ie=>{var Ve=vv(),nt=r(de(Ve),2),ct=r(s(nt),2);{let Me=u(()=>"--sf-scrim-color"in e.overrides);qa(ct,{token:"--sf-scrim-color",get value(){return t(m)},placeholder:"default (base color)",get isOverridden(){return t(Me)},onSet:at=>e.onSet("--sf-scrim-color",at),onReset:()=>e.onReset("--sf-scrim-color")})}var dt=r(nt,2),Ot=r(s(dt),2);re(Ot,21,()=>o,Me=>Me.value,(Me,at)=>{var ft=Wn(),_t=s(ft);C(()=>{Ye(ft,1,`py-2 px-3 rounded-lg text-[10px] border transition-all cursor-pointer text-left ${t(p)===t(at).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"}`),b(_t,t(at).label)}),x("click",ft,()=>t(at).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(at).value)),f(Me,ft)});var mt=r(dt,2),Q=s(mt),Oe=s(Q);C(()=>lt(Oe,`background: linear-gradient(${t(p)}, ${t(m)||"oklch(0 0 0 / 0.6)"}, transparent)`)),f(Ie,Ve)};I(tt,Ie=>{t(B)&&Ie(M)})}var J=r(ve,4),be=s(J),ye=r(s(be),2),W=s(ye),ke=r(be,2);{var He=Ie=>{var Ve=gv(),nt=de(Ve);re(nt,17,()=>[{label:"Thumb color",token:"--sf-scrollbar-thumb",val:t(y)},{label:"Track color",token:"--sf-scrollbar-track",val:t(k)}],mt=>mt.token,(mt,Q)=>{var Oe=hv(),Me=s(Oe),at=s(Me),ft=r(Me,2);{let _t=u(()=>t(Q).token in e.overrides);qa(ft,{get token(){return t(Q).token},get value(){return t(Q).val},placeholder:"default",get isOverridden(){return t(_t)},onSet:xt=>e.onSet(t(Q).token,xt),onReset:()=>e.onReset(t(Q).token)})}C(()=>b(at,t(Q).label)),f(mt,Oe)});var ct=r(nt,2),dt=s(ct),Ot=s(dt);C(()=>{lt(dt,`background: ${t(k)||"rgba(255,255,255,0.08)"}`),lt(Ot,`background: ${t(y)||"oklch(0.52 0.025 260)"}`)}),f(Ie,Ve)};I(ke,Ie=>{t(U)&&Ie(He)})}var st=r(J,4),Se=s(st),Be=r(s(Se),2),ae=s(Be),q=r(Se,2);{var we=Ie=>{{let Ve=u(()=>"--sf-scroll-shadow-size"in e.overrides);pt(Ie,{label:"Shadow size",get value(){return t(h)},min:0,max:6,step:.25,unit:"rem",help:"--sf-scroll-shadow-size — gradient edge mask on .sf-scroll-shadow elements",get overridden(){return t(Ve)},onChange:nt=>e.onSet("--sf-scroll-shadow-size",`${nt}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size")})}};I(q,Ie=>{t(P)&&Ie(we)})}var fe=r(st,4),ce=s(fe),xe=r(s(ce),2),ze=s(xe),De=r(ce,2);{var Ae=Ie=>{var Ve=bv(),nt=r(de(Ve),2);re(nt,21,()=>n,ct=>ct.label,(ct,dt)=>{var Ot=Wn(),mt=s(Ot);C(()=>{Ye(Ot,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(dt).label==="None"&&e.overrides["--sf-text-shadow-s"]==="none"||t(dt).patch===null&&!("--sf-text-shadow-s"in e.overrides)?"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"}`),b(mt,t(dt).label)}),x("click",Ot,()=>{if(t(dt).patch===null)e.onReset("--sf-text-shadow-s"),e.onReset("--sf-text-shadow-m"),e.onReset("--sf-text-shadow-l");else for(const[Q,Oe]of Object.entries(t(dt).patch))e.onSet(Q,Oe)}),f(ct,Ot)}),f(Ie,Ve)};I(De,Ie=>{t(S)&&Ie(Ae)})}C(()=>{Y(L,"aria-expanded",t(w)),b(D,t(w)?"▲":"▼"),Y($,"aria-expanded",t(E)),b(te,t(E)?"▲":"▼"),Y(me,"aria-expanded",t(B)),b($e,t(B)?"▲":"▼"),Y(be,"aria-expanded",t(U)),b(W,t(U)?"▲":"▼"),Y(Se,"aria-expanded",t(P)),b(ae,t(P)?"▲":"▼"),Y(ce,"aria-expanded",t(S)),b(ze,t(S)?"▲":"▼")}),x("click",L,()=>{O(w,!t(w))}),x("click",$,()=>{O(E,!t(E))}),x("click",me,()=>{O(B,!t(B))}),x("click",be,()=>{O(U,!t(U))}),x("click",Se,()=>{O(P,!t(P))}),x("click",ce,()=>{O(S,!t(S))}),f(a,_),$t()}aa(["click"]);var kv=g('<div class="h-2.5 rounded bg-indigo-500/40"></div>'),wv=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"></div>',1),_v=g(`<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-300 leading-relaxed">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.</p></div>`,1),Yn=g("<button> </button>"),Cv=g('<p class="text-[9px] text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p> <div class="grid grid-cols-3 gap-1.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex justify-center"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-200"> </div></div>',1),Ov=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="h-8 rounded bg-indigo-500/40"></div></div>',1),Fs=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Sv=g('<p class="text-[9px] text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Color</div> <input type="text" placeholder="oklch(0 0 0 / 0.55)" class="flex-1 min-w-0 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"/> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Direction</div> <div class="grid grid-cols-3 gap-1"></div></div> <div class="relative h-24 rounded-xl border border-white/8 overflow-hidden flex items-end p-2" style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)"><div class="absolute inset-0"></div> <span class="relative text-[11px] font-bold text-white">Caption over scrim</span></div> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Text shadow</div> <input type="text" placeholder="0 1px 3px oklch(0 0 0 / 0.6)" class="flex-1 min-w-0 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"/> <!></div>',1),Lv=g('<p class="text-[9px] text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p> <div class="space-y-2"><!> <!> <div class="flex items-center gap-2 pt-1"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Marker color</div> <input type="text" placeholder="var(--sf-color-primary)" class="flex-1 min-w-0 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"/> <!></div></div>',1),Pv=g('<p class="text-[9px] text-slate-600 leading-relaxed">--sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Intrinsic size</div> <input type="text" placeholder="500px" class="flex-1 min-w-0 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"/> <!></div>',1),Iv=g(`<div class="p-4 space-y-6"><p class="text-[10px] text-slate-600 leading-relaxed">Tokens for the framework's utility macros — <span class="font-mono text-slate-400">.sf-prose</span>, <span class="font-mono text-slate-400">.sf-flow</span>, <span class="font-mono text-slate-400">.sf-line-clamp</span>, <span class="font-mono text-slate-400">.sf-aspect</span>, <span class="font-mono text-slate-400">.sf-scroll-shadow</span> and <span class="font-mono text-slate-400">.sf-scrim</span>.</p> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Flow rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line clamp</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Aspect ratio</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Prose rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Content visibility</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — edit every prose, scrim and surface token directly.</p></div></div>`);function Bv(a,e){Qt(e,!0);function o(X,Pe,Re){const nt=e.overrides[X];if(!nt)return Pe;const it=parseFloat(Re?nt.replace(Re,""):nt);return isNaN(it)?Pe:it}const n=[{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"}],l=[{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"}],i=[{label:"Heading gap",token:"--sf-prose-heading-gap",def:.75,max:3},{label:"List gap",token:"--sf-prose-list-gap",def:.5,max:2},{label:"Block margin",token:"--sf-prose-block-margin",def:1,max:4},{label:"Media margin",token:"--sf-prose-media-margin",def:1,max:4},{label:"Figure margin",token:"--sf-prose-figure-margin",def:1.5,max:4},{label:"Blockquote padding",token:"--sf-prose-blockquote-padding",def:1,max:3},{label:"HR margin",token:"--sf-prose-hr-margin",def:1.5,max:4}];let c=G(!1),d=G(!1),p=G(!1),m=G(!1),h=G(!1),v=G(!1),y=G(!1),k=u(()=>o("--sf-line-clamp",3)),w=u(()=>o("--sf-flow-space",.5,"rem")),E=u(()=>o("--sf-scroll-shadow-size",2,"rem")),B=u(()=>e.overrides["--sf-aspect"]??"16 / 9"),U=u(()=>e.overrides["--sf-scrim-color"]??"oklch(0 0 0 / 0.55)"),P=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),S=u(()=>o("--sf-prose-media-radius",6,"px"));function _(X){const Pe=e.overrides[X.token];if(!Pe)return X.def;const Re=parseFloat(Pe);return isNaN(Re)?X.def:Re}var z=Iv(),L=r(s(z),2),R=s(L),D=r(s(R),2),A=s(D),T=r(R,2);{var N=X=>{var Pe=wv(),Re=fe(Pe);{let it=u(()=>"--sf-flow-space"in e.overrides);ut(Re,{label:"Flow space",get value(){return t(w)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-flow-space — vertical gap between adjacent children of .sf-flow",get overridden(){return t(it)},onChange:Ct=>e.onSet("--sf-flow-space",`${Ct}rem`),onReset:()=>e.onReset("--sf-flow-space")})}var nt=r(Re,2);re(nt,20,()=>[0,1,2],it=>it,(it,Ct)=>{var bt=kv();C(()=>lt(bt,`width:${90-Ct*12}%`)),f(it,bt)}),C(()=>lt(nt,`display:flex;flex-direction:column;gap:${t(w)}rem`)),f(X,Pe)};I(T,X=>{t(c)&&X(N)})}var $=r(L,4),He=s($),te=r(s(He),2),ye=s(te),Ie=r(He,2);{var he=X=>{var Pe=_v(),Re=fe(Pe);{let Ct=u(()=>"--sf-line-clamp"in e.overrides);ut(Re,{label:"Default lines",get value(){return t(k)},min:1,max:8,step:1,help:"--sf-line-clamp — default line count for .sf-line-clamp (override per element)",get overridden(){return t(Ct)},onChange:bt=>e.onSet("--sf-line-clamp",String(bt)),onReset:()=>e.onReset("--sf-line-clamp")})}var nt=r(Re,2),it=s(nt);C(()=>lt(it,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${t(k)};overflow:hidden`)),f(X,Pe)};I(Ie,X=>{t(d)&&X(he)})}var ve=r($,4),je=s(ve),$e=r(s(je),2),et=s($e),M=r(je,2);{var J=X=>{var Pe=Cv(),Re=r(fe(Pe),2);re(Re,21,()=>n,bt=>bt.value,(bt,Dt)=>{var St=Yn(),Ut=s(St);C(ct=>{Ye(St,1,ct),b(Ut,t(Dt).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(B).replace(/\s/g,"")===t(Dt).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"}`]),x("click",St,()=>t(Dt).value==="16 / 9"?e.onReset("--sf-aspect"):e.onSet("--sf-aspect",t(Dt).value)),f(bt,St)});var nt=r(Re,2),it=s(nt),Ct=s(it);C(()=>{lt(it,`aspect-ratio:${t(B)};max-height:120px;max-width:100%;width:auto;height:120px`),b(Ct,t(B))}),f(X,Pe)};I(M,X=>{t(p)&&X(J)})}var xe=r(ve,4),ke=s(xe),W=r(s(ke),2),we=s(W),qe=r(ke,2);{var at=X=>{var Pe=Ov(),Re=fe(Pe);{let Ct=u(()=>"--sf-scroll-shadow-size"in e.overrides);ut(Re,{label:"Fade size",get value(){return t(E)},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 t(Ct)},onChange:bt=>e.onSet("--sf-scroll-shadow-size",`${bt}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size")})}var nt=r(Re,2),it=s(nt);C(()=>lt(it,`mask:linear-gradient(to right, transparent, #000 ${t(E)}rem, #000 calc(100% - ${t(E)}rem), transparent)`)),f(X,Pe)};I(qe,X=>{t(m)&&X(at)})}var Se=r(xe,4),Ue=s(Se),ae=r(s(Ue),2),q=s(ae),_e=r(Ue,2);{var ue=X=>{var Pe=Sv(),Re=r(fe(Pe),2),nt=r(s(Re),2),it=r(nt,2);{var Ct=Ze=>{var mt=Fs();x("click",mt,()=>e.onReset("--sf-scrim-color")),f(Ze,mt)};I(it,Ze=>{"--sf-scrim-color"in e.overrides&&Ze(Ct)})}var bt=r(Re,2),Dt=r(s(bt),2);re(Dt,21,()=>l,Ze=>Ze.value,(Ze,mt)=>{var Ot=Yn(),Rt=s(Ot);C(()=>{Ye(Ot,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${t(P)===t(mt).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"}`),b(Rt,t(mt).label)}),x("click",Ot,()=>t(mt).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(mt).value)),f(Ze,Ot)});var St=r(bt,2),Ut=s(St),ct=r(St,2),jt=r(s(ct),2),ea=r(jt,2);{var ia=Ze=>{var mt=Fs();x("click",mt,()=>e.onReset("--sf-scrim-text-shadow")),f(Ze,mt)};I(ea,Ze=>{"--sf-scrim-text-shadow"in e.overrides&&Ze(ia)})}C(()=>{Xt(nt,e.overrides["--sf-scrim-color"]??""),lt(Ut,`background:linear-gradient(${t(P)}, ${t(U)}, transparent)`),Xt(jt,e.overrides["--sf-scrim-text-shadow"]??"")}),x("input",nt,Ze=>{const mt=Ze.target.value.trim();mt?e.onSet("--sf-scrim-color",mt):e.onReset("--sf-scrim-color")}),x("input",jt,Ze=>{const mt=Ze.target.value.trim();mt?e.onSet("--sf-scrim-text-shadow",mt):e.onReset("--sf-scrim-text-shadow")}),f(X,Pe)};I(_e,X=>{t(h)&&X(ue)})}var de=r(Se,4),me=s(de),Me=r(s(me),2),Te=s(Me),ze=r(me,2);{var Be=X=>{var Pe=Lv(),Re=r(fe(Pe),2),nt=s(Re);re(nt,17,()=>i,Ut=>Ut.token,(Ut,ct)=>{{let jt=u(()=>_(t(ct))),ea=u(()=>t(ct).token in e.overrides);ut(Ut,{get label(){return t(ct).label},get value(){return t(jt)},min:0,get max(){return t(ct).max},step:.0625,unit:"rem",get help(){return t(ct).token},get overridden(){return t(ea)},onChange:ia=>e.onSet(t(ct).token,`${ia}rem`),onReset:()=>e.onReset(t(ct).token)})}});var it=r(nt,2);{let Ut=u(()=>"--sf-prose-media-radius"in e.overrides);ut(it,{label:"Media radius",get value(){return t(S)},min:0,max:32,step:1,unit:"px",help:"--sf-prose-media-radius — corner radius on prose images/video",get overridden(){return t(Ut)},onChange:ct=>e.onSet("--sf-prose-media-radius",`${ct}px`),onReset:()=>e.onReset("--sf-prose-media-radius")})}var Ct=r(it,2),bt=r(s(Ct),2),Dt=r(bt,2);{var St=Ut=>{var ct=Fs();x("click",ct,()=>e.onReset("--sf-prose-marker-color")),f(Ut,ct)};I(Dt,Ut=>{"--sf-prose-marker-color"in e.overrides&&Ut(St)})}C(()=>Xt(bt,e.overrides["--sf-prose-marker-color"]??"")),x("input",bt,Ut=>{const ct=Ut.target.value.trim();ct?e.onSet("--sf-prose-marker-color",ct):e.onReset("--sf-prose-marker-color")}),f(X,Pe)};I(ze,X=>{t(v)&&X(Be)})}var Ge=r(de,2),dt=s(Ge),st=r(s(dt),2),pt=s(st),_t=r(dt,2);{var vt=X=>{var Pe=Pv(),Re=r(fe(Pe),2),nt=r(s(Re),2),it=r(nt,2);{var Ct=bt=>{var Dt=Fs();x("click",Dt,()=>e.onReset("--sf-content-intrinsic-size")),f(bt,Dt)};I(it,bt=>{"--sf-content-intrinsic-size"in e.overrides&&bt(Ct)})}C(()=>Xt(nt,e.overrides["--sf-content-intrinsic-size"]??"")),x("input",nt,bt=>{const Dt=bt.target.value.trim();Dt?e.onSet("--sf-content-intrinsic-size",Dt):e.onReset("--sf-content-intrinsic-size")}),f(X,Pe)};I(_t,X=>{t(y)&&X(vt)})}C(()=>{Y(R,"aria-expanded",t(c)),b(A,t(c)?"▲":"▼"),Y(He,"aria-expanded",t(d)),b(ye,t(d)?"▲":"▼"),Y(je,"aria-expanded",t(p)),b(et,t(p)?"▲":"▼"),Y(ke,"aria-expanded",t(m)),b(we,t(m)?"▲":"▼"),Y(Ue,"aria-expanded",t(h)),b(q,t(h)?"▲":"▼"),Y(me,"aria-expanded",t(v)),b(Te,t(v)?"▲":"▼"),Y(dt,"aria-expanded",t(y)),b(pt,t(y)?"▲":"▼")}),x("click",R,()=>{O(c,!t(c))}),x("click",He,()=>{O(d,!t(d))}),x("click",je,()=>{O(p,!t(p))}),x("click",ke,()=>{O(m,!t(m))}),x("click",Ue,()=>{O(h,!t(h))}),x("click",me,()=>{O(v,!t(v))}),x("click",dt,()=>{O(y,!t(y))}),f(a,z),$t()}ta(["click","input"]);var Uv=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-center gap-3"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-400/70 shrink-0"> </div> <p class="text-[9px] text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p></div>',1),hs=g("<button> </button>"),zv=g('<div class="flex gap-2"></div>'),Av=g('<div class="flex items-center gap-2"><div></div> <span class="text-[9px] font-mono text-slate-400 w-20 shrink-0"> </span> <span class="text-[8px] text-slate-600 flex-1"> </span> <span class="text-[8px] font-mono text-slate-500"> </span></div>'),Ev=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1.5"></div> <p class="text-[9px] text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>',1),Rv=g('<div class="space-y-2"><div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-200 select-all">Select this text to preview the selection color.</p></div></div>'),Tv=g('<div class="flex gap-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200"> </div></div>',1),Dv=g('<div class="flex flex-col items-center gap-1 flex-1"><div class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),Mv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Controls the height / tap-target of all sized components (buttons, inputs, badges).</p> <div class="space-y-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-end gap-2"></div>',1),Nv=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),Fv=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div> <!></div> <!> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Underline thickness</span> <!></div> <div class="flex gap-1"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><input type="text" placeholder="Click and type to see the caret…" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <p class="text-[11px] text-slate-300">A <a href="#sample-link" class="text-indigo-300">sample link</a> with the current underline settings.</p></div>',1),jv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Icon scale tokens used by <span class="font-mono text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-400">em</span> units relative to surrounding text.</p> <div class="space-y-1.5"></div> <!>',1),Gv=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>'),gs=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Hv=g('<p class="text-[9px] text-slate-600">Default values for <span class="font-mono text-slate-400">.sf-media</span> images and replaced elements.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Fit</span> <div class="flex gap-1 flex-1"></div> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Position</span> <input type="text" placeholder="50% 50%" class="flex-1 min-w-0 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"/> <!></div>',1),qv=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),Vv=g(`<p class="text-[9px] text-slate-600 leading-relaxed">Default to the device's <span class="font-mono text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.</p> <div class="space-y-1.5"></div>`,1),Kv=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),Wv=g('<p class="text-[9px] text-slate-600">Applied inside <span class="font-mono text-slate-400">@media print</span> via <span class="font-mono text-slate-400">optional/print.css</span>.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Page size</span> <div class="flex gap-1 flex-1"></div></div> <!>',1),Yv=g('<div class="flex items-center gap-2 py-0.5"><button type="button"><div></div></button> <span class="text-[9px] font-mono text-slate-300 w-24 shrink-0"> </span> <span class="text-[9px] text-slate-600 flex-1"> </span> <!></div>'),Zv=g(`<p class="text-[10px] text-slate-600 leading-relaxed">Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles.
+          Extra filler text keeps the block taller than the clamp at every setting.</p></div>`,1),Yn=g("<button> </button>"),Cv=g('<p class="text-[9px] text-slate-600">--sf-aspect — default ratio for .sf-aspect / .sf-frame</p> <div class="grid grid-cols-3 gap-1.5"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex justify-center"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded-lg flex items-center justify-center text-[9px] font-mono text-indigo-200"> </div></div>',1),Ov=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><div class="h-8 rounded bg-indigo-500/40"></div></div>',1),Fs=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Sv=g('<p class="text-[9px] text-slate-600">--sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Color</div> <input type="text" placeholder="oklch(0 0 0 / 0.55)" class="flex-1 min-w-0 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"/> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Direction</div> <div class="grid grid-cols-3 gap-1"></div></div> <div class="relative h-24 rounded-xl border border-white/8 overflow-hidden flex items-end p-2" style="background:repeating-linear-gradient(45deg,#475569,#475569 8px,#334155 8px,#334155 16px)"><div class="absolute inset-0"></div> <span class="relative text-[11px] font-bold text-white">Caption over scrim</span></div> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Text shadow</div> <input type="text" placeholder="0 1px 3px oklch(0 0 0 / 0.6)" class="flex-1 min-w-0 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"/> <!></div>',1),Lv=g('<p class="text-[9px] text-slate-600">Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.</p> <div class="space-y-2"><!> <!> <div class="flex items-center gap-2 pt-1"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Marker color</div> <input type="text" placeholder="var(--sf-color-primary)" class="flex-1 min-w-0 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"/> <!></div></div>',1),Pv=g('<p class="text-[9px] text-slate-600 leading-relaxed">--sf-content-intrinsic-size — placeholder size used with <span class="font-mono text-slate-400">content-visibility: auto</span> to improve scroll performance on tall pages.</p> <div class="flex items-center gap-2"><div class="text-[10px] font-semibold text-slate-400 w-20 shrink-0">Intrinsic size</div> <input type="text" placeholder="500px" class="flex-1 min-w-0 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"/> <!></div>',1),Iv=g(`<div class="p-4 space-y-6"><p class="text-[10px] text-slate-600 leading-relaxed">Tokens for the framework's utility macros — <span class="font-mono text-slate-400">.sf-prose</span>, <span class="font-mono text-slate-400">.sf-flow</span>, <span class="font-mono text-slate-400">.sf-line-clamp</span>, <span class="font-mono text-slate-400">.sf-aspect</span>, <span class="font-mono text-slate-400">.sf-scroll-shadow</span> and <span class="font-mono text-slate-400">.sf-scrim</span>.</p> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Flow rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Line clamp</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Aspect ratio</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll shadow</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scrim overlay</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Prose rhythm</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Content visibility</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed"><span class="text-slate-400 font-semibold">All tokens tab</span> — edit every prose, scrim and surface token directly.</p></div></div>`);function Bv(a,e){Qt(e,!0);function o(Q,Oe,Me){const at=e.overrides[Q];if(!at)return Oe;const ft=parseFloat(Me?at.replace(Me,""):at);return isNaN(ft)?Oe:ft}const n=[{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"}],l=[{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"}],i=[{label:"Heading gap",token:"--sf-prose-heading-gap",def:.75,max:3},{label:"List gap",token:"--sf-prose-list-gap",def:.5,max:2},{label:"Block margin",token:"--sf-prose-block-margin",def:1,max:4},{label:"Media margin",token:"--sf-prose-media-margin",def:1,max:4},{label:"Figure margin",token:"--sf-prose-figure-margin",def:1.5,max:4},{label:"Blockquote padding",token:"--sf-prose-blockquote-padding",def:1,max:3},{label:"HR margin",token:"--sf-prose-hr-margin",def:1.5,max:4}];let c=G(!1),d=G(!1),p=G(!1),m=G(!1),h=G(!1),v=G(!1),y=G(!1),k=u(()=>o("--sf-line-clamp",3)),w=u(()=>o("--sf-flow-space",.5,"rem")),E=u(()=>o("--sf-scroll-shadow-size",2,"rem")),B=u(()=>e.overrides["--sf-aspect"]??"16 / 9"),U=u(()=>e.overrides["--sf-scrim-color"]??"oklch(0 0 0 / 0.55)"),P=u(()=>e.overrides["--sf-scrim-direction"]??"to top"),S=u(()=>o("--sf-prose-media-radius",6,"px"));function _(Q){const Oe=e.overrides[Q.token];if(!Oe)return Q.def;const Me=parseFloat(Oe);return isNaN(Me)?Q.def:Me}var z=Iv(),L=r(s(z),2),R=s(L),D=r(s(R),2),A=s(D),T=r(R,2);{var N=Q=>{var Oe=wv(),Me=de(Oe);{let ft=u(()=>"--sf-flow-space"in e.overrides);pt(Me,{label:"Flow space",get value(){return t(w)},min:0,max:4,step:.0625,unit:"rem",help:"--sf-flow-space — vertical gap between adjacent children of .sf-flow",get overridden(){return t(ft)},onChange:_t=>e.onSet("--sf-flow-space",`${_t}rem`),onReset:()=>e.onReset("--sf-flow-space")})}var at=r(Me,2);re(at,20,()=>[0,1,2],ft=>ft,(ft,_t)=>{var xt=kv();C(()=>lt(xt,`width:${90-_t*12}%`)),f(ft,xt)}),C(()=>lt(at,`display:flex;flex-direction:column;gap:${t(w)}rem`)),f(Q,Oe)};I(T,Q=>{t(c)&&Q(N)})}var $=r(L,4),Ge=s($),te=r(s(Ge),2),ge=s(te),Pe=r(Ge,2);{var ve=Q=>{var Oe=_v(),Me=de(Oe);{let _t=u(()=>"--sf-line-clamp"in e.overrides);pt(Me,{label:"Default lines",get value(){return t(k)},min:1,max:8,step:1,help:"--sf-line-clamp — default line count for .sf-line-clamp (override per element)",get overridden(){return t(_t)},onChange:xt=>e.onSet("--sf-line-clamp",String(xt)),onReset:()=>e.onReset("--sf-line-clamp")})}var at=r(Me,2),ft=s(at);C(()=>lt(ft,`display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:${t(k)};overflow:hidden`)),f(Q,Oe)};I(Pe,Q=>{t(d)&&Q(ve)})}var me=r($,4),je=s(me),$e=r(s(je),2),tt=s($e),M=r(je,2);{var J=Q=>{var Oe=Cv(),Me=r(de(Oe),2);re(Me,21,()=>n,xt=>xt.value,(xt,Nt)=>{var St=Yn(),Et=s(St);C(it=>{Ye(St,1,it),b(Et,t(Nt).label)},[()=>`py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer font-mono ${t(B).replace(/\s/g,"")===t(Nt).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"}`]),x("click",St,()=>t(Nt).value==="16 / 9"?e.onReset("--sf-aspect"):e.onSet("--sf-aspect",t(Nt).value)),f(xt,St)});var at=r(Me,2),ft=s(at),_t=s(ft);C(()=>{lt(ft,`aspect-ratio:${t(B)};max-height:120px;max-width:100%;width:auto;height:120px`),b(_t,t(B))}),f(Q,Oe)};I(M,Q=>{t(p)&&Q(J)})}var be=r(me,4),ye=s(be),W=r(s(ye),2),ke=s(W),He=r(ye,2);{var st=Q=>{var Oe=Ov(),Me=de(Oe);{let _t=u(()=>"--sf-scroll-shadow-size"in e.overrides);pt(Me,{label:"Fade size",get value(){return t(E)},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 t(_t)},onChange:xt=>e.onSet("--sf-scroll-shadow-size",`${xt}rem`),onReset:()=>e.onReset("--sf-scroll-shadow-size")})}var at=r(Me,2),ft=s(at);C(()=>lt(ft,`mask:linear-gradient(to right, transparent, #000 ${t(E)}rem, #000 calc(100% - ${t(E)}rem), transparent)`)),f(Q,Oe)};I(He,Q=>{t(m)&&Q(st)})}var Se=r(be,4),Be=s(Se),ae=r(s(Be),2),q=s(ae),we=r(Be,2);{var fe=Q=>{var Oe=Sv(),Me=r(de(Oe),2),at=r(s(Me),2),ft=r(at,2);{var _t=Je=>{var ut=Fs();x("click",ut,()=>e.onReset("--sf-scrim-color")),f(Je,ut)};I(ft,Je=>{"--sf-scrim-color"in e.overrides&&Je(_t)})}var xt=r(Me,2),Nt=r(s(xt),2);re(Nt,21,()=>l,Je=>Je.value,(Je,ut)=>{var Lt=Yn(),Dt=s(Lt);C(()=>{Ye(Lt,1,`py-1 rounded-lg text-[10px] border transition-all cursor-pointer ${t(P)===t(ut).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"}`),b(Dt,t(ut).label)}),x("click",Lt,()=>t(ut).value==="to top"?e.onReset("--sf-scrim-direction"):e.onSet("--sf-scrim-direction",t(ut).value)),f(Je,Lt)});var St=r(xt,2),Et=s(St),it=r(St,2),Gt=r(s(it),2),ea=r(Gt,2);{var ia=Je=>{var ut=Fs();x("click",ut,()=>e.onReset("--sf-scrim-text-shadow")),f(Je,ut)};I(ea,Je=>{"--sf-scrim-text-shadow"in e.overrides&&Je(ia)})}C(()=>{Xt(at,e.overrides["--sf-scrim-color"]??""),lt(Et,`background:linear-gradient(${t(P)}, ${t(U)}, transparent)`),Xt(Gt,e.overrides["--sf-scrim-text-shadow"]??"")}),x("input",at,Je=>{const ut=Je.target.value.trim();ut?e.onSet("--sf-scrim-color",ut):e.onReset("--sf-scrim-color")}),x("input",Gt,Je=>{const ut=Je.target.value.trim();ut?e.onSet("--sf-scrim-text-shadow",ut):e.onReset("--sf-scrim-text-shadow")}),f(Q,Oe)};I(we,Q=>{t(h)&&Q(fe)})}var ce=r(Se,4),xe=s(ce),ze=r(s(xe),2),De=s(ze),Ae=r(xe,2);{var Ie=Q=>{var Oe=Lv(),Me=r(de(Oe),2),at=s(Me);re(at,17,()=>i,Et=>Et.token,(Et,it)=>{{let Gt=u(()=>_(t(it))),ea=u(()=>t(it).token in e.overrides);pt(Et,{get label(){return t(it).label},get value(){return t(Gt)},min:0,get max(){return t(it).max},step:.0625,unit:"rem",get help(){return t(it).token},get overridden(){return t(ea)},onChange:ia=>e.onSet(t(it).token,`${ia}rem`),onReset:()=>e.onReset(t(it).token)})}});var ft=r(at,2);{let Et=u(()=>"--sf-prose-media-radius"in e.overrides);pt(ft,{label:"Media radius",get value(){return t(S)},min:0,max:32,step:1,unit:"px",help:"--sf-prose-media-radius — corner radius on prose images/video",get overridden(){return t(Et)},onChange:it=>e.onSet("--sf-prose-media-radius",`${it}px`),onReset:()=>e.onReset("--sf-prose-media-radius")})}var _t=r(ft,2),xt=r(s(_t),2),Nt=r(xt,2);{var St=Et=>{var it=Fs();x("click",it,()=>e.onReset("--sf-prose-marker-color")),f(Et,it)};I(Nt,Et=>{"--sf-prose-marker-color"in e.overrides&&Et(St)})}C(()=>Xt(xt,e.overrides["--sf-prose-marker-color"]??"")),x("input",xt,Et=>{const it=Et.target.value.trim();it?e.onSet("--sf-prose-marker-color",it):e.onReset("--sf-prose-marker-color")}),f(Q,Oe)};I(Ae,Q=>{t(v)&&Q(Ie)})}var Ve=r(ce,2),nt=s(Ve),ct=r(s(nt),2),dt=s(ct),Ot=r(nt,2);{var mt=Q=>{var Oe=Pv(),Me=r(de(Oe),2),at=r(s(Me),2),ft=r(at,2);{var _t=xt=>{var Nt=Fs();x("click",Nt,()=>e.onReset("--sf-content-intrinsic-size")),f(xt,Nt)};I(ft,xt=>{"--sf-content-intrinsic-size"in e.overrides&&xt(_t)})}C(()=>Xt(at,e.overrides["--sf-content-intrinsic-size"]??"")),x("input",at,xt=>{const Nt=xt.target.value.trim();Nt?e.onSet("--sf-content-intrinsic-size",Nt):e.onReset("--sf-content-intrinsic-size")}),f(Q,Oe)};I(Ot,Q=>{t(y)&&Q(mt)})}C(()=>{Y(R,"aria-expanded",t(c)),b(A,t(c)?"▲":"▼"),Y(Ge,"aria-expanded",t(d)),b(ge,t(d)?"▲":"▼"),Y(je,"aria-expanded",t(p)),b(tt,t(p)?"▲":"▼"),Y(ye,"aria-expanded",t(m)),b(ke,t(m)?"▲":"▼"),Y(Be,"aria-expanded",t(h)),b(q,t(h)?"▲":"▼"),Y(xe,"aria-expanded",t(v)),b(De,t(v)?"▲":"▼"),Y(nt,"aria-expanded",t(y)),b(dt,t(y)?"▲":"▼")}),x("click",R,()=>{O(c,!t(c))}),x("click",Ge,()=>{O(d,!t(d))}),x("click",je,()=>{O(p,!t(p))}),x("click",ye,()=>{O(m,!t(m))}),x("click",Be,()=>{O(h,!t(h))}),x("click",xe,()=>{O(v,!t(v))}),x("click",nt,()=>{O(y,!t(y))}),f(a,z),$t()}aa(["click","input"]);var Uv=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-center gap-3"><div class="bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center text-[9px] font-mono text-indigo-400/70 shrink-0"> </div> <p class="text-[9px] text-slate-600">Minimum interactive area — ensures accessibility on touch devices.</p></div>',1),hs=g("<button> </button>"),zv=g('<div class="flex gap-2"></div>'),Av=g('<div class="flex items-center gap-2"><div></div> <span class="text-[9px] font-mono text-slate-400 w-20 shrink-0"> </span> <span class="text-[8px] text-slate-600 flex-1"> </span> <span class="text-[8px] font-mono text-slate-500"> </span></div>'),Ev=g('<!> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-1.5"></div> <p class="text-[9px] text-slate-600">Override individual z-index tokens in the "All tokens" tab.</p>',1),Rv=g('<div class="space-y-2"><div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection background</div> <!></div> <div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Selection text color</div> <!></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3"><p class="text-[11px] text-slate-200 select-all">Select this text to preview the selection color.</p></div></div>'),Tv=g('<div class="flex gap-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-4 flex items-center justify-center"><div class="px-4 py-2 bg-indigo-600/30 rounded-lg text-[11px] text-indigo-200"> </div></div>',1),Dv=g('<div class="flex flex-col items-center gap-1 flex-1"><div class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"></div> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),Mv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Controls the height / tap-target of all sized components (buttons, inputs, badges).</p> <div class="space-y-2"></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 flex items-end gap-2"></div>',1),Nv=g('<button class="text-[9px] text-slate-500 hover:text-rose-400 cursor-pointer opacity-0 group-hover:opacity-100">reset</button>'),Fv=g('<div><div class="text-[10px] font-semibold text-slate-400 mb-1.5">Caret color</div> <!></div> <!> <div class="group"><div class="flex items-center justify-between mb-1.5"><span class="text-[11px] font-semibold text-slate-200">Underline thickness</span> <!></div> <div class="flex gap-1"></div></div> <div class="bg-white/4 rounded-xl border border-white/8 p-3 space-y-2"><input type="text" placeholder="Click and type to see the caret…" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <p class="text-[11px] text-slate-300">A <a href="#sample-link" class="text-indigo-300">sample link</a> with the current underline settings.</p></div>',1),jv=g('<p class="text-[10px] text-slate-600 leading-relaxed">Icon scale tokens used by <span class="font-mono text-slate-400">.sf-icon-*</span> utilities. Values are in <span class="font-mono text-slate-400">em</span> units relative to surrounding text.</p> <div class="space-y-1.5"></div> <!>',1),Gv=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer">reset</button>'),gs=g('<button class="text-[8px] text-slate-500 hover:text-rose-400 cursor-pointer shrink-0">reset</button>'),Hv=g('<p class="text-[9px] text-slate-600">Default values for <span class="font-mono text-slate-400">.sf-media</span> images and replaced elements.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Fit</span> <div class="flex gap-1 flex-1"></div> <!></div> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-16 shrink-0">Position</span> <input type="text" placeholder="50% 50%" class="flex-1 min-w-0 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"/> <!></div>',1),qv=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-14 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),Vv=g(`<p class="text-[9px] text-slate-600 leading-relaxed">Default to the device's <span class="font-mono text-slate-400">env(safe-area-inset-*)</span>. Override only if you need fixed padding regardless of notch/home-indicator.</p> <div class="space-y-1.5"></div>`,1),Kv=g('<div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0"> </span> <input type="text" class="flex-1 min-w-0 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"/> <!></div>'),Wv=g('<p class="text-[9px] text-slate-600">Applied inside <span class="font-mono text-slate-400">@media print</span> via <span class="font-mono text-slate-400">optional/print.css</span>.</p> <div class="flex items-center gap-2"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Page size</span> <div class="flex gap-1 flex-1"></div></div> <!>',1),Yv=g('<div class="flex items-center gap-2 py-0.5"><button type="button"><div></div></button> <span class="text-[9px] font-mono text-slate-300 w-24 shrink-0"> </span> <span class="text-[9px] text-slate-600 flex-1"> </span> <!></div>'),Zv=g(`<p class="text-[10px] text-slate-600 leading-relaxed">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.</p> <div class="space-y-1.5"></div> <div class="flex items-center gap-2 pt-1"><span class="text-[10px] font-semibold text-slate-400 w-24 shrink-0">Required marker</span> <input type="text" placeholder=" *" class="flex-1 min-w-0 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"/> <!></div>`,1),Jv=g(`<div class="p-4 space-y-6"><section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Touch target</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Scroll behavior</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Z-index layers</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Text selection</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Focus ring style</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Component size scale</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Caret &amp; links</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Icon sizes</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Object fit</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Safe area insets</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Print styles</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">State flags</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <div class="rounded-lg bg-white/3 border border-white/6 p-3"><p class="text-[10px] text-slate-500 leading-relaxed">Selection colors, caret, links, focus ring, borders and sizes all render in the
       live preview (try the <span class="text-slate-400 font-semibold">Components</span> template). <span class="text-slate-400 font-semibold">Scroll behavior</span> applies to the page
-      itself and can't be shown in the static canvas.</p></div></div>`);function Xv(a,e){Qt(e,!0);const o=[{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"}],n=[{label:"Smooth",value:"smooth"},{label:"Auto",value:"auto"}],l=[{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 i(V,F,ee){if(!V)return F;const be=parseFloat(ee?V.replace(ee,""):V);return isNaN(be)?F:be}let c=u(()=>i(e.overrides["--sf-touch-target"],44,"px")),d=u(()=>e.overrides["--sf-scroll-behavior"]??"smooth"),p=u(()=>i(e.overrides["--sf-z-base"],0)),m=u(()=>e.overrides["--sf-caret-color"]??""),h=u(()=>i(e.overrides["--sf-link-underline-offset"]?.replace("em",""),.15)),v=u(()=>e.overrides["--sf-link-underline-thickness"]??"auto"),y=u(()=>e.overrides["--sf-focus-ring-style"]??"solid"),k=G(!1),w=G(!1),E=G(!1),B=G(!1),U=G(!1),P=G(!1),S=G(!1),_=G(!1),z=G(!1),L=G(!1),R=G(!1),D=G(!1);function A(V){return i(e.overrides[V.token]?.replace("rem",""),V.default)}var T=Jv(),N=s(T),$=s(N),He=r(s($),2),te=s(He),ye=r($,2);{var Ie=V=>{var F=Uv(),ee=fe(F);{let ie=u(()=>"--sf-touch-target"in e.overrides);ut(ee,{label:"Min touch size",get value(){return t(c)},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 t(ie)},onChange:pe=>e.onSet("--sf-touch-target",`${pe}px`),onReset:()=>e.onReset("--sf-touch-target")})}var be=r(ee,2),Z=s(be),j=s(Z);C(()=>{lt(Z,`width: ${t(c)}px; height: ${t(c)}px`),b(j,`${t(c)??""}px`)}),f(V,F)};I(ye,V=>{t(k)&&V(Ie)})}var he=r(N,4),ve=s(he),je=r(s(ve),2),$e=s(je),et=r(ve,2);{var M=V=>{var F=zv();re(F,21,()=>n,ee=>ee.value,(ee,be)=>{var Z=hs(),j=s(Z);C(()=>{Ye(Z,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(d)===t(be).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"}`),b(j,t(be).label)}),x("click",Z,()=>t(be).value==="smooth"?e.onReset("--sf-scroll-behavior"):e.onSet("--sf-scroll-behavior",t(be).value)),f(ee,Z)}),f(V,F)};I(et,V=>{t(w)&&V(M)})}var J=r(he,4),xe=s(J),ke=r(s(xe),2),W=s(ke),we=r(xe,2);{var qe=V=>{var F=Ev(),ee=fe(F);{let Z=u(()=>"--sf-z-base"in e.overrides);ut(ee,{label:"Base offset",get value(){return t(p)},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 t(Z)},onChange:j=>e.onSet("--sf-z-base",String(j)),onReset:()=>e.onReset("--sf-z-base")})}var be=r(ee,2);re(be,21,()=>o,Z=>Z.token,(Z,j)=>{const ie=u(()=>t(j).token in e.overrides);var pe=Av(),K=s(pe),le=r(K,2),De=s(le),H=r(le,2),Ce=s(H),ce=r(H,2),Le=s(ce);C(Ne=>{Ye(K,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(ie)?"bg-amber-400":"bg-white/20"}`),b(De,t(j).label),b(Ce,t(j).note),b(Le,Ne)},[()=>t(j).token.replace("--sf-z-","")]),f(Z,pe)}),f(V,F)};I(we,V=>{t(E)&&V(qe)})}var at=r(J,4),Se=s(at),Ue=r(s(Se),2),ae=s(Ue),q=r(Se,2);{var _e=V=>{var F=Rv(),ee=s(F),be=r(s(ee),2);{let K=u(()=>e.overrides["--sf-color-selection-bg"]??""),le=u(()=>"--sf-color-selection-bg"in e.overrides);qa(be,{token:"--sf-color-selection-bg",get value(){return t(K)},placeholder:"default",get isOverridden(){return t(le)},onSet:De=>e.onSet("--sf-color-selection-bg",De),onReset:()=>e.onReset("--sf-color-selection-bg")})}var Z=r(ee,2),j=r(s(Z),2);{let K=u(()=>e.overrides["--sf-color-selection-text"]??""),le=u(()=>"--sf-color-selection-text"in e.overrides);qa(j,{token:"--sf-color-selection-text",get value(){return t(K)},placeholder:"default",get isOverridden(){return t(le)},onSet:De=>e.onSet("--sf-color-selection-text",De),onReset:()=>e.onReset("--sf-color-selection-text")})}var ie=r(Z,2),pe=s(ie);C(()=>lt(pe,`--sf-color-selection-bg: ${e.overrides["--sf-color-selection-bg"]??"#6366f1"}; --sf-color-selection-text: ${e.overrides["--sf-color-selection-text"]??"#ffffff"}`)),f(V,F)};I(q,V=>{t(B)&&V(_e)})}var ue=r(at,4),de=s(ue),me=r(s(de),2),Me=s(me),Te=r(de,2);{var ze=V=>{var F=Tv(),ee=fe(F);re(ee,20,()=>["solid","dashed","dotted"],ie=>ie,(ie,pe)=>{const K=u(()=>e.overrides["--sf-focus-ring-style"]??"solid");var le=hs(),De=s(le);C(()=>{Ye(le,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${t(K)===pe?"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"}`),b(De,pe)}),x("click",le,()=>pe==="solid"?e.onReset("--sf-focus-ring-style"):e.onSet("--sf-focus-ring-style",pe)),f(ie,le)});var be=r(ee,2),Z=s(be),j=s(Z);C(()=>{lt(Z,`outline: 2px ${t(y)} ${e.overrides["--sf-focus-ring-color"]||"oklch(0.7 0.2 235)"}; outline-offset: 2px`),b(j,`Focus ring · ${t(y)??""}`)}),f(V,F)};I(Te,V=>{t(U)&&V(ze)})}var Be=r(ue,4),Ge=s(Be),dt=r(s(Ge),2),st=s(dt),pt=r(Ge,2);{var _t=V=>{var F=Mv(),ee=r(fe(F),2);re(ee,21,()=>l,Z=>Z.token,(Z,j)=>{const ie=u(()=>A(t(j)));{let pe=u(()=>`${t(j).token} — component size step ${t(j).label}`),K=u(()=>t(j).token in e.overrides);ut(Z,{get label(){return t(j).label},get value(){return t(ie)},min:1,max:5,step:.05,unit:"rem",get help(){return t(pe)},get overridden(){return t(K)},onChange:le=>e.onSet(t(j).token,`${le}rem`),onReset:()=>e.onReset(t(j).token)})}});var be=r(ee,2);re(be,21,()=>l,Z=>Z.token,(Z,j)=>{const ie=u(()=>A(t(j)));var pe=Dv(),K=s(pe),le=r(K,2),De=s(le);C(H=>{lt(K,H),b(De,t(j).label)},[()=>`height: ${Math.min(t(ie)*14,64)}px`]),f(Z,pe)}),f(V,F)};I(pt,V=>{t(P)&&V(_t)})}var vt=r(Be,4),X=s(vt),Pe=r(s(X),2),Re=s(Pe),nt=r(X,2);{var it=V=>{var F=Fv(),ee=fe(F),be=r(s(ee),2);{let Le=u(()=>"--sf-caret-color"in e.overrides);qa(be,{token:"--sf-caret-color",get value(){return t(m)},placeholder:"default (action color)",get isOverridden(){return t(Le)},onSet:Ne=>e.onSet("--sf-caret-color",Ne),onReset:()=>e.onReset("--sf-caret-color")})}var Z=r(ee,2);{let Le=u(()=>"--sf-link-underline-offset"in e.overrides);ut(Z,{label:"Underline offset",get value(){return t(h)},min:0,max:.5,step:.01,unit:"em",help:"--sf-link-underline-offset — gap between text baseline and underline",get overridden(){return t(Le)},onChange:Ne=>e.onSet("--sf-link-underline-offset",`${Ne}em`),onReset:()=>e.onReset("--sf-link-underline-offset")})}var j=r(Z,2),ie=s(j),pe=r(s(ie),2);{var K=Le=>{var Ne=Nv();x("click",Ne,()=>e.onReset("--sf-link-underline-thickness")),f(Le,Ne)};I(pe,Le=>{"--sf-link-underline-thickness"in e.overrides&&Le(K)})}var le=r(ie,2);re(le,20,()=>[["auto","auto"],["1px","1px"],["2px","2px"],["3px","3px"]],([Le,Ne])=>Ne,(Le,Ne)=>{var Qe=u(()=>Pa(Ne,2));let Xe=()=>t(Qe)[0],yt=()=>t(Qe)[1];var kt=hs(),Pt=s(kt);C(()=>{Ye(kt,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(v)===yt()?"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"}`),b(Pt,Xe())}),x("click",kt,()=>yt()==="auto"?e.onReset("--sf-link-underline-thickness"):e.onSet("--sf-link-underline-thickness",yt())),f(Le,kt)});var De=r(j,2),H=s(De),Ce=r(H,2),ce=r(s(Ce));C(()=>{lt(H,`caret-color:${t(m)||"#6366f1"}`),lt(ce,`text-decoration:underline;text-underline-offset:${t(h)}em;text-decoration-thickness:${t(v)}`)}),x("click",ce,Le=>Le.preventDefault()),f(V,F)};I(nt,V=>{t(S)&&V(it)})}var Ct=r(vt,4),bt=s(Ct),Dt=r(s(bt),2),St=s(Dt),Ut=r(bt,2);{var ct=V=>{var F=jv(),ee=r(fe(F),2);re(ee,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}],Z=>Z.token,(Z,j)=>{{let ie=u(()=>i(e.overrides[j.token]?.replace("em",""),j.def)),pe=u(()=>j.token in e.overrides);ut(Z,{get label(){return j.label},get value(){return t(ie)},min:.5,max:6,step:.125,unit:"em",get overridden(){return t(pe)},onChange:K=>e.onSet(j.token,`${K}em`),onReset:()=>e.onReset(j.token)})}});var be=r(ee,2);{let Z=u(()=>i(e.overrides["--sf-icon-box-pad"]?.replace("em",""),.5)),j=u(()=>"--sf-icon-box-pad"in e.overrides);ut(be,{label:"Box padding",get value(){return t(Z)},min:0,max:2,step:.125,unit:"em",help:"--sf-icon-box-pad — padding around icon when using .sf-icon-box",get overridden(){return t(j)},onChange:ie=>e.onSet("--sf-icon-box-pad",`${ie}em`),onReset:()=>e.onReset("--sf-icon-box-pad")})}f(V,F)};I(Ut,V=>{t(_)&&V(ct)})}var jt=r(Ct,4),ea=s(jt),ia=r(s(ea),2),Ze=s(ia),mt=r(ea,2);{var Ot=V=>{var F=Hv(),ee=r(fe(F),2),be=r(s(ee),2);re(be,20,()=>["cover","contain","fill","none"],De=>De,(De,H)=>{const Ce=u(()=>e.overrides["--sf-object-fit"]??"cover");var ce=hs(),Le=s(ce);C(()=>{Ye(ce,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(Ce)===H?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),b(Le,H)}),x("click",ce,()=>H==="cover"?e.onReset("--sf-object-fit"):e.onSet("--sf-object-fit",H)),f(De,ce)});var Z=r(be,2);{var j=De=>{var H=Gv();x("click",H,()=>e.onReset("--sf-object-fit")),f(De,H)};I(Z,De=>{"--sf-object-fit"in e.overrides&&De(j)})}var ie=r(ee,2),pe=r(s(ie),2),K=r(pe,2);{var le=De=>{var H=gs();x("click",H,()=>e.onReset("--sf-object-position")),f(De,H)};I(K,De=>{"--sf-object-position"in e.overrides&&De(le)})}C(()=>Xt(pe,e.overrides["--sf-object-position"]??"")),x("input",pe,De=>{const H=De.target.value.trim();H?e.onSet("--sf-object-position",H):e.onReset("--sf-object-position")}),f(V,F)};I(mt,V=>{t(z)&&V(Ot)})}var Rt=r(jt,4),ne=s(Rt),Je=r(s(ne),2),ft=s(Je),Lt=r(ne,2);{var Yt=V=>{var F=Vv(),ee=r(fe(F),2);re(ee,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)"}],be=>be.token,(be,Z)=>{var j=qv(),ie=s(j),pe=s(ie),K=r(ie,2),le=r(K,2);{var De=H=>{var Ce=gs();x("click",Ce,()=>e.onReset(Z.token)),f(H,Ce)};I(le,H=>{Z.token in e.overrides&&H(De)})}C(()=>{b(pe,Z.label),Xt(K,e.overrides[Z.token]??""),Y(K,"placeholder",Z.placeholder)}),x("input",K,H=>{const Ce=H.target.value.trim();Ce?e.onSet(Z.token,Ce):e.onReset(Z.token)}),f(be,j)}),f(V,F)};I(Lt,V=>{t(R)&&V(Yt)})}var ge=r(Rt,4),Fe=s(ge),rt=r(s(Fe),2),Ve=s(rt),Mt=r(Fe,2);{var aa=V=>{var F=Wv(),ee=r(fe(F),2),be=r(s(ee),2);re(be,20,()=>["a4","letter","legal","a3"],j=>j,(j,ie)=>{const pe=u(()=>e.overrides["--sf-print-page-size"]??"a4");var K=hs(),le=s(K);C(()=>{Ye(K,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(pe)===ie?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),b(le,ie)}),x("click",K,()=>ie==="a4"?e.onReset("--sf-print-page-size"):e.onSet("--sf-print-page-size",ie)),f(j,K)});var Z=r(ee,2);re(Z,16,()=>[{label:"Base size",token:"--sf-print-base-size",placeholder:"11pt"},{label:"Page margin",token:"--sf-print-page-margin",placeholder:"2cm"}],j=>j.token,(j,ie)=>{var pe=Kv(),K=s(pe),le=s(K),De=r(K,2),H=r(De,2);{var Ce=ce=>{var Le=gs();x("click",Le,()=>e.onReset(ie.token)),f(ce,Le)};I(H,ce=>{ie.token in e.overrides&&ce(Ce)})}C(()=>{b(le,ie.label),Xt(De,e.overrides[ie.token]??""),Y(De,"placeholder",ie.placeholder)}),x("input",De,ce=>{const Le=ce.target.value.trim();Le?e.onSet(ie.token,Le):e.onReset(ie.token)}),f(j,pe)}),f(V,F)};I(Mt,V=>{t(L)&&V(aa)})}var zt=r(ge,4),It=s(zt),Nt=r(s(It),2),la=s(Nt),xa=r(It,2);{var se=V=>{var F=Zv(),ee=r(fe(F),2);re(ee,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"}],pe=>pe.token,(pe,K)=>{const le=u(()=>e.overrides[K.token]??"0");var De=Yv(),H=s(De),Ce=s(H),ce=r(H,2),Le=s(ce),Ne=r(ce,2),Qe=s(Ne),Xe=r(Ne,2);{var yt=kt=>{var Pt=gs();x("click",Pt,()=>e.onReset(K.token)),f(kt,Pt)};I(Xe,kt=>{K.token in e.overrides&&kt(yt)})}C(()=>{Y(H,"aria-label",K.label),Y(H,"aria-pressed",t(le)==="1"),Ye(H,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${t(le)==="1"?"bg-indigo-600":"bg-white/10"}`),Ye(Ce,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${t(le)==="1"?"translate-x-4":"translate-x-0.5"}`),b(Le,K.label),b(Qe,K.note)}),x("click",H,()=>t(le)==="1"?e.onReset(K.token):e.onSet(K.token,"1")),f(pe,De)});var be=r(ee,2),Z=r(s(be),2),j=r(Z,2);{var ie=pe=>{var K=gs();x("click",K,()=>e.onReset("--sf-field-required-marker")),f(pe,K)};I(j,pe=>{"--sf-field-required-marker"in e.overrides&&pe(ie)})}C(()=>Xt(Z,e.overrides["--sf-field-required-marker"]??"")),x("input",Z,pe=>{const K=pe.target.value;K?e.onSet("--sf-field-required-marker",K):e.onReset("--sf-field-required-marker")}),f(V,F)};I(xa,V=>{t(D)&&V(se)})}C(()=>{Y($,"aria-expanded",t(k)),b(te,t(k)?"▲":"▼"),Y(ve,"aria-expanded",t(w)),b($e,t(w)?"▲":"▼"),Y(xe,"aria-expanded",t(E)),b(W,t(E)?"▲":"▼"),Y(Se,"aria-expanded",t(B)),b(ae,t(B)?"▲":"▼"),Y(de,"aria-expanded",t(U)),b(Me,t(U)?"▲":"▼"),Y(Ge,"aria-expanded",t(P)),b(st,t(P)?"▲":"▼"),Y(X,"aria-expanded",t(S)),b(Re,t(S)?"▲":"▼"),Y(bt,"aria-expanded",t(_)),b(St,t(_)?"▲":"▼"),Y(ea,"aria-expanded",t(z)),b(Ze,t(z)?"▲":"▼"),Y(ne,"aria-expanded",t(R)),b(ft,t(R)?"▲":"▼"),Y(Fe,"aria-expanded",t(L)),b(Ve,t(L)?"▲":"▼"),Y(It,"aria-expanded",t(D)),b(la,t(D)?"▲":"▼")}),x("click",$,()=>{O(k,!t(k))}),x("click",ve,()=>{O(w,!t(w))}),x("click",xe,()=>{O(E,!t(E))}),x("click",Se,()=>{O(B,!t(B))}),x("click",de,()=>{O(U,!t(U))}),x("click",Ge,()=>{O(P,!t(P))}),x("click",X,()=>{O(S,!t(S))}),x("click",bt,()=>{O(_,!t(_))}),x("click",ea,()=>{O(z,!t(z))}),x("click",ne,()=>{O(R,!t(R))}),x("click",Fe,()=>{O(L,!t(L))}),x("click",It,()=>{O(D,!t(D))}),f(a,T),$t()}ta(["click","input"]);var Qv=g('<span class="text-[9px] bg-white/6 text-slate-500 px-2 py-0.5 rounded-full"> </span>'),$v=g('<span class="text-[9px] text-slate-600 font-mono"> </span>'),eh=g('<div class="w-2.5 h-2.5 rounded-full border border-white/10 shrink-0"></div>'),th=g('<div class="flex items-center gap-1 bg-white/4 rounded px-1.5 py-0.5"><!> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),ah=g('<span class="text-[8px] text-slate-600 px-1.5 py-0.5"> </span>'),oh=g('<div class="px-4 pb-3 flex flex-wrap gap-1"><!> <!></div>'),sh=g('<div class="group rounded-xl border border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14 transition-all overflow-hidden"><div class="flex items-start gap-3 p-4"><span class="text-2xl leading-none shrink-0 mt-0.5"> </span> <div class="flex-1 min-w-0"><div class="text-[12px] font-bold text-slate-200"> </div> <div class="text-[10px] text-slate-400 mt-0.5 leading-relaxed"> </div> <div class="flex items-center gap-2 mt-2"><!> <!></div></div> <button> </button></div> <!></div>'),rh=g(`<div class="p-4 space-y-5 overflow-y-auto flex-1 h-full"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Theme presets</div> <p class="text-[11px] text-slate-400 leading-relaxed">Apply a curated set of overrides with one click. Existing overrides outside the theme's scope are preserved.</p> <div class="space-y-2"></div></div>`);function nh(a,e){Qt(e,!0);var o=rh(),n=r(s(o),4);re(n,21,()=>Ii,l=>l.id,(l,i)=>{const c=u(()=>Object.keys(t(i).overrides).length);var d=sh(),p=s(d),m=s(p),h=s(m),v=r(m,2),y=s(v),k=s(y),w=r(y,2),E=s(w),B=r(w,2),U=s(B);{var P=A=>{var T=Bt(),N=fe(T);re(N,16,()=>t(i).tags,$=>$,($,He)=>{var te=Qv(),ye=s(te);C(()=>b(ye,He)),f($,te)}),f(A,T)};I(U,A=>{t(i).tags&&A(P)})}var S=r(U,2);{var _=A=>{var T=$v(),N=s(T);C(()=>b(N,`${t(c)??""} overrides`)),f(A,T)};I(S,A=>{t(c)>0&&A(_)})}var z=r(v,2),L=s(z),R=r(p,2);{var D=A=>{var T=oh(),N=s(T);re(N,17,()=>Object.entries(t(i).overrides).slice(0,5),([te,ye])=>te,(te,ye)=>{var Ie=u(()=>Pa(t(ye),2));let he=()=>t(Ie)[0],ve=()=>t(Ie)[1];var je=th(),$e=s(je);{var et=ke=>{var W=eh();C(()=>lt(W,`background: ${ve()}`)),f(ke,W)},M=u(()=>he().includes("color")||he().includes("source"));I($e,ke=>{t(M)&&ke(et)})}var J=r($e,2),xe=s(J);C(ke=>b(xe,ke),[()=>he().replace("--sf-","")]),f(te,je)});var $=r(N,2);{var He=te=>{var ye=ah(),Ie=s(ye);C(()=>b(Ie,`+${t(c)-5} more`)),f(te,ye)};I($,te=>{t(c)>5&&te(He)})}f(A,T)};I(R,A=>{t(c)>0&&A(D)})}C(()=>{b(h,t(i).icon),b(k,t(i).name),b(E,t(i).blurb),Ye(z,1,`px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all cursor-pointer shrink-0 ${t(i).id==="default"?"border border-rose-500/30 text-rose-400 hover:bg-rose-500/10":"bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30"}`),b(L,t(i).id==="default"?"Reset all":"Apply")}),x("click",z,()=>e.onApplyTheme(t(i))),f(l,d)}),f(a,o),$t()}ta(["click"]);var lh=g('<!> <span class="text-emerald-400">Link copied!</span>',1),ih=g("<!> Copy shareable link",1),ch=g('<div class="p-4 space-y-4 overflow-y-auto flex-1 h-full"><div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Export</div> <p class="text-[11px] text-slate-400 leading-relaxed"> </p></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[11px] font-bold text-slate-300 hover:bg-white/8 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!></button> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">CSS output</div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5"><button>@layer</button> <button>:root</button></div></div> <div class="relative"><pre class="bg-[#06060a] border border-white/8 rounded-xl p-4 text-[10px] font-mono text-slate-300 overflow-x-auto max-h-80 whitespace-pre-wrap"> </pre> <div class="absolute top-2 right-2 flex gap-1"><button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Copy to clipboard"><!></button> <button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Download .css"><!></button></div></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[10px] font-bold text-slate-400 hover:bg-white/8 hover:text-slate-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!> Download W3C Design Tokens (.json)</button> <div class="rounded-lg bg-indigo-500/8 border border-indigo-500/15 p-3 space-y-2"><div class="text-[10px] font-bold text-indigo-300">Usage</div> <div class="text-[10px] text-slate-400 leading-relaxed">Paste this CSS into your project after the SLASHED import.</div> <pre class="text-[9px] font-mono text-slate-500 bg-black/30 rounded p-2 overflow-x-auto"></pre></div></div>');function dh(a,e){Qt(e,!0);let o=G("layer"),n=G(!1),l=G(!1),i=u(()=>To(e.overrides,{mode:t(o),banner:!0})),c=u(()=>Object.keys(e.overrides).length);async function d(){try{await navigator.clipboard.writeText(t(i)),O(n,!0),setTimeout(()=>{O(n,!1)},2e3)}catch{}}async function p(){try{const M=Tf(e.overrides);await navigator.clipboard.writeText(M),O(l,!0),setTimeout(()=>{O(l,!1)},2e3)}catch{}}function m(){const M=new Blob([t(i)],{type:"text/css"}),J=URL.createObjectURL(M),xe=document.createElement("a");xe.href=J,xe.download="slashed-overrides.css",xe.click(),URL.revokeObjectURL(J)}function h(M){return M.includes("color")||M.includes("scrim-color")||M.includes("shadow-color")?"color":M.includes("duration")||M.includes("delay")||M.includes("transition-duration")?"duration":M.includes("radius")||M.includes("space")||M.includes("size")||M.includes("width")||M.includes("height")||M.includes("gap")||M.includes("blur")||M.includes("text-")||M.includes("leading")||M.includes("tracking")?"dimension":M.includes("font-family")||M.includes("font-mono")||M.includes("font-body")||M.includes("font-heading")||M.includes("font-code")?"fontFamily":M.includes("font-weight")||M.includes("weight")?"fontWeight":"string"}function v(){const M={};for(const[we,qe]of Object.entries(e.overrides)){const at=we.replace(/^--sf-/,"").replace(/-/g,".");M[at]={$value:qe,$type:h(we)}}const J=JSON.stringify({$schema:"https://design-tokens.github.io/community-group/format/",...M},null,2),xe=new Blob([J],{type:"application/json"}),ke=URL.createObjectURL(xe),W=document.createElement("a");W.href=ke,W.download="slashed-tokens.w3c.json",W.click(),URL.revokeObjectURL(ke)}var y=ch(),k=s(y),w=r(s(k),2),E=s(w),B=r(k,2),U=s(B);{var P=M=>{var J=lh(),xe=fe(J);Mo(xe,{class:"w-3 h-3 text-emerald-400"}),f(M,J)},S=M=>{var J=ih(),xe=fe(J);Td(xe,{class:"w-3 h-3"}),f(M,J)};I(U,M=>{t(l)?M(P):M(S,-1)})}var _=r(B,2),z=r(s(_),2),L=s(z),R=r(L,2),D=r(_,2),A=s(D),T=s(A),N=r(A,2),$=s(N),He=s($);{var te=M=>{Mo(M,{class:"w-3 h-3 text-emerald-400"})},ye=M=>{Fr(M,{class:"w-3 h-3"})};I(He,M=>{t(n)?M(te):M(ye,-1)})}var Ie=r($,2),he=s(Ie);jr(he,{class:"w-3 h-3"});var ve=r(D,2),je=s(ve);jr(je,{class:"w-3 h-3"});var $e=r(ve,2),et=r(s($e),4);et.textContent=`@import 'slashed/slashed.full.css';
-@import './slashed-overrides.css';`,C(()=>{b(E,t(c)>0?`${t(c)} override${t(c)!==1?"s":""} ready to export.`:"No overrides yet. Customise tokens, then export."),B.disabled=t(c)===0,Ye(L,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="layer"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),Ye(R,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="root"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),b(T,t(i)||"/* No overrides */"),ve.disabled=t(c)===0}),x("click",B,p),x("click",L,()=>{O(o,"layer")}),x("click",R,()=>{O(o,"root")}),x("click",$,d),x("click",Ie,m),x("click",ve,v),f(a,y),$t()}ta(["click"]);const fh=JSON.parse(`[{"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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 <img class=\\"sf-bg\\"> or as a wrapper with a nested > img / > video / > picture.","optional":false,"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":false,"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":false,"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":false,"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":false,"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 <a>.","optional":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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 <input>.","optional":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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 <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.","optional":false,"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":false,"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 <body>.","optional":false,"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":false,"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":false,"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":true,"layer":"slashed.themes"}]`),uh={classes:fh},ph={generatedBy:"configurator/scripts/sync-api.mjs",source:"docs/api-index.json",tokensHash:"99d86a47c17a",bundles:["full","optimal","optimal-components","optimal-utilities"],counts:{tokens:691,byTier:{PUBLIC:635,"PUBLIC-ADVANCED":55,INTERNAL:1},byCategory:{"Layout tokens":54,"Core tokens":608,"Macro tokens":23,"Component tokens":6}}},mh=JSON.parse(`[{"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <em> inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.","value":"italic","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <strong> 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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.","value":"0.875em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%.","value":"oklch(0.70 0.198 235)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Secondary interactive color for supporting actions and secondary buttons.","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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":"Base color at pressed/active brightness.","value":"var(--sf-color-base-xdark)","aliasOf":"--sf-color-base-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":"Base color at hover brightness.","value":"var(--sf-color-base-darker)","aliasOf":"--sf-color-base-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Hover fills, badge backgrounds.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-100), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-200), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Borders on light backgrounds.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-300), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Disabled fills.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-400), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-50), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade — the 'pure' hue.","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Text on light surfaces.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-darker","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":"Deep base shade.","value":"var(--sf-color-base-600)","aliasOf":"--sf-color-base-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint for ghost-button hover backgrounds.","value":"var(--sf-color-base-a5)","aliasOf":"--sf-color-base-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-lighter","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 shade.","value":"var(--sf-color-base-400)","aliasOf":"--sf-color-base-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 fill.","value":"var(--sf-color-base-a30)","aliasOf":"--sf-color-base-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-base.","value":"oklch(0.22 0.003 250)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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 lightness source for the base color.","note":"OKLCH lightness source for the base color.","value":"oklch(0.96 0.006 250)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":"Lightest base tint.","value":"var(--sf-color-base-a10)","aliasOf":"--sf-color-base-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-superdark","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 shade.","value":"var(--sf-color-base-950)","aliasOf":"--sf-color-base-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-superlight","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-white base shade.","value":"var(--sf-color-base-50)","aliasOf":"--sf-color-base-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-xdark","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":"Extra-dark base shade.","value":"var(--sf-color-base-800)","aliasOf":"--sf-color-base-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-xlight","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":"Extra-light base shade.","value":"var(--sf-color-base-200)","aliasOf":"--sf-color-base-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <code> elements. Usually a subtle tint of the inset surface.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-danger.","value":"oklch(0.71 0.198 12)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-info.","value":"oklch(0.71 0.162 235)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <mark> highlights. Adapts automatically in dark mode.","note":"Background color for highlighted <mark> elements.","value":"oklch(from var(--sf-color-warning) l c h / 0.25)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <mark> elements.","value":"inherit","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-neutral.","value":"oklch(0.69 0.0225 260)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Raw primary palette token aliased from the action role by default. Override to decouple primary from action.","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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-primary.","value":"oklch(0.715 0.243 264)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-secondary.","value":"oklch(0.84 0.036 264)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-success.","value":"oklch(0.70 0.144 145)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":"Elevated surface color (e.g. card background one step above page background).","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-tertiary.","value":"oklch(0.74 0.198 295)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-warning.","value":"oklch(0.65 0.153 80)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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 <h1>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>. Typically slightly negative at large sizes.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>. Tighter than body to avoid excessive whitespace at large sizes.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>. 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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>.","value":"var(--sf-text-4xl)","aliasOf":"--sf-text-4xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-text-3xl)","aliasOf":"--sf-text-3xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-text-2xl)","aliasOf":"--sf-text-2xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-text-xl)","aliasOf":"--sf-text-xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-text-l)","aliasOf":"--sf-text-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-tracking-wide)","aliasOf":"--sf-tracking-wide","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-text-m)","aliasOf":"--sf-text-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <figure> elements inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <hr> rules inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]}]`),Bs={_sync:ph,tokens:mh};var Zn=g('<div class="text-[11px] text-slate-600 py-8 text-center"> </div>'),Jn=g('<div class="text-[8px] text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold"> </div>'),vh=g("<span> </span>"),hh=g('<span class="text-[8px] text-slate-600 border border-white/10 px-1 rounded">optional</span>'),Xn=g('<div class="text-[9px] text-slate-500 mt-0.5 leading-relaxed"> </div>'),gh=g('<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[11px] font-semibold text-slate-200"> </span> <!> <!></div> <!></div> <button title="Copy selector" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>'),Qn=g('<!> <div class="space-y-0.5"></div>',1),$n=g('<div class="mt-4 mb-1"><div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-white/6"> </div></div> <!>',1),bh=g('<span class="text-[8px] font-bold text-indigo-400 uppercase">knob</span>'),yh=g('<span class="text-[8px] text-amber-500/80 border border-amber-500/20 px-1 rounded">advanced</span>'),xh=g('<div class="font-mono text-[9px] text-slate-600 mt-0.5"> </div>'),kh=g('<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[10px] font-semibold text-slate-200"> </span> <!> <!></div> <!> <!></div> <button title="Copy var()" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>'),wh=g('<div class="flex flex-col h-full min-h-0"><div class="px-4 pt-4 pb-2 space-y-2 shrink-0"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Classes &amp; Variables</div> <input type="search" placeholder="Search classes, tokens, descriptions…" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <div class="flex bg-white/4 border border-white/8 rounded-lg p-0.5 gap-0.5"><button> </button> <button> </button></div></div> <div class="flex-1 min-h-0 overflow-y-auto px-4 pb-4"><!></div></div>');function _h(a,e){Qt(e,!0);const o=uh.classes,n=Bs.tokens.filter(N=>N.tier==="PUBLIC"||N.tier==="PUBLIC-ADVANCED");let l=G(""),i=G("classes"),c=G(""),d=u(()=>()=>{const N=t(l).trim().toLowerCase();return N?o.filter($=>$.name.toLowerCase().includes(N)||$.selector?.toLowerCase().includes(N)||$.description?.toLowerCase().includes(N)||$.group?.toLowerCase().includes(N)):o}),p=u(()=>()=>{const N=t(l).trim().toLowerCase();return N?n.filter($=>$.name.toLowerCase().includes(N)||$.description?.toLowerCase().includes(N)||$.group?.toLowerCase().includes(N)||$.value?.toLowerCase().includes(N)):n});function m(N){const $=new Map;for(const He of N){const te=He.category||"Other",ye=He.group||"";$.has(te)||$.set(te,new Map);const Ie=$.get(te);Ie.has(ye)||Ie.set(ye,[]),Ie.get(ye).push(He)}return $}let h=u(()=>m(t(d)())),v=u(()=>m(t(p)())),y=null;async function k(N){try{await navigator.clipboard.writeText(N),O(c,N,!0),y&&clearTimeout(y),y=setTimeout(()=>{t(c)===N&&O(c,""),y=null},1500)}catch{}}const w={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 E=wh(),B=s(E),U=r(s(B),2),P=r(U,2),S=s(P),_=s(S),z=r(S,2),L=s(z),R=r(B,2),D=s(R);{var A=N=>{var $=Bt(),He=fe($);{var te=he=>{var ve=Zn(),je=s(ve);C(()=>b(je,`No classes match "${t(l)??""}"`)),f(he,ve)},ye=u(()=>t(d)().length===0),Ie=he=>{var ve=Bt(),je=fe(ve);re(je,17,()=>[...t(h).entries()],([$e,et])=>$e,($e,et)=>{var M=u(()=>Pa(t(et),2));let J=()=>t(M)[0],xe=()=>t(M)[1];var ke=$n(),W=fe(ke),we=s(W),qe=s(we),at=r(W,2);re(at,17,()=>[...xe().entries()],([Se,Ue])=>Se,(Se,Ue)=>{var ae=u(()=>Pa(t(Ue),2));let q=()=>t(ae)[0],_e=()=>t(ae)[1];var ue=Qn(),de=fe(ue);{var me=Te=>{var ze=Jn(),Be=s(ze);C(()=>b(Be,q())),f(Te,ze)};I(de,Te=>{q()&&Te(me)})}var Me=r(de,2);re(Me,21,_e,Te=>Te.name,(Te,ze)=>{var Be=gh(),Ge=s(Be),dt=s(Ge),st=s(dt),pt=s(st),_t=r(st,2);{var vt=St=>{var Ut=vh(),ct=s(Ut);C(()=>{Ye(Ut,1,`text-[8px] font-bold uppercase ${w[t(ze).kind]??"text-slate-500"}`),b(ct,t(ze).kind)}),f(St,Ut)};I(_t,St=>{t(ze).kind&&St(vt)})}var X=r(_t,2);{var Pe=St=>{var Ut=hh();f(St,Ut)};I(X,St=>{t(ze).optional&&St(Pe)})}var Re=r(dt,2);{var nt=St=>{var Ut=Xn(),ct=s(Ut);C(()=>b(ct,t(ze).description)),f(St,Ut)};I(Re,St=>{t(ze).description&&St(nt)})}var it=r(Ge,2),Ct=s(it);{var bt=St=>{Mo(St,{class:"w-3 h-3 text-emerald-400"})},Dt=St=>{Fr(St,{class:"w-3 h-3 text-slate-500"})};I(Ct,St=>{t(c)===t(ze).selector?St(bt):St(Dt,-1)})}C(()=>b(pt,t(ze).selector)),x("click",it,()=>k(t(ze).selector)),f(Te,Be)}),f(Se,ue)}),C(()=>b(qe,J())),f($e,ke)}),f(he,ve)};I(He,he=>{t(ye)?he(te):he(Ie,-1)})}f(N,$)},T=N=>{var $=Bt(),He=fe($);{var te=he=>{var ve=Zn(),je=s(ve);C(()=>b(je,`No tokens match "${t(l)??""}"`)),f(he,ve)},ye=u(()=>t(p)().length===0),Ie=he=>{var ve=Bt(),je=fe(ve);re(je,17,()=>[...t(v).entries()],([$e,et])=>$e,($e,et)=>{var M=u(()=>Pa(t(et),2));let J=()=>t(M)[0],xe=()=>t(M)[1];var ke=$n(),W=fe(ke),we=s(W),qe=s(we),at=r(W,2);re(at,17,()=>[...xe().entries()],([Se,Ue])=>Se,(Se,Ue)=>{var ae=u(()=>Pa(t(Ue),2));let q=()=>t(ae)[0],_e=()=>t(ae)[1];var ue=Qn(),de=fe(ue);{var me=Te=>{var ze=Jn(),Be=s(ze);C(()=>b(Be,q())),f(Te,ze)};I(de,Te=>{q()&&Te(me)})}var Me=r(de,2);re(Me,21,_e,Te=>Te.name,(Te,ze)=>{var Be=kh(),Ge=s(Be),dt=s(Ge),st=s(dt),pt=s(st),_t=r(st,2);{var vt=ct=>{var jt=bh();f(ct,jt)};I(_t,ct=>{t(ze).role==="knob"&&ct(vt)})}var X=r(_t,2);{var Pe=ct=>{var jt=yh();f(ct,jt)};I(X,ct=>{t(ze).tier==="PUBLIC-ADVANCED"&&ct(Pe)})}var Re=r(dt,2);{var nt=ct=>{var jt=xh(),ea=s(jt);C(()=>b(ea,t(ze).value)),f(ct,jt)};I(Re,ct=>{t(ze).value&&ct(nt)})}var it=r(Re,2);{var Ct=ct=>{var jt=Xn(),ea=s(jt);C(()=>b(ea,t(ze).description)),f(ct,jt)};I(it,ct=>{t(ze).description&&ct(Ct)})}var bt=r(Ge,2),Dt=s(bt);{var St=ct=>{Mo(ct,{class:"w-3 h-3 text-emerald-400"})},Ut=ct=>{Fr(ct,{class:"w-3 h-3 text-slate-500"})};I(Dt,ct=>{t(c)===`var(${t(ze).name})`?ct(St):ct(Ut,-1)})}C(()=>b(pt,t(ze).name)),x("click",bt,()=>k(`var(${t(ze).name})`)),f(Te,Be)}),f(Se,ue)}),C(()=>b(qe,J())),f($e,ke)}),f(he,ve)};I(He,he=>{t(ye)?he(te):he(Ie,-1)})}f(N,$)};I(D,N=>{t(i)==="classes"?N(A):N(T,-1)})}C((N,$)=>{Ye(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="classes"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),b(_,`CSS classes (${N??""})`),Ye(z,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="tokens"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),b(L,`CSS vars (${$??""})`)},[()=>t(d)().length,()=>t(p)().length]),ai(U,()=>t(l),N=>O(l,N)),x("click",S,()=>{O(i,"classes")}),x("click",z,()=>{O(i,"tokens")}),f(a,E),$t()}ta(["click"]);var Ch=g('<div class="w-4 h-4 rounded-sm border border-white/10 shrink-0"></div>'),Oh=g('<div class="w-4 h-4 shrink-0"></div>'),Sh=g('<div class="text-[9px] text-slate-600 truncate"> </div>'),Lh=g('<input 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"/>'),Ph=g('<span class="text-indigo-300"> </span>'),Ih=g('<button class="text-[10px] font-mono text-slate-500 hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"><!></button>'),Bh=g('<button class="text-[9px] text-slate-600 hover:text-rose-400 transition-colors cursor-pointer opacity-0 group-hover:opacity-100 shrink-0">✕</button>'),Uh=g('<div><div></div> <!> <div class="flex-1 min-w-0"><div class="text-[10px] font-mono text-slate-400 truncate"> </div> <!></div> <!> <!></div>');function Ui(a,e){Qt(e,!0);let o=G(!1);function n(A){const T=A.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";const N=A.syntax?.toLowerCase()??"";return N.includes("number")||N.includes("length")||N.includes("integer")?"number":"text"}let l=u(()=>e.overrideValue??e.token.value),i=u(()=>e.overrideValue!==void 0),c=u(()=>n(e.token)),d=u(()=>e.token.name.replace("--sf-",""));function p(A){return Fa.value,ho(A)||ho(`var(${e.token.name})`)||A}let m=u(()=>t(c)==="color"?p(t(l)):"");var h=Uh(),v=s(h),y=r(v,2);{var k=A=>{var T=Ch();C(()=>lt(T,`background: ${t(m)}`)),f(A,T)},w=A=>{var T=Oh();f(A,T)};I(y,A=>{t(c)==="color"?A(k):A(w,-1)})}var E=r(y,2),B=s(E),U=s(B),P=r(B,2);{var S=A=>{var T=Sh(),N=s(T);C(()=>b(N,e.token.description)),f(A,T)};I(P,A=>{e.token.description&&A(S)})}var _=r(E,2);{var z=A=>{var T=Lh();C(()=>Xt(T,t(l))),lo("blur",T,N=>{const $=N.target.value.trim();$&&$!==e.token.value?e.onSet($):(!$||$===e.token.value)&&e.onReset(),O(o,!1)}),x("keydown",T,N=>{N.key==="Enter"&&N.currentTarget.blur(),N.key==="Escape"&&O(o,!1)}),f(A,T)},L=A=>{var T=Ih(),N=s(T);{var $=te=>{var ye=Ph(),Ie=s(ye);C(()=>b(Ie,t(l))),f(te,ye)},He=te=>{var ye=lr();C(()=>b(ye,t(l))),f(te,ye)};I(N,te=>{t(i)?te($):te(He,-1)})}C(()=>Y(T,"title",t(l))),x("click",T,()=>{O(o,!0)}),f(A,T)};I(_,A=>{t(o)?A(z):A(L,-1)})}var R=r(_,2);{var D=A=>{var T=Bh();x("click",T,function(...N){e.onReset?.apply(this,N)}),f(A,T)};I(R,A=>{t(i)&&A(D)})}C(()=>{Ye(h,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${t(i)?"bg-indigo-500/8 border border-indigo-500/15":"hover:bg-white/4"}`),Ye(v,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(i)?"bg-indigo-500":"bg-transparent"}`),Y(B,"title",e.token.name),b(U,t(d))}),f(a,h),$t()}ta(["keydown","click"]);var zh=g('<span class="text-[9px] font-bold text-indigo-400 font-mono"> </span>'),Ah=g('<p class="text-[11px] text-slate-600 text-center py-8">No tokens found</p>'),Eh=g('<p class="text-[10px] text-slate-600 text-center py-2"> </p>'),Rh=g('<div class="space-y-0.5"><!> <!></div>'),Th=g('<div class="p-4 space-y-4"><div class="flex items-center justify-between"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest capitalize"> </div> <!></div> <input type="text" 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"/> <!></div>');function Dh(a,e){Qt(e,!0);let o=G(""),n=u(()=>()=>{const U=e.patterns??[e.domain];return e.tokens.filter(P=>U.some(S=>P.name.includes(S))&&P.tier!=="INTERNAL")}),l=u(()=>()=>{if(!t(o))return t(n)();const U=t(o).toLowerCase();return t(n)().filter(P=>P.name.toLowerCase().includes(U)||P.description?.toLowerCase().includes(U))}),i=u(()=>t(l)().filter(U=>U.name in e.overrides).length);var c=Th(),d=s(c),p=s(d),m=s(p),h=r(p,2);{var v=U=>{var P=zh(),S=s(P);C(()=>b(S,`${t(i)??""} modified`)),f(U,P)};I(h,U=>{t(i)>0&&U(v)})}var y=r(d,2),k=r(y,2);{var w=U=>{var P=Ah();f(U,P)},E=u(()=>t(l)().length===0),B=U=>{var P=Rh(),S=s(P);re(S,17,()=>t(l)().slice(0,60),R=>R.name,(R,D)=>{Ui(R,{get token(){return t(D)},get overrideValue(){return e.overrides[t(D).name]},onSet:A=>e.onSet(t(D).name,A),onReset:()=>e.onReset(t(D).name)})});var _=r(S,2);{var z=R=>{var D=Eh(),A=s(D);C(T=>b(A,`${T??""} more — refine your search`),[()=>t(l)().length-60]),f(R,D)},L=u(()=>t(l)().length>60);I(_,R=>{t(L)&&R(z)})}f(U,P)};I(k,U=>{t(E)?U(w):U(B,-1)})}C(()=>{b(m,`${e.domain??""} tokens`),Y(y,"placeholder",`Search ${e.domain} tokens…`),Xt(y,t(o))}),x("input",y,U=>{O(o,U.target.value,!0)}),f(a,c),$t()}ta(["input"]);var el=g('<div class="w-1 h-1 bg-white rounded-sm"></div>'),Mh=g('<div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-rose-800"></div> <span class="text-[8px] text-slate-600"> </span></div>'),Nh=g('<div class="text-center py-8 text-[11px] text-slate-600"> </div>'),Fh=g('<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-amber-600/40 rounded-full"></div>'),jh=g('<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-rose-800/40 rounded-full"></div>'),Gh=g('<div class="relative"><!> <!> <!></div>'),Hh=g('<div class="space-y-0.5 px-1"></div>'),qh=g('<div class="flex flex-col h-full min-h-0"><div class="px-3 pt-3 pb-2 space-y-2 shrink-0"><input type="text" placeholder="Search tokens…" 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"/> <div class="flex items-center gap-3"><button><div><!></div> </button> <button><div><!></div> </button> <span class="ml-auto text-[9px] text-slate-700 font-mono"> </span></div> <div class="flex gap-3"><div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-slate-500"></div> <span class="text-[8px] text-slate-600"> </span></div> <div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-amber-600"></div> <span class="text-[8px] text-slate-600"> </span></div> <!></div></div> <div class="w-full h-px bg-white/6 shrink-0"></div> <div class="flex-1 min-h-0 overflow-y-auto py-1"><!></div></div>');function Vh(a,e){Qt(e,!0);const o={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2};let n=G(""),l=G(!1),i=G(!1),c=u(()=>e.tokens.filter(W=>e.patterns.some(we=>W.name.includes(we))).sort((W,we)=>{const qe=o[W.tier??"INTERNAL"]??2,at=o[we.tier??"INTERNAL"]??2;return qe!==at?qe-at:W.name.localeCompare(we.name)})),d=u(()=>()=>{let W=t(c);if(t(l)||(W=W.filter(we=>we.tier!=="INTERNAL")),t(i)&&(W=W.filter(we=>we.name in e.overrides)),t(n)){const we=t(n).toLowerCase();W=W.filter(qe=>qe.name.toLowerCase().includes(we)||qe.description?.toLowerCase().includes(we))}return W}),p=u(()=>t(c).filter(W=>W.name in e.overrides).length),m=u(()=>t(c).filter(W=>W.tier==="PUBLIC").length),h=u(()=>t(c).filter(W=>W.tier==="PUBLIC-ADVANCED").length),v=u(()=>t(c).filter(W=>W.tier==="INTERNAL").length);var y=qh(),k=s(y),w=s(k),E=r(w,2),B=s(E),U=s(B),P=s(U);{var S=W=>{var we=el();f(W,we)};I(P,W=>{t(i)&&W(S)})}var _=r(U),z=r(B,2),L=s(z),R=s(L);{var D=W=>{var we=el();f(W,we)};I(R,W=>{t(l)&&W(D)})}var A=r(L),T=r(z,2),N=s(T),$=r(E,2),He=s($),te=r(s(He),2),ye=s(te),Ie=r(He,2),he=r(s(Ie),2),ve=s(he),je=r(Ie,2);{var $e=W=>{var we=Mh(),qe=r(s(we),2),at=s(qe);C(()=>b(at,`Internal (${t(v)??""})`)),f(W,we)};I(je,W=>{t(l)&&W($e)})}var et=r(k,4),M=s(et);{var J=W=>{var we=Nh(),qe=s(we);C(()=>b(qe,t(i)?"No modified tokens in this domain":"No tokens found")),f(W,we)},xe=u(()=>t(d)().length===0),ke=W=>{var we=Hh();re(we,21,()=>t(d)(),qe=>qe.name,(qe,at)=>{var Se=Gh(),Ue=s(Se);{var ae=de=>{var me=Fh();f(de,me)};I(Ue,de=>{t(at).tier==="PUBLIC-ADVANCED"&&de(ae)})}var q=r(Ue,2);{var _e=de=>{var me=jh();f(de,me)};I(q,de=>{t(at).tier==="INTERNAL"&&de(_e)})}var ue=r(q,2);Ui(ue,{get token(){return t(at)},get overrideValue(){return e.overrides[t(at).name]},onSet:de=>e.onSet(t(at).name,de),onReset:()=>e.onReset(t(at).name)}),f(qe,Se)}),f(W,we)};I(M,W=>{t(xe)?W(J):W(ke,-1)})}C(W=>{Xt(w,t(n)),Ye(B,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(i)?"text-indigo-400":"text-slate-600 hover:text-slate-400"}`),Ye(U,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(i)?"bg-indigo-600 border-indigo-500":"border-white/20"}`),b(_,` Modified only ${t(p)>0?`(${t(p)})`:""}`),Y(z,"aria-expanded",t(l)),Ye(z,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(l)?"text-amber-400":"text-slate-600 hover:text-slate-400"}`),Ye(L,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(l)?"bg-amber-600 border-amber-500":"border-white/20"}`),b(A,` Internal (${t(v)??""})`),b(N,`${W??""}/${t(c).length??""}`),b(ye,`Public (${t(m)??""})`),b(ve,`Advanced (${t(h)??""})`)},[()=>t(d)().length]),x("input",w,W=>{O(n,W.target.value,!0)}),x("click",B,()=>{O(i,!t(i))}),x("click",z,()=>{O(l,!t(l))}),f(a,y),$t()}ta(["input","click"]);var tl=g('<option style="background:#16161e;"> </option>'),Kh=g('<div class="flex items-center gap-2 p-2.5 bg-white/4"><span class="text-[15px] font-mono font-bold text-slate-100"> </span> <span> </span> <div class="flex-1"></div> <div class="grid grid-cols-2 gap-x-2 gap-y-0.5 text-[9px]"><span> </span> <span> </span> <span> </span> <span> </span></div></div>'),Wh=g('<div class="p-2.5 bg-white/4 text-[10px] text-slate-500">Waiting for live preview…</div>'),Yh=g("<button> </button>"),Zh=g('<p class="text-[9px] text-slate-600">Pick an editable brand/status <span class="font-mono">(base)</span> color as the foreground to enable auto-fix.</p>'),Jh=g('<p class="text-[9px] text-emerald-300"> </p>'),Xh=g('<div class="flex items-center gap-2"><span class="w-7 h-7 rounded border border-white/10 shrink-0"></span> <div class="flex-1 min-w-0"><div class="text-[9px] font-mono text-slate-400 truncate"> </div> <div class="text-[9px] text-emerald-300"> </div></div> <button class="px-2.5 py-1 rounded-lg bg-indigo-600/25 border border-indigo-500/40 text-indigo-200 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/35 shrink-0">Apply</button></div>'),Qh=g('<p class="text-[9px] text-slate-600"> </p>'),$h=g('<div class="grid grid-cols-[1fr_auto_1fr] gap-2 items-end"><div><div class="text-[9px] text-slate-500 mb-1">Foreground</div> <select class="w-full 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"></select></div> <button title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-slate-200 hover:bg-white/5 cursor-pointer text-[12px]">⇄</button> <div><div class="text-[9px] text-slate-500 mb-1">Background</div> <select class="w-full 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"></select></div></div> <div class="rounded-xl border border-white/8 overflow-hidden"><div class="h-24 flex items-center justify-center"><span class="text-[26px] font-bold">Aa Bb Cc</span></div> <!></div> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between"><span class="text-[10px] font-bold text-slate-300">Auto-fix to pass <span class="text-slate-600 font-normal"> </span></span> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div></div> <!></div>',1),eg=g('<th class="p-1 font-mono font-semibold text-slate-500 text-center whitespace-nowrap"> </th>'),tg=g('<td class="p-0.5"><button> </button></td>'),ag=g('<td class="p-0.5 text-slate-700 text-center">·</td>'),og=g('<tr><td class="p-1 font-mono font-semibold text-slate-500 whitespace-nowrap pr-2"> </td><!></tr>'),sg=g('<p class="text-[10px] text-slate-600">Foreground (rows) × background (cols). Click a cell to load it above.</p> <div class="overflow-x-auto"><table class="border-collapse text-[9px]"><thead><tr><th class="p-1"></th><!></tr></thead><tbody></tbody></table></div>',1),rg=g('<div class="p-4 space-y-6"><section class="space-y-1"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast checker</div> <p class="text-[10px] text-slate-600 leading-relaxed">Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.</p></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Pair checker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-2"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast matrix</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function ng(a,e){Qt(e,!0);const o=[{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"}],n=[{label:"Surface",expr:"var(--sf-color-surface)"},{label:"Bg",expr:"var(--sf-color-bg)"},{label:"Border",expr:"var(--sf-color-border)"}],l=[{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)"}],i=l.flatMap(J=>[{label:`${J.key} (base)`,expr:`var(--sf-color-${J.key})`,editKey:J.key},{label:`${J.key}-100`,expr:`var(--sf-color-${J.key}-100)`},{label:`${J.key}-600`,expr:`var(--sf-color-${J.key}-600)`},{label:`${J.key}-900`,expr:`var(--sf-color-${J.key}-900)`}]),c=[...o,...n,...i],d=Object.fromEntries(l.map(J=>[J.key,J])),p=[{label:"text",expr:"var(--sf-color-text)"},{label:"white",expr:"#ffffff"},{label:"black",expr:"#000000"},{label:"primary",expr:"var(--sf-color-primary)",editKey:"primary"}],m=[{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)"}];let h=G("White"),v=G("primary (base)"),y=G("AA"),k=u(()=>c.find(J=>J.label===t(h))??c[0]),w=u(()=>c.find(J=>J.label===t(v))??c[0]);function E(J,xe){Fa.value;const ke=Cs(J),W=Cs(xe);return!ke||!W?null:qs(Bo(...ke),Bo(...W))}function B(J){return J>=7?{tag:"AAA",cls:"bg-emerald-500/25 text-emerald-200"}:J>=4.5?{tag:"AA",cls:"bg-emerald-500/15 text-emerald-300"}:J>=3?{tag:"AA-L",cls:"bg-amber-500/20 text-amber-300"}:{tag:"Fail",cls:"bg-rose-500/20 text-rose-300"}}let U=u(()=>E(t(k).expr,t(w).expr));function P(){const J=t(h);O(h,t(v),!0),O(v,J,!0)}function S(J,xe){const ke=c.find(we=>we.expr===J),W=c.find(we=>we.expr===xe);ke&&O(h,ke.label,!0),W&&O(v,W.label,!0)}function _(J){return Fa.value,ho(J)||J}let z=G(!1),L=G(!1),R=G(null);function D(){O(R,null);const J=t(k).editKey?d[t(k).editKey]:null;if(!J)return;const xe=Nn()==="dark",ke=xe?J.srcDark:J.srcLight,W=xe?J.defDark:J.defLight,we=e.overrides[ke]??W,{c:qe,h:at,l:Se,valid:Ue}=Vs(we);if(!Ue)return;const ae=Cs(t(w).expr);if(!ae)return;const q=Bo(...ae),_e=t(y)==="AAA"?7:4.5;let ue=null;for(let ze=0;ze<=1.0001;ze+=.005){const[Be,Ge,dt]=Fn(ze,qe,at);qs(Bo(Be,Ge,dt),q)>=_e&&(ue===null||Math.abs(ze-Se)<Math.abs(ue-Se))&&(ue=ze)}if(ue===null)return;const[de,me,Me]=Fn(ue,qe,at),Te=qs(Bo(de,me,Me),q);O(R,{token:ke,value:Ks(ue,qe,at),ratio:Te},!0)}function A(){t(R)&&(e.onSet(t(R).token,t(R).value),O(R,null))}ha(()=>{if(!t(z)){O(R,null);return}Fa.value,t(h),t(v),t(y),t(k).editKey&&t(U)!==null&&t(U)<(t(y)==="AAA"?7:4.5)?D():O(R,null)});var T=rg(),N=r(s(T),2),$=s(N),He=r(s($),2),te=s(He),ye=r($,2);{var Ie=J=>{var xe=$h(),ke=fe(xe),W=s(ke),we=r(s(W),2);re(we,21,()=>c,X=>X.label,(X,Pe)=>{var Re=tl(),nt=s(Re),it={};C(()=>{b(nt,t(Pe).label),it!==(it=t(Pe).label)&&(Re.value=(Re.__value=t(Pe).label)??"")}),f(X,Re)});var qe=r(W,2),at=r(qe,2),Se=r(s(at),2);re(Se,21,()=>c,X=>X.label,(X,Pe)=>{var Re=tl(),nt=s(Re),it={};C(()=>{b(nt,t(Pe).label),it!==(it=t(Pe).label)&&(Re.value=(Re.__value=t(Pe).label)??"")}),f(X,Re)});var Ue=r(ke,2),ae=s(Ue),q=s(ae),_e=r(ae,2);{var ue=X=>{const Pe=u(()=>B(t(U)));var Re=Kh(),nt=s(Re),it=s(nt),Ct=r(nt,2),bt=s(Ct),Dt=r(Ct,4),St=s(Dt),Ut=s(St),ct=r(St,2),jt=s(ct),ea=r(ct,2),ia=s(ea),Ze=r(ea,2),mt=s(Ze);C(Ot=>{b(it,`${Ot??""}:1`),Ye(Ct,1,`text-[10px] font-bold px-2 py-0.5 rounded ${t(Pe).cls}`),b(bt,t(Pe).tag),Ye(St,1,ro(t(U)>=4.5?"text-emerald-300":"text-rose-300")),b(Ut,`${t(U)>=4.5?"✓":"✗"} AA normal`),Ye(ct,1,ro(t(U)>=3?"text-emerald-300":"text-rose-300")),b(jt,`${t(U)>=3?"✓":"✗"} AA large`),Ye(ea,1,ro(t(U)>=7?"text-emerald-300":"text-rose-300")),b(ia,`${t(U)>=7?"✓":"✗"} AAA normal`),Ye(Ze,1,ro(t(U)>=4.5?"text-emerald-300":"text-rose-300")),b(mt,`${t(U)>=4.5?"✓":"✗"} AAA large`)},[()=>t(U).toFixed(2)]),f(X,Re)},de=X=>{var Pe=Wh();f(X,Pe)};I(_e,X=>{t(U)!==null?X(ue):X(de,-1)})}var me=r(Ue,2),Me=s(me),Te=s(Me),ze=r(s(Te)),Be=s(ze),Ge=r(Te,2);re(Ge,20,()=>["AA","AAA"],X=>X,(X,Pe)=>{var Re=Yh(),nt=s(Re);C(()=>{Ye(Re,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${t(y)===Pe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(nt,Pe)}),x("click",Re,()=>{O(y,Pe,!0)}),f(X,Re)});var dt=r(Me,2);{var st=X=>{var Pe=Zh();f(X,Pe)},pt=X=>{var Pe=Jh(),Re=s(Pe);C(()=>b(Re,`Already passes ${t(y)??""}. 🎉`)),f(X,Pe)},_t=X=>{var Pe=Xh(),Re=s(Pe),nt=r(Re,2),it=s(nt),Ct=s(it),bt=r(it,2),Dt=s(bt),St=r(nt,2);C((Ut,ct)=>{lt(Re,Ut),b(Ct,t(R).value),b(Dt,`→ ${ct??""}:1 (${t(y)??""} ✓)`)},[()=>`background:${_(t(R).value)}`,()=>t(R).ratio.toFixed(2)]),x("click",St,A),f(X,Pe)},vt=X=>{var Pe=Qh(),Re=s(Pe);C(()=>b(Re,`No lightness of this hue reaches ${t(y)??""} on this background — try a different background or hue.`)),f(X,Pe)};I(dt,X=>{t(k).editKey?t(U)!==null&&t(U)>=(t(y)==="AAA"?7:4.5)?X(pt,1):t(R)?X(_t,2):X(vt,-1):X(st)})}C((X,Pe,Re)=>{lt(ae,X),lt(q,Pe),b(Be,`(for ${Re??""} mode)`)},[()=>`background:${_(t(w).expr)}`,()=>`color:${_(t(k).expr)}`,()=>Nn()]),Cn(we,()=>t(h),X=>O(h,X)),x("click",qe,P),Cn(Se,()=>t(v),X=>O(v,X)),f(J,xe)};I(ye,J=>{t(z)&&J(Ie)})}var he=r(N,4),ve=s(he),je=r(s(ve),2),$e=s(je),et=r(ve,2);{var M=J=>{var xe=sg(),ke=r(fe(xe),2),W=s(ke),we=s(W),qe=s(we),at=r(s(qe));re(at,17,()=>m,Ue=>Ue.label,(Ue,ae)=>{var q=eg(),_e=s(q);C(()=>b(_e,t(ae).label)),f(Ue,q)});var Se=r(we);re(Se,21,()=>p,Ue=>Ue.label,(Ue,ae)=>{var q=og(),_e=s(q),ue=s(_e),de=r(_e);re(de,17,()=>m,me=>me.label,(me,Me)=>{const Te=u(()=>E(t(ae).expr,t(Me).expr));var ze=Bt(),Be=fe(ze);{var Ge=st=>{const pt=u(()=>B(t(Te)));var _t=tg(),vt=s(_t),X=s(vt);C((Pe,Re)=>{Y(vt,"title",Pe),Ye(vt,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${t(pt).cls}`),b(X,Re)},[()=>`${t(ae).label} on ${t(Me).label} — ${t(Te).toFixed(2)}:1`,()=>t(Te).toFixed(1)]),x("click",vt,()=>S(t(ae).expr,t(Me).expr)),f(st,_t)},dt=st=>{var pt=ag();f(st,pt)};I(Be,st=>{t(Te)!==null?st(Ge):st(dt,-1)})}f(me,ze)}),C(()=>b(ue,t(ae).label)),f(Ue,q)}),f(J,xe)};I(et,J=>{t(L)&&J(M)})}C(()=>{Y($,"aria-expanded",t(z)),b(te,t(z)?"▲":"▼"),Y(ve,"aria-expanded",t(L)),b($e,t(L)?"▲":"▼")}),x("click",$,()=>{O(z,!t(z))}),x("click",ve,()=>{O(L,!t(L))}),f(a,T),$t()}ta(["click"]);var lg=g('<div class="h-full overflow-y-auto"><!></div>'),ig=g('<span class="ml-0.5 text-[8px] bg-indigo-600 text-white rounded-full px-1.5 py-0.5 leading-none font-black"> </span>'),cg=g('<div class="flex flex-col h-full min-h-0"><div class="flex-1 min-h-0 overflow-hidden"><!></div> <div class="shrink-0 border-t border-white/8 bg-[#0a0a10] flex"><button><!> Controls</button> <div class="w-px bg-white/8"></div> <button><!> All tokens <!></button></div></div>');function zi(a,e){Qt(e,!0);const o=new Set(["home","themes","wcag","setup","cheatsheet"]);let n=G("controls");ha(()=>{e.domain,O(n,"controls")});let l=u(()=>Pi[e.domain]??[e.domain]),i=u(()=>e.tokens.filter(v=>t(l).some(y=>v.name.includes(y))&&v.name in e.overrides).length);var c=Bt(),d=fe(c);{var p=v=>{var y=Bt(),k=fe(y);{var w=S=>{mu(S,{get overrides(){return e.overrides},get onSelect(){return e.onSelectDomain},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},E=S=>{nh(S,{get overrides(){return e.overrides},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},B=S=>{ng(S,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onBulkChange(){return e.onBulkChange}})},U=S=>{dh(S,{get overrides(){return e.overrides}})},P=S=>{_h(S,{})};I(k,S=>{e.domain==="home"?S(w):e.domain==="themes"?S(E,1):e.domain==="wcag"?S(B,2):e.domain==="setup"?S(U,3):e.domain==="cheatsheet"&&S(P,4)})}f(v,y)},m=u(()=>o.has(e.domain)),h=v=>{var y=cg(),k=s(y),w=s(k);{var E=D=>{var A=lg(),T=s(A);{var N=M=>{hp(M,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange},get onSelectDomain(){return e.onSelectDomain}})},$=M=>{Zp(M,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},He=M=>{om(M,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},te=M=>{ym(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},ye=M=>{Mm(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Ie=M=>{Km(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},he=M=>{dv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},ve=M=>{xv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},je=M=>{Bv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},$e=M=>{Xv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},et=M=>{Dh(M,{get domain(){return e.domain},get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})};I(T,M=>{e.domain==="colors"?M(N):e.domain==="typography"?M($,1):e.domain==="spacing"?M(He,2):e.domain==="layout"?M(te,3):e.domain==="borders"?M(ye,4):e.domain==="shadows"?M(Ie,5):e.domain==="motion"?M(he,6):e.domain==="effects"?M(ve,7):e.domain==="macros"?M(je,8):e.domain==="misc"?M($e,9):M(et,-1)})}f(D,A)},B=D=>{Vh(D,{get tokens(){return e.tokens},get overrides(){return e.overrides},get patterns(){return t(l)},get onSet(){return e.onSet},get onReset(){return e.onReset}})};I(w,D=>{t(n)==="controls"?D(E):D(B,-1)})}var U=r(k,2),P=s(U),S=s(P);Vd(S,{class:"w-3 h-3"});var _=r(P,4),z=s(_);Dd(z,{class:"w-3 h-3"});var L=r(z,2);{var R=D=>{var A=ig(),T=s(A);C(()=>b(T,t(i))),f(D,A)};I(L,D=>{t(i)>0&&D(R)})}C(()=>{Ye(P,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="controls"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`),Ye(_,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="tokens"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`)}),x("click",P,()=>{O(n,"controls")}),x("click",_,()=>{O(n,"tokens")}),f(v,y)};I(d,v=>{t(m)?v(p):v(h,-1)})}f(a,c),$t()}ta(["click"]);const Ai="slashed-studio/overrides/v2",dg=new Set(["--sf-text-base-min","--sf-text-base-max","--sf-text-ratio-min","--sf-text-ratio-max","--sf-text-scale","--sf-text-display-base-min","--sf-text-display-base-max","--sf-text-display-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),fg=new Set(["--sf-space-base-min","--sf-space-base-max","--sf-space-ratio-min","--sf-space-ratio-max","--sf-space-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),ug=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]],pg=[["display-s",0],["display-m",1],["display-l",2]],mg=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]];function Ca(a,e,o){const n=a[e];if(n===void 0)return o;const l=parseFloat(n);return isNaN(l)?o:l}function Go(a){const o=a.toFixed(6).replace(/\.?0+$/,"");return o===""||o==="-"?"0":o}function Or(a,e,o,n,l,i,c,d){const p=a*Math.pow(o,c)*d,m=e*Math.pow(n,c)*d;if(i<=l||Math.abs(p-m)<1e-9)return`${Go(p)}rem`;const h=(m-p)/(i-l);return`clamp(${Go(p)}rem, calc(${Go(h)} * (100vw - ${Go(l)}rem) + ${Go(p)}rem), ${Go(m)}rem)`}function vg(a){const e={},o=Object.keys(a),n=o.some(d=>dg.has(d)),l=o.some(d=>fg.has(d));if(!n&&!l)return e;const i=Ca(a,"--sf-fluid-min-vw",22.5),c=Ca(a,"--sf-fluid-max-vw",90);if(n){const d=Ca(a,"--sf-text-base-min",1),p=Ca(a,"--sf-text-base-max",1.25),m=Ca(a,"--sf-text-ratio-min",1.25),h=Ca(a,"--sf-text-ratio-max",1.333),v=Ca(a,"--sf-text-scale",1);for(const[E,B]of ug)e[`--sf-text-${E}`]=Or(d,p,m,h,i,c,B,v);const y=Ca(a,"--sf-text-display-base-min",2.4),k=Ca(a,"--sf-text-display-base-max",3),w=Ca(a,"--sf-text-display-scale",1);for(const[E,B]of pg)e[`--sf-text-${E}`]=Or(y,k,m,h,i,c,B,w)}if(l){const d=Ca(a,"--sf-space-base-min",1),p=Ca(a,"--sf-space-base-max",2),m=Ca(a,"--sf-space-ratio-min",1.25),h=Ca(a,"--sf-space-ratio-max",1.333),v=Ca(a,"--sf-space-scale",1);for(const[y,k]of mg)e[`--sf-space-${y}`]=Or(d,p,m,h,i,c,k,v)}return e}function Ei(){return typeof window>"u"?null:window.slashedApp??null}function Ri(){if(typeof window>"u")return{};const a=Ei();if(a)return a.overrides&&typeof a.overrides=="object"&&!Array.isArray(a.overrides)?{...a.overrides}:{};const e=window.location.hash;if(e?.includes("c="))try{return Df(e)}catch{}const o=localStorage.getItem(Ai);if(o)try{return JSON.parse(o)}catch{}return{}}function Ti(a){if(typeof document>"u")return;let e=document.getElementById("sf-parent-overrides");e||(e=document.createElement("style"),e.id="sf-parent-overrides",document.head.appendChild(e));const o=vg(a),n=Object.keys(o).length>0?{...o,...a}:a;e.textContent=To(n,{mode:"root",banner:!1})}async function hg(a,e){const o=(a.url??"").replace(/\/$/,""),n=new URL(o+"/tokens/overrides",window.location.href);if(n.origin!==window.location.origin)throw new Error("slashed: REST URL must be same-origin");const l=n.href,i=await fetch(l,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a.nonce??""},body:JSON.stringify({overrides:e})});if(!i.ok)throw new Error(`slashed: save failed ${i.status} ${i.statusText}`)}function gg(a){try{localStorage.setItem(Ai,JSON.stringify(a))}catch{}const e=Si(a),o=e?`c=${e}`:"";window.location.hash.replace("#","")!==o&&(window.location.hash=o)}async function Di(a){if(typeof window>"u")return;const e=Ei();if(e?.rest?.url){await hg(e.rest,{...a});return}gg(a)}var bg=g('<div class="px-4 py-8 text-center text-[11px] text-slate-600"> </div>'),yg=g('<div class="px-4 py-8 text-center text-[11px] text-slate-600">Type to search tokens by name or description</div>'),xg=g('<span class="shrink-0 text-[8px] font-bold text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>'),kg=g('<div class="text-[10px] text-slate-600 truncate mt-0.5"> </div>'),wg=g('<button><div class="flex-1 min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-mono text-slate-200 truncate"> </span> <!></div> <!></div> <div class="flex items-center gap-2 shrink-0"><span class="text-[9px] text-slate-600 font-mono truncate max-w-[100px]"> </span> <span class="text-[9px] font-bold text-slate-500 bg-white/5 rounded px-1.5 py-0.5"> </span></div></button>'),_g=g('<div class="px-4 py-2 border-t border-white/6 flex items-center gap-3 text-[9px] text-slate-600"><span><kbd class="font-mono border border-white/10 rounded px-1">↑↓</kbd> navigate</span> <span><kbd class="font-mono border border-white/10 rounded px-1">↵</kbd> open panel</span> <span><kbd class="font-mono border border-white/10 rounded px-1">Esc</kbd> close</span></div>'),Cg=g('<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-start justify-center pt-[15vh]" role="dialog" aria-modal="true" aria-label="Token search"><div class="w-[560px] max-w-[95vw] bg-[#111118] border border-white/12 rounded-2xl shadow-2xl overflow-hidden"><div class="flex items-center gap-3 px-4 py-3 border-b border-white/8"><svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <input placeholder="Search tokens… (e.g. radius, primary, duration)" class="flex-1 bg-transparent text-[13px] text-slate-100 placeholder-slate-600 outline-none"/> <kbd class="text-[9px] font-mono text-slate-600 border border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd></div> <div class="max-h-[360px] overflow-y-auto"><!></div> <!></div></div>');function Mi(a,e){Qt(e,!0);let o=G(""),n=G(0),l=G(null);const i={colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc"};let c=u(()=>(()=>{const L=t(o).trim().toLowerCase();if(!L)return[];const R=[];for(const D of e.tokens){if(D.tier==="INTERNAL")continue;const A=D.name.toLowerCase().includes(L),T=D.description?.toLowerCase().includes(L)??!1;if((A||T)&&(R.push({token:D,domain:cn(D.name),overridden:D.name in e.overrides}),R.length>=40))break}return R})());ha(()=>{t(o),O(n,0)}),ha(()=>{t(l)&&t(l).focus()});function d(L){e.onNavigate(L),e.onClose()}function p(L){if(L.key==="Escape"){L.preventDefault(),e.onClose();return}if(t(c).length===0&&(L.key==="ArrowDown"||L.key==="ArrowUp")){L.preventDefault(),O(n,0);return}if(L.key==="ArrowDown"){L.preventDefault(),O(n,Math.min(t(n)+1,t(c).length-1),!0);return}if(L.key==="ArrowUp"){L.preventDefault(),O(n,Math.max(t(n)-1,0),!0);return}L.key==="Enter"&&t(c)[t(n)]&&(L.preventDefault(),d(t(c)[t(n)].domain))}var m=Cg(),h=s(m),v=s(h),y=r(s(v),2);Yo(y,L=>O(l,L),()=>t(l));var k=r(v,2),w=s(k);{var E=L=>{var R=bg(),D=s(R);C(()=>b(D,`No tokens matching "${t(o)??""}"`)),f(L,R)},B=u(()=>t(o).trim()&&t(c).length===0),U=L=>{var R=yg();f(L,R)},P=u(()=>!t(o).trim()),S=L=>{var R=Bt(),D=fe(R);re(D,19,()=>t(c),A=>A.token.name,(A,T,N)=>{var $=wg(),He=s($),te=s(He),ye=s(te),Ie=s(ye),he=r(ye,2);{var ve=W=>{var we=xg();f(W,we)};I(he,W=>{t(T).overridden&&W(ve)})}var je=r(te,2);{var $e=W=>{var we=kg(),qe=s(we);C(()=>b(qe,t(T).token.description)),f(W,we)};I(je,W=>{t(T).token.description&&W($e)})}var et=r(He,2),M=s(et),J=s(M),xe=r(M,2),ke=s(xe);C(()=>{Ye($,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${t(n)===t(N)?"bg-indigo-500/15":"hover:bg-white/4"}`),b(Ie,t(T).token.name),b(J,t(T).overridden?e.overrides[t(T).token.name]:t(T).token.value),b(ke,i[t(T).domain]??t(T).domain)}),lo("mouseenter",$,()=>{O(n,t(N),!0)}),x("click",$,()=>d(t(T).domain)),f(A,$)}),f(L,R)};I(w,L=>{t(B)?L(E):t(P)?L(U,1):L(S,-1)})}var _=r(k,2);{var z=L=>{var R=_g();f(L,R)};I(_,L=>{t(c).length>0&&L(z)})}x("mousedown",m,L=>{L.target===L.currentTarget&&e.onClose()}),x("keydown",y,p),ai(y,()=>t(o),L=>O(o,L)),f(a,m),$t()}ta(["mousedown","keydown","click"]);var Og=g('<div class="w-screen h-screen flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans"><!> <div class="flex flex-1 min-h-0"><!> <div class="w-[360px] shrink-0 bg-[#0c0c15] border-r border-white/8 flex flex-col min-h-0"><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0"><span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div> <div class="flex-1 flex flex-col min-h-0 min-w-0"><!></div></div> <!> <!></div>');function Sg(a,e){Qt(e,!0);const o=Bs.tokens??Bs,n={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 l(ae){const q={};for(const _e of Object.keys(ae)){const ue=cn(_e);q[ue]=(q[ue]??0)+1}return q}let i=G(da(Ri())),c=G(da([])),d=G(da([])),p=G("home"),m=G(!1),h=G("light"),v=G("fluid"),y=G("normal"),k=G("marketing"),w=u(()=>Object.keys(t(i)).length),E=u(()=>l(t(i))),B=u(()=>t(c).length>0),U=u(()=>t(d).length>0),P=G(da(JSON.stringify(t(i)))),S=G("idle"),_=u(()=>JSON.stringify(t(i))!==t(P)),z=null;ha(()=>{Ti(t(i))});function L(ae){const q=t(i),_e=typeof ae=="function"?ae(q):ae;JSON.stringify(q)!==JSON.stringify(_e)&&(O(c,[...t(c).slice(-49),q],!0),O(d,[],!0),t(S)==="saved"&&O(S,"idle")),O(i,_e,!0)}async function R(){if(!t(_)||t(S)==="saving")return;const ae=JSON.stringify(t(i));O(S,"saving");try{await Di(t(i)),JSON.stringify(t(i))===ae?(O(P,ae,!0),O(S,"saved"),z&&clearTimeout(z),z=setTimeout(()=>{t(S)==="saved"&&O(S,"idle"),z=null},2e3)):O(S,"idle")}catch(q){console.warn("slashed: save failed",q),O(S,"idle")}}function D(ae,q){L(_e=>({..._e,[ae]:q}))}function A(ae){L(q=>{const _e={...q};return delete _e[ae],_e})}function T(ae){L(q=>{const _e={...q};for(const[ue,de]of Object.entries(ae))de===null?delete _e[ue]:_e[ue]=de;return _e})}function N(ae){ae.id==="default"?L({}):T(ae.overrides)}function $(){L({})}function He(){if(t(c).length===0)return;const ae=t(c)[t(c).length-1],q=t(i);O(c,t(c).slice(0,-1),!0),O(d,[q,...t(d)],!0),O(i,ae,!0)}function te(){if(t(d).length===0)return;const ae=t(d)[0],q=t(i);O(d,t(d).slice(1),!0),O(c,[...t(c),q],!0),O(i,ae,!0)}function ye(){const ae=document.createElement("input");ae.type="file",ae.accept=".css,.json",ae.onchange=q=>{const _e=q.target.files?.[0];if(!_e)return;const ue=new FileReader;ue.onload=de=>{const me=de.target?.result;if(me)if(_e.name.endsWith(".json"))try{const Me=JSON.parse(me);if(Me!==null&&typeof Me=="object"&&!Array.isArray(Me)){const Te=Object.fromEntries(Object.entries(Me).filter(([,ze])=>typeof ze=="string"));L(Te)}}catch{}else{const Me={},Te=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let ze;for(;(ze=Te.exec(me))!==null;)Me[ze[1].trim()]=ze[2].trim();Object.keys(Me).length>0&&L(Be=>({...Be,...Me}))}},ue.readAsText(_e)},ae.click()}function Ie(){const ae=To(t(i),{mode:"layer",banner:!0}),q=new Blob([ae],{type:"text/css"}),_e=URL.createObjectURL(q),ue=document.createElement("a");ue.href=_e,ue.download="slashed-overrides.css",ue.click(),URL.revokeObjectURL(_e)}oi(()=>{const ae=q=>{(q.ctrlKey||q.metaKey)&&!q.shiftKey&&q.key==="z"&&(q.preventDefault(),He()),(q.ctrlKey||q.metaKey)&&(q.shiftKey&&q.key==="z"||q.key==="y")&&(q.preventDefault(),te()),(q.ctrlKey||q.metaKey)&&!q.shiftKey&&q.key.toLowerCase()==="s"&&(q.preventDefault(),R()),(q.ctrlKey||q.metaKey)&&!q.repeat&&q.key.toLowerCase()==="k"&&(q.preventDefault(),O(m,!t(m)))};return window.addEventListener("keydown",ae),()=>{window.removeEventListener("keydown",ae),z&&clearTimeout(z)}});var he=Og(),ve=s(he);ef(ve,{get overridesCount(){return t(w)},get canUndo(){return t(B)},get canRedo(){return t(U)},get hasPendingChanges(){return t(_)},get saveState(){return t(S)},onUndo:He,onRedo:te,onResetAll:$,onImport:ye,onExport:Ie,onSave:R});var je=r(ve,2),$e=s(je);gi($e,{get activeId(){return t(p)},onSelect:ae=>{O(p,ae,!0)},get overridesByDomain(){return t(E)}});var et=r($e,2),M=s(et),J=s(M),xe=s(J),ke=r(M,2),W=s(ke);zi(W,{get domain(){return t(p)},get tokens(){return o},get overrides(){return t(i)},onSet:D,onReset:A,onBulkChange:T,onApplyTheme:N,onSelectDomain:ae=>{O(p,ae,!0)},onResetAll:$});var we=r(et,2),qe=s(we);Jf(qe,{get overrides(){return t(i)},get previewTheme(){return t(h)},get previewWidth(){return t(v)},get previewMotion(){return t(y)},get previewTemplate(){return t(k)},onThemeChange:ae=>{O(h,ae,!0)},onWidthChange:ae=>{O(v,ae,!0)},onMotionChange:ae=>{O(y,ae,!0)},onTemplateChange:ae=>{O(k,ae,!0)}});var at=r(je,2);{let ae=u(()=>n[t(p)]??t(p));sf(at,{get overridesCount(){return t(w)},get domain(){return t(ae)}})}var Se=r(at,2);{var Ue=ae=>{Mi(ae,{get tokens(){return o},get overrides(){return t(i)},onNavigate:q=>{O(p,q,!0)},onClose:()=>{O(m,!1)}})};I(Se,ae=>{t(m)&&ae(Ue)})}C(()=>b(xe,n[t(p)]??t(p))),f(a,he),$t()}const Sr=document.getElementById("app")??document.getElementById("slashed-admin-app");Sr&&(Sr.innerHTML="",Xl(Sg,{target:Sr}));var Lg=g('<button aria-label="Open SLASHED token editor" class="fixed right-0 z-[100000] pointer-events-auto bg-indigo-600 hover:bg-indigo-500 text-white shadow-xl flex flex-col items-center justify-center gap-1 px-1.5 py-3 rounded-l-xl transition-colors cursor-pointer" style="top: calc(var(--wp-admin--admin-bar--height, 32px) + 16px);"><span class="text-sm font-black leading-none select-none">/</span> <!></button>'),Pg=g('<span class="shrink-0 text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono leading-none"> </span>'),Ig=g('<div class="absolute inset-0 z-[100001] flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="reset-confirm-title"><div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-5 mx-4 shadow-2xl w-full max-w-[320px]"><h3 id="reset-confirm-title" class="text-white font-bold text-sm mb-2">Reset all overrides?</h3> <p class="text-slate-400 text-xs mb-4"> </p> <div class="flex gap-2 justify-end"><button class="px-3 py-1.5 text-xs rounded-lg bg-white/8 text-slate-300 hover:bg-white/12 transition-colors cursor-pointer">Cancel</button> <button class="px-3 py-1.5 text-xs rounded-lg bg-rose-600 hover:bg-rose-500 text-white font-bold transition-colors cursor-pointer">Reset all</button></div></div></div>'),Bg=g('<!> <div><div class="h-10 bg-[#0d0d14] border-b border-white/8 flex items-center px-2 gap-1.5 shrink-0"><div class="w-6 h-6 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-black text-sm leading-none shrink-0 shadow-lg shadow-indigo-600/30 select-none">/</div> <span class="text-[10px] font-bold text-white tracking-tight shrink-0">SLASHED</span> <span class="text-[9px] text-slate-500 font-mono uppercase tracking-widest truncate min-w-0"> </span> <!> <div class="flex-1 min-w-0"></div> <button><!></button> <button title="Undo (Ctrl+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Import CSS / JSON" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button> <button title="Export CSS" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Reset all overrides" class="p-1 rounded text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Collapse panel" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button></div> <div class="flex flex-1 min-h-0"><!> <div class="flex-1 bg-[#0c0c15] flex flex-col min-h-0"><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0"><span class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div></div> <!> <!></div>',1);function Ug(a,e){Qt(e,!0);const o=Bs.tokens??Bs,n="slashed-overlay/open",l="slashed-overlay/domain",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 c(ne){const Je={};for(const ft of Object.keys(ne)){const Lt=cn(ft);Je[Lt]=(Je[Lt]??0)+1}return Je}function d(ne,Je){try{const ft=localStorage.getItem(ne);return ft===null?Je:ft!=="false"}catch{return Je}}function p(ne,Je){try{return localStorage.getItem(ne)??Je}catch{return Je}}let m=G(da(d(n,!0))),h=G(da(typeof window<"u"?window.matchMedia("(max-width: 768px)").matches:!1)),v=G(da(Ri())),y=G(da([])),k=G(da([])),w=G(da(p(l,"home"))),E=G(!1),B=G(!1),U=G(null),P=G(null);ha(()=>{t(B)&&Vl().then(()=>t(U)?.focus())});let S=u(()=>Object.keys(t(v)).length),_=u(()=>c(t(v))),z=u(()=>t(y).length>0),L=u(()=>t(k).length>0);function R(ne,Je){const ft=Object.keys(ne);return ft.length!==Object.keys(Je).length?!1:ft.every(Lt=>ne[Lt]===Je[Lt])}let D=G(da({...t(v)})),A=G("idle"),T=u(()=>!R(t(v),t(D))),N=null;function $(){const ne=document.getElementById("slashed-frontend-overlay");if(!ne)return;const Je="var(--wp-admin--admin-bar--height, 32px)";ne.style.position="fixed",ne.style.right="0",ne.style.zIndex="100000",t(m)?(ne.style.top=Je,ne.style.width=t(h)?"100vw":"420px",ne.style.height=`calc(100vh - ${Je})`):(ne.style.top=`calc(${Je} + 16px)`,ne.style.width="40px",ne.style.height="64px")}ha(()=>{Ti(t(v))}),ha(()=>{!t(h)&&t(m)?document.documentElement.classList.add("sf-panel-active"):document.documentElement.classList.remove("sf-panel-active")}),ha(()=>{$()}),ha(()=>{try{localStorage.setItem(n,String(t(m)))}catch{}}),ha(()=>{try{localStorage.setItem(l,t(w))}catch{}});function He(){O(m,!t(m))}function te(ne){const Je=t(v),ft=typeof ne=="function"?ne(Je):ne;R(Je,ft)||(O(y,[...t(y).slice(-49),Je],!0),O(k,[],!0),t(A)==="saved"&&O(A,"idle")),O(v,ft,!0)}async function ye(){if(!t(T)||t(A)==="saving")return;const ne={...t(v)};O(A,"saving");try{await Di(t(v)),R(t(v),ne)?(O(D,ne,!0),O(A,"saved"),N&&clearTimeout(N),N=setTimeout(()=>{t(A)==="saved"&&O(A,"idle"),N=null},2e3)):O(A,"idle")}catch(Je){console.warn("slashed: save failed",Je),O(A,"idle")}}function Ie(ne,Je){te(ft=>({...ft,[ne]:Je}))}function he(ne){te(Je=>{const ft={...Je};return delete ft[ne],ft})}function ve(ne){te(Je=>{const ft={...Je};for(const[Lt,Yt]of Object.entries(ne))Yt===null?delete ft[Lt]:ft[Lt]=Yt;return ft})}function je(ne){ne.id==="default"?te({}):ve(ne.overrides)}function $e(){O(B,!0)}function et(){O(B,!1),te({})}function M(){O(B,!1)}function J(){if(!t(y).length)return;const ne=t(y)[t(y).length-1];O(k,[t(v),...t(k)],!0),O(y,t(y).slice(0,-1),!0),O(v,ne,!0)}function xe(){if(!t(k).length)return;const ne=t(k)[0];O(y,[...t(y),t(v)],!0),O(k,t(k).slice(1),!0),O(v,ne,!0)}function ke(){const ne=To(t(v),{mode:"layer",banner:!0}),Je=new Blob([ne],{type:"text/css"}),ft=URL.createObjectURL(Je),Lt=document.createElement("a");Lt.href=ft,Lt.download="slashed-overrides.css",Lt.click(),URL.revokeObjectURL(ft)}function W(){const ne=document.createElement("input");ne.type="file",ne.accept=".css,.json",ne.onchange=Je=>{const ft=Je.target.files?.[0];if(!ft)return;const Lt=new FileReader;Lt.onload=Yt=>{const ge=Yt.target?.result;if(ge)if(ft.name.endsWith(".json"))try{const Fe=JSON.parse(ge);if(Fe!==null&&typeof Fe=="object"&&!Array.isArray(Fe)){const rt=Object.fromEntries(Object.entries(Fe).filter(([,Ve])=>typeof Ve=="string"));te(rt)}}catch{}else{const Fe={},rt=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let Ve;for(;(Ve=rt.exec(ge))!==null;)Fe[Ve[1].trim()]=Ve[2].trim();Object.keys(Fe).length&&te(Mt=>({...Mt,...Fe}))}},Lt.readAsText(ft)},ne.click()}oi(()=>{const ne=document.createElement("style");ne.id="sf-panel-push",ne.textContent=["html { transition: padding-right 200ms ease-in-out; }","html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }"].join(`
-`),document.head.appendChild(ne);const Je=window.matchMedia("(max-width: 768px)"),ft=ge=>{O(h,ge.matches,!0)};Je.addEventListener("change",ft);const Lt=ge=>{const Fe=ge.key.toLowerCase();t(m)&&((ge.ctrlKey||ge.metaKey)&&!ge.shiftKey&&Fe==="z"&&(ge.preventDefault(),J()),(ge.ctrlKey||ge.metaKey)&&(ge.shiftKey&&Fe==="z"||Fe==="y")&&(ge.preventDefault(),xe()),(ge.ctrlKey||ge.metaKey)&&!ge.repeat&&Fe==="k"&&(ge.preventDefault(),O(E,!t(E))),(ge.ctrlKey||ge.metaKey)&&!ge.shiftKey&&Fe==="s"&&(ge.preventDefault(),ye()))},Yt=()=>He();return window.addEventListener("keydown",Lt),document.addEventListener("slashed:toggle-overlay",Yt),()=>{ne.remove(),document.documentElement.classList.remove("sf-panel-active"),Je.removeEventListener("change",ft),window.removeEventListener("keydown",Lt),document.removeEventListener("slashed:toggle-overlay",Yt),N&&clearTimeout(N)}});var we=Bg(),qe=fe(we);{var at=ne=>{var Je=Lg(),ft=r(s(Je),2);Pn(ft,{class:"w-3 h-3 opacity-70 rotate-180"}),x("click",Je,He),f(ne,Je)};I(qe,ne=>{t(m)||ne(at)})}var Se=r(qe,2);let Ue;var ae=s(Se),q=r(s(ae),4),_e=s(q),ue=r(q,2);{var de=ne=>{var Je=Pg(),ft=s(Je);C(()=>b(ft,t(S))),f(ne,Je)};I(ue,ne=>{t(S)>0&&ne(de)})}var me=r(ue,4),Me=s(me);{var Te=ne=>{ni(ne,{class:"w-3 h-3 animate-spin"})},ze=ne=>{Mo(ne,{class:"w-3 h-3"})},Be=ne=>{di(ne,{class:"w-3 h-3"})};I(Me,ne=>{t(A)==="saving"?ne(Te):t(A)==="saved"?ne(ze,1):ne(Be,-1)})}var Ge=r(me,2),dt=s(Ge);vi(dt,{class:"w-3 h-3"});var st=r(Ge,2),pt=s(st);ii(pt,{class:"w-3 h-3"});var _t=r(st,4),vt=s(_t);si(vt,{class:"w-3 h-3"});var X=r(_t,2),Pe=s(X);jr(Pe,{class:"w-3 h-3"});var Re=r(X,2),nt=s(Re);pi(nt,{class:"w-3 h-3"});var it=r(Re,4),Ct=s(it);Pn(Ct,{class:"w-3 h-3"});var bt=r(ae,2),Dt=s(bt);gi(Dt,{get activeId(){return t(w)},onSelect:ne=>{O(w,ne,!0)},get overridesByDomain(){return t(_)}});var St=r(Dt,2),Ut=s(St),ct=s(Ut),jt=s(ct),ea=r(Ut,2),ia=s(ea);zi(ia,{get domain(){return t(w)},get tokens(){return o},get overrides(){return t(v)},onSet:Ie,onReset:he,onBulkChange:ve,onApplyTheme:je,onSelectDomain:ne=>{O(w,ne,!0)},onResetAll:$e});var Ze=r(bt,2);{var mt=ne=>{Mi(ne,{get tokens(){return o},get overrides(){return t(v)},onNavigate:Je=>{O(w,Je,!0)},onClose:()=>{O(E,!1)}})};I(Ze,ne=>{t(E)&&ne(mt)})}var Ot=r(Ze,2);{var Rt=ne=>{var Je=Ig(),ft=s(Je),Lt=r(s(ft),2),Yt=s(Lt),ge=r(Lt,2),Fe=s(ge);Yo(Fe,Ve=>O(U,Ve),()=>t(U));var rt=r(Fe,2);Yo(rt,Ve=>O(P,Ve),()=>t(P)),C(()=>b(Yt,`This will clear all ${t(S)??""} customisation${t(S)!==1?"s":""}.
-          You can still undo this before saving.`)),x("keydown",Je,Ve=>{Ve.key==="Escape"&&(Ve.stopPropagation(),M()),Ve.key==="Tab"&&(Ve.preventDefault(),document.activeElement===t(U)?t(P)?.focus():t(U)?.focus())}),x("click",Fe,M),x("click",rt,et),f(ne,Je)};I(Ot,ne=>{t(B)&&ne(Rt)})}C(ne=>{Ue=Ye(Se,1,"fixed right-0 z-[100000] 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,Ue,{"translate-x-full":!t(m),"translate-x-0":t(m),"pointer-events-none":!t(m)}),lt(Se,`top: var(--wp-admin--admin-bar--height, 32px); width: ${t(h)?"100vw":"420px"}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`),Y(Se,"aria-hidden",!t(m)),Se.inert=!t(m)||void 0,b(_e,i[t(w)]??t(w)),me.disabled=!t(T)||t(A)==="saving",Y(me,"title",t(T)?"Save changes (Ctrl+S)":"No unsaved changes"),Y(me,"aria-label",t(A)==="saving"?"Saving changes":t(T)?"Save changes":"No unsaved changes"),Ye(me,1,ne),Ge.disabled=!t(z),st.disabled=!t(L),X.disabled=t(S)===0,Re.disabled=t(S)===0,b(jt,i[t(w)]??t(w))},[()=>ro(["p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none",t(A)==="saved"?"text-emerald-300":t(T)?"text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10":"text-slate-500 opacity-40"].join(" "))]),x("click",me,ye),x("click",Ge,J),x("click",st,xe),x("click",_t,W),x("click",X,ke),x("click",Re,$e),x("click",it,He),f(a,we),$t()}ta(["click","keydown"]);function al(){const a=document.getElementById("slashed-frontend-overlay");if(!a||a.shadowRoot)return;const e=a.attachShadow({mode:"open"}),o=document.createElement("div");e.appendChild(o);let n=!1;const l=()=>{n||(Xl(Ug,{target:o}),n=!0,a.setAttribute("data-slashed-ready",""))},i=window.slashedApp?.cssUrl;if(i){const c=document.createElement("link");c.rel="stylesheet",c.href=i;const d=setTimeout(l,5e3),p=()=>{clearTimeout(d),l()};c.addEventListener("load",p),c.addEventListener("error",p),e.appendChild(c)}else l()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",al):al();
+      itself and can't be shown in the static canvas.</p></div></div>`);function Xv(a,e){Qt(e,!0);const o=[{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"}],n=[{label:"Smooth",value:"smooth"},{label:"Auto",value:"auto"}],l=[{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 i(V,F,ee){if(!V)return F;const he=parseFloat(ee?V.replace(ee,""):V);return isNaN(he)?F:he}let c=u(()=>i(e.overrides["--sf-touch-target"],44,"px")),d=u(()=>e.overrides["--sf-scroll-behavior"]??"smooth"),p=u(()=>i(e.overrides["--sf-z-base"],0)),m=u(()=>e.overrides["--sf-caret-color"]??""),h=u(()=>i(e.overrides["--sf-link-underline-offset"]?.replace("em",""),.15)),v=u(()=>e.overrides["--sf-link-underline-thickness"]??"auto"),y=u(()=>e.overrides["--sf-focus-ring-style"]??"solid"),k=G(!1),w=G(!1),E=G(!1),B=G(!1),U=G(!1),P=G(!1),S=G(!1),_=G(!1),z=G(!1),L=G(!1),R=G(!1),D=G(!1);function A(V){return i(e.overrides[V.token]?.replace("rem",""),V.default)}var T=Jv(),N=s(T),$=s(N),Ge=r(s($),2),te=s(Ge),ge=r($,2);{var Pe=V=>{var F=Uv(),ee=de(F);{let le=u(()=>"--sf-touch-target"in e.overrides);pt(ee,{label:"Min touch size",get value(){return t(c)},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 t(le)},onChange:ue=>e.onSet("--sf-touch-target",`${ue}px`),onReset:()=>e.onReset("--sf-touch-target")})}var he=r(ee,2),Z=s(he),j=s(Z);C(()=>{lt(Z,`width: ${t(c)}px; height: ${t(c)}px`),b(j,`${t(c)??""}px`)}),f(V,F)};I(ge,V=>{t(k)&&V(Pe)})}var ve=r(N,4),me=s(ve),je=r(s(me),2),$e=s(je),tt=r(me,2);{var M=V=>{var F=zv();re(F,21,()=>n,ee=>ee.value,(ee,he)=>{var Z=hs(),j=s(Z);C(()=>{Ye(Z,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${t(d)===t(he).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"}`),b(j,t(he).label)}),x("click",Z,()=>t(he).value==="smooth"?e.onReset("--sf-scroll-behavior"):e.onSet("--sf-scroll-behavior",t(he).value)),f(ee,Z)}),f(V,F)};I(tt,V=>{t(w)&&V(M)})}var J=r(ve,4),be=s(J),ye=r(s(be),2),W=s(ye),ke=r(be,2);{var He=V=>{var F=Ev(),ee=de(F);{let Z=u(()=>"--sf-z-base"in e.overrides);pt(ee,{label:"Base offset",get value(){return t(p)},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 t(Z)},onChange:j=>e.onSet("--sf-z-base",String(j)),onReset:()=>e.onReset("--sf-z-base")})}var he=r(ee,2);re(he,21,()=>o,Z=>Z.token,(Z,j)=>{const le=u(()=>t(j).token in e.overrides);var ue=Av(),K=s(ue),ne=r(K,2),Ne=s(ne),H=r(ne,2),_e=s(H),ie=r(H,2),Le=s(ie);C(Fe=>{Ye(K,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(le)?"bg-amber-400":"bg-white/20"}`),b(Ne,t(j).label),b(_e,t(j).note),b(Le,Fe)},[()=>t(j).token.replace("--sf-z-","")]),f(Z,ue)}),f(V,F)};I(ke,V=>{t(E)&&V(He)})}var st=r(J,4),Se=s(st),Be=r(s(Se),2),ae=s(Be),q=r(Se,2);{var we=V=>{var F=Rv(),ee=s(F),he=r(s(ee),2);{let K=u(()=>e.overrides["--sf-color-selection-bg"]??""),ne=u(()=>"--sf-color-selection-bg"in e.overrides);qa(he,{token:"--sf-color-selection-bg",get value(){return t(K)},placeholder:"default",get isOverridden(){return t(ne)},onSet:Ne=>e.onSet("--sf-color-selection-bg",Ne),onReset:()=>e.onReset("--sf-color-selection-bg")})}var Z=r(ee,2),j=r(s(Z),2);{let K=u(()=>e.overrides["--sf-color-selection-text"]??""),ne=u(()=>"--sf-color-selection-text"in e.overrides);qa(j,{token:"--sf-color-selection-text",get value(){return t(K)},placeholder:"default",get isOverridden(){return t(ne)},onSet:Ne=>e.onSet("--sf-color-selection-text",Ne),onReset:()=>e.onReset("--sf-color-selection-text")})}var le=r(Z,2),ue=s(le);C(()=>lt(ue,`--sf-color-selection-bg: ${e.overrides["--sf-color-selection-bg"]??"#6366f1"}; --sf-color-selection-text: ${e.overrides["--sf-color-selection-text"]??"#ffffff"}`)),f(V,F)};I(q,V=>{t(B)&&V(we)})}var fe=r(st,4),ce=s(fe),xe=r(s(ce),2),ze=s(xe),De=r(ce,2);{var Ae=V=>{var F=Tv(),ee=de(F);re(ee,20,()=>["solid","dashed","dotted"],le=>le,(le,ue)=>{const K=u(()=>e.overrides["--sf-focus-ring-style"]??"solid");var ne=hs(),Ne=s(ne);C(()=>{Ye(ne,1,`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${t(K)===ue?"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"}`),b(Ne,ue)}),x("click",ne,()=>ue==="solid"?e.onReset("--sf-focus-ring-style"):e.onSet("--sf-focus-ring-style",ue)),f(le,ne)});var he=r(ee,2),Z=s(he),j=s(Z);C(()=>{lt(Z,`outline: 2px ${t(y)} ${e.overrides["--sf-focus-ring-color"]||"oklch(0.7 0.2 235)"}; outline-offset: 2px`),b(j,`Focus ring · ${t(y)??""}`)}),f(V,F)};I(De,V=>{t(U)&&V(Ae)})}var Ie=r(fe,4),Ve=s(Ie),nt=r(s(Ve),2),ct=s(nt),dt=r(Ve,2);{var Ot=V=>{var F=Mv(),ee=r(de(F),2);re(ee,21,()=>l,Z=>Z.token,(Z,j)=>{const le=u(()=>A(t(j)));{let ue=u(()=>`${t(j).token} — component size step ${t(j).label}`),K=u(()=>t(j).token in e.overrides);pt(Z,{get label(){return t(j).label},get value(){return t(le)},min:1,max:5,step:.05,unit:"rem",get help(){return t(ue)},get overridden(){return t(K)},onChange:ne=>e.onSet(t(j).token,`${ne}rem`),onReset:()=>e.onReset(t(j).token)})}});var he=r(ee,2);re(he,21,()=>l,Z=>Z.token,(Z,j)=>{const le=u(()=>A(t(j)));var ue=Dv(),K=s(ue),ne=r(K,2),Ne=s(ne);C(H=>{lt(K,H),b(Ne,t(j).label)},[()=>`height: ${Math.min(t(le)*14,64)}px`]),f(Z,ue)}),f(V,F)};I(dt,V=>{t(P)&&V(Ot)})}var mt=r(Ie,4),Q=s(mt),Oe=r(s(Q),2),Me=s(Oe),at=r(Q,2);{var ft=V=>{var F=Fv(),ee=de(F),he=r(s(ee),2);{let Le=u(()=>"--sf-caret-color"in e.overrides);qa(he,{token:"--sf-caret-color",get value(){return t(m)},placeholder:"default (action color)",get isOverridden(){return t(Le)},onSet:Fe=>e.onSet("--sf-caret-color",Fe),onReset:()=>e.onReset("--sf-caret-color")})}var Z=r(ee,2);{let Le=u(()=>"--sf-link-underline-offset"in e.overrides);pt(Z,{label:"Underline offset",get value(){return t(h)},min:0,max:.5,step:.01,unit:"em",help:"--sf-link-underline-offset — gap between text baseline and underline",get overridden(){return t(Le)},onChange:Fe=>e.onSet("--sf-link-underline-offset",`${Fe}em`),onReset:()=>e.onReset("--sf-link-underline-offset")})}var j=r(Z,2),le=s(j),ue=r(s(le),2);{var K=Le=>{var Fe=Nv();x("click",Fe,()=>e.onReset("--sf-link-underline-thickness")),f(Le,Fe)};I(ue,Le=>{"--sf-link-underline-thickness"in e.overrides&&Le(K)})}var ne=r(le,2);re(ne,20,()=>[["auto","auto"],["1px","1px"],["2px","2px"],["3px","3px"]],([Le,Fe])=>Fe,(Le,Fe)=>{var Qe=u(()=>Pa(Fe,2));let Xe=()=>t(Qe)[0],bt=()=>t(Qe)[1];var kt=hs(),Pt=s(kt);C(()=>{Ye(kt,1,`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${t(v)===bt()?"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"}`),b(Pt,Xe())}),x("click",kt,()=>bt()==="auto"?e.onReset("--sf-link-underline-thickness"):e.onSet("--sf-link-underline-thickness",bt())),f(Le,kt)});var Ne=r(j,2),H=s(Ne),_e=r(H,2),ie=r(s(_e));C(()=>{lt(H,`caret-color:${t(m)||"#6366f1"}`),lt(ie,`text-decoration:underline;text-underline-offset:${t(h)}em;text-decoration-thickness:${t(v)}`)}),x("click",ie,Le=>Le.preventDefault()),f(V,F)};I(at,V=>{t(S)&&V(ft)})}var _t=r(mt,4),xt=s(_t),Nt=r(s(xt),2),St=s(Nt),Et=r(xt,2);{var it=V=>{var F=jv(),ee=r(de(F),2);re(ee,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}],Z=>Z.token,(Z,j)=>{{let le=u(()=>i(e.overrides[j.token]?.replace("em",""),j.def)),ue=u(()=>j.token in e.overrides);pt(Z,{get label(){return j.label},get value(){return t(le)},min:.5,max:6,step:.125,unit:"em",get overridden(){return t(ue)},onChange:K=>e.onSet(j.token,`${K}em`),onReset:()=>e.onReset(j.token)})}});var he=r(ee,2);{let Z=u(()=>i(e.overrides["--sf-icon-box-pad"]?.replace("em",""),.5)),j=u(()=>"--sf-icon-box-pad"in e.overrides);pt(he,{label:"Box padding",get value(){return t(Z)},min:0,max:2,step:.125,unit:"em",help:"--sf-icon-box-pad — padding around icon when using .sf-icon-box",get overridden(){return t(j)},onChange:le=>e.onSet("--sf-icon-box-pad",`${le}em`),onReset:()=>e.onReset("--sf-icon-box-pad")})}f(V,F)};I(Et,V=>{t(_)&&V(it)})}var Gt=r(_t,4),ea=s(Gt),ia=r(s(ea),2),Je=s(ia),ut=r(ea,2);{var Lt=V=>{var F=Hv(),ee=r(de(F),2),he=r(s(ee),2);re(he,20,()=>["cover","contain","fill","none"],Ne=>Ne,(Ne,H)=>{const _e=u(()=>e.overrides["--sf-object-fit"]??"cover");var ie=hs(),Le=s(ie);C(()=>{Ye(ie,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(_e)===H?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),b(Le,H)}),x("click",ie,()=>H==="cover"?e.onReset("--sf-object-fit"):e.onSet("--sf-object-fit",H)),f(Ne,ie)});var Z=r(he,2);{var j=Ne=>{var H=Gv();x("click",H,()=>e.onReset("--sf-object-fit")),f(Ne,H)};I(Z,Ne=>{"--sf-object-fit"in e.overrides&&Ne(j)})}var le=r(ee,2),ue=r(s(le),2),K=r(ue,2);{var ne=Ne=>{var H=gs();x("click",H,()=>e.onReset("--sf-object-position")),f(Ne,H)};I(K,Ne=>{"--sf-object-position"in e.overrides&&Ne(ne)})}C(()=>Xt(ue,e.overrides["--sf-object-position"]??"")),x("input",ue,Ne=>{const H=Ne.target.value.trim();H?e.onSet("--sf-object-position",H):e.onReset("--sf-object-position")}),f(V,F)};I(ut,V=>{t(z)&&V(Lt)})}var Dt=r(Gt,4),Rt=s(Dt),pe=r(s(Rt),2),Ze=s(pe),vt=r(Rt,2);{var Ut=V=>{var F=Vv(),ee=r(de(F),2);re(ee,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)"}],he=>he.token,(he,Z)=>{var j=qv(),le=s(j),ue=s(le),K=r(le,2),ne=r(K,2);{var Ne=H=>{var _e=gs();x("click",_e,()=>e.onReset(Z.token)),f(H,_e)};I(ne,H=>{Z.token in e.overrides&&H(Ne)})}C(()=>{b(ue,Z.label),Xt(K,e.overrides[Z.token]??""),Y(K,"placeholder",Z.placeholder)}),x("input",K,H=>{const _e=H.target.value.trim();_e?e.onSet(Z.token,_e):e.onReset(Z.token)}),f(he,j)}),f(V,F)};I(vt,V=>{t(R)&&V(Ut)})}var Ue=r(Dt,4),Ee=s(Ue),qe=r(s(Ee),2),et=s(qe),Ct=r(Ee,2);{var ta=V=>{var F=Wv(),ee=r(de(F),2),he=r(s(ee),2);re(he,20,()=>["a4","letter","legal","a3"],j=>j,(j,le)=>{const ue=u(()=>e.overrides["--sf-print-page-size"]??"a4");var K=hs(),ne=s(K);C(()=>{Ye(K,1,`flex-1 py-1.5 rounded-lg text-[9px] border transition-all cursor-pointer ${t(ue)===le?"bg-indigo-500/15 border-indigo-500/40 text-indigo-200":"border-white/8 text-slate-400 hover:bg-white/5"}`),b(ne,le)}),x("click",K,()=>le==="a4"?e.onReset("--sf-print-page-size"):e.onSet("--sf-print-page-size",le)),f(j,K)});var Z=r(ee,2);re(Z,16,()=>[{label:"Base size",token:"--sf-print-base-size",placeholder:"11pt"},{label:"Page margin",token:"--sf-print-page-margin",placeholder:"2cm"}],j=>j.token,(j,le)=>{var ue=Kv(),K=s(ue),ne=s(K),Ne=r(K,2),H=r(Ne,2);{var _e=ie=>{var Le=gs();x("click",Le,()=>e.onReset(le.token)),f(ie,Le)};I(H,ie=>{le.token in e.overrides&&ie(_e)})}C(()=>{b(ne,le.label),Xt(Ne,e.overrides[le.token]??""),Y(Ne,"placeholder",le.placeholder)}),x("input",Ne,ie=>{const Le=ie.target.value.trim();Le?e.onSet(le.token,Le):e.onReset(le.token)}),f(j,ue)}),f(V,F)};I(Ct,V=>{t(L)&&V(ta)})}var zt=r(Ue,4),It=s(zt),Ft=r(s(It),2),la=s(Ft),xa=r(It,2);{var se=V=>{var F=Zv(),ee=r(de(F),2);re(ee,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"}],ue=>ue.token,(ue,K)=>{const ne=u(()=>e.overrides[K.token]??"0");var Ne=Yv(),H=s(Ne),_e=s(H),ie=r(H,2),Le=s(ie),Fe=r(ie,2),Qe=s(Fe),Xe=r(Fe,2);{var bt=kt=>{var Pt=gs();x("click",Pt,()=>e.onReset(K.token)),f(kt,Pt)};I(Xe,kt=>{K.token in e.overrides&&kt(bt)})}C(()=>{Y(H,"aria-label",K.label),Y(H,"aria-pressed",t(ne)==="1"),Ye(H,1,`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${t(ne)==="1"?"bg-indigo-600":"bg-white/10"}`),Ye(_e,1,`absolute top-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform ${t(ne)==="1"?"translate-x-4":"translate-x-0.5"}`),b(Le,K.label),b(Qe,K.note)}),x("click",H,()=>t(ne)==="1"?e.onReset(K.token):e.onSet(K.token,"1")),f(ue,Ne)});var he=r(ee,2),Z=r(s(he),2),j=r(Z,2);{var le=ue=>{var K=gs();x("click",K,()=>e.onReset("--sf-field-required-marker")),f(ue,K)};I(j,ue=>{"--sf-field-required-marker"in e.overrides&&ue(le)})}C(()=>Xt(Z,e.overrides["--sf-field-required-marker"]??"")),x("input",Z,ue=>{const K=ue.target.value;K?e.onSet("--sf-field-required-marker",K):e.onReset("--sf-field-required-marker")}),f(V,F)};I(xa,V=>{t(D)&&V(se)})}C(()=>{Y($,"aria-expanded",t(k)),b(te,t(k)?"▲":"▼"),Y(me,"aria-expanded",t(w)),b($e,t(w)?"▲":"▼"),Y(be,"aria-expanded",t(E)),b(W,t(E)?"▲":"▼"),Y(Se,"aria-expanded",t(B)),b(ae,t(B)?"▲":"▼"),Y(ce,"aria-expanded",t(U)),b(ze,t(U)?"▲":"▼"),Y(Ve,"aria-expanded",t(P)),b(ct,t(P)?"▲":"▼"),Y(Q,"aria-expanded",t(S)),b(Me,t(S)?"▲":"▼"),Y(xt,"aria-expanded",t(_)),b(St,t(_)?"▲":"▼"),Y(ea,"aria-expanded",t(z)),b(Je,t(z)?"▲":"▼"),Y(Rt,"aria-expanded",t(R)),b(Ze,t(R)?"▲":"▼"),Y(Ee,"aria-expanded",t(L)),b(et,t(L)?"▲":"▼"),Y(It,"aria-expanded",t(D)),b(la,t(D)?"▲":"▼")}),x("click",$,()=>{O(k,!t(k))}),x("click",me,()=>{O(w,!t(w))}),x("click",be,()=>{O(E,!t(E))}),x("click",Se,()=>{O(B,!t(B))}),x("click",ce,()=>{O(U,!t(U))}),x("click",Ve,()=>{O(P,!t(P))}),x("click",Q,()=>{O(S,!t(S))}),x("click",xt,()=>{O(_,!t(_))}),x("click",ea,()=>{O(z,!t(z))}),x("click",Rt,()=>{O(R,!t(R))}),x("click",Ee,()=>{O(L,!t(L))}),x("click",It,()=>{O(D,!t(D))}),f(a,T),$t()}aa(["click","input"]);var Qv=g('<span class="text-[9px] bg-white/6 text-slate-500 px-2 py-0.5 rounded-full"> </span>'),$v=g('<span class="text-[9px] text-slate-600 font-mono"> </span>'),eh=g('<div class="w-2.5 h-2.5 rounded-full border border-white/10 shrink-0"></div>'),th=g('<div class="flex items-center gap-1 bg-white/4 rounded px-1.5 py-0.5"><!> <span class="text-[8px] font-mono text-slate-600"> </span></div>'),ah=g('<span class="text-[8px] text-slate-600 px-1.5 py-0.5"> </span>'),oh=g('<div class="px-4 pb-3 flex flex-wrap gap-1"><!> <!></div>'),sh=g('<div class="group rounded-xl border border-white/8 bg-white/4 hover:bg-white/6 hover:border-white/14 transition-all overflow-hidden"><div class="flex items-start gap-3 p-4"><span class="text-2xl leading-none shrink-0 mt-0.5"> </span> <div class="flex-1 min-w-0"><div class="text-[12px] font-bold text-slate-200"> </div> <div class="text-[10px] text-slate-400 mt-0.5 leading-relaxed"> </div> <div class="flex items-center gap-2 mt-2"><!> <!></div></div> <button> </button></div> <!></div>'),rh=g(`<div class="p-4 space-y-5 overflow-y-auto flex-1 h-full"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Theme presets</div> <p class="text-[11px] text-slate-400 leading-relaxed">Apply a curated set of overrides with one click. Existing overrides outside the theme's scope are preserved.</p> <div class="space-y-2"></div></div>`);function nh(a,e){Qt(e,!0);var o=rh(),n=r(s(o),4);re(n,21,()=>Ii,l=>l.id,(l,i)=>{const c=u(()=>Object.keys(t(i).overrides).length);var d=sh(),p=s(d),m=s(p),h=s(m),v=r(m,2),y=s(v),k=s(y),w=r(y,2),E=s(w),B=r(w,2),U=s(B);{var P=A=>{var T=Bt(),N=de(T);re(N,16,()=>t(i).tags,$=>$,($,Ge)=>{var te=Qv(),ge=s(te);C(()=>b(ge,Ge)),f($,te)}),f(A,T)};I(U,A=>{t(i).tags&&A(P)})}var S=r(U,2);{var _=A=>{var T=$v(),N=s(T);C(()=>b(N,`${t(c)??""} overrides`)),f(A,T)};I(S,A=>{t(c)>0&&A(_)})}var z=r(v,2),L=s(z),R=r(p,2);{var D=A=>{var T=oh(),N=s(T);re(N,17,()=>Object.entries(t(i).overrides).slice(0,5),([te,ge])=>te,(te,ge)=>{var Pe=u(()=>Pa(t(ge),2));let ve=()=>t(Pe)[0],me=()=>t(Pe)[1];var je=th(),$e=s(je);{var tt=ye=>{var W=eh();C(()=>lt(W,`background: ${me()}`)),f(ye,W)},M=u(()=>ve().includes("color")||ve().includes("source"));I($e,ye=>{t(M)&&ye(tt)})}var J=r($e,2),be=s(J);C(ye=>b(be,ye),[()=>ve().replace("--sf-","")]),f(te,je)});var $=r(N,2);{var Ge=te=>{var ge=ah(),Pe=s(ge);C(()=>b(Pe,`+${t(c)-5} more`)),f(te,ge)};I($,te=>{t(c)>5&&te(Ge)})}f(A,T)};I(R,A=>{t(c)>0&&A(D)})}C(()=>{b(h,t(i).icon),b(k,t(i).name),b(E,t(i).blurb),Ye(z,1,`px-3 py-1.5 rounded-lg text-[11px] font-bold transition-all cursor-pointer shrink-0 ${t(i).id==="default"?"border border-rose-500/30 text-rose-400 hover:bg-rose-500/10":"bg-indigo-600/20 border border-indigo-500/30 text-indigo-300 hover:bg-indigo-600/30"}`),b(L,t(i).id==="default"?"Reset all":"Apply")}),x("click",z,()=>e.onApplyTheme(t(i))),f(l,d)}),f(a,o),$t()}aa(["click"]);var lh=g('<!> <span class="text-emerald-400">Link copied!</span>',1),ih=g("<!> Copy shareable link",1),ch=g('<div class="p-4 space-y-4 overflow-y-auto flex-1 h-full"><div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">Export</div> <p class="text-[11px] text-slate-400 leading-relaxed"> </p></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[11px] font-bold text-slate-300 hover:bg-white/8 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!></button> <div><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">CSS output</div> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5"><button>@layer</button> <button>:root</button></div></div> <div class="relative"><pre class="bg-[#06060a] border border-white/8 rounded-xl p-4 text-[10px] font-mono text-slate-300 overflow-x-auto max-h-80 whitespace-pre-wrap"> </pre> <div class="absolute top-2 right-2 flex gap-1"><button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Copy to clipboard"><!></button> <button class="p-1.5 rounded-lg bg-white/5 hover:bg-white/12 text-slate-400 hover:text-white transition-all cursor-pointer border border-white/8" title="Download .css"><!></button></div></div> <button class="w-full flex items-center justify-center gap-2 py-2 rounded-lg border border-white/8 bg-white/4 text-[10px] font-bold text-slate-400 hover:bg-white/8 hover:text-slate-200 transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"><!> Download W3C Design Tokens (.json)</button> <div class="rounded-lg bg-indigo-500/8 border border-indigo-500/15 p-3 space-y-2"><div class="text-[10px] font-bold text-indigo-300">Usage</div> <div class="text-[10px] text-slate-400 leading-relaxed">Paste this CSS into your project after the SLASHED import.</div> <pre class="text-[9px] font-mono text-slate-500 bg-black/30 rounded p-2 overflow-x-auto"></pre></div></div>');function dh(a,e){Qt(e,!0);let o=G("layer"),n=G(!1),l=G(!1),i=u(()=>To(e.overrides,{mode:t(o),banner:!0})),c=u(()=>Object.keys(e.overrides).length);async function d(){try{await navigator.clipboard.writeText(t(i)),O(n,!0),setTimeout(()=>{O(n,!1)},2e3)}catch{}}async function p(){try{const M=Tf(e.overrides);await navigator.clipboard.writeText(M),O(l,!0),setTimeout(()=>{O(l,!1)},2e3)}catch{}}function m(){const M=new Blob([t(i)],{type:"text/css"}),J=URL.createObjectURL(M),be=document.createElement("a");be.href=J,be.download="slashed-overrides.css",be.click(),URL.revokeObjectURL(J)}function h(M){return M.includes("color")||M.includes("scrim-color")||M.includes("shadow-color")?"color":M.includes("duration")||M.includes("delay")||M.includes("transition-duration")?"duration":M.includes("radius")||M.includes("space")||M.includes("size")||M.includes("width")||M.includes("height")||M.includes("gap")||M.includes("blur")||M.includes("text-")||M.includes("leading")||M.includes("tracking")?"dimension":M.includes("font-family")||M.includes("font-mono")||M.includes("font-body")||M.includes("font-heading")||M.includes("font-code")?"fontFamily":M.includes("font-weight")||M.includes("weight")?"fontWeight":"string"}function v(){const M={};for(const[ke,He]of Object.entries(e.overrides)){const st=ke.replace(/^--sf-/,"").replace(/-/g,".");M[st]={$value:He,$type:h(ke)}}const J=JSON.stringify({$schema:"https://design-tokens.github.io/community-group/format/",...M},null,2),be=new Blob([J],{type:"application/json"}),ye=URL.createObjectURL(be),W=document.createElement("a");W.href=ye,W.download="slashed-tokens.w3c.json",W.click(),URL.revokeObjectURL(ye)}var y=ch(),k=s(y),w=r(s(k),2),E=s(w),B=r(k,2),U=s(B);{var P=M=>{var J=lh(),be=de(J);Mo(be,{class:"w-3 h-3 text-emerald-400"}),f(M,J)},S=M=>{var J=ih(),be=de(J);Td(be,{class:"w-3 h-3"}),f(M,J)};I(U,M=>{t(l)?M(P):M(S,-1)})}var _=r(B,2),z=r(s(_),2),L=s(z),R=r(L,2),D=r(_,2),A=s(D),T=s(A),N=r(A,2),$=s(N),Ge=s($);{var te=M=>{Mo(M,{class:"w-3 h-3 text-emerald-400"})},ge=M=>{Fr(M,{class:"w-3 h-3"})};I(Ge,M=>{t(n)?M(te):M(ge,-1)})}var Pe=r($,2),ve=s(Pe);jr(ve,{class:"w-3 h-3"});var me=r(D,2),je=s(me);jr(je,{class:"w-3 h-3"});var $e=r(me,2),tt=r(s($e),4);tt.textContent=`@import 'slashed/slashed.full.css';
+@import './slashed-overrides.css';`,C(()=>{b(E,t(c)>0?`${t(c)} override${t(c)!==1?"s":""} ready to export.`:"No overrides yet. Customise tokens, then export."),B.disabled=t(c)===0,Ye(L,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="layer"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),Ye(R,1,`flex-1 py-1.5 rounded-md text-[11px] font-bold transition-all cursor-pointer ${t(o)==="root"?"bg-indigo-600 text-white":"text-slate-400 hover:text-slate-200"}`),b(T,t(i)||"/* No overrides */"),me.disabled=t(c)===0}),x("click",B,p),x("click",L,()=>{O(o,"layer")}),x("click",R,()=>{O(o,"root")}),x("click",$,d),x("click",Pe,m),x("click",me,v),f(a,y),$t()}aa(["click"]);const fh=JSON.parse(`[{"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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 <img class=\\"sf-bg\\"> or as a wrapper with a nested > img / > video / > picture.","optional":false,"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":false,"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":false,"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":false,"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":false,"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 <a>.","optional":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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 <input>.","optional":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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":false,"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 <html> (or a subtree) so color tokens transition smoothly when [data-theme] changes. Duration controlled by --sf-theme-transition-duration.","optional":false,"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":false,"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 <body>.","optional":false,"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":false,"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":false,"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":true,"layer":"slashed.themes"}]`),uh={classes:fh},ph={generatedBy:"configurator/scripts/sync-api.mjs",source:"docs/api-index.json",tokensHash:"99d86a47c17a",bundles:["full","optimal","optimal-components","optimal-utilities"],counts:{tokens:691,byTier:{PUBLIC:635,"PUBLIC-ADVANCED":55,INTERNAL:1},byCategory:{"Layout tokens":54,"Core tokens":608,"Macro tokens":23,"Component tokens":6}}},mh=JSON.parse(`[{"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <em> inside body text (italic by default). Override to suppress italics if your typeface has no italic variant.","value":"italic","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <strong> 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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <code> and <pre>. Usually slightly smaller than body text so monospace doesn't feel oversized.","value":"0.875em","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-action. Enables smooth CSS transitions when toggling between light and dark mode; without <color> registration the browser cannot interpolate and transitions snap at 50%.","value":"oklch(0.70 0.198 235)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Secondary interactive color for supporting actions and secondary buttons.","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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":"Base color at pressed/active brightness.","value":"var(--sf-color-base-xdark)","aliasOf":"--sf-color-base-xdark","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":"Base color at hover brightness.","value":"var(--sf-color-base-darker)","aliasOf":"--sf-color-base-darker","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Hover fills, badge backgrounds.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-100), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-200), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Borders on light backgrounds.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-300), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Disabled fills.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-400), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"color-mix(in oklab, var(--sf-color-text) var(--sf-palette-mix-50), var(--sf-color-base))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade — the 'pure' hue.","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade. Text on light surfaces.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-600), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-700), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-800), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 shade.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-900), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"color-mix(in oklab, var(--sf-color-base) var(--sf-palette-mix-950), var(--sf-color-text))","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.10)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.30)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.05)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.50)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint.","value":"oklch(from var(--sf-color-base) l c h / 0.80)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-darker","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":"Deep base shade.","value":"var(--sf-color-base-600)","aliasOf":"--sf-color-base-600","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 tint for ghost-button hover backgrounds.","value":"var(--sf-color-base-a5)","aliasOf":"--sf-color-base-a5","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-lighter","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 shade.","value":"var(--sf-color-base-400)","aliasOf":"--sf-color-base-400","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 fill.","value":"var(--sf-color-base-a30)","aliasOf":"--sf-color-base-a30","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-base.","value":"oklch(0.22 0.003 250)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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 lightness source for the base color.","note":"OKLCH lightness source for the base color.","value":"oklch(0.96 0.006 250)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":"Lightest base tint.","value":"var(--sf-color-base-a10)","aliasOf":"--sf-color-base-a10","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-superdark","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 shade.","value":"var(--sf-color-base-950)","aliasOf":"--sf-color-base-950","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-superlight","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-white base shade.","value":"var(--sf-color-base-50)","aliasOf":"--sf-color-base-50","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-xdark","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":"Extra-dark base shade.","value":"var(--sf-color-base-800)","aliasOf":"--sf-color-base-800","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]},{"name":"--sf-color-base-xlight","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":"Extra-light base shade.","value":"var(--sf-color-base-200)","aliasOf":"--sf-color-base-200","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <code> elements. Usually a subtle tint of the inset surface.","value":"var(--sf-color-inset)","aliasOf":"--sf-color-inset","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-danger.","value":"oklch(0.71 0.198 12)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-info.","value":"oklch(0.71 0.162 235)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <mark> highlights. Adapts automatically in dark mode.","note":"Background color for highlighted <mark> elements.","value":"oklch(from var(--sf-color-warning) l c h / 0.25)","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <mark> elements.","value":"inherit","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-neutral.","value":"oklch(0.69 0.0225 260)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Raw primary palette token aliased from the action role by default. Override to decouple primary from action.","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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-primary.","value":"oklch(0.715 0.243 264)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-secondary.","value":"oklch(0.84 0.036 264)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-success.","value":"oklch(0.70 0.144 145)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":"Elevated surface color (e.g. card background one step above page background).","value":"var(--sf-color-base)","aliasOf":"--sf-color-base","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-tertiary.","value":"oklch(0.74 0.198 295)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <color> so scoped [data-theme=\\"dark\\"] sections inherit correct absolute values rather than an unresolved var() text string.","note":"Registered <color> dark counterpart of --sf-color-warning.","value":"oklch(0.65 0.153 80)","aliasOf":null,"registered":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<color>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":true,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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 <h1>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>. Typically slightly negative at large sizes.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>. Tighter than body to avoid excessive whitespace at large sizes.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>. 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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h1>.","value":"var(--sf-text-4xl)","aliasOf":"--sf-text-4xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-tracking-tight)","aliasOf":"--sf-tracking-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-leading-tight)","aliasOf":"--sf-leading-tight","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h2>.","value":"var(--sf-text-3xl)","aliasOf":"--sf-text-3xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h3>.","value":"var(--sf-text-2xl)","aliasOf":"--sf-text-2xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-leading-snug)","aliasOf":"--sf-leading-snug","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h4>.","value":"var(--sf-text-xl)","aliasOf":"--sf-text-xl","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-tracking-normal)","aliasOf":"--sf-tracking-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h5>.","value":"var(--sf-text-l)","aliasOf":"--sf-text-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-font-weight-heading)","aliasOf":"--sf-font-weight-heading","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-tracking-wide)","aliasOf":"--sf-tracking-wide","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-leading-normal)","aliasOf":"--sf-leading-normal","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>. Default none.","value":"none","aliasOf":null,"registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <h6>.","value":"var(--sf-text-m)","aliasOf":"--sf-text-m","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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 <color> 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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<integer>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <figure> elements inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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 <hr> rules inside .prose.","value":"var(--sf-space-l)","aliasOf":"--sf-space-l","registered":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<length>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":true,"syntax":"<number>","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":true,"syntax":"*","fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"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":false,"syntax":null,"fallbackOnly":false,"optional":false,"layer":"slashed.tokens","bundles":["full","optimal","optimal-components","optimal-utilities"]}]`),Bs={_sync:ph,tokens:mh};var Zn=g('<div class="text-[11px] text-slate-600 py-8 text-center"> </div>'),Jn=g('<div class="text-[8px] text-slate-600 uppercase tracking-widest pt-2 pb-1 font-semibold"> </div>'),vh=g("<span> </span>"),hh=g('<span class="text-[8px] text-slate-600 border border-white/10 px-1 rounded">optional</span>'),Xn=g('<div class="text-[9px] text-slate-500 mt-0.5 leading-relaxed"> </div>'),gh=g('<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[11px] font-semibold text-slate-200"> </span> <!> <!></div> <!></div> <button title="Copy selector" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>'),Qn=g('<!> <div class="space-y-0.5"></div>',1),$n=g('<div class="mt-4 mb-1"><div class="text-[9px] font-bold text-slate-500 uppercase tracking-widest py-1 border-b border-white/6"> </div></div> <!>',1),bh=g('<span class="text-[8px] font-bold text-indigo-400 uppercase">knob</span>'),yh=g('<span class="text-[8px] text-amber-500/80 border border-amber-500/20 px-1 rounded">advanced</span>'),xh=g('<div class="font-mono text-[9px] text-slate-600 mt-0.5"> </div>'),kh=g('<div class="flex items-start gap-2 group py-1 px-2 rounded-lg hover:bg-white/4 transition-colors"><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 flex-wrap"><span class="font-mono text-[10px] font-semibold text-slate-200"> </span> <!> <!></div> <!> <!></div> <button title="Copy var()" class="shrink-0 opacity-40 hover:opacity-100 transition-opacity cursor-pointer p-1 rounded hover:bg-white/8"><!></button></div>'),wh=g('<div class="flex flex-col h-full min-h-0"><div class="px-4 pt-4 pb-2 space-y-2 shrink-0"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Classes &amp; Variables</div> <input type="search" placeholder="Search classes, tokens, descriptions…" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"/> <div class="flex bg-white/4 border border-white/8 rounded-lg p-0.5 gap-0.5"><button> </button> <button> </button></div></div> <div class="flex-1 min-h-0 overflow-y-auto px-4 pb-4"><!></div></div>');function _h(a,e){Qt(e,!0);const o=uh.classes,n=Bs.tokens.filter(N=>N.tier==="PUBLIC"||N.tier==="PUBLIC-ADVANCED");let l=G(""),i=G("classes"),c=G(""),d=u(()=>()=>{const N=t(l).trim().toLowerCase();return N?o.filter($=>$.name.toLowerCase().includes(N)||$.selector?.toLowerCase().includes(N)||$.description?.toLowerCase().includes(N)||$.group?.toLowerCase().includes(N)):o}),p=u(()=>()=>{const N=t(l).trim().toLowerCase();return N?n.filter($=>$.name.toLowerCase().includes(N)||$.description?.toLowerCase().includes(N)||$.group?.toLowerCase().includes(N)||$.value?.toLowerCase().includes(N)):n});function m(N){const $=new Map;for(const Ge of N){const te=Ge.category||"Other",ge=Ge.group||"";$.has(te)||$.set(te,new Map);const Pe=$.get(te);Pe.has(ge)||Pe.set(ge,[]),Pe.get(ge).push(Ge)}return $}let h=u(()=>m(t(d)())),v=u(()=>m(t(p)())),y=null;async function k(N){try{await navigator.clipboard.writeText(N),O(c,N,!0),y&&clearTimeout(y),y=setTimeout(()=>{t(c)===N&&O(c,""),y=null},1500)}catch{}}const w={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 E=wh(),B=s(E),U=r(s(B),2),P=r(U,2),S=s(P),_=s(S),z=r(S,2),L=s(z),R=r(B,2),D=s(R);{var A=N=>{var $=Bt(),Ge=de($);{var te=ve=>{var me=Zn(),je=s(me);C(()=>b(je,`No classes match "${t(l)??""}"`)),f(ve,me)},ge=u(()=>t(d)().length===0),Pe=ve=>{var me=Bt(),je=de(me);re(je,17,()=>[...t(h).entries()],([$e,tt])=>$e,($e,tt)=>{var M=u(()=>Pa(t(tt),2));let J=()=>t(M)[0],be=()=>t(M)[1];var ye=$n(),W=de(ye),ke=s(W),He=s(ke),st=r(W,2);re(st,17,()=>[...be().entries()],([Se,Be])=>Se,(Se,Be)=>{var ae=u(()=>Pa(t(Be),2));let q=()=>t(ae)[0],we=()=>t(ae)[1];var fe=Qn(),ce=de(fe);{var xe=De=>{var Ae=Jn(),Ie=s(Ae);C(()=>b(Ie,q())),f(De,Ae)};I(ce,De=>{q()&&De(xe)})}var ze=r(ce,2);re(ze,21,we,De=>De.name,(De,Ae)=>{var Ie=gh(),Ve=s(Ie),nt=s(Ve),ct=s(nt),dt=s(ct),Ot=r(ct,2);{var mt=St=>{var Et=vh(),it=s(Et);C(()=>{Ye(Et,1,`text-[8px] font-bold uppercase ${w[t(Ae).kind]??"text-slate-500"}`),b(it,t(Ae).kind)}),f(St,Et)};I(Ot,St=>{t(Ae).kind&&St(mt)})}var Q=r(Ot,2);{var Oe=St=>{var Et=hh();f(St,Et)};I(Q,St=>{t(Ae).optional&&St(Oe)})}var Me=r(nt,2);{var at=St=>{var Et=Xn(),it=s(Et);C(()=>b(it,t(Ae).description)),f(St,Et)};I(Me,St=>{t(Ae).description&&St(at)})}var ft=r(Ve,2),_t=s(ft);{var xt=St=>{Mo(St,{class:"w-3 h-3 text-emerald-400"})},Nt=St=>{Fr(St,{class:"w-3 h-3 text-slate-500"})};I(_t,St=>{t(c)===t(Ae).selector?St(xt):St(Nt,-1)})}C(()=>b(dt,t(Ae).selector)),x("click",ft,()=>k(t(Ae).selector)),f(De,Ie)}),f(Se,fe)}),C(()=>b(He,J())),f($e,ye)}),f(ve,me)};I(Ge,ve=>{t(ge)?ve(te):ve(Pe,-1)})}f(N,$)},T=N=>{var $=Bt(),Ge=de($);{var te=ve=>{var me=Zn(),je=s(me);C(()=>b(je,`No tokens match "${t(l)??""}"`)),f(ve,me)},ge=u(()=>t(p)().length===0),Pe=ve=>{var me=Bt(),je=de(me);re(je,17,()=>[...t(v).entries()],([$e,tt])=>$e,($e,tt)=>{var M=u(()=>Pa(t(tt),2));let J=()=>t(M)[0],be=()=>t(M)[1];var ye=$n(),W=de(ye),ke=s(W),He=s(ke),st=r(W,2);re(st,17,()=>[...be().entries()],([Se,Be])=>Se,(Se,Be)=>{var ae=u(()=>Pa(t(Be),2));let q=()=>t(ae)[0],we=()=>t(ae)[1];var fe=Qn(),ce=de(fe);{var xe=De=>{var Ae=Jn(),Ie=s(Ae);C(()=>b(Ie,q())),f(De,Ae)};I(ce,De=>{q()&&De(xe)})}var ze=r(ce,2);re(ze,21,we,De=>De.name,(De,Ae)=>{var Ie=kh(),Ve=s(Ie),nt=s(Ve),ct=s(nt),dt=s(ct),Ot=r(ct,2);{var mt=it=>{var Gt=bh();f(it,Gt)};I(Ot,it=>{t(Ae).role==="knob"&&it(mt)})}var Q=r(Ot,2);{var Oe=it=>{var Gt=yh();f(it,Gt)};I(Q,it=>{t(Ae).tier==="PUBLIC-ADVANCED"&&it(Oe)})}var Me=r(nt,2);{var at=it=>{var Gt=xh(),ea=s(Gt);C(()=>b(ea,t(Ae).value)),f(it,Gt)};I(Me,it=>{t(Ae).value&&it(at)})}var ft=r(Me,2);{var _t=it=>{var Gt=Xn(),ea=s(Gt);C(()=>b(ea,t(Ae).description)),f(it,Gt)};I(ft,it=>{t(Ae).description&&it(_t)})}var xt=r(Ve,2),Nt=s(xt);{var St=it=>{Mo(it,{class:"w-3 h-3 text-emerald-400"})},Et=it=>{Fr(it,{class:"w-3 h-3 text-slate-500"})};I(Nt,it=>{t(c)===`var(${t(Ae).name})`?it(St):it(Et,-1)})}C(()=>b(dt,t(Ae).name)),x("click",xt,()=>k(`var(${t(Ae).name})`)),f(De,Ie)}),f(Se,fe)}),C(()=>b(He,J())),f($e,ye)}),f(ve,me)};I(Ge,ve=>{t(ge)?ve(te):ve(Pe,-1)})}f(N,$)};I(D,N=>{t(i)==="classes"?N(A):N(T,-1)})}C((N,$)=>{Ye(S,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="classes"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),b(_,`CSS classes (${N??""})`),Ye(z,1,`flex-1 py-1.5 rounded text-[10px] font-bold transition-all cursor-pointer ${t(i)==="tokens"?"bg-indigo-600/30 text-indigo-200 border border-indigo-500/30":"text-slate-500 hover:text-slate-300"}`),b(L,`CSS vars (${$??""})`)},[()=>t(d)().length,()=>t(p)().length]),ai(U,()=>t(l),N=>O(l,N)),x("click",S,()=>{O(i,"classes")}),x("click",z,()=>{O(i,"tokens")}),f(a,E),$t()}aa(["click"]);var Ch=g('<div class="w-4 h-4 rounded-sm border border-white/10 shrink-0"></div>'),Oh=g('<div class="w-4 h-4 shrink-0"></div>'),Sh=g('<div class="text-[9px] text-slate-600 truncate"> </div>'),Lh=g('<input 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"/>'),Ph=g('<span class="text-indigo-300"> </span>'),Ih=g('<button class="text-[10px] font-mono text-slate-500 hover:text-slate-200 truncate max-w-28 text-right cursor-pointer transition-colors"><!></button>'),Bh=g('<button class="text-[9px] text-slate-600 hover:text-rose-400 transition-colors cursor-pointer opacity-0 group-hover:opacity-100 shrink-0">✕</button>'),Uh=g('<div><div></div> <!> <div class="flex-1 min-w-0"><div class="text-[10px] font-mono text-slate-400 truncate"> </div> <!></div> <!> <!></div>');function Ui(a,e){Qt(e,!0);let o=G(!1);function n(A){const T=A.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";const N=A.syntax?.toLowerCase()??"";return N.includes("number")||N.includes("length")||N.includes("integer")?"number":"text"}let l=u(()=>e.overrideValue??e.token.value),i=u(()=>e.overrideValue!==void 0),c=u(()=>n(e.token)),d=u(()=>e.token.name.replace("--sf-",""));function p(A){return Fa.value,ho(A)||ho(`var(${e.token.name})`)||A}let m=u(()=>t(c)==="color"?p(t(l)):"");var h=Uh(),v=s(h),y=r(v,2);{var k=A=>{var T=Ch();C(()=>lt(T,`background: ${t(m)}`)),f(A,T)},w=A=>{var T=Oh();f(A,T)};I(y,A=>{t(c)==="color"?A(k):A(w,-1)})}var E=r(y,2),B=s(E),U=s(B),P=r(B,2);{var S=A=>{var T=Sh(),N=s(T);C(()=>b(N,e.token.description)),f(A,T)};I(P,A=>{e.token.description&&A(S)})}var _=r(E,2);{var z=A=>{var T=Lh();C(()=>Xt(T,t(l))),lo("blur",T,N=>{const $=N.target.value.trim();$&&$!==e.token.value?e.onSet($):(!$||$===e.token.value)&&e.onReset(),O(o,!1)}),x("keydown",T,N=>{N.key==="Enter"&&N.currentTarget.blur(),N.key==="Escape"&&O(o,!1)}),f(A,T)},L=A=>{var T=Ih(),N=s(T);{var $=te=>{var ge=Ph(),Pe=s(ge);C(()=>b(Pe,t(l))),f(te,ge)},Ge=te=>{var ge=lr();C(()=>b(ge,t(l))),f(te,ge)};I(N,te=>{t(i)?te($):te(Ge,-1)})}C(()=>Y(T,"title",t(l))),x("click",T,()=>{O(o,!0)}),f(A,T)};I(_,A=>{t(o)?A(z):A(L,-1)})}var R=r(_,2);{var D=A=>{var T=Bh();x("click",T,function(...N){e.onReset?.apply(this,N)}),f(A,T)};I(R,A=>{t(i)&&A(D)})}C(()=>{Ye(h,1,`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors group ${t(i)?"bg-indigo-500/8 border border-indigo-500/15":"hover:bg-white/4"}`),Ye(v,1,`w-1.5 h-1.5 rounded-full shrink-0 ${t(i)?"bg-indigo-500":"bg-transparent"}`),Y(B,"title",e.token.name),b(U,t(d))}),f(a,h),$t()}aa(["keydown","click"]);var zh=g('<span class="text-[9px] font-bold text-indigo-400 font-mono"> </span>'),Ah=g('<p class="text-[11px] text-slate-600 text-center py-8">No tokens found</p>'),Eh=g('<p class="text-[10px] text-slate-600 text-center py-2"> </p>'),Rh=g('<div class="space-y-0.5"><!> <!></div>'),Th=g('<div class="p-4 space-y-4"><div class="flex items-center justify-between"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest capitalize"> </div> <!></div> <input type="text" 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"/> <!></div>');function Dh(a,e){Qt(e,!0);let o=G(""),n=u(()=>()=>{const U=e.patterns??[e.domain];return e.tokens.filter(P=>U.some(S=>P.name.includes(S))&&P.tier!=="INTERNAL")}),l=u(()=>()=>{if(!t(o))return t(n)();const U=t(o).toLowerCase();return t(n)().filter(P=>P.name.toLowerCase().includes(U)||P.description?.toLowerCase().includes(U))}),i=u(()=>t(l)().filter(U=>U.name in e.overrides).length);var c=Th(),d=s(c),p=s(d),m=s(p),h=r(p,2);{var v=U=>{var P=zh(),S=s(P);C(()=>b(S,`${t(i)??""} modified`)),f(U,P)};I(h,U=>{t(i)>0&&U(v)})}var y=r(d,2),k=r(y,2);{var w=U=>{var P=Ah();f(U,P)},E=u(()=>t(l)().length===0),B=U=>{var P=Rh(),S=s(P);re(S,17,()=>t(l)().slice(0,60),R=>R.name,(R,D)=>{Ui(R,{get token(){return t(D)},get overrideValue(){return e.overrides[t(D).name]},onSet:A=>e.onSet(t(D).name,A),onReset:()=>e.onReset(t(D).name)})});var _=r(S,2);{var z=R=>{var D=Eh(),A=s(D);C(T=>b(A,`${T??""} more — refine your search`),[()=>t(l)().length-60]),f(R,D)},L=u(()=>t(l)().length>60);I(_,R=>{t(L)&&R(z)})}f(U,P)};I(k,U=>{t(E)?U(w):U(B,-1)})}C(()=>{b(m,`${e.domain??""} tokens`),Y(y,"placeholder",`Search ${e.domain} tokens…`),Xt(y,t(o))}),x("input",y,U=>{O(o,U.target.value,!0)}),f(a,c),$t()}aa(["input"]);var el=g('<div class="w-1 h-1 bg-white rounded-sm"></div>'),Mh=g('<div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-rose-800"></div> <span class="text-[8px] text-slate-600"> </span></div>'),Nh=g('<div class="text-center py-8 text-[11px] text-slate-600"> </div>'),Fh=g('<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-amber-600/40 rounded-full"></div>'),jh=g('<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-rose-800/40 rounded-full"></div>'),Gh=g('<div class="relative"><!> <!> <!></div>'),Hh=g('<div class="space-y-0.5 px-1"></div>'),qh=g('<div class="flex flex-col h-full min-h-0"><div class="px-3 pt-3 pb-2 space-y-2 shrink-0"><input type="text" placeholder="Search tokens…" 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"/> <div class="flex items-center gap-3"><button><div><!></div> </button> <button><div><!></div> </button> <span class="ml-auto text-[9px] text-slate-700 font-mono"> </span></div> <div class="flex gap-3"><div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-slate-500"></div> <span class="text-[8px] text-slate-600"> </span></div> <div class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-amber-600"></div> <span class="text-[8px] text-slate-600"> </span></div> <!></div></div> <div class="w-full h-px bg-white/6 shrink-0"></div> <div class="flex-1 min-h-0 overflow-y-auto py-1"><!></div></div>');function Vh(a,e){Qt(e,!0);const o={PUBLIC:0,"PUBLIC-ADVANCED":1,INTERNAL:2};let n=G(""),l=G(!1),i=G(!1),c=u(()=>e.tokens.filter(W=>e.patterns.some(ke=>W.name.includes(ke))).sort((W,ke)=>{const He=o[W.tier??"INTERNAL"]??2,st=o[ke.tier??"INTERNAL"]??2;return He!==st?He-st:W.name.localeCompare(ke.name)})),d=u(()=>()=>{let W=t(c);if(t(l)||(W=W.filter(ke=>ke.tier!=="INTERNAL")),t(i)&&(W=W.filter(ke=>ke.name in e.overrides)),t(n)){const ke=t(n).toLowerCase();W=W.filter(He=>He.name.toLowerCase().includes(ke)||He.description?.toLowerCase().includes(ke))}return W}),p=u(()=>t(c).filter(W=>W.name in e.overrides).length),m=u(()=>t(c).filter(W=>W.tier==="PUBLIC").length),h=u(()=>t(c).filter(W=>W.tier==="PUBLIC-ADVANCED").length),v=u(()=>t(c).filter(W=>W.tier==="INTERNAL").length);var y=qh(),k=s(y),w=s(k),E=r(w,2),B=s(E),U=s(B),P=s(U);{var S=W=>{var ke=el();f(W,ke)};I(P,W=>{t(i)&&W(S)})}var _=r(U),z=r(B,2),L=s(z),R=s(L);{var D=W=>{var ke=el();f(W,ke)};I(R,W=>{t(l)&&W(D)})}var A=r(L),T=r(z,2),N=s(T),$=r(E,2),Ge=s($),te=r(s(Ge),2),ge=s(te),Pe=r(Ge,2),ve=r(s(Pe),2),me=s(ve),je=r(Pe,2);{var $e=W=>{var ke=Mh(),He=r(s(ke),2),st=s(He);C(()=>b(st,`Internal (${t(v)??""})`)),f(W,ke)};I(je,W=>{t(l)&&W($e)})}var tt=r(k,4),M=s(tt);{var J=W=>{var ke=Nh(),He=s(ke);C(()=>b(He,t(i)?"No modified tokens in this domain":"No tokens found")),f(W,ke)},be=u(()=>t(d)().length===0),ye=W=>{var ke=Hh();re(ke,21,()=>t(d)(),He=>He.name,(He,st)=>{var Se=Gh(),Be=s(Se);{var ae=ce=>{var xe=Fh();f(ce,xe)};I(Be,ce=>{t(st).tier==="PUBLIC-ADVANCED"&&ce(ae)})}var q=r(Be,2);{var we=ce=>{var xe=jh();f(ce,xe)};I(q,ce=>{t(st).tier==="INTERNAL"&&ce(we)})}var fe=r(q,2);Ui(fe,{get token(){return t(st)},get overrideValue(){return e.overrides[t(st).name]},onSet:ce=>e.onSet(t(st).name,ce),onReset:()=>e.onReset(t(st).name)}),f(He,Se)}),f(W,ke)};I(M,W=>{t(be)?W(J):W(ye,-1)})}C(W=>{Xt(w,t(n)),Ye(B,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(i)?"text-indigo-400":"text-slate-600 hover:text-slate-400"}`),Ye(U,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(i)?"bg-indigo-600 border-indigo-500":"border-white/20"}`),b(_,` Modified only ${t(p)>0?`(${t(p)})`:""}`),Y(z,"aria-expanded",t(l)),Ye(z,1,`flex items-center gap-1 text-[9px] font-bold transition-colors cursor-pointer ${t(l)?"text-amber-400":"text-slate-600 hover:text-slate-400"}`),Ye(L,1,`w-2.5 h-2.5 rounded border flex items-center justify-center transition-colors ${t(l)?"bg-amber-600 border-amber-500":"border-white/20"}`),b(A,` Internal (${t(v)??""})`),b(N,`${W??""}/${t(c).length??""}`),b(ge,`Public (${t(m)??""})`),b(me,`Advanced (${t(h)??""})`)},[()=>t(d)().length]),x("input",w,W=>{O(n,W.target.value,!0)}),x("click",B,()=>{O(i,!t(i))}),x("click",z,()=>{O(l,!t(l))}),f(a,y),$t()}aa(["input","click"]);var tl=g('<option style="background:#16161e;"> </option>'),Kh=g('<div class="flex items-center gap-2 p-2.5 bg-white/4"><span class="text-[15px] font-mono font-bold text-slate-100"> </span> <span> </span> <div class="flex-1"></div> <div class="grid grid-cols-2 gap-x-2 gap-y-0.5 text-[9px]"><span> </span> <span> </span> <span> </span> <span> </span></div></div>'),Wh=g('<div class="p-2.5 bg-white/4 text-[10px] text-slate-500">Waiting for live preview…</div>'),Yh=g("<button> </button>"),Zh=g('<p class="text-[9px] text-slate-600">Pick an editable brand/status <span class="font-mono">(base)</span> color as the foreground to enable auto-fix.</p>'),Jh=g('<p class="text-[9px] text-emerald-300"> </p>'),Xh=g('<div class="flex items-center gap-2"><span class="w-7 h-7 rounded border border-white/10 shrink-0"></span> <div class="flex-1 min-w-0"><div class="text-[9px] font-mono text-slate-400 truncate"> </div> <div class="text-[9px] text-emerald-300"> </div></div> <button class="px-2.5 py-1 rounded-lg bg-indigo-600/25 border border-indigo-500/40 text-indigo-200 text-[10px] font-bold cursor-pointer hover:bg-indigo-600/35 shrink-0">Apply</button></div>'),Qh=g('<p class="text-[9px] text-slate-600"> </p>'),$h=g('<div class="grid grid-cols-[1fr_auto_1fr] gap-2 items-end"><div><div class="text-[9px] text-slate-500 mb-1">Foreground</div> <select class="w-full 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"></select></div> <button title="Swap" class="mb-0.5 px-2 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-slate-200 hover:bg-white/5 cursor-pointer text-[12px]">⇄</button> <div><div class="text-[9px] text-slate-500 mb-1">Background</div> <select class="w-full 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"></select></div></div> <div class="rounded-xl border border-white/8 overflow-hidden"><div class="h-24 flex items-center justify-center"><span class="text-[26px] font-bold">Aa Bb Cc</span></div> <!></div> <div class="rounded-xl bg-white/4 border border-white/8 p-3 space-y-2"><div class="flex items-center justify-between"><span class="text-[10px] font-bold text-slate-300">Auto-fix to pass <span class="text-slate-600 font-normal"> </span></span> <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5"></div></div> <!></div>',1),eg=g('<th class="p-1 font-mono font-semibold text-slate-500 text-center whitespace-nowrap"> </th>'),tg=g('<td class="p-0.5"><button> </button></td>'),ag=g('<td class="p-0.5 text-slate-700 text-center">·</td>'),og=g('<tr><td class="p-1 font-mono font-semibold text-slate-500 whitespace-nowrap pr-2"> </td><!></tr>'),sg=g('<p class="text-[10px] text-slate-600">Foreground (rows) × background (cols). Click a cell to load it above.</p> <div class="overflow-x-auto"><table class="border-collapse text-[9px]"><thead><tr><th class="p-1"></th><!></tr></thead><tbody></tbody></table></div>',1),rg=g('<div class="p-4 space-y-6"><section class="space-y-1"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast checker</div> <p class="text-[10px] text-slate-600 leading-relaxed">Live WCAG ratios computed from the actual rendered preview colors — including derived steps and your overrides.</p></section> <section class="space-y-3"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Pair checker</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section> <div class="h-px bg-white/6"></div> <section class="space-y-2"><button class="w-full flex items-center justify-between cursor-pointer"><div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Contrast matrix</div> <span class="text-[10px] text-slate-500"> </span></button> <!></section></div>');function ng(a,e){Qt(e,!0);const o=[{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"}],n=[{label:"Surface",expr:"var(--sf-color-surface)"},{label:"Bg",expr:"var(--sf-color-bg)"},{label:"Border",expr:"var(--sf-color-border)"}],l=[{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)"}],i=l.flatMap(J=>[{label:`${J.key} (base)`,expr:`var(--sf-color-${J.key})`,editKey:J.key},{label:`${J.key}-100`,expr:`var(--sf-color-${J.key}-100)`},{label:`${J.key}-600`,expr:`var(--sf-color-${J.key}-600)`},{label:`${J.key}-900`,expr:`var(--sf-color-${J.key}-900)`}]),c=[...o,...n,...i],d=Object.fromEntries(l.map(J=>[J.key,J])),p=[{label:"text",expr:"var(--sf-color-text)"},{label:"white",expr:"#ffffff"},{label:"black",expr:"#000000"},{label:"primary",expr:"var(--sf-color-primary)",editKey:"primary"}],m=[{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)"}];let h=G("White"),v=G("primary (base)"),y=G("AA"),k=u(()=>c.find(J=>J.label===t(h))??c[0]),w=u(()=>c.find(J=>J.label===t(v))??c[0]);function E(J,be){Fa.value;const ye=Cs(J),W=Cs(be);return!ye||!W?null:qs(Bo(...ye),Bo(...W))}function B(J){return J>=7?{tag:"AAA",cls:"bg-emerald-500/25 text-emerald-200"}:J>=4.5?{tag:"AA",cls:"bg-emerald-500/15 text-emerald-300"}:J>=3?{tag:"AA-L",cls:"bg-amber-500/20 text-amber-300"}:{tag:"Fail",cls:"bg-rose-500/20 text-rose-300"}}let U=u(()=>E(t(k).expr,t(w).expr));function P(){const J=t(h);O(h,t(v),!0),O(v,J,!0)}function S(J,be){const ye=c.find(ke=>ke.expr===J),W=c.find(ke=>ke.expr===be);ye&&O(h,ye.label,!0),W&&O(v,W.label,!0)}function _(J){return Fa.value,ho(J)||J}let z=G(!1),L=G(!1),R=G(null);function D(){O(R,null);const J=t(k).editKey?d[t(k).editKey]:null;if(!J)return;const be=Nn()==="dark",ye=be?J.srcDark:J.srcLight,W=be?J.defDark:J.defLight,ke=e.overrides[ye]??W,{c:He,h:st,l:Se,valid:Be}=Vs(ke);if(!Be)return;const ae=Cs(t(w).expr);if(!ae)return;const q=Bo(...ae),we=t(y)==="AAA"?7:4.5;let fe=null;for(let Ae=0;Ae<=1.0001;Ae+=.005){const[Ie,Ve,nt]=Fn(Ae,He,st);qs(Bo(Ie,Ve,nt),q)>=we&&(fe===null||Math.abs(Ae-Se)<Math.abs(fe-Se))&&(fe=Ae)}if(fe===null)return;const[ce,xe,ze]=Fn(fe,He,st),De=qs(Bo(ce,xe,ze),q);O(R,{token:ye,value:Ks(fe,He,st),ratio:De},!0)}function A(){t(R)&&(e.onSet(t(R).token,t(R).value),O(R,null))}ha(()=>{if(!t(z)){O(R,null);return}Fa.value,t(h),t(v),t(y),t(k).editKey&&t(U)!==null&&t(U)<(t(y)==="AAA"?7:4.5)?D():O(R,null)});var T=rg(),N=r(s(T),2),$=s(N),Ge=r(s($),2),te=s(Ge),ge=r($,2);{var Pe=J=>{var be=$h(),ye=de(be),W=s(ye),ke=r(s(W),2);re(ke,21,()=>c,Q=>Q.label,(Q,Oe)=>{var Me=tl(),at=s(Me),ft={};C(()=>{b(at,t(Oe).label),ft!==(ft=t(Oe).label)&&(Me.value=(Me.__value=t(Oe).label)??"")}),f(Q,Me)});var He=r(W,2),st=r(He,2),Se=r(s(st),2);re(Se,21,()=>c,Q=>Q.label,(Q,Oe)=>{var Me=tl(),at=s(Me),ft={};C(()=>{b(at,t(Oe).label),ft!==(ft=t(Oe).label)&&(Me.value=(Me.__value=t(Oe).label)??"")}),f(Q,Me)});var Be=r(ye,2),ae=s(Be),q=s(ae),we=r(ae,2);{var fe=Q=>{const Oe=u(()=>B(t(U)));var Me=Kh(),at=s(Me),ft=s(at),_t=r(at,2),xt=s(_t),Nt=r(_t,4),St=s(Nt),Et=s(St),it=r(St,2),Gt=s(it),ea=r(it,2),ia=s(ea),Je=r(ea,2),ut=s(Je);C(Lt=>{b(ft,`${Lt??""}:1`),Ye(_t,1,`text-[10px] font-bold px-2 py-0.5 rounded ${t(Oe).cls}`),b(xt,t(Oe).tag),Ye(St,1,ro(t(U)>=4.5?"text-emerald-300":"text-rose-300")),b(Et,`${t(U)>=4.5?"✓":"✗"} AA normal`),Ye(it,1,ro(t(U)>=3?"text-emerald-300":"text-rose-300")),b(Gt,`${t(U)>=3?"✓":"✗"} AA large`),Ye(ea,1,ro(t(U)>=7?"text-emerald-300":"text-rose-300")),b(ia,`${t(U)>=7?"✓":"✗"} AAA normal`),Ye(Je,1,ro(t(U)>=4.5?"text-emerald-300":"text-rose-300")),b(ut,`${t(U)>=4.5?"✓":"✗"} AAA large`)},[()=>t(U).toFixed(2)]),f(Q,Me)},ce=Q=>{var Oe=Wh();f(Q,Oe)};I(we,Q=>{t(U)!==null?Q(fe):Q(ce,-1)})}var xe=r(Be,2),ze=s(xe),De=s(ze),Ae=r(s(De)),Ie=s(Ae),Ve=r(De,2);re(Ve,20,()=>["AA","AAA"],Q=>Q,(Q,Oe)=>{var Me=Yh(),at=s(Me);C(()=>{Ye(Me,1,`px-2 py-0.5 rounded-md text-[10px] font-bold cursor-pointer ${t(y)===Oe?"bg-white/12 text-white":"text-slate-500 hover:text-slate-300"}`),b(at,Oe)}),x("click",Me,()=>{O(y,Oe,!0)}),f(Q,Me)});var nt=r(ze,2);{var ct=Q=>{var Oe=Zh();f(Q,Oe)},dt=Q=>{var Oe=Jh(),Me=s(Oe);C(()=>b(Me,`Already passes ${t(y)??""}. 🎉`)),f(Q,Oe)},Ot=Q=>{var Oe=Xh(),Me=s(Oe),at=r(Me,2),ft=s(at),_t=s(ft),xt=r(ft,2),Nt=s(xt),St=r(at,2);C((Et,it)=>{lt(Me,Et),b(_t,t(R).value),b(Nt,`→ ${it??""}:1 (${t(y)??""} ✓)`)},[()=>`background:${_(t(R).value)}`,()=>t(R).ratio.toFixed(2)]),x("click",St,A),f(Q,Oe)},mt=Q=>{var Oe=Qh(),Me=s(Oe);C(()=>b(Me,`No lightness of this hue reaches ${t(y)??""} on this background — try a different background or hue.`)),f(Q,Oe)};I(nt,Q=>{t(k).editKey?t(U)!==null&&t(U)>=(t(y)==="AAA"?7:4.5)?Q(dt,1):t(R)?Q(Ot,2):Q(mt,-1):Q(ct)})}C((Q,Oe,Me)=>{lt(ae,Q),lt(q,Oe),b(Ie,`(for ${Me??""} mode)`)},[()=>`background:${_(t(w).expr)}`,()=>`color:${_(t(k).expr)}`,()=>Nn()]),Cn(ke,()=>t(h),Q=>O(h,Q)),x("click",He,P),Cn(Se,()=>t(v),Q=>O(v,Q)),f(J,be)};I(ge,J=>{t(z)&&J(Pe)})}var ve=r(N,4),me=s(ve),je=r(s(me),2),$e=s(je),tt=r(me,2);{var M=J=>{var be=sg(),ye=r(de(be),2),W=s(ye),ke=s(W),He=s(ke),st=r(s(He));re(st,17,()=>m,Be=>Be.label,(Be,ae)=>{var q=eg(),we=s(q);C(()=>b(we,t(ae).label)),f(Be,q)});var Se=r(ke);re(Se,21,()=>p,Be=>Be.label,(Be,ae)=>{var q=og(),we=s(q),fe=s(we),ce=r(we);re(ce,17,()=>m,xe=>xe.label,(xe,ze)=>{const De=u(()=>E(t(ae).expr,t(ze).expr));var Ae=Bt(),Ie=de(Ae);{var Ve=ct=>{const dt=u(()=>B(t(De)));var Ot=tg(),mt=s(Ot),Q=s(mt);C((Oe,Me)=>{Y(mt,"title",Oe),Ye(mt,1,`w-full px-1.5 py-1 rounded font-mono font-bold cursor-pointer ${t(dt).cls}`),b(Q,Me)},[()=>`${t(ae).label} on ${t(ze).label} — ${t(De).toFixed(2)}:1`,()=>t(De).toFixed(1)]),x("click",mt,()=>S(t(ae).expr,t(ze).expr)),f(ct,Ot)},nt=ct=>{var dt=ag();f(ct,dt)};I(Ie,ct=>{t(De)!==null?ct(Ve):ct(nt,-1)})}f(xe,Ae)}),C(()=>b(fe,t(ae).label)),f(Be,q)}),f(J,be)};I(tt,J=>{t(L)&&J(M)})}C(()=>{Y($,"aria-expanded",t(z)),b(te,t(z)?"▲":"▼"),Y(me,"aria-expanded",t(L)),b($e,t(L)?"▲":"▼")}),x("click",$,()=>{O(z,!t(z))}),x("click",me,()=>{O(L,!t(L))}),f(a,T),$t()}aa(["click"]);var lg=g('<div class="h-full overflow-y-auto"><!></div>'),ig=g('<span class="ml-0.5 text-[8px] bg-indigo-600 text-white rounded-full px-1.5 py-0.5 leading-none font-black"> </span>'),cg=g('<div class="flex flex-col h-full min-h-0"><div class="flex-1 min-h-0 overflow-hidden"><!></div> <div class="shrink-0 border-t border-white/8 bg-[#0a0a10] flex"><button><!> Controls</button> <div class="w-px bg-white/8"></div> <button><!> All tokens <!></button></div></div>');function zi(a,e){Qt(e,!0);const o=new Set(["home","themes","wcag","setup","cheatsheet"]);let n=G("controls");ha(()=>{e.domain,O(n,"controls")});let l=u(()=>Pi[e.domain]??[e.domain]),i=u(()=>e.tokens.filter(v=>t(l).some(y=>v.name.includes(y))&&v.name in e.overrides).length);var c=Bt(),d=de(c);{var p=v=>{var y=Bt(),k=de(y);{var w=S=>{mu(S,{get overrides(){return e.overrides},get onSelect(){return e.onSelectDomain},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},E=S=>{nh(S,{get overrides(){return e.overrides},get onApplyTheme(){return e.onApplyTheme},get onResetAll(){return e.onResetAll}})},B=S=>{ng(S,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onBulkChange(){return e.onBulkChange}})},U=S=>{dh(S,{get overrides(){return e.overrides}})},P=S=>{_h(S,{})};I(k,S=>{e.domain==="home"?S(w):e.domain==="themes"?S(E,1):e.domain==="wcag"?S(B,2):e.domain==="setup"?S(U,3):e.domain==="cheatsheet"&&S(P,4)})}f(v,y)},m=u(()=>o.has(e.domain)),h=v=>{var y=cg(),k=s(y),w=s(k);{var E=D=>{var A=lg(),T=s(A);{var N=M=>{hp(M,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange},get onSelectDomain(){return e.onSelectDomain}})},$=M=>{Zp(M,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Ge=M=>{om(M,{get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},te=M=>{ym(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},ge=M=>{Mm(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},Pe=M=>{Km(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},ve=M=>{dv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},me=M=>{xv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},je=M=>{Bv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})},$e=M=>{Xv(M,{get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset},get onBulkChange(){return e.onBulkChange}})},tt=M=>{Dh(M,{get domain(){return e.domain},get tokens(){return e.tokens},get overrides(){return e.overrides},get onSet(){return e.onSet},get onReset(){return e.onReset}})};I(T,M=>{e.domain==="colors"?M(N):e.domain==="typography"?M($,1):e.domain==="spacing"?M(Ge,2):e.domain==="layout"?M(te,3):e.domain==="borders"?M(ge,4):e.domain==="shadows"?M(Pe,5):e.domain==="motion"?M(ve,6):e.domain==="effects"?M(me,7):e.domain==="macros"?M(je,8):e.domain==="misc"?M($e,9):M(tt,-1)})}f(D,A)},B=D=>{Vh(D,{get tokens(){return e.tokens},get overrides(){return e.overrides},get patterns(){return t(l)},get onSet(){return e.onSet},get onReset(){return e.onReset}})};I(w,D=>{t(n)==="controls"?D(E):D(B,-1)})}var U=r(k,2),P=s(U),S=s(P);Vd(S,{class:"w-3 h-3"});var _=r(P,4),z=s(_);Dd(z,{class:"w-3 h-3"});var L=r(z,2);{var R=D=>{var A=ig(),T=s(A);C(()=>b(T,t(i))),f(D,A)};I(L,D=>{t(i)>0&&D(R)})}C(()=>{Ye(P,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="controls"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`),Ye(_,1,`flex-1 flex items-center justify-center gap-1.5 py-2 text-[10px] font-bold transition-all cursor-pointer ${t(n)==="tokens"?"text-indigo-300 bg-indigo-600/10 border-t-2 border-t-indigo-500 -mt-px":"text-slate-500 hover:text-slate-300"}`)}),x("click",P,()=>{O(n,"controls")}),x("click",_,()=>{O(n,"tokens")}),f(v,y)};I(d,v=>{t(m)?v(p):v(h,-1)})}f(a,c),$t()}aa(["click"]);const Ai="slashed-studio/overrides/v2",dg=new Set(["--sf-text-base-min","--sf-text-base-max","--sf-text-ratio-min","--sf-text-ratio-max","--sf-text-scale","--sf-text-display-base-min","--sf-text-display-base-max","--sf-text-display-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),fg=new Set(["--sf-space-base-min","--sf-space-base-max","--sf-space-ratio-min","--sf-space-ratio-max","--sf-space-scale","--sf-fluid-min-vw","--sf-fluid-max-vw"]),ug=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]],pg=[["display-s",0],["display-m",1],["display-l",2]],mg=[["2xs",-3],["xs",-2],["s",-1],["m",0],["l",1],["xl",2],["2xl",3],["3xl",4],["4xl",5]];function Ca(a,e,o){const n=a[e];if(n===void 0)return o;const l=parseFloat(n);return isNaN(l)?o:l}function Go(a){const o=a.toFixed(6).replace(/\.?0+$/,"");return o===""||o==="-"?"0":o}function Or(a,e,o,n,l,i,c,d){const p=a*Math.pow(o,c)*d,m=e*Math.pow(n,c)*d;if(i<=l||Math.abs(p-m)<1e-9)return`${Go(p)}rem`;const h=(m-p)/(i-l);return`clamp(${Go(p)}rem, calc(${Go(h)} * (100vw - ${Go(l)}rem) + ${Go(p)}rem), ${Go(m)}rem)`}function vg(a){const e={},o=Object.keys(a),n=o.some(d=>dg.has(d)),l=o.some(d=>fg.has(d));if(!n&&!l)return e;const i=Ca(a,"--sf-fluid-min-vw",22.5),c=Ca(a,"--sf-fluid-max-vw",90);if(n){const d=Ca(a,"--sf-text-base-min",1),p=Ca(a,"--sf-text-base-max",1.25),m=Ca(a,"--sf-text-ratio-min",1.25),h=Ca(a,"--sf-text-ratio-max",1.333),v=Ca(a,"--sf-text-scale",1);for(const[E,B]of ug)e[`--sf-text-${E}`]=Or(d,p,m,h,i,c,B,v);const y=Ca(a,"--sf-text-display-base-min",2.4),k=Ca(a,"--sf-text-display-base-max",3),w=Ca(a,"--sf-text-display-scale",1);for(const[E,B]of pg)e[`--sf-text-${E}`]=Or(y,k,m,h,i,c,B,w)}if(l){const d=Ca(a,"--sf-space-base-min",1),p=Ca(a,"--sf-space-base-max",2),m=Ca(a,"--sf-space-ratio-min",1.25),h=Ca(a,"--sf-space-ratio-max",1.333),v=Ca(a,"--sf-space-scale",1);for(const[y,k]of mg)e[`--sf-space-${y}`]=Or(d,p,m,h,i,c,k,v)}return e}function Ei(){return typeof window>"u"?null:window.slashedApp??null}function Ri(){if(typeof window>"u")return{};const a=Ei();if(a)return a.overrides&&typeof a.overrides=="object"&&!Array.isArray(a.overrides)?{...a.overrides}:{};const e=window.location.hash;if(e?.includes("c="))try{return Df(e)}catch{}const o=localStorage.getItem(Ai);if(o)try{return JSON.parse(o)}catch{}return{}}function Ti(a){if(typeof document>"u")return;let e=document.getElementById("sf-parent-overrides");e||(e=document.createElement("style"),e.id="sf-parent-overrides",document.head.appendChild(e));const o=vg(a),n=Object.keys(o).length>0?{...o,...a}:a;e.textContent=To(n,{mode:"root",banner:!1})}async function hg(a,e){const o=(a.url??"").replace(/\/$/,""),n=new URL(o+"/tokens/overrides",window.location.href);if(n.origin!==window.location.origin)throw new Error("slashed: REST URL must be same-origin");const l=n.href,i=await fetch(l,{method:"POST",credentials:"same-origin",headers:{"Content-Type":"application/json","X-WP-Nonce":a.nonce??""},body:JSON.stringify({overrides:e})});if(!i.ok)throw new Error(`slashed: save failed ${i.status} ${i.statusText}`)}function gg(a){try{localStorage.setItem(Ai,JSON.stringify(a))}catch{}const e=Si(a),o=e?`c=${e}`:"";window.location.hash.replace("#","")!==o&&(window.location.hash=o)}async function Di(a){if(typeof window>"u")return;const e=Ei();if(e?.rest?.url){await hg(e.rest,{...a});return}gg(a)}var bg=g('<div class="px-4 py-8 text-center text-[11px] text-slate-600"> </div>'),yg=g('<div class="px-4 py-8 text-center text-[11px] text-slate-600">Type to search tokens by name or description</div>'),xg=g('<span class="shrink-0 text-[8px] font-bold text-indigo-400 bg-indigo-500/15 border border-indigo-500/25 rounded px-1 py-0.5">overridden</span>'),kg=g('<div class="text-[10px] text-slate-600 truncate mt-0.5"> </div>'),wg=g('<button><div class="flex-1 min-w-0"><div class="flex items-center gap-2"><span class="text-[11px] font-mono text-slate-200 truncate"> </span> <!></div> <!></div> <div class="flex items-center gap-2 shrink-0"><span class="text-[9px] text-slate-600 font-mono truncate max-w-[100px]"> </span> <span class="text-[9px] font-bold text-slate-500 bg-white/5 rounded px-1.5 py-0.5"> </span></div></button>'),_g=g('<div class="px-4 py-2 border-t border-white/6 flex items-center gap-3 text-[9px] text-slate-600"><span><kbd class="font-mono border border-white/10 rounded px-1">↑↓</kbd> navigate</span> <span><kbd class="font-mono border border-white/10 rounded px-1">↵</kbd> open panel</span> <span><kbd class="font-mono border border-white/10 rounded px-1">Esc</kbd> close</span></div>'),Cg=g('<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-start justify-center pt-[15vh]" role="dialog" aria-modal="true" aria-label="Token search"><div class="w-[560px] max-w-[95vw] bg-[#111118] border border-white/12 rounded-2xl shadow-2xl overflow-hidden"><div class="flex items-center gap-3 px-4 py-3 border-b border-white/8"><svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg> <input placeholder="Search tokens… (e.g. radius, primary, duration)" class="flex-1 bg-transparent text-[13px] text-slate-100 placeholder-slate-600 outline-none"/> <kbd class="text-[9px] font-mono text-slate-600 border border-white/10 rounded px-1.5 py-0.5 shrink-0">Esc</kbd></div> <div class="max-h-[360px] overflow-y-auto"><!></div> <!></div></div>');function Mi(a,e){Qt(e,!0);let o=G(""),n=G(0),l=G(null);const i={colors:"Colors",typography:"Typography",spacing:"Spacing",layout:"Layout",borders:"Borders",shadows:"Shadows",motion:"Motion",effects:"Effects",macros:"Macros",misc:"Misc"};let c=u(()=>(()=>{const L=t(o).trim().toLowerCase();if(!L)return[];const R=[];for(const D of e.tokens){if(D.tier==="INTERNAL")continue;const A=D.name.toLowerCase().includes(L),T=D.description?.toLowerCase().includes(L)??!1;if((A||T)&&(R.push({token:D,domain:cn(D.name),overridden:D.name in e.overrides}),R.length>=40))break}return R})());ha(()=>{t(o),O(n,0)}),ha(()=>{t(l)&&t(l).focus()});function d(L){e.onNavigate(L),e.onClose()}function p(L){if(L.key==="Escape"){L.preventDefault(),e.onClose();return}if(t(c).length===0&&(L.key==="ArrowDown"||L.key==="ArrowUp")){L.preventDefault(),O(n,0);return}if(L.key==="ArrowDown"){L.preventDefault(),O(n,Math.min(t(n)+1,t(c).length-1),!0);return}if(L.key==="ArrowUp"){L.preventDefault(),O(n,Math.max(t(n)-1,0),!0);return}L.key==="Enter"&&t(c)[t(n)]&&(L.preventDefault(),d(t(c)[t(n)].domain))}var m=Cg(),h=s(m),v=s(h),y=r(s(v),2);Yo(y,L=>O(l,L),()=>t(l));var k=r(v,2),w=s(k);{var E=L=>{var R=bg(),D=s(R);C(()=>b(D,`No tokens matching "${t(o)??""}"`)),f(L,R)},B=u(()=>t(o).trim()&&t(c).length===0),U=L=>{var R=yg();f(L,R)},P=u(()=>!t(o).trim()),S=L=>{var R=Bt(),D=de(R);re(D,19,()=>t(c),A=>A.token.name,(A,T,N)=>{var $=wg(),Ge=s($),te=s(Ge),ge=s(te),Pe=s(ge),ve=r(ge,2);{var me=W=>{var ke=xg();f(W,ke)};I(ve,W=>{t(T).overridden&&W(me)})}var je=r(te,2);{var $e=W=>{var ke=kg(),He=s(ke);C(()=>b(He,t(T).token.description)),f(W,ke)};I(je,W=>{t(T).token.description&&W($e)})}var tt=r(Ge,2),M=s(tt),J=s(M),be=r(M,2),ye=s(be);C(()=>{Ye($,1,`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors cursor-pointer ${t(n)===t(N)?"bg-indigo-500/15":"hover:bg-white/4"}`),b(Pe,t(T).token.name),b(J,t(T).overridden?e.overrides[t(T).token.name]:t(T).token.value),b(ye,i[t(T).domain]??t(T).domain)}),lo("mouseenter",$,()=>{O(n,t(N),!0)}),x("click",$,()=>d(t(T).domain)),f(A,$)}),f(L,R)};I(w,L=>{t(B)?L(E):t(P)?L(U,1):L(S,-1)})}var _=r(k,2);{var z=L=>{var R=_g();f(L,R)};I(_,L=>{t(c).length>0&&L(z)})}x("mousedown",m,L=>{L.target===L.currentTarget&&e.onClose()}),x("keydown",y,p),ai(y,()=>t(o),L=>O(o,L)),f(a,m),$t()}aa(["mousedown","keydown","click"]);var Og=g('<div class="w-screen h-screen flex flex-col overflow-hidden bg-[#0a0a0f] text-slate-200 font-sans"><!> <div class="flex flex-1 min-h-0"><!> <div class="w-[360px] shrink-0 bg-[#0c0c15] border-r border-white/8 flex flex-col min-h-0"><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0"><span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div> <div class="flex-1 flex flex-col min-h-0 min-w-0"><!></div></div> <!> <!></div>');function Sg(a,e){Qt(e,!0);const o=Bs.tokens??Bs,n={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 l(ae){const q={};for(const we of Object.keys(ae)){const fe=cn(we);q[fe]=(q[fe]??0)+1}return q}let i=G(da(Ri())),c=G(da([])),d=G(da([])),p=G("home"),m=G(!1),h=G("light"),v=G("fluid"),y=G("normal"),k=G("marketing"),w=u(()=>Object.keys(t(i)).length),E=u(()=>l(t(i))),B=u(()=>t(c).length>0),U=u(()=>t(d).length>0),P=G(da(JSON.stringify(t(i)))),S=G("idle"),_=u(()=>JSON.stringify(t(i))!==t(P)),z=null;ha(()=>{Ti(t(i))});function L(ae){const q=t(i),we=typeof ae=="function"?ae(q):ae;JSON.stringify(q)!==JSON.stringify(we)&&(O(c,[...t(c).slice(-49),q],!0),O(d,[],!0),t(S)==="saved"&&O(S,"idle")),O(i,we,!0)}async function R(){if(!t(_)||t(S)==="saving")return;const ae=JSON.stringify(t(i));O(S,"saving");try{await Di(t(i)),JSON.stringify(t(i))===ae?(O(P,ae,!0),O(S,"saved"),z&&clearTimeout(z),z=setTimeout(()=>{t(S)==="saved"&&O(S,"idle"),z=null},2e3)):O(S,"idle")}catch(q){console.warn("slashed: save failed",q),O(S,"idle")}}function D(ae,q){L(we=>({...we,[ae]:q}))}function A(ae){L(q=>{const we={...q};return delete we[ae],we})}function T(ae){L(q=>{const we={...q};for(const[fe,ce]of Object.entries(ae))ce===null?delete we[fe]:we[fe]=ce;return we})}function N(ae){ae.id==="default"?L({}):T(ae.overrides)}function $(){L({})}function Ge(){if(t(c).length===0)return;const ae=t(c)[t(c).length-1],q=t(i);O(c,t(c).slice(0,-1),!0),O(d,[q,...t(d)],!0),O(i,ae,!0)}function te(){if(t(d).length===0)return;const ae=t(d)[0],q=t(i);O(d,t(d).slice(1),!0),O(c,[...t(c),q],!0),O(i,ae,!0)}function ge(){const ae=document.createElement("input");ae.type="file",ae.accept=".css,.json",ae.onchange=q=>{const we=q.target.files?.[0];if(!we)return;const fe=new FileReader;fe.onload=ce=>{const xe=ce.target?.result;if(xe)if(we.name.endsWith(".json"))try{const ze=JSON.parse(xe);if(ze!==null&&typeof ze=="object"&&!Array.isArray(ze)){const De=Object.fromEntries(Object.entries(ze).filter(([,Ae])=>typeof Ae=="string"));L(De)}}catch{}else{const ze={},De=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let Ae;for(;(Ae=De.exec(xe))!==null;)ze[Ae[1].trim()]=Ae[2].trim();Object.keys(ze).length>0&&L(Ie=>({...Ie,...ze}))}},fe.readAsText(we)},ae.click()}function Pe(){const ae=To(t(i),{mode:"layer",banner:!0}),q=new Blob([ae],{type:"text/css"}),we=URL.createObjectURL(q),fe=document.createElement("a");fe.href=we,fe.download="slashed-overrides.css",fe.click(),URL.revokeObjectURL(we)}oi(()=>{const ae=q=>{(q.ctrlKey||q.metaKey)&&!q.shiftKey&&q.key==="z"&&(q.preventDefault(),Ge()),(q.ctrlKey||q.metaKey)&&(q.shiftKey&&q.key==="z"||q.key==="y")&&(q.preventDefault(),te()),(q.ctrlKey||q.metaKey)&&!q.shiftKey&&q.key.toLowerCase()==="s"&&(q.preventDefault(),R()),(q.ctrlKey||q.metaKey)&&!q.repeat&&q.key.toLowerCase()==="k"&&(q.preventDefault(),O(m,!t(m)))};return window.addEventListener("keydown",ae),()=>{window.removeEventListener("keydown",ae),z&&clearTimeout(z)}});var ve=Og(),me=s(ve);ef(me,{get overridesCount(){return t(w)},get canUndo(){return t(B)},get canRedo(){return t(U)},get hasPendingChanges(){return t(_)},get saveState(){return t(S)},onUndo:Ge,onRedo:te,onResetAll:$,onImport:ge,onExport:Pe,onSave:R});var je=r(me,2),$e=s(je);gi($e,{get activeId(){return t(p)},onSelect:ae=>{O(p,ae,!0)},get overridesByDomain(){return t(E)}});var tt=r($e,2),M=s(tt),J=s(M),be=s(J),ye=r(M,2),W=s(ye);zi(W,{get domain(){return t(p)},get tokens(){return o},get overrides(){return t(i)},onSet:D,onReset:A,onBulkChange:T,onApplyTheme:N,onSelectDomain:ae=>{O(p,ae,!0)},onResetAll:$});var ke=r(tt,2),He=s(ke);Jf(He,{get overrides(){return t(i)},get previewTheme(){return t(h)},get previewWidth(){return t(v)},get previewMotion(){return t(y)},get previewTemplate(){return t(k)},onThemeChange:ae=>{O(h,ae,!0)},onWidthChange:ae=>{O(v,ae,!0)},onMotionChange:ae=>{O(y,ae,!0)},onTemplateChange:ae=>{O(k,ae,!0)}});var st=r(je,2);{let ae=u(()=>n[t(p)]??t(p));sf(st,{get overridesCount(){return t(w)},get domain(){return t(ae)}})}var Se=r(st,2);{var Be=ae=>{Mi(ae,{get tokens(){return o},get overrides(){return t(i)},onNavigate:q=>{O(p,q,!0)},onClose:()=>{O(m,!1)}})};I(Se,ae=>{t(m)&&ae(Be)})}C(()=>b(be,n[t(p)]??t(p))),f(a,ve),$t()}const Sr=document.getElementById("app")??document.getElementById("slashed-admin-app");Sr&&(Sr.innerHTML="",Xl(Sg,{target:Sr}));var Lg=g('<button aria-label="Open SLASHED token editor" class="fixed right-0 z-[100000] pointer-events-auto bg-indigo-600 hover:bg-indigo-500 text-white shadow-xl flex flex-col items-center justify-center gap-1 px-1.5 py-3 rounded-l-xl transition-colors cursor-pointer" style="top: calc(var(--wp-admin--admin-bar--height, 32px) + 16px);"><span class="text-sm font-black leading-none select-none">/</span> <!></button>'),Pg=g('<span class="shrink-0 text-[9px] bg-indigo-500/20 border border-indigo-500/30 text-indigo-300 font-bold px-1.5 py-0.5 rounded-full font-mono leading-none"> </span>'),Ig=g('<div class="absolute inset-0 z-[100001] flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="reset-confirm-title"><div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-5 mx-4 shadow-2xl w-full max-w-[320px]"><h3 id="reset-confirm-title" class="text-white font-bold text-sm mb-2">Reset all overrides?</h3> <p class="text-slate-400 text-xs mb-4"> </p> <div class="flex gap-2 justify-end"><button class="px-3 py-1.5 text-xs rounded-lg bg-white/8 text-slate-300 hover:bg-white/12 transition-colors cursor-pointer">Cancel</button> <button class="px-3 py-1.5 text-xs rounded-lg bg-rose-600 hover:bg-rose-500 text-white font-bold transition-colors cursor-pointer">Reset all</button></div></div></div>'),Bg=g('<!> <div><div class="h-10 bg-[#0d0d14] border-b border-white/8 flex items-center px-2 gap-1.5 shrink-0"><div class="w-6 h-6 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-black text-sm leading-none shrink-0 shadow-lg shadow-indigo-600/30 select-none">/</div> <span class="text-[10px] font-bold text-white tracking-tight shrink-0">SLASHED</span> <span class="text-[9px] text-slate-500 font-mono uppercase tracking-widest truncate min-w-0"> </span> <!> <div class="flex-1 min-w-0"></div> <button><!></button> <button title="Undo (Ctrl+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Redo (Ctrl+Shift+Z)" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Import CSS / JSON" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button> <button title="Export CSS" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <button title="Reset all overrides" class="p-1 rounded text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 disabled:opacity-25 disabled:pointer-events-none transition-all cursor-pointer shrink-0"><!></button> <div class="w-px h-3.5 bg-white/10 mx-0.5 shrink-0"></div> <button title="Collapse panel" class="p-1 rounded text-slate-400 hover:text-white hover:bg-white/8 transition-all cursor-pointer shrink-0"><!></button></div> <div class="flex flex-1 min-h-0"><!> <div class="flex-1 bg-[#0c0c15] flex flex-col min-h-0"><div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0"><span class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1"> </span></div> <div class="flex-1 min-h-0 flex flex-col overflow-hidden"><!></div></div></div> <!> <!></div>',1);function Ug(a,e){Qt(e,!0);const o=Bs.tokens??Bs,n="slashed-overlay/open",l="slashed-overlay/domain",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 c(pe){const Ze={};for(const vt of Object.keys(pe)){const Ut=cn(vt);Ze[Ut]=(Ze[Ut]??0)+1}return Ze}function d(pe,Ze){try{const vt=localStorage.getItem(pe);return vt===null?Ze:vt!=="false"}catch{return Ze}}function p(pe,Ze){try{return localStorage.getItem(pe)??Ze}catch{return Ze}}let m=G(da(d(n,!0))),h=G(da(typeof window<"u"?window.matchMedia("(max-width: 768px)").matches:!1)),v=G(da(Ri())),y=G(da([])),k=G(da([])),w=G(da(p(l,"home"))),E=G(!1),B=G(!1),U=G(null),P=G(null);ha(()=>{t(B)&&Vl().then(()=>t(U)?.focus())});let S=u(()=>Object.keys(t(v)).length),_=u(()=>c(t(v))),z=u(()=>t(y).length>0),L=u(()=>t(k).length>0);function R(pe,Ze){const vt=Object.keys(pe);return vt.length!==Object.keys(Ze).length?!1:vt.every(Ut=>pe[Ut]===Ze[Ut])}let D=G(da({...t(v)})),A=G("idle"),T=u(()=>!R(t(v),t(D))),N=null;function $(){const pe=document.getElementById("slashed-frontend-overlay");if(!pe)return;const Ze="var(--wp-admin--admin-bar--height, 32px)";pe.style.position="fixed",pe.style.right="0",pe.style.zIndex="100000",pe.style.pointerEvents="auto",t(m)?(pe.style.top=Ze,pe.style.width=t(h)?"100vw":"420px",pe.style.height=`calc(100vh - ${Ze})`):(pe.style.top=`calc(${Ze} + 16px)`,pe.style.width="40px",pe.style.height="64px")}ha(()=>{Ti(t(v))}),ha(()=>{!t(h)&&t(m)?document.documentElement.classList.add("sf-panel-active"):document.documentElement.classList.remove("sf-panel-active")}),ha(()=>{$()}),ha(()=>{try{localStorage.setItem(n,String(t(m)))}catch{}}),ha(()=>{try{localStorage.setItem(l,t(w))}catch{}});function Ge(){O(m,!t(m))}function te(pe){const Ze=t(v),vt=typeof pe=="function"?pe(Ze):pe;R(Ze,vt)||(O(y,[...t(y).slice(-49),Ze],!0),O(k,[],!0),t(A)==="saved"&&O(A,"idle")),O(v,vt,!0)}async function ge(){if(!t(T)||t(A)==="saving")return;const pe={...t(v)};O(A,"saving");try{await Di(t(v)),R(t(v),pe)?(O(D,pe,!0),O(A,"saved"),N&&clearTimeout(N),N=setTimeout(()=>{t(A)==="saved"&&O(A,"idle"),N=null},2e3)):O(A,"idle")}catch(Ze){console.warn("slashed: save failed",Ze),O(A,"idle")}}function Pe(pe,Ze){te(vt=>({...vt,[pe]:Ze}))}function ve(pe){te(Ze=>{const vt={...Ze};return delete vt[pe],vt})}function me(pe){te(Ze=>{const vt={...Ze};for(const[Ut,Ue]of Object.entries(pe))Ue===null?delete vt[Ut]:vt[Ut]=Ue;return vt})}function je(pe){pe.id==="default"?te({}):me(pe.overrides)}function $e(){O(B,!0)}function tt(){O(B,!1),te({})}function M(){O(B,!1)}function J(){if(!t(y).length)return;const pe=t(y)[t(y).length-1];O(k,[t(v),...t(k)],!0),O(y,t(y).slice(0,-1),!0),O(v,pe,!0)}function be(){if(!t(k).length)return;const pe=t(k)[0];O(y,[...t(y),t(v)],!0),O(k,t(k).slice(1),!0),O(v,pe,!0)}function ye(){const pe=To(t(v),{mode:"layer",banner:!0}),Ze=new Blob([pe],{type:"text/css"}),vt=URL.createObjectURL(Ze),Ut=document.createElement("a");Ut.href=vt,Ut.download="slashed-overrides.css",Ut.click(),URL.revokeObjectURL(vt)}function W(){const pe=document.createElement("input");pe.type="file",pe.accept=".css,.json",pe.onchange=Ze=>{const vt=Ze.target.files?.[0];if(!vt)return;const Ut=new FileReader;Ut.onload=Ue=>{const Ee=Ue.target?.result;if(Ee)if(vt.name.endsWith(".json"))try{const qe=JSON.parse(Ee);if(qe!==null&&typeof qe=="object"&&!Array.isArray(qe)){const et=Object.fromEntries(Object.entries(qe).filter(([,Ct])=>typeof Ct=="string"));te(et)}}catch{}else{const qe={},et=/(--sf-[\w-]+)\s*:\s*([^;]+);/g;let Ct;for(;(Ct=et.exec(Ee))!==null;)qe[Ct[1].trim()]=Ct[2].trim();Object.keys(qe).length&&te(ta=>({...ta,...qe}))}},Ut.readAsText(vt)},pe.click()}oi(()=>{const pe=document.createElement("style");pe.id="sf-panel-push",pe.textContent=["html { transition: padding-right 200ms ease-in-out; }","html.sf-panel-active { padding-right: 420px !important; overflow-x: clip; }"].join(`
+`),document.head.appendChild(pe);const Ze=window.matchMedia("(max-width: 768px)"),vt=Ee=>{O(h,Ee.matches,!0)};Ze.addEventListener("change",vt);const Ut=Ee=>{const qe=Ee.key.toLowerCase();t(m)&&((Ee.ctrlKey||Ee.metaKey)&&!Ee.shiftKey&&qe==="z"&&(Ee.preventDefault(),J()),(Ee.ctrlKey||Ee.metaKey)&&(Ee.shiftKey&&qe==="z"||qe==="y")&&(Ee.preventDefault(),be()),(Ee.ctrlKey||Ee.metaKey)&&!Ee.repeat&&qe==="k"&&(Ee.preventDefault(),O(E,!t(E))),(Ee.ctrlKey||Ee.metaKey)&&!Ee.shiftKey&&qe==="s"&&(Ee.preventDefault(),ge()))},Ue=()=>Ge();return window.addEventListener("keydown",Ut),document.addEventListener("slashed:toggle-overlay",Ue),()=>{pe.remove(),document.documentElement.classList.remove("sf-panel-active"),Ze.removeEventListener("change",vt),window.removeEventListener("keydown",Ut),document.removeEventListener("slashed:toggle-overlay",Ue),N&&clearTimeout(N)}});var ke=Bg(),He=de(ke);{var st=pe=>{var Ze=Lg(),vt=r(s(Ze),2);Pn(vt,{class:"w-3 h-3 opacity-70 rotate-180"}),x("click",Ze,Ge),f(pe,Ze)};I(He,pe=>{t(m)||pe(st)})}var Se=r(He,2);let Be,ae;var q=s(Se),we=r(s(q),4),fe=s(we),ce=r(we,2);{var xe=pe=>{var Ze=Pg(),vt=s(Ze);C(()=>b(vt,t(S))),f(pe,Ze)};I(ce,pe=>{t(S)>0&&pe(xe)})}var ze=r(ce,4),De=s(ze);{var Ae=pe=>{ni(pe,{class:"w-3 h-3 animate-spin"})},Ie=pe=>{Mo(pe,{class:"w-3 h-3"})},Ve=pe=>{di(pe,{class:"w-3 h-3"})};I(De,pe=>{t(A)==="saving"?pe(Ae):t(A)==="saved"?pe(Ie,1):pe(Ve,-1)})}var nt=r(ze,2),ct=s(nt);vi(ct,{class:"w-3 h-3"});var dt=r(nt,2),Ot=s(dt);ii(Ot,{class:"w-3 h-3"});var mt=r(dt,4),Q=s(mt);si(Q,{class:"w-3 h-3"});var Oe=r(mt,2),Me=s(Oe);jr(Me,{class:"w-3 h-3"});var at=r(Oe,2),ft=s(at);pi(ft,{class:"w-3 h-3"});var _t=r(at,4),xt=s(_t);Pn(xt,{class:"w-3 h-3"});var Nt=r(q,2),St=s(Nt);gi(St,{get activeId(){return t(w)},onSelect:pe=>{O(w,pe,!0)},get overridesByDomain(){return t(_)}});var Et=r(St,2),it=s(Et),Gt=s(it),ea=s(Gt),ia=r(it,2),Je=s(ia);zi(Je,{get domain(){return t(w)},get tokens(){return o},get overrides(){return t(v)},onSet:Pe,onReset:ve,onBulkChange:me,onApplyTheme:je,onSelectDomain:pe=>{O(w,pe,!0)},onResetAll:$e});var ut=r(Nt,2);{var Lt=pe=>{Mi(pe,{get tokens(){return o},get overrides(){return t(v)},onNavigate:Ze=>{O(w,Ze,!0)},onClose:()=>{O(E,!1)}})};I(ut,pe=>{t(E)&&pe(Lt)})}var Dt=r(ut,2);{var Rt=pe=>{var Ze=Ig(),vt=s(Ze),Ut=r(s(vt),2),Ue=s(Ut),Ee=r(Ut,2),qe=s(Ee);Yo(qe,Ct=>O(U,Ct),()=>t(U));var et=r(qe,2);Yo(et,Ct=>O(P,Ct),()=>t(P)),C(()=>b(Ue,`This will clear all ${t(S)??""} customisation${t(S)!==1?"s":""}.
+          You can still undo this before saving.`)),x("keydown",Ze,Ct=>{Ct.key==="Escape"&&(Ct.stopPropagation(),M()),Ct.key==="Tab"&&(Ct.preventDefault(),document.activeElement===t(U)?t(P)?.focus():t(U)?.focus())}),x("click",qe,M),x("click",et,tt),f(pe,Ze)};I(Dt,pe=>{t(B)&&pe(Rt)})}C(pe=>{Be=Ye(Se,1,"fixed right-0 z-[100000] 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,Be,{"translate-x-full":!t(m),"translate-x-0":t(m),"pointer-events-none":!t(m)}),ae=lt(Se,`top: var(--wp-admin--admin-bar--height, 32px); width: ${t(h)?"100vw":"420px"}; height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));`,ae,{visibility:t(m)?void 0:"hidden"}),Y(Se,"aria-hidden",!t(m)),Se.inert=!t(m)||void 0,b(fe,i[t(w)]??t(w)),ze.disabled=!t(T)||t(A)==="saving",Y(ze,"title",t(T)?"Save changes (Ctrl+S)":"No unsaved changes"),Y(ze,"aria-label",t(A)==="saving"?"Saving changes":t(T)?"Save changes":"No unsaved changes"),Ye(ze,1,pe),nt.disabled=!t(z),dt.disabled=!t(L),Oe.disabled=t(S)===0,at.disabled=t(S)===0,b(ea,i[t(w)]??t(w))},[()=>ro(["p-1 rounded transition-colors cursor-pointer shrink-0 disabled:pointer-events-none",t(A)==="saved"?"text-emerald-300":t(T)?"text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/10":"text-slate-500 opacity-40"].join(" "))]),x("click",ze,ge),x("click",nt,J),x("click",dt,be),x("click",mt,W),x("click",Oe,ye),x("click",at,$e),x("click",_t,Ge),f(a,ke),$t()}aa(["click","keydown"]);function al(){const a=document.getElementById("slashed-frontend-overlay");if(!a||a.shadowRoot)return;const e=a.attachShadow({mode:"open"}),o=document.createElement("div");e.appendChild(o);let n=!1;const l=()=>{n||(Xl(Ug,{target:o}),n=!0,a.setAttribute("data-slashed-ready",""))},i=window.slashedApp?.cssUrl;if(i){const c=document.createElement("link");c.rel="stylesheet",c.href=i;const d=setTimeout(l,5e3),p=()=>{clearTimeout(d),l()};c.addEventListener("load",p),c.addEventListener("error",p),e.appendChild(c)}else l()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",al):al();
 //# sourceMappingURL=app.js.map