@human-synthesis/norns-ui 0.0.3 → 0.0.5

package/src/styles/atoms.css

@@ -1,26 +1,113 @@
 /*
  * Norns UI — component atom classes.
  *
- * Pure Tailwind utility-composition via `@layer components`. No JS, no Svelte
- * — just classes consumers can use directly via Pug shorthand (`button.btn.btn-primary`)
- * or via the wrapper components (`<Btn variant="primary">`).
+ * Pure Tailwind utility-composition via `@layer components`. No JS, no Svelte.
+ * All atoms reference *role tokens* from tokens.css — never raw color shades.
+ * That's how light/dark theme swap works through a single point of change.
  *
  * Naming convention: `<atom>-<variant>` and `<atom>-<size>`. AI-predictable.
  */
 
 @reference 'tailwindcss';
 
+@layer base {
+	/* Body */
+	html {
+		font-family: var(--font-sans);
+		color: var(--color-fg);
+		background-color: var(--color-bg);
+		font-feature-settings: 'ss01';
+	}
+	body {
+		color: var(--color-fg);
+		background-color: var(--color-bg);
+	}
+
+	/* Reduced-motion: globally short-circuit our transitions/animations.
+	 * Components using prefers-reduced-motion: reduce explicitly will get this.
+	 */
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+			scroll-behavior: auto !important;
+		}
+	}
+
+	/* Heading hierarchy — applied to bare h1..h6 unless overridden via Tailwind. */
+	h1 {
+		@apply text-4xl font-bold tracking-tight leading-tight;
+	}
+	h2 {
+		@apply text-3xl font-semibold tracking-tight leading-tight;
+	}
+	h3 {
+		@apply text-2xl font-semibold tracking-tight leading-snug;
+	}
+	h4 {
+		@apply text-xl font-semibold leading-snug;
+	}
+	h5 {
+		@apply text-lg font-semibold leading-snug;
+	}
+	h6 {
+		@apply text-base font-semibold;
+	}
+
+	/* Inline code + pre */
+	code {
+		font-family: var(--font-mono);
+		@apply text-[0.9em] px-1 py-0.5 rounded;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	pre {
+		font-family: var(--font-mono);
+		@apply text-sm p-3 rounded overflow-x-auto;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	pre code {
+		@apply p-0 bg-transparent;
+	}
+
+	/* Keyboard */
+	kbd {
+		font-family: var(--font-mono);
+		@apply text-xs px-1.5 py-0.5 rounded border;
+		background-color: var(--color-bg-muted);
+		border-color: var(--color-border);
+		color: var(--color-fg);
+	}
+
+	/* Default form-control reset on dark */
+	hr {
+		border-color: var(--color-border);
+	}
+}
+
 @layer components {
-	/* --- Button --- */
+	/* ============================================================ */
+	/* Button                                                       */
+	/* ============================================================ */
 	.btn {
-		@apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium leading-none whitespace-nowrap;
-		@apply transition-[background-color,color,box-shadow,opacity] duration-150 ease-out;
-		@apply select-none cursor-pointer;
+		@apply inline-flex items-center justify-center gap-2 text-sm font-medium leading-none whitespace-nowrap;
+		@apply transition-[background-color,color,border-color,transform,opacity] duration-150 ease-out;
+		@apply select-none cursor-pointer relative overflow-hidden;
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
-		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500;
+		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+		--tw-ring-color: var(--color-ring);
+		--tw-ring-offset-color: var(--color-bg);
+		border-radius: var(--ui-radius);
 		height: var(--ui-h-md);
 		padding-inline: 0.875rem;
 	}
+	.btn:not(:disabled):active {
+		transform: scale(0.97);
+	}
 
 	.btn-sm {
 		@apply text-xs;
@@ -35,211 +122,308 @@
 	}
 
 	.btn-primary {
-		@apply bg-primary-600 text-white shadow-sm hover:bg-primary-700 active:bg-primary-800;
+		background-color: var(--color-primary-600);
+		color: var(--color-fg-on-primary);
+	}
+	.btn-primary:hover {
+		background-color: var(--color-primary-700);
+	}
+	.btn-primary:active {
+		background-color: var(--color-primary-800);
 	}
 
 	.btn-secondary {
-		@apply bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-200 active:bg-neutral-300;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+	}
+	.btn-secondary:hover {
+		background-color: var(--color-bg-subtle);
+	}
+	.btn-secondary:active {
+		background-color: var(--color-border);
 	}
 
 	.btn-ghost {
-		@apply bg-transparent text-neutral-700 hover:bg-neutral-100 active:bg-neutral-200;
+		background-color: transparent;
+		color: var(--color-fg-muted);
+	}
+	.btn-ghost:hover {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
 	}
 
 	.btn-danger {
-		@apply bg-red-600 text-white shadow-sm hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500;
+		background-color: var(--color-danger-600);
+		color: white;
+	}
+	.btn-danger:hover {
+		background-color: var(--color-danger-700);
+	}
+	.btn-danger:active {
+		background-color: var(--color-danger-800);
+	}
+	.btn-danger:focus-visible {
+		--tw-ring-color: var(--color-danger-500);
 	}
 
 	.btn-link {
-		@apply bg-transparent text-primary-600 underline-offset-4 hover:underline px-0;
+		@apply bg-transparent underline-offset-4 hover:underline px-0;
+		color: var(--color-primary-600);
 		height: auto;
 	}
+	[data-theme='dark'] .btn-link {
+		color: var(--color-primary-400);
+	}
 
-	/* --- Spinner (used inside Btn loading state) --- */
+	/* ============================================================ */
+	/* Spinner (used inside Btn loading state)                      */
+	/* ============================================================ */
 	.ui-spinner {
 		@apply inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent;
 	}
 
-	/* --- Text inputs --- */
+	/* ============================================================ */
+	/* Inputs                                                       */
+	/* ============================================================ */
 	.input {
-		@apply block w-full rounded-md border border-neutral-300 bg-white text-sm text-neutral-900 shadow-sm;
-		@apply placeholder:text-neutral-400;
-		@apply transition-[border-color,box-shadow] duration-150 ease-out;
-		@apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30;
-		@apply disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:opacity-70;
+		@apply block w-full text-sm leading-none;
+		@apply transition-[border-color,background-color] duration-150 ease-out;
+		@apply focus:outline-none focus:ring-2;
+		@apply disabled:cursor-not-allowed disabled:opacity-70;
+		background-color: var(--color-bg);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border-strong);
+		border-radius: var(--ui-radius);
 		height: var(--ui-h-md);
 		padding-inline: 0.75rem;
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+	}
+	.input::placeholder {
+		color: var(--color-fg-subtle);
+	}
+	.input:focus {
+		border-color: var(--color-ring);
+	}
+	.input:disabled {
+		background-color: var(--color-bg-muted);
 	}
-
 	.input-sm {
 		@apply text-xs;
 		height: var(--ui-h-sm);
 		padding-inline: 0.625rem;
 	}
-
 	.input-lg {
 		@apply text-base;
 		height: var(--ui-h-lg);
 		padding-inline: 0.875rem;
 	}
-
 	.input-err {
-		@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
+		border-color: var(--color-danger-500);
+	}
+	.input-err:focus {
+		border-color: var(--color-danger-500);
+		--tw-ring-color: color-mix(in oklab, var(--color-danger-500) 30%, transparent);
 	}
 
-	/* Textarea overrides .input's height */
+	/* Textarea */
 	.textarea {
-		@apply block w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 shadow-sm;
-		@apply placeholder:text-neutral-400;
-		@apply transition-[border-color,box-shadow] duration-150 ease-out;
-		@apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30;
-		@apply disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:opacity-70;
+		@apply block w-full text-sm leading-snug px-3 py-2;
+		@apply transition-[border-color,background-color] duration-150 ease-out;
+		@apply focus:outline-none focus:ring-2;
+		@apply disabled:cursor-not-allowed disabled:opacity-70;
+		background-color: var(--color-bg);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border-strong);
+		border-radius: var(--ui-radius);
 		min-height: calc(var(--ui-h-md) * 2);
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+	}
+	.textarea::placeholder {
+		color: var(--color-fg-subtle);
+	}
+	.textarea:focus {
+		border-color: var(--color-ring);
+	}
+	.textarea:disabled {
+		background-color: var(--color-bg-muted);
 	}
-
 	.textarea-err {
-		@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
+		border-color: var(--color-danger-500);
+	}
+	.textarea-err:focus {
+		border-color: var(--color-danger-500);
+		--tw-ring-color: color-mix(in oklab, var(--color-danger-500) 30%, transparent);
 	}
 
+	/* Select */
 	.select {
-		@apply block w-full rounded-md border border-neutral-300 bg-white text-sm text-neutral-900 shadow-sm;
-		@apply transition-[border-color,box-shadow] duration-150 ease-out;
-		@apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30;
-		@apply disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:opacity-70;
+		@apply block w-full text-sm leading-none;
+		@apply transition-[border-color,background-color] duration-150 ease-out;
+		@apply focus:outline-none focus:ring-2;
+		@apply disabled:cursor-not-allowed disabled:opacity-70;
+		background-color: var(--color-bg);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border-strong);
+		border-radius: var(--ui-radius);
 		height: var(--ui-h-md);
 		padding-inline: 0.75rem;
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+	}
+	.select:focus {
+		border-color: var(--color-ring);
+	}
+	.select:disabled {
+		background-color: var(--color-bg-muted);
 	}
-
 	.select-err {
-		@apply border-red-500 focus:border-red-500 focus:ring-red-500/30;
+		border-color: var(--color-danger-500);
 	}
 
-	/* --- Checkbox / Radio --- */
+	/* Checkbox / Radio */
 	.checkbox {
-		@apply size-4 cursor-pointer rounded border-neutral-300 text-primary-600 shadow-sm;
-		@apply focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1;
+		@apply size-4 cursor-pointer rounded;
+		@apply focus:outline-none focus:ring-2 focus:ring-offset-1;
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
+		border: 1px solid var(--color-border-strong);
+		accent-color: var(--color-primary-600);
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+		--tw-ring-offset-color: var(--color-bg);
 	}
-
 	.checkbox-err {
-		@apply border-red-500 focus:ring-red-500/30;
+		border-color: var(--color-danger-500);
 	}
-
 	.radio {
-		@apply size-4 cursor-pointer border-neutral-300 text-primary-600 shadow-sm;
-		@apply focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1;
+		@apply size-4 cursor-pointer rounded-full;
+		@apply focus:outline-none focus:ring-2 focus:ring-offset-1;
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
+		border: 1px solid var(--color-border-strong);
+		accent-color: var(--color-primary-600);
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+		--tw-ring-offset-color: var(--color-bg);
 	}
-
 	.radio-err {
-		@apply border-red-500 focus:ring-red-500/30;
+		border-color: var(--color-danger-500);
 	}
 
-	/* --- Switch (styled checkbox / toggle) ---
-	 * Implemented as a checkbox the user wraps in a label; we provide the
-	 * pill track via .switch and the moving knob via ::before.
-	 */
+	/* Switch */
 	.switch {
-		@apply relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full bg-neutral-200 shadow-inner;
+		@apply relative inline-flex h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full;
 		@apply transition-colors duration-150 ease-out;
-		@apply checked:bg-primary-600;
-		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:ring-offset-1;
+		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1;
 		@apply disabled:cursor-not-allowed disabled:opacity-60;
+		background-color: var(--color-border-strong);
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+		--tw-ring-offset-color: var(--color-bg);
+	}
+	.switch:checked {
+		background-color: var(--color-primary-600);
 	}
 	.switch::before {
 		content: '';
-		@apply absolute left-0.5 top-0.5 size-4 rounded-full bg-white shadow;
+		@apply absolute left-0.5 top-0.5 size-4 rounded-full;
 		@apply transition-transform duration-150 ease-out;
+		background-color: white;
 	}
 	.switch:checked::before {
 		transform: translateX(1rem);
 	}
 
-	/* --- Field (label + control + help/error) --- */
+	/* ============================================================ */
+	/* Field                                                        */
+	/* ============================================================ */
 	.field {
 		@apply flex flex-col;
 	}
-
 	.field-label {
-		@apply mb-1 block text-sm font-medium text-neutral-700;
+		@apply mb-1 block text-sm font-medium;
+		color: var(--color-fg);
 	}
-
 	.field-required {
-		@apply ml-0.5 text-red-600;
+		@apply ml-0.5;
+		color: var(--color-danger-600);
 	}
-
 	.field-help {
-		@apply mt-1 text-xs text-neutral-500;
+		@apply mt-1 text-xs;
+		color: var(--color-fg-muted);
 	}
-
 	.field-error {
-		@apply mt-1 text-xs text-red-600;
+		@apply mt-1 text-xs;
+		color: var(--color-danger-600);
 	}
-
 	.field-row {
 		@apply flex items-center gap-2;
 	}
 
-	/* Field-group: border-grouped collection of fields */
 	.field-group {
-		@apply space-y-3 rounded-md border border-neutral-200 p-4;
+		@apply space-y-3 p-4;
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
 	}
-
 	.field-group-legend {
-		@apply -mx-1 -mt-1 px-1 text-sm font-medium text-neutral-700;
+		@apply -mx-1 -mt-1 px-1 text-sm font-medium;
+		color: var(--color-fg);
 	}
 
-	/* --- Form (vertical stack of fields) --- */
+	/* Form */
 	.form {
 		@apply space-y-4;
 	}
 
-	/* --- Dialog (modal) ---
-	 * Bits UI toggles `data-state="open|closed"`. We use plain CSS transitions
-	 * targeting that attribute for fade + scale; no `tailwindcss-animate`
-	 * dependency, no v4 plugin.
-	 */
+	/* ============================================================ */
+	/* Dialog                                                       */
+	/* ============================================================ */
 	.dialog-overlay {
-		@apply fixed inset-0 z-50 bg-black/50 backdrop-blur-sm opacity-0 transition-opacity duration-150;
+		@apply fixed inset-0 z-50 backdrop-blur-sm opacity-0 transition-opacity duration-150;
+		background-color: oklch(0% 0 0 / 0.5);
 	}
 	.dialog-overlay[data-state='open'] {
 		@apply opacity-100;
 	}
-
 	.dialog-content {
-		@apply fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2;
-		@apply rounded-lg border border-neutral-200 bg-white p-6 shadow-xl;
-		@apply opacity-0 scale-95 transition duration-150;
+		@apply fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 p-6;
+		@apply opacity-0 scale-95 transition duration-150 shadow-xl;
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius-lg);
 	}
 	.dialog-content[data-state='open'] {
 		@apply opacity-100 scale-100;
 	}
-
 	.dialog-title {
-		@apply text-lg font-semibold leading-tight tracking-tight text-neutral-900;
+		@apply text-lg font-semibold leading-tight tracking-tight;
+		color: var(--color-fg);
 	}
-
 	.dialog-description {
-		@apply mt-1 text-sm text-neutral-600;
+		@apply mt-1 text-sm;
+		color: var(--color-fg-muted);
 	}
-
 	.dialog-body {
 		@apply mt-4;
 	}
-
 	.dialog-actions {
 		@apply mt-6 flex items-center justify-end gap-2;
 	}
-
 	.dialog-close {
-		@apply absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-md text-neutral-500;
-		@apply hover:bg-neutral-100 hover:text-neutral-900;
-		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500;
+		@apply absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-md;
+		@apply focus-visible:outline-none focus-visible:ring-2;
+		color: var(--color-fg-muted);
+		--tw-ring-color: var(--color-ring);
+	}
+	.dialog-close:hover {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
 	}
 
-	/* --- Sheet (side panel) --- */
+	/* ============================================================ */
+	/* Sheet                                                        */
+	/* ============================================================ */
 	.sheet-content {
-		@apply fixed z-50 border border-neutral-200 bg-white shadow-xl transition-transform duration-200 ease-out;
+		@apply fixed z-50 transition-transform duration-200 ease-out shadow-xl;
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
 	}
 	.sheet-right {
 		@apply right-0 top-0 h-full w-full max-w-md translate-x-full p-6;
@@ -265,70 +449,102 @@
 	.sheet-bottom[data-state='open'] {
 		@apply translate-y-0;
 	}
-
 	.sheet-body {
 		@apply mt-4;
 	}
 
-	/* --- Popover --- */
+	/* ============================================================ */
+	/* Popover / Dropdown / Tooltip                                 */
+	/* ============================================================ */
 	.popover-content {
-		@apply z-50 rounded-md border border-neutral-200 bg-white p-3 text-sm shadow-md;
+		@apply z-50 p-3 text-sm shadow-md;
 		@apply opacity-0 scale-95 transition duration-150;
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
 	}
 	.popover-content[data-state='open'] {
 		@apply opacity-100 scale-100;
 	}
 
-	/* --- Dropdown menu --- */
 	.dropdown-content {
-		@apply z-50 min-w-[8rem] rounded-md border border-neutral-200 bg-white p-1 text-sm shadow-md;
+		@apply z-50 min-w-[8rem] p-1 text-sm shadow-md;
 		@apply opacity-0 scale-95 transition duration-150;
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
 	}
 	.dropdown-content[data-state='open'] {
 		@apply opacity-100 scale-100;
 	}
 	.dropdown-item {
-		@apply flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-neutral-800 outline-none;
-		@apply data-[highlighted]:bg-neutral-100 data-[highlighted]:text-neutral-900;
-		@apply data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50;
+		@apply flex cursor-pointer select-none items-center px-2 py-1.5 text-sm outline-none rounded-sm;
+		color: var(--color-fg);
+	}
+	.dropdown-item[data-highlighted] {
+		background-color: var(--color-bg-muted);
+	}
+	.dropdown-item[data-disabled] {
+		@apply cursor-not-allowed opacity-50;
 	}
 	.dropdown-separator {
-		@apply -mx-1 my-1 h-px bg-neutral-200;
+		@apply -mx-1 my-1 h-px;
+		background-color: var(--color-border);
 	}
 
-	/* --- Tooltip --- */
 	.tooltip-content {
-		@apply z-50 overflow-hidden rounded-md bg-neutral-900 px-2 py-1 text-xs text-white shadow-md;
+		@apply z-50 overflow-hidden px-2 py-1 text-xs shadow-md;
 		@apply opacity-0 scale-95 transition duration-150;
+		background-color: var(--color-bg-inverse);
+		color: var(--color-bg);
+		border-radius: var(--ui-radius-sm);
 	}
 	.tooltip-content[data-state='delayed-open'],
 	.tooltip-content[data-state='instant-open'] {
 		@apply opacity-100 scale-100;
 	}
 
-	/* --- Tabs --- */
+	/* ============================================================ */
+	/* Tabs                                                         */
+	/* ============================================================ */
 	.tabs-root {
 		@apply space-y-3;
 	}
 	.tabs-list {
-		@apply inline-flex h-9 items-center justify-center rounded-md bg-neutral-100 p-1 text-neutral-600;
+		@apply inline-flex h-9 items-center justify-center p-1;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg-muted);
+		border-radius: var(--ui-radius);
 	}
 	.tabs-trigger {
-		@apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium;
-		@apply transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500;
-		@apply data-[state=active]:bg-white data-[state=active]:text-neutral-900 data-[state=active]:shadow-sm;
+		@apply inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-medium rounded-sm;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
 		@apply disabled:cursor-not-allowed disabled:opacity-50;
+		color: var(--color-fg-muted);
+		--tw-ring-color: var(--color-ring);
+	}
+	.tabs-trigger[data-state='active'] {
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
 	}
 	.tabs-content {
 		@apply focus-visible:outline-none;
 	}
 
-	/* --- Toast --- */
+	/* ============================================================ */
+	/* Toast                                                        */
+	/* ============================================================ */
 	.toast-region {
 		@apply pointer-events-none fixed bottom-4 right-4 z-[100] flex w-full max-w-sm flex-col gap-2;
 	}
 	.toast {
-		@apply pointer-events-auto flex items-start gap-3 rounded-md border border-neutral-200 bg-white p-3 shadow-md;
+		@apply pointer-events-auto flex items-start gap-3 p-3 shadow-md;
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
 		animation: norns-toast-in 200ms ease-out;
 	}
 	@keyframes norns-toast-in {
@@ -342,23 +558,1362 @@
 		}
 	}
 	.toast-info {
-		@apply border-neutral-200;
+		background-color: var(--color-info-bg);
+		color: var(--color-info-fg);
+		border-color: var(--color-info-border);
 	}
 	.toast-success {
-		@apply border-green-200 bg-green-50 text-green-900;
+		background-color: var(--color-success-bg);
+		color: var(--color-success-fg);
+		border-color: var(--color-success-border);
 	}
 	.toast-warning {
-		@apply border-amber-200 bg-amber-50 text-amber-900;
+		background-color: var(--color-warning-bg);
+		color: var(--color-warning-fg);
+		border-color: var(--color-warning-border);
 	}
 	.toast-error {
-		@apply border-red-200 bg-red-50 text-red-900;
+		background-color: var(--color-danger-bg);
+		color: var(--color-danger-fg);
+		border-color: var(--color-danger-border);
 	}
 	.toast-message {
 		@apply flex-1 text-sm leading-snug;
 	}
 	.toast-close {
-		@apply -mr-1 -mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded text-neutral-500;
-		@apply hover:bg-neutral-100 hover:text-neutral-900;
-		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500;
+		@apply -mr-1 -mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded;
+		@apply focus-visible:outline-none focus-visible:ring-2;
+		color: currentColor;
+		opacity: 0.6;
+		--tw-ring-color: var(--color-ring);
+	}
+	.toast-close:hover {
+		opacity: 1;
+	}
+
+	/* ============================================================ */
+	/* Card / Surface                                               */
+	/* ============================================================ */
+	.surface {
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+	}
+	.surface-glass {
+		background-color: color-mix(in oklab, var(--color-bg-elevated) 65%, transparent);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+	}
+	.card {
+		background-color: var(--color-bg-elevated);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius-lg);
+		/* No overflow:hidden — would clip popovers / menu dropdowns inside.
+		 * Header & footer round their own corners explicitly. */
+	}
+	.card-padded {
+		@apply p-5;
+	}
+	.card-header {
+		@apply px-5 pt-5 pb-3;
+		border-bottom: 1px solid var(--color-border);
+		border-top-left-radius: var(--ui-radius-lg);
+		border-top-right-radius: var(--ui-radius-lg);
+	}
+	.card-body {
+		@apply p-5;
+	}
+	.card-footer {
+		@apply px-5 py-3;
+		border-top: 1px solid var(--color-border);
+		background-color: var(--color-bg-subtle);
+		border-bottom-left-radius: var(--ui-radius-lg);
+		border-bottom-right-radius: var(--ui-radius-lg);
+	}
+	.card-interactive {
+		@apply cursor-pointer no-underline;
+		color: inherit;
+		transition: border-color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
+	}
+	.card-interactive:hover {
+		border-color: var(--color-border-strong);
+		transform: translateY(-2px);
+		box-shadow: 0 12px 24px -8px oklch(0% 0 0 / 0.10);
+	}
+	.card-interactive:focus-visible {
+		outline: 2px solid var(--color-ring);
+		outline-offset: 2px;
+	}
+
+	/* ============================================================ */
+	/* Banner                                                       */
+	/* ============================================================ */
+	.banner {
+		@apply flex items-start gap-3 p-3 text-sm;
+		border: 1px solid;
+		border-radius: var(--ui-radius);
+		animation: norns-banner-in 250ms cubic-bezier(0.21, 1.02, 0.73, 1) both;
+	}
+	@keyframes norns-banner-in {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	.banner-info {
+		background-color: var(--color-info-bg);
+		color: var(--color-info-fg);
+		border-color: var(--color-info-border);
+	}
+	.banner-success {
+		background-color: var(--color-success-bg);
+		color: var(--color-success-fg);
+		border-color: var(--color-success-border);
+	}
+	.banner-warning {
+		background-color: var(--color-warning-bg);
+		color: var(--color-warning-fg);
+		border-color: var(--color-warning-border);
+	}
+	.banner-danger {
+		background-color: var(--color-danger-bg);
+		color: var(--color-danger-fg);
+		border-color: var(--color-danger-border);
+	}
+	.banner-icon {
+		@apply shrink-0 mt-0.5;
+	}
+	.banner-body {
+		@apply flex-1;
+	}
+	.banner-actions {
+		@apply shrink-0 flex gap-2 ml-auto;
+	}
+
+	/* ============================================================ */
+	/* Badge                                                        */
+	/* ============================================================ */
+	.badge {
+		@apply inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium leading-none;
+		border-radius: var(--ui-radius-full);
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.badge-primary {
+		background-color: var(--color-primary-100);
+		color: var(--color-primary-900);
+	}
+	[data-theme='dark'] .badge-primary {
+		background-color: var(--color-primary-950);
+		color: var(--color-primary-200);
+	}
+	.badge-success {
+		background-color: var(--color-success-bg);
+		color: var(--color-success-fg);
+	}
+	.badge-warning {
+		background-color: var(--color-warning-bg);
+		color: var(--color-warning-fg);
+	}
+	.badge-danger {
+		background-color: var(--color-danger-bg);
+		color: var(--color-danger-fg);
+	}
+	.badge-info {
+		background-color: var(--color-info-bg);
+		color: var(--color-info-fg);
+	}
+	.badge-sm {
+		@apply text-[10px] px-1.5;
+	}
+
+	/* ============================================================ */
+	/* Chip                                                         */
+	/* ============================================================ */
+	.chip {
+		@apply inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius-full);
+	}
+	.chip-remove {
+		@apply -mr-1 inline-flex size-4 items-center justify-center rounded-full;
+		opacity: 0.6;
+	}
+	.chip-remove:hover {
+		opacity: 1;
+		background-color: var(--color-border);
+	}
+
+	/* ============================================================ */
+	/* Avatar                                                       */
+	/* ============================================================ */
+	.avatar {
+		@apply relative inline-flex shrink-0 items-center justify-center overflow-hidden font-medium;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+		border-radius: var(--ui-radius-full);
+	}
+	.avatar-sm {
+		@apply size-6 text-xs;
+	}
+	.avatar-md {
+		@apply size-8 text-sm;
+	}
+	.avatar-lg {
+		@apply size-12 text-base;
+	}
+	.avatar-xl {
+		@apply size-16 text-lg;
+	}
+	.avatar img {
+		@apply h-full w-full object-cover;
+	}
+
+	/* AvatarGroup */
+	.avatar-group {
+		@apply inline-flex items-center;
+	}
+	.avatar-group-item,
+	.avatar-group-overflow {
+		@apply relative inline-flex transition-transform duration-150 ease-out;
+		margin-left: -0.5rem;
+		box-shadow: 0 0 0 2px var(--color-bg);
+		border-radius: var(--ui-radius-full);
+	}
+	.avatar-group-item:first-child,
+	.avatar-group:has(.avatar-group-item:first-child) > .avatar-group-item:first-child {
+		margin-left: 0;
+	}
+	.avatar-group-item:hover {
+		transform: translateY(-2px);
+		z-index: 1;
+	}
+	.avatar-group-overflow {
+		@apply text-xs font-medium;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg-muted);
+	}
+
+	/* GradientText */
+	.gradient-text {
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: transparent;
+		background-size: 200% 200%;
+		background-position: 0% 50%;
+	}
+	.gradient-text-anim {
+		animation: norns-gradient-shift 6s ease-in-out infinite;
+	}
+	@keyframes norns-gradient-shift {
+		0%, 100% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
+	}
+
+	/* CopyButton */
+	.copy-btn-check {
+		animation: norns-copy-pop 250ms ease-out;
+	}
+	@keyframes norns-copy-pop {
+		0% { transform: scale(0.5); opacity: 0; }
+		70% { transform: scale(1.15); }
+		100% { transform: scale(1); opacity: 1; }
+	}
+
+	/* ShinyButton — sweeping shine overlay */
+	.shiny-btn {
+		position: relative;
+		isolation: isolate;
+	}
+	.shiny-btn-shine {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		background: linear-gradient(
+			110deg,
+			transparent 30%,
+			color-mix(in oklab, white 35%, transparent) 50%,
+			transparent 70%
+		);
+		background-size: 250% 100%;
+		background-position: 200% 0;
+		animation: norns-shiny 2.6s ease-in-out infinite;
+		mix-blend-mode: overlay;
+		border-radius: inherit;
+	}
+	@keyframes norns-shiny {
+		0% { background-position: 200% 0; }
+		100% { background-position: -150% 0; }
+	}
+
+	/* RippleButton */
+	.ripple-btn {
+		position: relative;
+		overflow: hidden;
+	}
+	.ripple-btn-ripple {
+		position: absolute;
+		pointer-events: none;
+		border-radius: 9999px;
+		background-color: color-mix(in oklab, currentColor 35%, transparent);
+		transform: scale(0);
+		opacity: 0.6;
+		animation: norns-ripple 600ms ease-out forwards;
+	}
+	@keyframes norns-ripple {
+		to {
+			transform: scale(1);
+			opacity: 0;
+		}
+	}
+
+	/* LiquidButton (motion subpath) */
+	.liquid-btn {
+		position: relative;
+		isolation: isolate;
+		overflow: hidden;
+	}
+	.liquid-btn-blob {
+		position: absolute;
+		inset: -25%;
+		background: radial-gradient(
+			circle,
+			color-mix(in oklab, white 40%, transparent),
+			transparent 60%
+		);
+		transform: scale(0.6);
+		mix-blend-mode: overlay;
+		pointer-events: none;
+		filter: blur(12px);
+		z-index: 0;
+	}
+	.liquid-btn-content {
+		@apply inline-flex items-center gap-2 relative;
+		z-index: 1;
+	}
+
+	/* Sparkles (motion subpath) */
+	.sparkles-wrap {
+		@apply relative inline-block;
+	}
+	.sparkles-overlay {
+		@apply pointer-events-none absolute inset-0 overflow-hidden;
+	}
+	.sparkle {
+		position: absolute;
+		display: block;
+		border-radius: 9999px;
+		background: var(--sparkle-color, var(--color-primary-400));
+		opacity: 0;
+		transform: scale(0);
+		animation: norns-sparkle 2.4s ease-in-out infinite;
+		animation-fill-mode: forwards;
+		filter: drop-shadow(0 0 4px var(--sparkle-color, var(--color-primary-400)));
+	}
+	.sparkles-paused .sparkle {
+		animation-play-state: paused;
+	}
+	@keyframes norns-sparkle {
+		0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
+		20%, 80% { opacity: 1; }
+		50% { transform: scale(1) rotate(180deg); }
+	}
+
+	/* GradientBackground (motion subpath) */
+	.gradient-bg {
+		@apply relative overflow-hidden;
+		background-image: linear-gradient(
+			var(--gradient-bg-angle, 130deg),
+			var(--gradient-bg-stops, var(--color-primary-500), var(--color-info-500))
+		);
+		background-size: 300% 300%;
+		animation: norns-gradient-loop var(--gradient-bg-duration, 18s) ease-in-out infinite;
+	}
+	@keyframes norns-gradient-loop {
+		0%, 100% { background-position: 0% 50%; }
+		25% { background-position: 100% 50%; }
+		50% { background-position: 100% 100%; }
+		75% { background-position: 0% 100%; }
+	}
+
+	/* ============================================================ */
+	/* Skeleton                                                     */
+	/* ============================================================ */
+	.skeleton {
+		@apply block;
+		background-color: var(--color-bg-muted);
+		border-radius: var(--ui-radius-sm);
+		animation: norns-skeleton-pulse 1.6s ease-in-out infinite;
+	}
+	.skeleton-circle {
+		border-radius: var(--ui-radius-full);
+	}
+	@keyframes norns-skeleton-pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.5; }
+	}
+
+	/* ============================================================ */
+	/* Progress                                                     */
+	/* ============================================================ */
+	.progress {
+		@apply relative h-2 w-full overflow-hidden;
+		background-color: var(--color-bg-muted);
+		border-radius: var(--ui-radius-full);
+	}
+	.progress-bar {
+		@apply h-full transition-[width] duration-300 ease-out;
+		background-color: var(--color-primary-600);
+		border-radius: var(--ui-radius-full);
+	}
+	.progress-bar-success {
+		background-color: var(--color-success-600);
+	}
+	.progress-bar-warning {
+		background-color: var(--color-warning-600);
+	}
+	.progress-bar-danger {
+		background-color: var(--color-danger-600);
+	}
+
+	/* Indeterminate (uses CSS keyframes only) */
+	.progress-indeterminate .progress-bar {
+		width: 35%;
+		animation: norns-progress-indeterminate 1.4s ease-in-out infinite;
+	}
+	@keyframes norns-progress-indeterminate {
+		0% { transform: translateX(-100%); }
+		100% { transform: translateX(385%); }
+	}
+
+	/* ============================================================ */
+	/* Header (composite)                                           */
+	/* ============================================================ */
+	.norns-header {
+		@apply flex items-center justify-between gap-4 px-6 py-3;
+		background-color: var(--color-bg);
+		border-bottom: 1px solid var(--color-border);
+	}
+	.norns-header-sticky {
+		@apply sticky top-0 z-30;
+		background-color: color-mix(in oklab, var(--color-bg) 85%, transparent);
+		backdrop-filter: blur(8px);
+	}
+	.norns-header-brand {
+		@apply flex items-center gap-2 font-semibold;
+		color: var(--color-fg);
+	}
+	.norns-header-nav {
+		@apply flex items-center gap-1;
+	}
+	.norns-header-actions {
+		@apply flex items-center gap-2;
+	}
+
+	/* ============================================================ */
+	/* HeroBanner (composite)                                       */
+	/* ============================================================ */
+	.hero {
+		@apply relative overflow-hidden p-8 md:p-12;
+		background-color: var(--color-bg-elevated);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius-lg);
+	}
+	.hero-center {
+		@apply text-center;
+	}
+	.hero-title {
+		@apply text-3xl font-bold tracking-tight md:text-4xl;
+		color: var(--color-fg);
+	}
+	.hero-description {
+		@apply mt-3 text-base md:text-lg max-w-prose;
+		color: var(--color-fg-muted);
+	}
+	.hero-center .hero-description {
+		@apply mx-auto;
+	}
+	.hero-actions {
+		@apply mt-6 flex flex-wrap items-center gap-3;
+	}
+	.hero-center .hero-actions {
+		@apply justify-center;
+	}
+	.hero-image {
+		@apply pointer-events-none absolute inset-y-0 right-0 w-1/2 object-cover opacity-20;
+	}
+
+	/* ============================================================ */
+	/* Stepper                                                      */
+	/* ============================================================ */
+	.stepper {
+		@apply flex items-center gap-3;
+	}
+	.stepper-vertical {
+		@apply flex-col items-stretch;
+	}
+	.stepper-step {
+		@apply flex items-center gap-2 text-sm;
+		color: var(--color-fg-muted);
+	}
+	.stepper-step-current {
+		color: var(--color-fg);
+		font-weight: 600;
+	}
+	.stepper-step-complete {
+		color: var(--color-fg);
+	}
+	.stepper-marker {
+		@apply inline-flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg-muted);
+		border: 1px solid var(--color-border);
+	}
+	.stepper-step-current .stepper-marker {
+		background-color: var(--color-primary-600);
+		color: white;
+		border-color: var(--color-primary-600);
+	}
+	.stepper-step-complete .stepper-marker {
+		background-color: var(--color-success-600);
+		color: white;
+		border-color: var(--color-success-600);
+	}
+	.stepper-divider {
+		@apply h-px flex-1;
+		background-color: var(--color-border);
+	}
+	.stepper-vertical .stepper-divider {
+		@apply h-6 w-px ml-3;
+	}
+
+	/* ============================================================ */
+	/* Breadcrumbs                                                  */
+	/* ============================================================ */
+	.breadcrumbs {
+		@apply flex items-center gap-1 text-sm;
+		color: var(--color-fg-muted);
+	}
+	.breadcrumb-item {
+		@apply inline-flex items-center gap-1;
+	}
+	.breadcrumb-link {
+		color: var(--color-fg-muted);
+	}
+	.breadcrumb-link:hover {
+		color: var(--color-fg);
+	}
+	.breadcrumb-current {
+		color: var(--color-fg);
+		font-weight: 500;
+	}
+	.breadcrumb-separator {
+		@apply mx-1 select-none;
+		color: var(--color-fg-subtle);
+	}
+
+	/* ============================================================ */
+	/* Pagination                                                   */
+	/* ============================================================ */
+	.pagination {
+		@apply inline-flex items-center gap-1;
+	}
+	.pagination-item {
+		@apply inline-flex size-8 items-center justify-center text-sm;
+		color: var(--color-fg-muted);
+		border-radius: var(--ui-radius-sm);
+	}
+	.pagination-item:hover {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.pagination-item-active {
+		background-color: var(--color-primary-600);
+		color: white;
+	}
+	.pagination-item-active:hover {
+		background-color: var(--color-primary-700);
+		color: white;
+	}
+	.pagination-item:disabled {
+		@apply cursor-not-allowed opacity-40;
+	}
+	.pagination-ellipsis {
+		@apply inline-flex size-8 items-center justify-center text-sm select-none;
+		color: var(--color-fg-subtle);
+	}
+
+	/* ============================================================ */
+	/* Accordion                                                    */
+	/* ============================================================ */
+	.accordion {
+		@apply divide-y;
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+	}
+	.accordion :where(.divide-y) > * {
+		border-color: var(--color-border);
+	}
+	.accordion-item {
+		border-bottom: 1px solid var(--color-border);
+	}
+	.accordion-item:last-child {
+		border-bottom: none;
+	}
+	.accordion-trigger {
+		@apply flex w-full items-center justify-between gap-2 px-4 py-3 text-left text-sm font-medium;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		color: var(--color-fg);
+		background-color: transparent;
+		--tw-ring-color: var(--color-ring);
+	}
+	.accordion-trigger:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.accordion-trigger[data-state='open'] .accordion-chevron {
+		transform: rotate(180deg);
+	}
+	.accordion-chevron {
+		@apply size-4 shrink-0 transition-transform duration-150;
+		color: var(--color-fg-muted);
+	}
+	.accordion-content {
+		@apply px-4 pb-3 text-sm;
+		color: var(--color-fg-muted);
+	}
+
+	/* ============================================================ */
+	/* Separator                                                    */
+	/* ============================================================ */
+	.separator {
+		background-color: var(--color-border);
+	}
+	.separator-horizontal {
+		@apply h-px w-full;
+	}
+	.separator-vertical {
+		@apply w-px h-full self-stretch;
+	}
+
+	/* ============================================================ */
+	/* Toolbar                                                      */
+	/* ============================================================ */
+	.toolbar {
+		@apply flex items-center gap-1 p-1;
+		background-color: var(--color-bg-muted);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+	}
+	.toolbar-vertical {
+		@apply flex-col items-stretch;
+	}
+
+	/* ============================================================ */
+	/* ButtonGroup                                                  */
+	/* ============================================================ */
+	.btn-group {
+		@apply inline-flex;
+	}
+	.btn-group > .btn,
+	.btn-group > .toggle-btn {
+		border-radius: 0;
+	}
+	.btn-group > :first-child {
+		border-top-left-radius: var(--ui-radius);
+		border-bottom-left-radius: var(--ui-radius);
+	}
+	.btn-group > :last-child {
+		border-top-right-radius: var(--ui-radius);
+		border-bottom-right-radius: var(--ui-radius);
+	}
+	.btn-group > * + * {
+		margin-left: -1px;
+	}
+	.btn-group-vertical {
+		@apply flex-col;
+	}
+	.btn-group-vertical > * {
+		width: 100%;
+	}
+	.btn-group-vertical > :first-child {
+		border-radius: 0;
+		border-top-left-radius: var(--ui-radius);
+		border-top-right-radius: var(--ui-radius);
+	}
+	.btn-group-vertical > :last-child {
+		border-radius: 0;
+		border-bottom-left-radius: var(--ui-radius);
+		border-bottom-right-radius: var(--ui-radius);
+	}
+	.btn-group-vertical > * + * {
+		margin-left: 0;
+		margin-top: -1px;
+	}
+
+	/* ============================================================ */
+	/* ToggleButton                                                 */
+	/* ============================================================ */
+	.toggle-btn {
+		@apply inline-flex items-center justify-center gap-1.5 text-sm font-medium;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		@apply disabled:cursor-not-allowed disabled:opacity-60;
+		height: var(--ui-h-md);
+		padding-inline: 0.625rem;
+		background-color: transparent;
+		color: var(--color-fg-muted);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+		--tw-ring-color: var(--color-ring);
+	}
+	.toggle-btn:hover {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.toggle-btn[data-state='on'] {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+		border-color: var(--color-border-strong);
+	}
+	.toggle-btn-sm {
+		height: var(--ui-h-sm);
+		@apply text-xs px-2;
+	}
+	.toggle-btn-lg {
+		height: var(--ui-h-lg);
+		@apply text-base px-3;
+	}
+
+	/* ============================================================ */
+	/* Collapsible                                                  */
+	/* ============================================================ */
+	.collapsible {
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+		background-color: var(--color-bg-elevated);
+	}
+	.collapsible-trigger {
+		@apply flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		color: var(--color-fg);
+		background-color: transparent;
+		--tw-ring-color: var(--color-ring);
+	}
+	.collapsible-trigger:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.collapsible-chevron {
+		@apply size-4 shrink-0 transition-transform duration-150;
+		color: var(--color-fg-muted);
+	}
+	.collapsible-chevron-open {
+		transform: rotate(90deg);
+	}
+	.collapsible-title {
+		@apply flex-1;
+	}
+	.collapsible-content {
+		@apply px-3 pb-3 pt-1 text-sm;
+		color: var(--color-fg-muted);
+	}
+
+	/* ============================================================ */
+	/* NumberInput                                                  */
+	/* ============================================================ */
+	.number-input {
+		@apply inline-flex items-stretch;
+		border-radius: var(--ui-radius);
+	}
+	.number-input-field {
+		@apply text-center;
+		border-radius: 0;
+		min-width: 4rem;
+	}
+	.number-step {
+		@apply inline-flex items-center justify-center px-2;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border-strong);
+		--tw-ring-color: var(--color-ring);
+		height: var(--ui-h-md);
+	}
+	.number-step:first-child {
+		border-top-left-radius: var(--ui-radius);
+		border-bottom-left-radius: var(--ui-radius);
+		border-right: none;
+	}
+	.number-step:last-child {
+		border-top-right-radius: var(--ui-radius);
+		border-bottom-right-radius: var(--ui-radius);
+		border-left: none;
+	}
+	.number-step:hover:not(:disabled) {
+		background-color: var(--color-bg-subtle);
+	}
+	.number-step:disabled {
+		@apply cursor-not-allowed opacity-40;
+	}
+	.number-input-field {
+		border-radius: 0;
+	}
+	/* Hide native spinners since we have our own buttons */
+	.number-input-field::-webkit-outer-spin-button,
+	.number-input-field::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	.number-input-field {
+		-moz-appearance: textfield;
+	}
+
+	/* ============================================================ */
+	/* OtpField                                                     */
+	/* ============================================================ */
+	.otp-field {
+		@apply inline-flex gap-2;
+	}
+	.otp-cell {
+		@apply text-center font-mono text-lg;
+		@apply focus:outline-none focus:ring-2;
+		width: 2.75rem;
+		height: 3rem;
+		background-color: var(--color-bg);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border-strong);
+		border-radius: var(--ui-radius);
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+	}
+	.otp-cell:focus {
+		border-color: var(--color-ring);
+	}
+
+	/* ============================================================ */
+	/* TagsInput                                                    */
+	/* ============================================================ */
+	.tags-input {
+		@apply flex w-full flex-wrap items-center gap-1.5 px-2 py-1.5;
+		@apply transition-colors focus-within:ring-2;
+		min-height: var(--ui-h-md);
+		background-color: var(--color-bg);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border-strong);
+		border-radius: var(--ui-radius);
+		--tw-ring-color: color-mix(in oklab, var(--color-ring) 30%, transparent);
+	}
+	.tags-input:focus-within {
+		border-color: var(--color-ring);
+	}
+	.tags-input-err {
+		border-color: var(--color-danger-500);
+	}
+	.tags-input-field {
+		@apply min-w-[6rem] flex-1 text-sm outline-none;
+		background: transparent;
+		color: var(--color-fg);
+	}
+	.tags-input-field::placeholder {
+		color: var(--color-fg-subtle);
+	}
+
+	/* ============================================================ */
+	/* Timeline                                                     */
+	/* ============================================================ */
+	.timeline {
+		@apply list-none p-0 m-0 relative;
+	}
+	.timeline-item {
+		@apply relative grid pl-10 pb-6;
+		grid-template-columns: 1fr;
+	}
+	.timeline-item:last-child {
+		@apply pb-0;
+	}
+	.timeline-dot {
+		@apply absolute left-0 inline-flex size-7 items-center justify-center rounded-full text-white;
+		background-color: var(--color-primary-600);
+		top: 0;
+	}
+	.timeline-dot-success { background-color: var(--color-success-600); }
+	.timeline-dot-warning { background-color: var(--color-warning-600); }
+	.timeline-dot-danger  { background-color: var(--color-danger-600); }
+	.timeline-dot-info    { background-color: var(--color-info-600); }
+	.timeline-line {
+		@apply absolute w-px;
+		left: 0.875rem;
+		top: 1.75rem;
+		bottom: -0.5rem;
+		background-color: var(--color-border);
+	}
+	.timeline-time {
+		@apply text-xs;
+		color: var(--color-fg-subtle);
+	}
+	.timeline-title {
+		@apply text-sm font-semibold;
+		color: var(--color-fg);
+	}
+	.timeline-description {
+		@apply text-sm mt-0.5;
+		color: var(--color-fg-muted);
+	}
+
+	/* ============================================================ */
+	/* Combobox / Autocomplete / MultiSelect                        */
+	/* ============================================================ */
+	.combobox-input-wrap {
+		@apply relative inline-flex w-full items-stretch;
+	}
+	.combobox-input {
+		@apply pr-9;
+	}
+	.combobox-trigger {
+		@apply absolute right-1 top-1/2 -translate-y-1/2 inline-flex size-7 items-center justify-center rounded;
+		color: var(--color-fg-muted);
+	}
+	.combobox-trigger:hover {
+		background-color: var(--color-bg-muted);
+	}
+
+	/* ============================================================ */
+	/* Navigation menu (Hierarchical / Mega) — CSS-only hover/focus  */
+	/* No JS, no Bits-UI dep. Submenus open on hover OR keyboard     */
+	/* focus inside the parent <li>.                                  */
+	/* ============================================================ */
+	.nav-menu {
+		@apply relative z-10;
+	}
+	.nav-menu-list {
+		@apply flex items-center gap-0 list-none p-0 m-0 flex-wrap;
+	}
+	.nav-menu-item {
+		@apply relative;
+	}
+	.nav-menu-trigger {
+		@apply inline-flex items-center gap-1 px-3 text-sm font-medium rounded-md;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		@apply cursor-pointer select-none;
+		height: var(--ui-h-md);
+		color: var(--color-fg-muted);
+		background-color: transparent;
+		--tw-ring-color: var(--color-ring);
+		text-decoration: none;
+		border: none;
+		font-family: inherit;
+	}
+	.nav-menu-trigger:hover {
+		color: var(--color-fg);
+		background-color: var(--color-bg-muted);
+	}
+	.nav-menu-chevron {
+		@apply transition-transform duration-200 shrink-0;
+	}
+	.nav-menu-content {
+		@apply absolute top-full left-0 mt-1 z-50;
+		@apply opacity-0 invisible -translate-y-1 transition-[opacity,transform,visibility] duration-200 ease-out;
+		background-color: var(--color-bg-elevated);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+		box-shadow:
+			0 10px 32px -8px oklch(0% 0 0 / 0.18),
+			0 4px 8px -4px oklch(0% 0 0 / 0.06);
+		min-width: 14rem;
+		padding: 0.25rem;
+	}
+	/* Open on hover, keyboard focus inside, OR aria-expanded=true. */
+	.nav-menu-item:hover > .nav-menu-content,
+	.nav-menu-item:focus-within > .nav-menu-content {
+		@apply opacity-100 visible translate-y-0;
+	}
+	.nav-menu-item:hover > .nav-menu-trigger,
+	.nav-menu-item:focus-within > .nav-menu-trigger {
+		color: var(--color-fg);
+		background-color: var(--color-bg-muted);
+	}
+	.nav-menu-item:hover > .nav-menu-trigger > .nav-menu-chevron,
+	.nav-menu-item:focus-within > .nav-menu-trigger > .nav-menu-chevron {
+		transform: rotate(180deg);
+	}
+	.nav-menu-link {
+		@apply flex items-start gap-2 px-3 py-2 text-sm rounded transition-colors;
+		color: var(--color-fg);
+		text-decoration: none;
+	}
+	.nav-menu-link:hover {
+		background-color: var(--color-bg-muted);
+	}
+
+	/* MegaMenu — wider, multi-column, anchored to the row not the trigger. */
+	.mega-menu-grid {
+		@apply grid gap-6 p-5;
+		min-width: 32rem;
+	}
+	.mega-menu-grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+	.mega-menu-grid.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+	.mega-menu-grid.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+	.mega-menu-column {
+		@apply flex flex-col gap-1;
+	}
+	.mega-menu-title {
+		@apply text-[11px] uppercase tracking-wider px-3 mb-1 font-semibold;
+		color: var(--color-fg-subtle);
+	}
+
+	/* ============================================================ */
+	/* ScrollArea                                                   */
+	/* ============================================================ */
+	.scroll-area-viewport {
+		@apply h-full w-full rounded-[inherit];
+	}
+	.scroll-area-scrollbar {
+		@apply flex select-none touch-none p-0.5 transition-colors;
+		background-color: transparent;
+	}
+	.scroll-area-scrollbar[data-orientation='vertical'] {
+		width: 0.5rem;
+	}
+	.scroll-area-scrollbar[data-orientation='horizontal'] {
+		height: 0.5rem;
+	}
+	.scroll-area-thumb {
+		@apply relative flex-1 rounded-full;
+		background-color: var(--color-border-strong);
+	}
+	.scroll-area-thumb:hover {
+		background-color: var(--color-fg-subtle);
+	}
+
+	/* ============================================================ */
+	/* ColorPicker                                                  */
+	/* ============================================================ */
+	.color-picker {
+		@apply inline-flex items-center gap-2;
+	}
+	.color-picker-swatch {
+		@apply inline-block size-9 cursor-pointer overflow-hidden;
+		border: 1px solid var(--color-border-strong);
+		border-radius: var(--ui-radius);
+	}
+	.color-picker-text {
+		@apply font-mono;
+		width: 8.5rem;
+	}
+
+	/* ============================================================ */
+	/* Uploader                                                     */
+	/* ============================================================ */
+	.uploader-root {
+		@apply flex w-full flex-col items-center justify-center gap-2 p-6 text-center cursor-pointer;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		background-color: var(--color-bg-subtle);
+		color: var(--color-fg);
+		border: 2px dashed var(--color-border-strong);
+		border-radius: var(--ui-radius);
+		--tw-ring-color: var(--color-ring);
+	}
+	.uploader-root:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.uploader-dragging {
+		background-color: color-mix(in oklab, var(--color-primary-500) 6%, var(--color-bg-muted));
+		border-color: var(--color-primary-500);
+	}
+	.uploader-text {
+		@apply flex flex-col items-center gap-0.5;
+	}
+	.uploader-primary {
+		@apply text-sm font-medium;
+	}
+	.uploader-helper {
+		@apply text-xs;
+		color: var(--color-fg-muted);
+	}
+	.uploader-list {
+		@apply mt-2 flex flex-col gap-1 list-none p-0;
+	}
+	.uploader-item {
+		@apply flex items-center gap-2 px-2 py-1.5;
+		background-color: var(--color-bg-muted);
+		border-radius: var(--ui-radius-sm);
+	}
+
+	/* ============================================================ */
+	/* Date pickers (Popover-based) + custom Calendar               */
+	/* ============================================================ */
+	.date-picker-trigger {
+		@apply inline-flex items-center gap-2 cursor-pointer text-left w-full;
+		min-width: 12rem;
+	}
+	.date-picker-trigger[disabled] {
+		@apply opacity-60 cursor-not-allowed;
+	}
+
+	.calendar {
+		@apply select-none;
+	}
+	.calendar-header {
+		@apply flex items-center justify-between gap-1 mb-2;
+	}
+	.calendar-heading-btn {
+		@apply flex-1 text-sm font-semibold rounded py-1 px-2 transition-colors;
+		color: var(--color-fg);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+	}
+	.calendar-heading-btn:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.calendar-nav {
+		@apply inline-flex size-7 items-center justify-center rounded transition-colors;
+		color: var(--color-fg-muted);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+	}
+	.calendar-nav:hover {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.calendar-row {
+		@apply grid gap-0.5;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+	}
+	.calendar-weekdays {
+		@apply mb-1;
+	}
+	.calendar-weekday {
+		@apply text-center text-[11px] font-medium uppercase py-1;
+		color: var(--color-fg-subtle);
+	}
+	.calendar-day {
+		@apply h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors;
+		color: var(--color-fg);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+	}
+	.calendar-day:hover:not(:disabled) {
+		background-color: var(--color-bg-muted);
+	}
+	.calendar-day:focus-visible {
+		outline: 2px solid var(--color-ring);
+		outline-offset: -2px;
+	}
+	.calendar-day-outside {
+		color: var(--color-fg-subtle);
+	}
+	.calendar-day-today {
+		font-weight: 600;
+		box-shadow: inset 0 0 0 1px var(--color-border-strong);
+	}
+	.calendar-day-selected {
+		background-color: var(--color-primary-600);
+		color: white;
+		font-weight: 600;
+	}
+	.calendar-day-selected:hover:not(:disabled) {
+		background-color: var(--color-primary-700);
+	}
+	.calendar-day-in-range {
+		background-color: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
+		border-radius: 0;
+	}
+	.calendar-day:disabled {
+		@apply opacity-30 cursor-not-allowed;
+	}
+
+	/* TimePicker — scrollable hour/minute columns */
+	.time-picker-popover {
+		min-width: 14rem;
+	}
+	.time-picker-grid {
+		@apply flex items-stretch gap-1;
+	}
+	.time-picker-col {
+		@apply flex-1 flex flex-col gap-0.5 overflow-y-auto py-1;
+		max-height: 14rem;
+		scroll-snap-type: y mandatory;
+		scrollbar-width: thin;
+	}
+	.time-picker-col::-webkit-scrollbar {
+		width: 4px;
+	}
+	.time-picker-col::-webkit-scrollbar-thumb {
+		background-color: var(--color-border-strong);
+		border-radius: 2px;
+	}
+	.time-picker-sep {
+		@apply self-center text-xl font-mono;
+		color: var(--color-fg-muted);
+	}
+	.time-picker-cell {
+		@apply h-8 inline-flex items-center justify-center rounded text-sm font-mono tabular-nums transition-colors;
+		color: var(--color-fg);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		scroll-snap-align: center;
+		flex-shrink: 0;
+	}
+	.time-picker-cell:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.time-picker-cell-selected {
+		background-color: var(--color-primary-600);
+		color: white;
+		font-weight: 600;
+	}
+	.time-picker-cell-selected:hover {
+		background-color: var(--color-primary-700);
+	}
+
+	/* ============================================================ */
+	/* DataTable                                                    */
+	/* ============================================================ */
+	.data-table-root {
+		@apply w-full overflow-x-auto;
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius);
+	}
+	.data-table {
+		@apply w-full text-sm;
+		border-collapse: collapse;
+	}
+	.data-table th,
+	.data-table td {
+		@apply px-3 py-2 text-left align-middle;
+	}
+	.data-table thead th {
+		@apply font-semibold;
+		color: var(--color-fg);
+		background-color: var(--color-bg-muted);
+		border-bottom: 1px solid var(--color-border);
+	}
+	.data-table-sticky thead th {
+		@apply sticky top-0 z-10;
+	}
+	.data-table tbody tr {
+		border-bottom: 1px solid var(--color-border);
+	}
+	.data-table tbody tr:last-child {
+		border-bottom: none;
+	}
+	.data-table tbody tr:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.data-table-striped tbody tr:nth-child(even) {
+		background-color: var(--color-bg-subtle);
+	}
+	.data-table-dense th,
+	.data-table-dense td {
+		@apply py-1;
+	}
+	.data-table-row-clickable {
+		@apply cursor-pointer;
+	}
+	.data-table-empty td {
+		@apply text-center py-6;
+		color: var(--color-fg-muted);
+	}
+	.data-table-sort {
+		@apply inline-flex items-center gap-1;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+	}
+	.data-table-sort:hover {
+		color: var(--color-primary-600);
+	}
+
+	/* ============================================================ */
+	/* Tree (recursive)                                             */
+	/* ============================================================ */
+	.tree {
+		@apply text-sm;
+		color: var(--color-fg);
+	}
+	.tree ul {
+		@apply list-none p-0 m-0;
+	}
+	.tree-row {
+		@apply flex w-full items-center gap-2 py-1 pr-2 text-left rounded-sm;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		color: var(--color-fg);
+		background-color: transparent;
+		--tw-ring-color: var(--color-ring);
+	}
+	.tree-row:hover {
+		background-color: var(--color-bg-muted);
+	}
+	.tree-row-selected {
+		background-color: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
+		color: var(--color-fg);
+	}
+	.tree-row-selected:hover {
+		background-color: color-mix(in oklab, var(--color-primary-500) 18%, transparent);
+	}
+	.tree-chevron {
+		@apply inline-flex size-4 shrink-0 items-center justify-center transition-transform duration-150;
+		color: var(--color-fg-muted);
+	}
+	.tree-chevron-open {
+		transform: rotate(90deg);
+	}
+	.tree-chevron-spacer {
+		@apply inline-block size-4 shrink-0;
+	}
+	.tree-label {
+		@apply truncate;
+	}
+
+	/* ============================================================ */
+	/* Carousel                                                     */
+	/* ============================================================ */
+	.carousel {
+		@apply relative overflow-hidden w-full;
+		border-radius: var(--ui-radius);
+		background-color: var(--color-bg-muted);
+	}
+	.carousel-track {
+		@apply flex h-full transition-transform duration-500 ease-out;
+	}
+	.carousel-slide {
+		@apply h-full w-full shrink-0;
+	}
+	.carousel-arrow {
+		@apply absolute top-1/2 -translate-y-1/2 inline-flex size-9 items-center justify-center;
+		@apply transition-colors focus-visible:outline-none focus-visible:ring-2;
+		background-color: color-mix(in oklab, var(--color-bg) 70%, transparent);
+		color: var(--color-fg);
+		border: 1px solid var(--color-border);
+		border-radius: var(--ui-radius-full);
+		--tw-ring-color: var(--color-ring);
+	}
+	.carousel-arrow:hover {
+		background-color: var(--color-bg);
+	}
+	.carousel-arrow-prev {
+		@apply left-3;
+	}
+	.carousel-arrow-next {
+		@apply right-3;
+	}
+	.carousel-dots {
+		@apply absolute bottom-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1.5;
+	}
+	.carousel-dot {
+		@apply size-2 rounded-full transition-colors;
+		background-color: color-mix(in oklab, var(--color-bg-inverse) 50%, transparent);
+	}
+	.carousel-dot-active {
+		background-color: var(--color-bg-inverse);
 	}
 }