@codenhub/styles 0.0.3 → 0.1.0

package/dist/theme.css

@@ -1,2 +1,2 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-100:oklch(96.2% .059 95.617);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-800:oklch(43.2% .095 166.913);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--spacing:.25rem;--breakpoint-2xl:90rem;--font-weight-medium:500;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-default:"Segoe UI", system-ui, sans-serif;--color-primary:var(--color-neutral-950);--color-primary-contrast:var(--color-neutral-50);--color-primary-hover:var(--color-neutral-700);--color-primary-subtle:var(--color-neutral-200);--color-primary-strong:var(--color-neutral-900);--color-accent:var(--color-neutral-600);--color-accent-contrast:var(--color-neutral-50);--color-accent-hover:var(--color-neutral-700);--color-accent-subtle:var(--color-neutral-100);--color-accent-strong:var(--color-neutral-800);--color-border:var(--color-neutral-300);--color-border-hover:var(--color-neutral-600);--color-background:var(--color-neutral-50);--color-foreground:var(--color-neutral-100);--color-surface:var(--color-neutral-200);--color-text:var(--color-neutral-950);--color-text-secondary:var(--color-neutral-700);--color-text-contrast:var(--color-neutral-50);--color-text-hover:var(--color-neutral-700);--color-text-subtle:var(--color-neutral-200);--color-text-strong:var(--color-neutral-900);--color-success:var(--color-emerald-600);--color-success-contrast:var(--color-neutral-50);--color-success-hover:#008d61}@supports (color:color-mix(in lab, red, red)){:root,:host{--color-success-hover:color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong))}}:root,:host{--color-success-subtle:var(--color-emerald-100);--color-success-strong:var(--color-emerald-800);--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-50);--color-warning-hover:#d06a00}@supports (color:color-mix(in lab, red, red)){:root,:host{--color-warning-hover:color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong))}}:root,:host{--color-warning-subtle:var(--color-amber-100);--color-warning-strong:var(--color-amber-800);--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:#bc0039}@supports (color:color-mix(in lab, red, red)){:root,:host{--color-destructive-hover:color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong))}}:root,:host{--color-destructive-subtle:var(--color-rose-100);--color-destructive-strong:var(--color-rose-800);--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:#4b36e9}@supports (color:color-mix(in lab, red, red)){:root,:host{--color-info-hover:color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong))}}:root,:host{--color-info-subtle:var(--color-indigo-100);--color-info-strong:var(--color-indigo-800);--breakpoint-xs:30rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.bg-background{background-color:var(--color-background)}.font-default{font-family:var(--font-default)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-text{color:var(--color-text)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}:root{color-scheme:light;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-stack-gap:1rem;--layout-cluster-gap:.75rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-low:0 1px 2px #0f172a0f, 0 1px 3px #0f172a14;--elevation-mid:0 4px 6px -1px #0f172a14, 0 2px 4px -2px #0f172a14;--elevation-high:0 20px 25px -5px #0f172a1a, 0 8px 10px -6px #0f172a1a;--focus-ring:#0a0a0aa3}@supports (color:color-mix(in lab, red, red)){:root{--focus-ring:color-mix(in srgb, var(--color-primary) 64%, transparent)}}:root{--focus-ring-offset:2px;--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--surface-hover-transform:translateY(-1px)}.dark{color-scheme:dark;--color-primary:var(--color-neutral-50);--color-primary-contrast:var(--color-neutral-950);--color-primary-hover:var(--color-neutral-200);--color-primary-subtle:var(--color-neutral-900);--color-primary-strong:var(--color-neutral-100);--color-accent:var(--color-neutral-400);--color-accent-contrast:var(--color-neutral-950);--color-accent-hover:var(--color-neutral-300);--color-accent-subtle:var(--color-neutral-800);--color-accent-strong:var(--color-neutral-200);--color-border:var(--color-neutral-700);--color-border-hover:var(--color-neutral-500);--color-background:var(--color-neutral-950);--color-foreground:var(--color-neutral-900);--color-surface:var(--color-neutral-800);--color-text:var(--color-neutral-50);--color-text-secondary:var(--color-neutral-400);--color-text-contrast:var(--color-neutral-950);--color-text-hover:var(--color-neutral-200);--color-text-subtle:var(--color-neutral-900);--color-text-strong:var(--color-neutral-100);--color-success:var(--color-emerald-600);--color-success-contrast:var(--color-neutral-50);--color-success-hover:#008d61}@supports (color:color-mix(in lab, red, red)){.dark{--color-success-hover:color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong))}}.dark{--color-success-subtle:var(--color-emerald-800);--color-success-strong:var(--color-emerald-100);--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-50);--color-warning-hover:#d06a00}@supports (color:color-mix(in lab, red, red)){.dark{--color-warning-hover:color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong))}}.dark{--color-warning-subtle:var(--color-amber-800);--color-warning-strong:var(--color-amber-100);--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:#bc0039}@supports (color:color-mix(in lab, red, red)){.dark{--color-destructive-hover:color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong))}}.dark{--color-destructive-subtle:var(--color-rose-800);--color-destructive-strong:var(--color-rose-100);--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:#4b36e9}@supports (color:color-mix(in lab, red, red)){.dark{--color-info-hover:color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong))}}.dark{--color-info-subtle:var(--color-indigo-800);--color-info-strong:var(--color-indigo-100)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+:root,:host{--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-300:oklch(81% .117 11.638);--color-rose-700:oklch(51.4% .222 16.935);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-900:oklch(41% .159 10.272);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-white:#fff;--color-primary:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-primary-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-primary-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-primary-subtle:light-dark(var(--color-neutral-200),var(--color-neutral-900));--color-primary-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-accent:light-dark(var(--color-neutral-600),var(--color-neutral-400));--color-accent-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-accent-hover:light-dark(var(--color-neutral-700),var(--color-neutral-300));--color-accent-subtle:light-dark(var(--color-neutral-100),var(--color-neutral-800));--color-accent-strong:light-dark(var(--color-neutral-800),var(--color-neutral-200));--color-border:light-dark(var(--color-neutral-300),var(--color-neutral-700));--color-control-border:var(--color-neutral-500);--color-surface:light-dark(var(--color-neutral-200),var(--color-neutral-800));--color-text:light-dark(var(--color-neutral-950),var(--color-neutral-50));--color-text-contrast:light-dark(var(--color-neutral-50),var(--color-neutral-950));--color-text-hover:light-dark(var(--color-neutral-700),var(--color-neutral-200));--color-text-strong:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-tooltip:light-dark(var(--color-white),var(--color-neutral-700));--color-tooltip-contrast:light-dark(var(--color-neutral-900),var(--color-neutral-100));--color-success:var(--color-emerald-700);--color-success-contrast:var(--color-neutral-50);--color-success-hover:light-dark(#007552,#008e66);--color-success-subtle:light-dark(var(--color-emerald-100),var(--color-emerald-900));--color-success-strong:light-dark(var(--color-emerald-800),var(--color-emerald-300));--color-warning:var(--color-amber-600);--color-warning-contrast:var(--color-neutral-950);--color-warning-hover:light-dark(#d46700,#e78300);--color-warning-subtle:light-dark(var(--color-amber-100),var(--color-amber-900));--color-warning-strong:light-dark(var(--color-amber-800),var(--color-amber-300));--color-destructive:var(--color-rose-700);--color-destructive-contrast:var(--color-neutral-50);--color-destructive-hover:light-dark(#c00036,#d1054b);--color-destructive-subtle:light-dark(var(--color-rose-100),var(--color-rose-900));--color-destructive-strong:light-dark(var(--color-rose-800),var(--color-rose-300));--color-info:var(--color-indigo-600);--color-info-contrast:var(--color-neutral-50);--color-info-hover:light-dark(#4b36e9,#5e4ff9);--color-info-subtle:light-dark(var(--color-indigo-100),var(--color-indigo-900));--color-info-strong:light-dark(var(--color-indigo-800),var(--color-indigo-300))}.neutral{--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}.primary{--intent-color:var(--color-primary);--intent-contrast:var(--color-primary-contrast);--intent-hover:var(--color-primary-hover);--intent-strong:var(--color-primary-strong);--intent-subtle:var(--color-primary-subtle);--intent-border:var(--color-primary);--intent-fill-max:100%}.secondary{--intent-color:var(--color-accent);--intent-contrast:var(--color-accent-contrast);--intent-hover:var(--color-accent-hover);--intent-strong:var(--color-accent-strong);--intent-subtle:var(--color-accent-subtle);--intent-border:var(--color-accent);--intent-fill-max:100%}.success{--intent-color:var(--color-success);--intent-contrast:var(--color-success-contrast);--intent-hover:var(--color-success-hover);--intent-strong:var(--color-success-strong);--intent-subtle:var(--color-success-subtle);--intent-border:var(--color-success);--intent-fill-max:100%}.warning{--intent-color:var(--color-warning);--intent-contrast:var(--color-warning-contrast);--intent-hover:var(--color-warning-hover);--intent-strong:var(--color-warning-strong);--intent-subtle:var(--color-warning-subtle);--intent-border:var(--color-warning);--intent-fill-max:100%}.destructive,.danger,.error{--intent-color:var(--color-destructive);--intent-contrast:var(--color-destructive-contrast);--intent-hover:var(--color-destructive-hover);--intent-strong:var(--color-destructive-strong);--intent-subtle:var(--color-destructive-subtle);--intent-border:var(--color-destructive);--intent-fill-max:100%}.info{--intent-color:var(--color-info);--intent-contrast:var(--color-info-contrast);--intent-hover:var(--color-info-hover);--intent-strong:var(--color-info-strong);--intent-subtle:var(--color-info-subtle);--intent-border:var(--color-info);--intent-fill-max:100%}:where(.btn,.ipt,.text-control,.surface,.textarea,.select,.input-group,.checkbox,.radio,.switch,.card,.panel,.alert,.data-table,.pre,.quote,.tooltip,.badge,.kbd,.code,.loader,.skeleton,.progress,.divider){--intent-color:var(--color-text);--intent-contrast:var(--color-text-contrast);--intent-hover:var(--color-text-hover);--intent-strong:var(--color-text-strong);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:20%}:where(.text-control,.ipt,.textarea,.select,.input-group,.checkbox,.radio,.switch){--intent-border:var(--ui-ink,var(--color-control-border))}:where(.tooltip),.tooltip.neutral{--intent-color:var(--color-tooltip);--intent-contrast:var(--color-tooltip-contrast);--intent-hover:var(--color-tooltip);--intent-strong:var(--color-tooltip-contrast);--intent-subtle:var(--color-surface);--intent-border:var(--ui-ink,var(--color-border));--intent-fill-max:100%}:where(.loader,.skeleton,.progress,.divider){--intent-color:currentColor;--intent-border:currentColor}.solid{--ui-fill:100%;--ui-fg-on-fill:100%}.soft{--ui-fill:12%;--ui-fg-on-fill:0%}.ghost{--ui-fill:0%;--ui-fg-on-fill:0%}.edged{--ui-border:100%}.edgeless{--ui-border:0%}.elevation-none,.flat{--ui-elevation:0}.elevation-sm,.raised{--ui-elevation:1;--elevation-y:1px;--elevation-blur:3px}.elevation-md,.floating{--ui-elevation:2;--elevation-y:1px;--elevation-blur:3px}:root{color-scheme:light dark;--container-narrow:48rem;--container-max:80rem;--container-wide:90rem;--layout-gutter:clamp(1rem, 4vw, 2rem);--layout-section-block:clamp(4rem, 9vw, 7rem);--layout-gap:1rem;--layout-grid-min:16rem;--radius-small:.25rem;--radius-control:.5rem;--radius-surface:.875rem;--control-height:2.5rem;--border-width:1px;--elevation-color:light-dark(#0f172a14,#0000008c);--elevation-none:none;--elevation-sm:0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);--elevation-md:0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);--elevation-lg:0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);--focus-ring:color-mix(in srgb, light-dark(var(--color-neutral-950),var(--color-neutral-50)) 64%, transparent)}@supports (color:color-mix(in lab, red, red)){:root{--focus-ring:color-mix(in srgb, var(--color-primary) 64%, transparent)}}:root{--focus-ring-offset:calc(-1 * var(--border-width));--focus-ring-width:3px;--motion-duration-fast:.12s;--motion-duration-normal:.2s;--motion-duration-slow:.4s;--motion-ease:cubic-bezier(.2, 0, 0, 1);--z-popover:40;--hover-step:14%;--ui-active-transform:scale(.97)}@media (prefers-reduced-motion:reduce){:root{--ui-active-transform:none}}.light,.theme-light,[data-theme=light]{color-scheme:light}.dark,.theme-dark,[data-theme=dark]{color-scheme:dark}

package/dist/tw/aesthetics/chunky-tile.css

@@ -0,0 +1,107 @@
+/* Chunky tile: rounded slabs seated on a darker shade of themselves, pressed flat
+   on click. The look mobile learning and game UIs use -- Duolingo is the one most
+   people picture -- named for what it is made of rather than for a product, the
+   way the other three are.
+
+   Tier 1, plus one recorded selector list at the bottom. Load after the base
+   stylesheet. */
+.chunky-tile {
+  /* Two knobs, read with a fallback so an ancestor can set them -- declared here
+     they would outrank `:root` (R8; see model.md#rules-for-aesthetics). One lift
+     drives everything: the bar is this deep and a press travels exactly this
+     far. 2px reads as a rendering seam, 8px as floating rather than seated. */
+  --_tile-lift: var(--tile-lift, 4px);
+  --_tile-radius: var(--tile-radius, 0.75rem);
+
+  /* The tile grey -- also the neutral bar, at the shadow ink below. Darker than
+     the look's own greys because `--ui-ink` is every text control's boundary,
+     drawn at `--_line-rest: 60%`: neutral-200/300 measure 1.21:1/1.42:1 against
+     the light page where WCAG 1.4.11 asks 3:1, and neutral-400 (2.48:1 whole) is
+     the heaviest grey that still leaves a field legible. */
+  --ui-ink: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+
+  /* One knob for both radii, where glass splits them: a tile and the button
+     inside it share a corner, and drifting apart loses the single-object read.
+     Chips clamp it to `--radius-small` themselves. */
+  --ui-radius: var(--_tile-radius);
+  --ui-radius-surface: var(--_tile-radius);
+
+  /* Half the tile. A 1px border under a 4px bar reads as a shadow with a hairline
+     rather than as a slab with an edge. The ceiling is restated so a chunky region
+     nested inside `.pixel` does not inherit its `0px` and lose the line. */
+  --ui-border-width: 2px;
+  --ui-border-max: 100px;
+
+  /* What makes the bar a *shade*, not a repeat. `box` mixes the bar
+     `color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink), var(--elevation-color))`,
+     and `--intent-border` is `--intent-color` for the hue intents, so at 100%
+     ink the bar equalled the plate exactly (`.btn.success` #007a55 on #007a55).
+     Lowering the ink alone fails: the shipped `--elevation-color` is nearly
+     transparent, so the mix composites *lighter* than the plate. Naming the
+     depth colour opaque points it at black; 72% is measured (`.btn.success`
+     #007a55 on #004c34, neutral `.card` #fafafa on #888888). On a near-black
+     dark card the bar lands lighter and reads as a rim, as the original does.
+     `.glass` resolves `--elevation-color` in its own `--ui-surface-shadow`, so a
+     nested glass region inherits this opaque black -- one entry in the per-token
+     negotiation nesting two aesthetics already is. */
+  --elevation-color: rgb(0 0 0);
+  --ui-shadow-ink: 72%;
+
+  /* Straight down, solid, unblurred, no spread. Zero x is what separates this from
+     neobrutalism, whose two-axis offset reads as a card lifted off the page where
+     this one is a slab seated on it. Spread stays zero so the bar cannot widen past
+     the element's own silhouette and put its corners out of step with the radius. */
+  --ui-shadow-x: 0px;
+  --ui-shadow-y: var(--_tile-lift);
+  --ui-shadow-blur: 0px;
+  --ui-shadow-spread: 0px;
+
+  /* The press, and the reason the lift is one number: the element travels exactly
+     the bar's depth and lands flat on the page. Hover holds still -- a seated slab
+     has one gesture and it belongs to the press -- and the resting shadow tokens
+     above already hold the bar under the pointer, so hover needs nothing of its
+     own. */
+  --ui-active-shadow-x: 0px;
+  --ui-active-shadow-y: 0px;
+  --ui-active-transform: translateY(var(--_tile-lift));
+
+  /* Nothing here clips, blurs, thins its fill, or draws its edge as a ring, and an
+     aesthetic nested inside one that does has to say so rather than inherit it.
+     `--ui-shadow-edge` is the load-bearing clear: inherited from `.pixel` it would
+     point the bar at `--_edge`, which is transparent at `.edgeless`, and the bar
+     would vanish from every `.solid` button on the page -- which is the default
+     `.btn`. */
+  --ui-clip: none;
+  --ui-clip-tight: none;
+  --ui-shadow-inset: ;
+  --ui-shadow-edge: initial;
+  --ui-backdrop: none;
+  --ui-bg-alpha: 1;
+
+  /* Consumer-supplied, the way `.pixel` reads `--font-pixel`. The package ships no
+     font binary, so the aesthetic has no rounded face to fall back to and takes the
+     page's own stack until one is supplied. */
+  font-family: var(--font-rounded, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
+}
+
+/* The one R3 exception this aesthetic takes, recorded in the registry as
+   `selectors`.
+
+   A heavy, slightly tracked label is what makes an action read as a tile rather
+   than as a button, and neither weight nor tracking is a value any material token
+   holds. Adding two would put typography into the material vocabulary for one
+   aesthetic's benefit, and a slot buys nothing besides: `.btn` is the only action
+   the package ships, so an action-scoped token would be this same list with an
+   indirection in front of it. The bare `button` is named beside the class so the
+   treatment reaches an unclassed element the way every Tier 1 token already does.
+
+   Casing is deliberately not here. The chunky-tile look is usually drawn with
+   uppercase labels and the earlier draft of this rule set `text-transform`, but
+   how a label is *worded* is the application's decision and an aesthetic silently
+   recasing it takes that away -- along with any acronym, proper noun, or
+   locale whose rules for case are not English's. A consumer who wants shouting
+   buttons writes it in their own stylesheet, where it is theirs to own. */
+.chunky-tile :is(.btn, button) {
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}

package/dist/tw/aesthetics/glass.css

@@ -0,0 +1,66 @@
+/* Glass: translucent surfaces over a blurred backdrop with a hairline highlight
+   edge. It needs something behind it to blur -- on a flat page background it is a
+   translucent panel and nothing more.
+
+   Tier 1 only. The scope that used to take a hand-written selector list is now a
+   token: only `surface` resolves `--ui-backdrop`, so blur reaches cards,
+   panels, alerts and tooltips while controls stay solid. An active blur costs a
+   compositing layer apiece, and one under every control of a dense cluster reads
+   as noise. */
+.glass {
+  /* Knobs read with a fallback so an ancestor can set them -- declared here they
+     outrank `:root` (R8; see model.md#rules-for-aesthetics). Glass is softer
+     than the base geometry because a translucent tight corner reads as a
+     cut-out; a control/surface pair rather than one value, because they do not
+     scale together and 12/16 keeps a button looking at home inside a card. */
+  --ui-radius: var(--glass-radius, 0.75rem);
+  --ui-radius-surface: var(--glass-radius-surface, 1rem);
+  --ui-border-width: 1px;
+  --ui-border-max: 100px;
+
+  /* Glass catches light from above whatever is under it, so the edge is a light
+     hairline in both themes rather than a theme-following ink. */
+  --ui-ink: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.22));
+
+  --ui-bg-alpha: 0.8;
+  --ui-backdrop: blur(14px) saturate(1.6);
+
+  /* R6. Controls carry no shadow of their own -- the depth in this aesthetic is
+     the blur, and a drop shadow under a translucent button reads as grime. All
+     general parts are explicitly zero so inherited or future geometry cannot
+     leak onto controls. `--ui-surface-shadow` below replaces the shadow of
+     surfaces only. */
+  --ui-shadow-x: 0px;
+  --ui-shadow-y: 0px;
+  --ui-shadow-blur: 0px;
+  --ui-shadow-spread: 0px;
+  /* `--ui-bg-alpha` multiplies the fill, and a surface's default fill is 0%:
+     without a translucent ground the blur ends up behind an opaque background
+     and nothing shows through. */
+  --ui-surface-ground: color-mix(in srgb, var(--color-background) 45%, transparent);
+
+  /* Two layers pulling in with negative spread, so the shadow tucks under the
+     surface instead of haloing onto the backdrop. It is the one shipped aesthetic
+     that cannot be described with the parts, so it takes `surface`'s
+     complete-value slot -- which is also what keeps it off buttons and chips --
+     and the registry records that `.flat` does not reach it. */
+  --ui-surface-shadow: 0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);
+
+  --ui-clip: none;
+  --ui-clip-tight: none;
+  /* Nothing here draws its edge as a ring, and an aesthetic nested inside pixel
+     has to say so rather than inherit it. */
+  --ui-shadow-edge: initial;
+  --ui-hover-transform: none;
+  --ui-active-transform: none;
+}
+
+/* Transparency is the whole aesthetic, so the honest degradation is an opaque
+   surface rather than a softer blur. */
+@media (prefers-reduced-transparency: reduce) {
+  .glass {
+    --ui-bg-alpha: 1;
+    --ui-backdrop: none;
+    --ui-surface-ground: var(--color-background);
+  }
+}

package/dist/tw/aesthetics/index.css

@@ -0,0 +1,9 @@
+/* Every shipped aesthetic. Import one file from `./<name>.css` instead to pay
+   for only the one in use: a cascading class has no static call site, so nothing
+   here can be tree-shaken.
+
+   Import after the base stylesheet in either form. */
+@import "./neobrutalism.css";
+@import "./glass.css";
+@import "./pixel.css";
+@import "./chunky-tile.css";

package/dist/tw/aesthetics/neobrutalism.css

@@ -0,0 +1,63 @@
+/* Neobrutalism: thick ink outline, a hard unblurred offset shadow, and a press
+   that moves the element into its own shadow. Material tokens only, no component
+   named -- the ink reaches everything through the intent reset, the shadow is
+   colourless geometry each component colours against its own intent. Load after
+   the base stylesheet; source order decides against the zero-specificity reset. */
+.neobrutalism {
+  /* Read with a fallback, not declared, so an ancestor (`:root`, where an app
+     themes) can set `--neo-offset`; the private carries the resolved value to
+     the six places below. See model.md#rules-for-aesthetics (R8). */
+  --_neo-offset: var(--neo-offset, 4px);
+
+  /* Pure black reads as ink on a light page and disappears on a dark one, so the
+     ink follows the theme rather than the palette. A thick border in the neutral
+     border grey is a thick grey box, not a brutalist one. */
+  --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  --ui-radius: 0;
+  --ui-radius-surface: 0;
+  --ui-border-width: 2px;
+  --ui-border-max: 100px;
+
+  /* Hard, unblurred, and offset. Scaled by each component's own elevation, so
+     the registry decides which components sit on a slab and `.flat` takes one
+     off without this file knowing which component it landed on. */
+  /* The slab is ink, not shade: a hard offset of the element's own line colour
+     is the whole look, so this aesthetic asks for the intent instead of the
+     neutral depth colour every other shadow uses. */
+  --ui-shadow-ink: 100%;
+  --ui-shadow-x: var(--_neo-offset);
+  --ui-shadow-y: var(--_neo-offset);
+  --ui-shadow-blur: 0px;
+  --ui-shadow-spread: 0px;
+
+  /* The press: travel the offset, shrink the shadow to nothing, so the element
+     lands flat where its slab was. Hover keeps the slab still under the pointer;
+     `box-hover`'s derived fill tint is the whole hover response. One token pair,
+     no `:hover` list, R3 intact. */
+  --ui-active-shadow-x: 0px;
+  --ui-active-shadow-y: 0px;
+  --ui-active-transform: translate(var(--_neo-offset), var(--_neo-offset));
+
+  /* Nothing here clips or blurs, and an aesthetic nested inside another has to
+     say so rather than inherit it. */
+  --ui-clip: none;
+  --ui-clip-tight: none;
+  --ui-shadow-inset: ;
+  /* The slab is depth cast in ink, not this element's line, so an `.edgeless`
+     button keeps it. Cleared rather than omitted, because a neobrutalist region
+     nested inside a pixel one would otherwise inherit pixel's answer and lose the
+     slab on everything the edge axis rests at zero. */
+  --ui-shadow-edge: initial;
+  --ui-backdrop: none;
+}
+
+/* The one R3 exception, recorded in the registry as `selectors`. The slab here
+   is a second ink line, not depth, and an alert -- the one loud container the
+   registry rests flat -- looks unfinished without it. It writes the component's
+   resting default rather than the modifier, so `.flat`/`.raised`/`.floating`
+   still win on the element; a token would name the component through a longer
+   route. `--_d-elevation` inheriting is inert -- it equals `box`'s own fallback. */
+.neobrutalism .alert {
+  --_d-elevation: 1;
+}

package/dist/tw/aesthetics/pixel.css

@@ -0,0 +1,88 @@
+/* Pixel: an 8-bit look built from a single-step `clip-path` corner and an inset
+   ring where the border would be.
+
+   Tier 1 only. `clip-path` clips a border, an outline and any outer shadow, so
+   the border ceiling goes to zero and the edge becomes an inset shadow instead --
+   which is exactly what `--ui-shadow-inset`, `--ui-shadow-spread` and
+   `--ui-shadow-edge` are for. The ring is still coloured by each component's own
+   intent, because the parts carry no colour. */
+.pixel {
+  /* One pixel of the imaginary grid; the ring is one unit thick and the corner
+     one unit square, so scaling it scales the whole look. Read with a fallback
+     so an ancestor can set `--pixel-unit` -- declared here it outranks `:root`
+     (R8; see model.md#rules-for-aesthetics). */
+  --_pixel-unit: var(--pixel-unit, 4px);
+
+  --ui-ink: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --ui-radius: 0;
+  --ui-radius-surface: 0;
+
+  /* A border would be clipped at the straight sides and paint a second line
+     beside the ring, so the ceiling takes it out and the ring does the drawing.
+
+     The width itself stays under the unit deliberately. Its one live reader is
+     the toggle cap in `form.css`, which reads it as the thinnest line this
+     aesthetic will accept where the full ring does not fit: a 16px checkbox
+     spending four pixels a side leaves an eight-pixel hole and an unchecked box
+     reads as a filled one. */
+  --ui-border-width: 2px;
+  --ui-border-max: 0px;
+
+  /* The ring is one unit deep, which is exactly the corner cut, so the staircase
+     is covered and the line does not read as broken at the corners. Spread is not
+     scaled by elevation, so a chip resting at zero keeps its edge. */
+  --ui-shadow-inset: inset;
+  /* The ring is this element's border, not depth, drawn where `clip-path` cannot
+     cut it. `--ui-shadow-edge` says so and `box` colours it from `--_edge`, so
+     the edge axis still decides: an `.edgeless` badge or `.solid` button gets no
+     ring, an `.edged` card does, a field keeps one whatever a container asks.
+     Declared empty because it is read for presence -- the percentage form nests
+     two `color-mix()` results that WebKit resolves as zero (see `box`). */
+  --ui-shadow-edge: ;
+  --ui-shadow-spread: var(--_pixel-unit);
+  --ui-shadow-x: 0px;
+  --ui-shadow-y: 0px;
+  --ui-shadow-blur: 0px;
+
+  /* The focus ring is a second inset layer, and shadows paint first-on-top, so it
+     has to be wider than the edge to show at all. */
+  --ui-focus-inset: calc(var(--_pixel-unit) + var(--focus-ring-width));
+
+  /* One square unit off each corner, and nothing else. The staircase this
+     replaces stepped twice at half the unit to approximate a curve, which is the
+     one thing a low-resolution grid cannot do: at any size it read as a bevel
+     that had not quite committed. A single cut of the grid's own unit is the
+     shape the look is actually made of.
+
+     The polygon resolves the unit here, on `.pixel`, and inherits down
+     already-resolved -- so a component cannot rescale the corner by setting
+     `--pixel-unit` on itself, and the knob belongs above rather than within. */
+  --ui-clip: polygon(
+    0 var(--_pixel-unit),
+    var(--_pixel-unit) var(--_pixel-unit),
+    var(--_pixel-unit) 0,
+    calc(100% - var(--_pixel-unit)) 0,
+    calc(100% - var(--_pixel-unit)) var(--_pixel-unit),
+    100% var(--_pixel-unit),
+    100% calc(100% - var(--_pixel-unit)),
+    calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)),
+    calc(100% - var(--_pixel-unit)) 100%,
+    var(--_pixel-unit) 100%,
+    var(--_pixel-unit) calc(100% - var(--_pixel-unit)),
+    0 calc(100% - var(--_pixel-unit))
+  );
+  /* Chips take the other half of the vocabulary: no radius at all. The cut is one
+     grid unit whatever the element is, and one unit off each corner of a 24px
+     badge or a 16px checkbox is a bite rather than a corner. Squared is the
+     honest small-scale answer, and it is still the pixel look -- the aesthetic is
+     a grid, and a square is on it. */
+  --ui-clip-tight: none;
+
+  --ui-hover-transform: none;
+  --ui-active-transform: none;
+  --ui-backdrop: none;
+
+  /* Consumer-supplied. The package ships no font binary, so the aesthetic has no
+     font to fall back to but a monospace stack. */
+  font-family: var(--font-pixel, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+}

package/dist/tw/box.css

@@ -0,0 +1,185 @@
+@reference "tailwindcss";
+
+/* How a box is painted, in one place: intent supplies the colour, presentation
+   how much of it, the aesthetic the material, and this composes the three. It
+   composes here, not on a container, because a custom property resolves its
+   `var()` on the element that declares it -- a token referencing an intent would
+   inherit down already-resolved against the wrong one. So the aesthetic ships
+   colourless geometry and the colour is mixed here. A component's resting values
+   arrive as `--_d-*`; everything else is the three axes. */
+@utility box {
+  /* Presentation resolved against the component's registry default, then capped
+     by `--intent-fill-max` -- neutral stops early because a full fill of the
+     page's ink is a slab. The cap lands before the hover step, so a capped
+     intent still deepens on hover instead of pinning rest and hover together.
+     See model.md#the-ink-is-gated-by-the-plate-not-tied-to-the-fill. */
+  --_capped: min(var(--ui-fill, var(--_d-fill)), var(--intent-fill-max, 100%));
+  --_fill: calc(var(--_capped) * var(--ui-bg-alpha, 1));
+  --_hover-fill: calc(min(100%, var(--_capped) + var(--hover-step)) * var(--ui-bg-alpha, 1));
+  /* How much of the foreground is the contrast ink: what the presentation asks
+     for, gated by how much the plate can carry. The second term ramps in past a
+     half fill and reaches full at a full fill -- below that a partial plate
+     keeps `--intent-strong`, the tone picked to be read on the page. Legibility
+     is not linear, so this is not `min(asked, --intent-fill-max)`: a capped
+     neutral `.solid` fills to 20% and needs the darkest ink, not one walked 20%
+     toward the page (measured 6.63:1 where strong gives 10.9:1). `--ui-fg-on-fill`
+     stays the ceiling, not the result, or the slot is declared and unread. */
+  --_on-fill: min(var(--ui-fg-on-fill, var(--_d-fg-on-fill)), max(0%, calc(var(--_capped) * 2 - 100%)));
+
+  --_bg: color-mix(in oklab, var(--intent-color) var(--_fill), var(--_d-ground, transparent));
+  /* The two ends answer different questions: `--intent-contrast` prints *on* the
+     fill, `--intent-strong` prints on the page (the slot for readable ink on a
+     subtle fill). Reading `--intent-color` at the page end instead makes every
+     colour do double duty and prints a soft amber component at 3.1:1.
+     `--intent-contrast` keeps its own meaning -- `--_on-fill` reconciles it with
+     a capped intent -- rather than being bent so neutral's contrast is the ink,
+     which rendered a checked neutral checkbox black-on-black. */
+  --_fg: color-mix(in oklab, var(--intent-contrast) var(--_on-fill), var(--intent-strong));
+  /* P3: the line blends toward the fill by the fill amount, so a filled box has
+     a seamless edge. Blend first, amount after (`--_edge-amount` below) -- the
+     other order lands `.edgeless` on the fill colour, which the border box then
+     paints as a second translucent coat: a ring around an element that asked for
+     no edge. The blend runs toward `--_bg`, not raw `--intent-color`, so under
+     an aesthetic that thins the fill a translucent box does not keep an opaque
+     ring. */
+  --_line: color-mix(in oklab, var(--_bg) var(--ui-fill, var(--_d-fill)), var(--intent-border));
+  /* How much line there is, as an input rather than a result. A component that
+     must keep its line whatever the edge class says raises `--_edge-floor`
+     instead of rewriting `--_edge`, and the composition above still runs.
+
+     The distinction is not cosmetic. Rewriting the result drops every term the
+     result was composed from, silently and with nothing to report: that is how
+     `--ui-border` stopped reaching all six text controls, and how `--_d-border`
+     sat declared and unread on each of them for a release. Bounding the input
+     leaves the axis live, so `.edged` and `.edgeless` still mean what they say
+     on a component that happens to floor itself. */
+  --_edge-amount: max(var(--ui-border, var(--_d-border)), var(--_edge-floor, 0%));
+  --_edge: color-mix(in oklab, var(--_line) var(--_edge-amount), transparent);
+  --_width: min(var(--ui-border-width, var(--border-width)), var(--ui-border-max, 100px));
+
+  /* Elevation is a unitless multiplier over the aesthetic's shadow geometry, so
+     one number turns a raised element flat without knowing what the aesthetic
+     draws. Zero lengths are written `0px` because `calc(0 * 1)` yields a number
+     and a shadow position needs a length. */
+  --_elevation: var(--ui-elevation, var(--_d-elevation, 1));
+  --_sx: calc(var(--ui-shadow-x, var(--_d-shadow-x, 0px)) * var(--_elevation));
+  /* Three slots, most specific first: the aesthetic, then a component that draws
+     its own depth, then the plain step `.raised`/`.floating` supply on a page
+     with no aesthetic. The order lets a raised card under `.neobrutalism` keep
+     the slab. Nothing declares the last slot until something asks for depth, so
+     a plain unmodified page has no shadow anywhere. */
+  --_sy: calc(var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px))) * var(--_elevation));
+  --_sb: calc(var(--ui-shadow-blur, var(--_d-shadow-blur, var(--elevation-blur, 0px))) * var(--_elevation));
+  /* Spread is deliberately not scaled. An aesthetic that draws its edge as an
+     inset ring spends spread on it, and scaling that by elevation would erase
+     the edge of every component the registry rests at zero. Elevation is depth:
+     offset and blur. */
+  --_ss: var(--ui-shadow-spread, var(--_d-shadow-spread, 0px));
+  /* A shadow is a neutral depth cue by default, the intent's own ink only where
+     an aesthetic asks (`--ui-shadow-ink`, a bare percentage so it inherits and
+     mixes where the intent lives). An intent-coloured shadow at full opacity is
+     a smear of the component's hue, not depth; neobrutalism's slab, which *is*
+     ink, asks for it by name. */
+  --_depth-color: color-mix(in oklab, var(--intent-border) var(--ui-shadow-ink, 0%), var(--elevation-color));
+  /* Or the shadow *is* the edge. An aesthetic that draws its line as an inset
+     ring (`.pixel`) puts the border where `clip-path` cannot cut it, so that
+     ring must answer the edge axis like a real border -- `--_edge` already does,
+     carrying P3's blend and `--_edge-amount` as its alpha, transparent at
+     `.edgeless`. Kept separate from `--ui-shadow-ink`, which means the opposite:
+     neobrutalism's slab is depth in ink and stays under `.edgeless`.
+
+     The switch is presence, not a percentage, and that is measured: written as
+     `color-mix(... var(--_edge) var(--ui-shadow-edge), var(--_depth-color))`,
+     WebKit alone resolves the nested `color-mix()` as though the percentage were
+     zero. So the aesthetic declares the token empty to mean "my shadow is my
+     edge", and an undeclared token makes the line invalid at computed-value time
+     and hands `var()` its fallback -- the idiom `--_focus-stack` also uses. */
+  --_edge-shadow-color: var(--ui-shadow-edge) var(--_edge);
+  --_shadow-color: var(--_edge-shadow-color, var(--_depth-color));
+  --_shadow-parts: var(--ui-shadow-inset,) var(--_sx) var(--_sy) var(--_sb) var(--_ss) var(--_shadow-color);
+  /* Indirection so a component can substitute a complete value of its own
+     without restating the parts -- `surface` does, for the multi-layer case.
+     There is deliberately no `--ui-shadow` wrapper: a complete value has nothing
+     for the elevation multiplier to reach, so `.flat` would silently stop working
+     on anything that set one. `--ui-surface-shadow` is that escape hatch narrowed
+     to the single case that needs it. */
+  --_shadow: var(--_shadow-parts);
+  --_focus-stack: var(--_shadow), inset 0 0 0 var(--ui-focus-inset) var(--focus-ring);
+
+  background-color: var(--_bg);
+  color: var(--_fg);
+  border: var(--_width) solid var(--_edge);
+  border-radius: var(--ui-radius, var(--radius-control));
+  box-shadow: var(--_shadow);
+  clip-path: var(--ui-clip, none);
+  transition:
+    background-color var(--motion-duration-normal) var(--motion-ease),
+    border-color var(--motion-duration-normal) var(--motion-ease),
+    box-shadow var(--motion-duration-normal) var(--motion-ease),
+    color var(--motion-duration-normal) var(--motion-ease),
+    opacity var(--motion-duration-normal) var(--motion-ease),
+    transform var(--motion-duration-normal) var(--motion-ease);
+
+  /* An aesthetic that clips cannot show the global focus outline, so it declares
+     `--ui-focus-inset` and gets an inset layer instead. With no such aesthetic
+     the token is undefined, which makes the whole stack invalid at computed-value
+     time -- so `var()` takes the fallback and the box keeps the shadow it already
+     had, while the outline from `reset.css` does the work.
+
+     The stack has to be built as one custom property. Written inline, the
+     invalid `var()` would poison the `box-shadow` declaration itself, and a
+     declaration invalid at computed-value time becomes `unset` -- which for a
+     non-inherited property is `initial`, that is `none`. Every focused box would
+     lose its shadow rather than keep it. */
+  &:focus-visible {
+    box-shadow: var(--_focus-stack, var(--_shadow));
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"],
+  &[data-disabled] {
+    @apply cursor-not-allowed;
+
+    opacity: 0.58;
+  }
+}
+
+/* Hover is derived from the resting fill rather than declared: one formula, no
+   tokens, no branches. `ghost` picks up a tint, `soft` deepens, `solid` stays
+   full and darkens because the colour changed.
+
+   Separate from `box` because tinting on hover is right for something you press
+   and wrong for something you type into, so a component opts in. */
+@utility box-hover {
+  &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+    --_bg: color-mix(in oklab, var(--intent-hover) var(--_hover-fill), var(--_d-ground, transparent));
+    /* P3 again, against the hover tone. Only the ink end has to move: the fill
+       end is `--_bg`, which the line above already redefined, so the resting
+       formula follows the hover on its own. Without this the edge blends toward
+       the resting ink -- a ring of the colour the box just left. */
+    --_line: color-mix(in oklab, var(--_bg) var(--ui-fill, var(--_d-fill)), var(--intent-hover));
+    --_sx: calc(var(--ui-hover-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_elevation));
+    --_sy: calc(
+      var(--ui-hover-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, var(--elevation-y, 0px)))) * var(--_elevation)
+    );
+
+    transform: var(--ui-hover-transform, none);
+  }
+}
+
+/* The press, beside the hover for the same reason: moving on `:active` is right
+   for something you click and meaningless on something you type into, so a
+   component opts in. `btn` and `.card.interactive` both do. The gesture is the
+   aesthetic's -- neobrutalism travels into its offset shadow, chunky-tile drops
+   onto its bar -- and with no aesthetic it is the base `scale(0.97)` from
+   `theme.css`, dropped under reduced motion. The `--ui-active-shadow-*` slots
+   stay no-ops until an aesthetic sets them. */
+@utility box-active {
+  &:active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
+    --_sx: calc(var(--ui-active-shadow-x, var(--ui-shadow-x, var(--_d-shadow-x, 0px))) * var(--_elevation));
+    --_sy: calc(var(--ui-active-shadow-y, var(--ui-shadow-y, var(--_d-shadow-y, 0px))) * var(--_elevation));
+
+    transform: var(--ui-active-transform, none);
+  }
+}