@loworbitstudio/visor-core 0.4.1 → 0.6.0

package/dist/themes/space.css

@@ -0,0 +1,479 @@
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
+
+@layer visor-adaptive {
+/* ── Section 1: Shared tokens (mode-independent) ── */
+
+/* --- Primitive: Colors --- */
+.space-theme {
+  min-height: 100vh;
+  font-size: 1rem;
+  background: var(--surface-page, var(--surface-background));
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-primary-50: #f2f5ff;
+  --color-primary-100: #eef2ff;
+  --color-primary-200: #eaeeff;
+  --color-primary-300: #e2e9ff;
+  --color-primary-400: #d8e1ff;
+  --color-primary-500: #5b6fff;
+  --color-primary-600: #353ac8;
+  --color-primary-700: #281fb0;
+  --color-primary-800: #1b0b86;
+  --color-primary-900: #0e005a;
+  --color-primary-950: #04002d;
+  --color-accent-50: #f2f5ff;
+  --color-accent-100: #eef2ff;
+  --color-accent-200: #eaeeff;
+  --color-accent-300: #e2e9ff;
+  --color-accent-400: #d8e1ff;
+  --color-accent-500: #5b6fff;
+  --color-accent-600: #353ac8;
+  --color-accent-700: #281fb0;
+  --color-accent-800: #1b0b86;
+  --color-accent-900: #0e005a;
+  --color-accent-950: #04002d;
+  --color-neutral-50: #f5f5f8;
+  --color-neutral-100: #f1f1f8;
+  --color-neutral-200: #ecedf8;
+  --color-neutral-300: #e5e6f5;
+  --color-neutral-400: #dcdceb;
+  --color-neutral-500: #6c6c79;
+  --color-neutral-600: #545460;
+  --color-neutral-700: #41414d;
+  --color-neutral-800: #2d2d38;
+  --color-neutral-900: #191924;
+  --color-neutral-950: #080810;
+  --color-success-50: #e8fbeb;
+  --color-success-100: #defde3;
+  --color-success-500: #22c55e;
+  --color-success-600: #00672b;
+  --color-success-700: #005120;
+  --color-success-900: #002209;
+  --color-warning-50: #fff3e6;
+  --color-warning-100: #fff1e3;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #774a01;
+  --color-warning-700: #5e3900;
+  --color-warning-900: #281600;
+  --color-error-50: #fff2f0;
+  --color-error-100: #ffefed;
+  --color-error-500: #ef4444;
+  --color-error-600: #a30016;
+  --color-error-700: #81000f;
+  --color-error-900: #3a0003;
+  --color-info-50: #ecf7ff;
+  --color-info-100: #e8f5ff;
+  --color-info-500: #0ea5e9;
+  --color-info-600: #005c85;
+  --color-info-700: #004869;
+  --color-info-900: #001d2e;
+}
+
+
+/* --- Primitive: Spacing --- */
+.space-theme {
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+}
+
+
+/* --- Primitive: Border Radius --- */
+.space-theme {
+  --radius-none: 0;
+  --radius-sm: 0.25rem; /* 4px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 0.9997499999999999rem; /* 16px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+}
+
+
+/* --- Primitive: Typography --- */
+.space-theme {
+  --font-display: Satoshi;
+  --font-sans: Satoshi;
+  --font-heading: var(--font-sans);
+  --font-body: Satoshi;
+  --font-mono: Monaspace Neon;
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem; /* 36px */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 700;
+  --font-weight-bold: 700;
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  --letter-spacing-normal: 0.05em;
+}
+
+
+/* --- Primitive: Shadows --- */
+.space-theme {
+  --shadow-xs: 0 1px 2px rgba(91, 111, 255, 0.08);
+  --shadow-sm: 0 1px 3px rgba(91, 111, 255, 0.1);
+  --shadow-md: 0 4px 12px rgba(91, 111, 255, 0.12);
+  --shadow-lg: 0 10px 24px rgba(91, 111, 255, 0.14);
+  --shadow-xl: 0 20px 40px rgba(91, 111, 255, 0.16);
+}
+
+
+/* --- Primitive: Motion --- */
+.space-theme {
+  --motion-duration-100: 100ms;
+  --motion-duration-150: 150ms;
+  --motion-duration-200: 200ms;
+  --motion-duration-300: 300ms;
+  --motion-duration-500: 400ms;
+  --motion-duration-800: 800ms;
+  --motion-easing-linear: linear;
+  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+
+/* --- Primitive: Miscellaneous --- */
+.space-theme {
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-3: 3px;
+  --border-width-4: 4px;
+  --z-base: 0;
+  --z-raised: 1;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal: 1300;
+  --z-popover: 1400;
+  --z-toast: 1500;
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+}
+
+
+/* ── Section 2: Dark mode overrides ── */
+
+/* --- Adaptive: Text (dark) — manual toggle --- */
+.dark .space-theme {
+  --text-primary: #e8e8f0;
+  --text-secondary: rgba(232, 232, 240, 0.72);
+  --text-tertiary: rgba(232, 232, 240, 0.5);
+  --text-disabled: #545460;
+  --text-inverse: #191924;
+  --text-inverse-secondary: #41414d;
+  --text-link: #8b9fff;
+  --text-link-hover: #e2e9ff;
+  --text-success: #22c55e;
+  --text-warning: #f59e0b;
+  --text-error: #ef4444;
+  --text-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Surface (dark) — manual toggle --- */
+.dark .space-theme {
+  --surface-page: #080810;
+  --surface-card: #0e0e18;
+  --surface-popover: #0e0e18;
+  --surface-subtle: #2d2d38;
+  --surface-muted: #41414d;
+  --surface-overlay: #080810;
+  --surface-interactive-default: #2d2d38;
+  --surface-interactive-hover: #41414d;
+  --surface-interactive-active: #545460;
+  --surface-interactive-disabled: #2d2d38;
+  --surface-selected: #1b0b86;
+  --surface-accent-subtle: #0e005a;
+  --surface-accent-default: #5b6fff;
+  --surface-accent-strong: #d8e1ff;
+  --surface-success-subtle: #002209;
+  --surface-success-default: #22c55e;
+  --surface-warning-subtle: #281600;
+  --surface-warning-default: #f59e0b;
+  --surface-error-subtle: #3a0003;
+  --surface-error-default: #ef4444;
+  --surface-info-subtle: #001d2e;
+  --surface-info-default: #0ea5e9;
+  --surface-elev-0: #080810;
+  --surface-elev-1: #191924;
+  --surface-elev-2: #2d2d38;
+  --surface-elev-3: #41414d;
+  --surface-elev-4: #545460;
+}
+
+
+/* --- Adaptive: Border (dark) — manual toggle --- */
+.dark .space-theme {
+  --border-default: #41414d;
+  --border-muted: #2d2d38;
+  --border-strong: #545460;
+  --border-focus: #5b6fff;
+  --border-disabled: #2d2d38;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (dark) — manual toggle --- */
+.dark .space-theme {
+  --interactive-primary-bg: #5b6fff;
+  --interactive-primary-bg-hover: #d8e1ff;
+  --interactive-primary-bg-active: #e2e9ff;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #2d2d38;
+  --interactive-secondary-bg-hover: #41414d;
+  --interactive-secondary-bg-active: #545460;
+  --interactive-secondary-text: #f5f5f8;
+  --interactive-secondary-border: #545460;
+  --interactive-destructive-bg: #ef4444;
+  --interactive-destructive-bg-hover: #a30016;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #2d2d38;
+  --interactive-ghost-bg-hover: #41414d;
+}
+
+
+/* --- Adaptive: Text (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --text-primary: #e8e8f0;
+    --text-secondary: rgba(232, 232, 240, 0.72);
+    --text-tertiary: rgba(232, 232, 240, 0.5);
+    --text-disabled: #545460;
+    --text-inverse: #191924;
+    --text-inverse-secondary: #41414d;
+    --text-link: #8b9fff;
+    --text-link-hover: #e2e9ff;
+    --text-success: #22c55e;
+    --text-warning: #f59e0b;
+    --text-error: #ef4444;
+    --text-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Surface (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --surface-page: #080810;
+    --surface-card: #0e0e18;
+    --surface-popover: #0e0e18;
+    --surface-subtle: #2d2d38;
+    --surface-muted: #41414d;
+    --surface-overlay: #080810;
+    --surface-interactive-default: #2d2d38;
+    --surface-interactive-hover: #41414d;
+    --surface-interactive-active: #545460;
+    --surface-interactive-disabled: #2d2d38;
+    --surface-selected: #1b0b86;
+    --surface-accent-subtle: #0e005a;
+    --surface-accent-default: #5b6fff;
+    --surface-accent-strong: #d8e1ff;
+    --surface-success-subtle: #002209;
+    --surface-success-default: #22c55e;
+    --surface-warning-subtle: #281600;
+    --surface-warning-default: #f59e0b;
+    --surface-error-subtle: #3a0003;
+    --surface-error-default: #ef4444;
+    --surface-info-subtle: #001d2e;
+    --surface-info-default: #0ea5e9;
+    --surface-elev-0: #080810;
+    --surface-elev-1: #191924;
+    --surface-elev-2: #2d2d38;
+    --surface-elev-3: #41414d;
+    --surface-elev-4: #545460;
+  }
+}
+
+
+/* --- Adaptive: Border (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --border-default: #41414d;
+    --border-muted: #2d2d38;
+    --border-strong: #545460;
+    --border-focus: #5b6fff;
+    --border-disabled: #2d2d38;
+    --border-success: #22c55e;
+    --border-warning: #f59e0b;
+    --border-error: #ef4444;
+    --border-info: #0ea5e9;
+  }
+}
+
+
+/* --- Adaptive: Interactive (dark) — prefers-color-scheme --- */
+@media (prefers-color-scheme: dark) {
+  .space-theme:not(.light) {
+    --interactive-primary-bg: #5b6fff;
+    --interactive-primary-bg-hover: #d8e1ff;
+    --interactive-primary-bg-active: #e2e9ff;
+    --interactive-primary-text: #ffffff;
+    --interactive-secondary-bg: #2d2d38;
+    --interactive-secondary-bg-hover: #41414d;
+    --interactive-secondary-bg-active: #545460;
+    --interactive-secondary-text: #f5f5f8;
+    --interactive-secondary-border: #545460;
+    --interactive-destructive-bg: #ef4444;
+    --interactive-destructive-bg-hover: #a30016;
+    --interactive-destructive-text: #ffffff;
+    --interactive-ghost-bg: #2d2d38;
+    --interactive-ghost-bg-hover: #41414d;
+  }
+}
+
+
+/* ── Section 3: Light mode overrides ── */
+
+/* --- Adaptive: Text (light) --- */
+html:not(.dark) .space-theme {
+  --text-primary: #1a1630;
+  --text-secondary: rgba(26, 22, 48, 0.72);
+  --text-tertiary: rgba(26, 22, 48, 0.65);
+  --text-disabled: #e5e6f5;
+  --text-inverse: #ffffff;
+  --text-inverse-secondary: #ecedf8;
+  --text-link: #5b6fff;
+  --text-link-hover: #281fb0;
+  --text-success: #005120;
+  --text-warning: #5e3900;
+  --text-error: #81000f;
+  --text-info: #004869;
+}
+
+
+/* --- Adaptive: Surface (light) --- */
+html:not(.dark) .space-theme {
+  --surface-page: #e0ddef;
+  --surface-card: #f2f0f8;
+  --surface-popover: #f2f0f8;
+  --surface-subtle: #f5f5f8;
+  --surface-muted: #f1f1f8;
+  --surface-overlay: #191924;
+  --surface-interactive-default: #ffffff;
+  --surface-interactive-hover: #f5f5f8;
+  --surface-interactive-active: #f1f1f8;
+  --surface-interactive-disabled: #f5f5f8;
+  --surface-selected: #eef2ff;
+  --surface-accent-subtle: #f2f5ff;
+  --surface-accent-default: #5b6fff;
+  --surface-accent-strong: #353ac8;
+  --surface-success-subtle: #e8fbeb;
+  --surface-success-default: #22c55e;
+  --surface-warning-subtle: #fff3e6;
+  --surface-warning-default: #f59e0b;
+  --surface-error-subtle: #fff2f0;
+  --surface-error-default: #ef4444;
+  --surface-info-subtle: #ecf7ff;
+  --surface-info-default: #0ea5e9;
+  --surface-elev-0: #ffffff;
+  --surface-elev-1: #f5f5f8;
+  --surface-elev-2: #f1f1f8;
+  --surface-elev-3: #ecedf8;
+  --surface-elev-4: #e5e6f5;
+}
+
+
+/* --- Adaptive: Border (light) --- */
+html:not(.dark) .space-theme {
+  --border-default: #ecedf8;
+  --border-muted: #f1f1f8;
+  --border-strong: #e5e6f5;
+  --border-focus: #5b6fff;
+  --border-disabled: #f1f1f8;
+  --border-success: #22c55e;
+  --border-warning: #f59e0b;
+  --border-error: #ef4444;
+  --border-info: #0ea5e9;
+}
+
+
+/* --- Adaptive: Interactive (light) --- */
+html:not(.dark) .space-theme {
+  --interactive-primary-bg: #5b6fff;
+  --interactive-primary-bg-hover: #281fb0;
+  --interactive-primary-bg-active: #1b0b86;
+  --interactive-primary-text: #ffffff;
+  --interactive-secondary-bg: #ffffff;
+  --interactive-secondary-bg-hover: #f5f5f8;
+  --interactive-secondary-bg-active: #f1f1f8;
+  --interactive-secondary-text: #191924;
+  --interactive-secondary-border: #e5e6f5;
+  --interactive-destructive-bg: #a30016;
+  --interactive-destructive-bg-hover: #81000f;
+  --interactive-destructive-text: #ffffff;
+  --interactive-ghost-bg: #ffffff;
+  --interactive-ghost-bg-hover: #f1f1f8;
+}
+
+
+/* --- Fumadocs bridge: dark --- */
+.dark .space-theme {
+  --color-fd-background: #080810;
+  --color-fd-foreground: #e8e8f0;
+  --color-fd-card: #0e0e18;
+  --color-fd-card-foreground: #e8e8f0;
+  --color-fd-border: #41414d;
+  --color-fd-muted: #41414d;
+  --color-fd-muted-foreground: rgba(232, 232, 240, 0.72);
+  --color-fd-accent: #5b6fff;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #5b6fff;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #41414d;
+  --color-fd-secondary-foreground: #e8e8f0;
+  --color-fd-popover: #0e0e18;
+  --color-fd-popover-foreground: #e8e8f0;
+  --color-fd-ring: #5b6fff;
+}
+
+
+/* --- Fumadocs bridge: light --- */
+html:not(.dark) .space-theme {
+  --color-fd-background: #e0ddef;
+  --color-fd-foreground: #1a1630;
+  --color-fd-card: #f2f0f8;
+  --color-fd-card-foreground: #1a1630;
+  --color-fd-border: #ecedf8;
+  --color-fd-muted: #f1f1f8;
+  --color-fd-muted-foreground: rgba(26, 22, 48, 0.72);
+  --color-fd-accent: #5b6fff;
+  --color-fd-accent-foreground: #ffffff;
+  --color-fd-primary: #5b6fff;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #f1f1f8;
+  --color-fd-secondary-foreground: #1a1630;
+  --color-fd-popover: #f2f0f8;
+  --color-fd-popover-foreground: #1a1630;
+  --color-fd-ring: #5b6fff;
+}
+}

package/dist/tokens.css

@@ -5,10 +5,12 @@
    ============================================ */
 
 /* Import order: primitives → semantic → adaptive */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
 
 /* ============================================
-   Tier 1: Primitives
+   Tier 1: Primitives → @layer visor-primitives
    ============================================ */
+@layer visor-primitives {
 /* --- Primitive: Colors --- */
 :root {
   --color-neutral-50: #f9fafb;
@@ -103,6 +105,15 @@
 }
 
 
+/* --- Primitive: Stroke Widths --- */
+:root {
+  --stroke-width-thin: 1px;
+  --stroke-width-regular: 1.5px;
+  --stroke-width-medium: 2px;
+  --stroke-width-thick: 2.5px;
+}
+
+
 /* --- Primitive: Font Families --- */
 :root {
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -112,6 +123,7 @@
 
 /* --- Primitive: Font Sizes --- */
 :root {
+  --font-size-2xs: 0.6875rem; /* 11px */
   --font-size-xs: 0.75rem; /* 12px */
   --font-size-sm: 0.875rem; /* 14px */
   --font-size-base: 1rem; /* 16px */
@@ -165,6 +177,19 @@
 }
 
 
+/* --- Primitive: Opacity --- */
+:root {
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-12: 0.12;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+}
+
+
 /* --- Primitive: Overlay --- */
 :root {
   --overlay-bg: rgba(0, 0, 0, 0.5);
@@ -197,10 +222,12 @@
   --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+}
 
 /* ============================================
-   Tier 2: Semantic
+   Tier 2: Semantic → @layer visor-semantic
    ============================================ */
+@layer visor-semantic {
 /* --- Semantic: Text --- */
 :root {
   --text-primary: var(--color-neutral-900);
@@ -230,6 +257,7 @@
   --surface-interactive-hover: var(--color-neutral-50);
   --surface-interactive-active: var(--color-neutral-100);
   --surface-interactive-disabled: var(--color-neutral-50);
+  --surface-selected: var(--color-primary-100);
   --surface-accent-subtle: var(--color-primary-50);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-600);
@@ -241,6 +269,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-50);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 
 
@@ -365,10 +398,12 @@
   --sidebar-ring: var(--color-primary-500);
   --sidebar-text-muted: var(--color-neutral-500);
 }
+}
 
 /* ============================================
-   Tier 3: Adaptive — Light Theme (:root)
+   Tier 3: Adaptive — Light + Dark → @layer visor-adaptive
    ============================================ */
+@layer visor-adaptive {
 /* --- Adaptive: Text (light) --- */
 :root {
   --text-primary: var(--color-neutral-900);
@@ -398,6 +433,7 @@
   --surface-interactive-hover: var(--color-neutral-50);
   --surface-interactive-active: var(--color-neutral-100);
   --surface-interactive-disabled: var(--color-neutral-50);
+  --surface-selected: var(--color-primary-100);
   --surface-accent-subtle: var(--color-primary-50);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-600);
@@ -409,6 +445,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-50);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-white);
+  --surface-elev-1: var(--color-neutral-50);
+  --surface-elev-2: var(--color-neutral-100);
+  --surface-elev-3: var(--color-neutral-200);
+  --surface-elev-4: var(--color-neutral-300);
 }
 
 
@@ -486,10 +527,8 @@
   --sidebar-text-muted: var(--color-neutral-500);
 }
 
-/* ============================================
-   Tier 3: Adaptive — Dark Theme (.dark, .theme-dark, [data-theme="dark"])
-   and @media (prefers-color-scheme: dark)
-   ============================================ */
+
+
 /* --- Adaptive: Text (dark) — manual toggle --- */
 .dark,
 .theme-dark,
@@ -523,6 +562,7 @@
   --surface-interactive-hover: var(--color-neutral-700);
   --surface-interactive-active: var(--color-neutral-600);
   --surface-interactive-disabled: var(--color-neutral-800);
+  --surface-selected: var(--color-primary-800);
   --surface-accent-subtle: var(--color-primary-900);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-400);
@@ -534,6 +574,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-900);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 
 
@@ -656,6 +701,7 @@
   --surface-interactive-hover: var(--color-neutral-700);
   --surface-interactive-active: var(--color-neutral-600);
   --surface-interactive-disabled: var(--color-neutral-800);
+  --surface-selected: var(--color-primary-800);
   --surface-accent-subtle: var(--color-primary-900);
   --surface-accent-default: var(--color-primary-500);
   --surface-accent-strong: var(--color-primary-400);
@@ -667,6 +713,11 @@
   --surface-error-default: var(--color-error-500);
   --surface-info-subtle: var(--color-info-900);
   --surface-info-default: var(--color-info-500);
+  --surface-elev-0: var(--color-neutral-950);
+  --surface-elev-1: var(--color-neutral-900);
+  --surface-elev-2: var(--color-neutral-800);
+  --surface-elev-3: var(--color-neutral-700);
+  --surface-elev-4: var(--color-neutral-600);
 }
 }
 
@@ -756,7 +807,7 @@
   --sidebar-text-muted: var(--color-neutral-400);
 }
 }
-
+}
 /* ============================================
    Global: Motion Safety
    ============================================ */

package/dist/utilities.css

@@ -0,0 +1,23 @@
+/* ============================================
+   Visor Design Tokens — Utilities
+   Generated by @loworbitstudio/visor-core
+   DO NOT EDIT — run `npm run build` to regenerate
+   ============================================ */
+@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
+
+@layer visor-adaptive {
+/* --- Typography Utilities --- */
+.eyebrow {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.label-tiny {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-tertiary);
+}
+}