@scattered-light/base-ui-theme 0.1.0

package/dist/styles/semantic/field.css

@@ -0,0 +1,73 @@
+/* Field Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --field-root-display: flex;
+  --field-root-flex-direction: column;
+  --field-root-gap: var(--space-1-5);
+  
+  /* ============================================
+     LABEL — ui label (caption + medium)
+     ============================================ */
+  
+  --field-label-font-family: var(--theme-font-base-label-font-family);
+  --field-label-font-size: var(--theme-font-base-label-font-size);
+  --field-label-font-weight: var(--theme-font-base-label-font-weight);
+  --field-label-line-height: var(--theme-font-base-label-line-height);
+  --field-label-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --field-label-color: var(--text-primary);
+  --field-label-margin-bottom: var(--space-1);
+  
+  /* ============================================
+     CONTROL (reuses input tokens - no duplication)
+     ============================================ */
+  
+  /* All control styling comes from input tokens via inheritance */
+  
+  /* ============================================
+     DESCRIPTION (help text) — caption
+     ============================================ */
+  
+  --field-description-font-family: var(--theme-font-condense-font-family);
+  --field-description-font-size: var(--theme-font-condense-font-size);
+  --field-description-font-weight: var(--theme-font-condense-font-weight);
+  --field-description-line-height: var(--theme-font-condense-line-height);
+  --field-description-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --field-description-color: var(--text-secondary);
+  --field-description-margin-top: var(--space-1);
+  
+  /* ============================================
+     ERROR — caption + medium weight
+     ============================================ */
+  
+  --field-error-font-family: var(--theme-font-condense-font-family);
+  --field-error-font-size: var(--theme-font-condense-font-size);
+  --field-error-font-weight: var(--font-weight-medium);
+  --field-error-line-height: var(--theme-font-condense-line-height);
+  --field-error-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --field-error-color: var(--theme-status-error);
+  --field-error-margin-top: var(--space-1);
+  
+  /* ============================================
+     DISABLED STATE
+     ============================================ */
+  
+  --field-disabled-opacity: 0.6;
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --field-error-color: var(--theme-status-error);
+  }
+}
+
+[data-theme='dark'] {
+  --field-error-color: var(--theme-status-error);
+}

package/dist/styles/semantic/fieldset.css

@@ -0,0 +1,45 @@
+/* Fieldset Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     FIELDSET
+     ============================================ */
+  
+  --fieldset-border: none;
+  --fieldset-padding: 0;
+  --fieldset-margin: 0;
+  --fieldset-display: flex;
+  --fieldset-flex-direction: column;
+  --fieldset-gap: var(--space-6);
+  
+  /* ============================================
+     LEGEND
+     ============================================ */
+  
+  --fieldset-legend-font-family: var(--theme-maximize-lg-font-family);
+  --fieldset-legend-font-size: var(--theme-maximize-lg-font-size);
+  --fieldset-legend-font-weight: var(--theme-maximize-lg-font-weight);
+  --fieldset-legend-line-height: var(--theme-maximize-lg-line-height);
+  --fieldset-legend-letter-spacing: var(--theme-maximize-lg-letter-spacing);
+  --fieldset-legend-color: var(--text-primary);
+  --fieldset-legend-margin-bottom: var(--space-4);
+  --fieldset-legend-padding: 0;
+  
+  /* ============================================
+     DESCRIPTION
+     ============================================ */
+  
+  --fieldset-description-font-family: var(--theme-font-condense-font-family);
+  --fieldset-description-font-size: var(--theme-font-condense-font-size);
+  --fieldset-description-font-weight: var(--theme-font-condense-font-weight);
+  --fieldset-description-line-height: var(--theme-font-condense-line-height);
+  --fieldset-description-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --fieldset-description-color: var(--text-secondary);
+  --fieldset-description-margin-bottom: var(--space-4);
+  
+  /* ============================================
+     DISABLED STATE
+     ============================================ */
+  
+  --fieldset-disabled-opacity: 0.6;
+}

package/dist/styles/semantic/form.css

@@ -0,0 +1,20 @@
+/* Form Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     FORM
+     ============================================ */
+  
+  --form-display: flex;
+  --form-flex-direction: column;
+  --form-gap: var(--space-8);
+  
+  /* ============================================
+     FORM ACTIONS (button container)
+     ============================================ */
+  
+  --form-actions-display: flex;
+  --form-actions-gap: var(--space-3);
+  --form-actions-justify-content: flex-start;
+  --form-actions-margin-top: var(--space-6);
+}

package/dist/styles/semantic/input.css

@@ -0,0 +1,83 @@
+/* Input Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     BASE INPUT — theme body (md)
+     ============================================ */
+  
+  --input-width: 100%;
+  --input-height: var(--theme-control-height-md);
+  --input-padding-block: var(--theme-control-padding-block);
+  --input-padding-inline: var(--theme-control-padding-inline);
+  --input-font-family: var(--theme-font-base-font-family);
+  --input-font-size: var(--theme-font-base-font-size);
+  --input-font-weight: var(--theme-font-base-font-weight);
+  --input-line-height: var(--theme-font-base-line-height);
+  --input-letter-spacing: var(--theme-font-base-letter-spacing);
+  --input-color: var(--text-primary);
+  --input-background: var(--surface-base);
+  --input-border-width: var(--theme-stroke-default);
+  --input-border-color: var(--border-default);
+  --input-border-radius: var(--theme-radius-control);
+  --input-transition: all 0.2s ease;
+  --input-placeholder-color: var(--text-tertiary);
+  
+  /* Input states */
+  --input-border-color-hover: var(--border-strong);
+  --input-border-color-focus: var(--theme-primary-600);
+  --input-shadow-focus: var(--theme-focus-shadow-3px-primary);
+  --input-background-disabled: var(--theme-neutral-100);
+  --input-color-disabled: var(--text-disabled);
+  --input-cursor-disabled: not-allowed;
+  
+  /* Warning state */
+  --input-border-color-error: var(--theme-status-error);
+  --input-shadow-focus-error: var(--theme-focus-shadow-3px-error);
+  
+  /* ============================================
+     SIZE VARIANTS — xs overline, sm caption, lg body-lead
+     ============================================ */
+  
+  --input-height-xs: var(--theme-control-height-xs);
+  --input-padding-block-xs: var(--theme-control-padding-block-xs);
+  --input-padding-inline-xs: var(--theme-control-padding-inline-xs);
+  --input-font-family-xs: var(--theme-font-minimize-font-family);
+  --input-font-size-xs: var(--theme-font-minimize-font-size);
+  --input-font-weight-xs: var(--theme-font-minimize-font-weight);
+  --input-line-height-xs: var(--theme-font-minimize-line-height);
+  --input-letter-spacing-xs: var(--theme-font-minimize-letter-spacing);
+
+  --input-height-sm: var(--theme-control-height-sm);
+  --input-padding-block-sm: var(--theme-control-padding-block-sm);
+  --input-padding-inline-sm: var(--theme-control-padding-inline-sm);
+  --input-font-family-sm: var(--theme-font-condense-font-family);
+  --input-font-size-sm: var(--theme-font-condense-font-size);
+  --input-font-weight-sm: var(--theme-font-condense-font-weight);
+  --input-line-height-sm: var(--theme-font-condense-line-height);
+  --input-letter-spacing-sm: var(--theme-font-condense-letter-spacing);
+  
+  --input-height-lg: var(--theme-control-height-lg);
+  --input-padding-block-lg: var(--theme-control-padding-block-lg);
+  --input-padding-inline-lg: var(--theme-control-padding-inline-lg);
+  --input-font-family-lg: var(--theme-font-magnify-font-family);
+  --input-font-size-lg: var(--theme-font-magnify-font-size);
+  --input-font-weight-lg: var(--theme-font-magnify-font-weight);
+  --input-line-height-lg: var(--theme-font-magnify-line-height);
+  --input-letter-spacing-lg: var(--theme-font-magnify-letter-spacing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --input-background: var(--theme-neutral-50);
+    --input-border-color: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --input-background: var(--theme-neutral-50);
+  --input-border-color: var(--theme-neutral-600);
+}

package/dist/styles/semantic/menu.css

@@ -0,0 +1,104 @@
+/* Menu Component Tokens - Mojave Theme */
+/* Menu references ContextMenu tokens - they share the same popup structure */
+
+:root {
+  /* ============================================
+     TRIGGER
+     ============================================ */
+  
+  /* Trigger uses Button component - no unique tokens needed */
+  
+  /* ============================================
+     POSITIONER
+     ============================================ */
+  
+  --menu-positioner-z-index: var(--context-menu-positioner-z-index);
+  
+  /* ============================================
+     POPUP
+     ============================================ */
+  
+  --menu-popup-min-width: var(--context-menu-popup-min-width);
+  --menu-popup-background: var(--context-menu-popup-background);
+  --menu-popup-border: var(--context-menu-popup-border);
+  --menu-popup-border-radius: var(--context-menu-popup-border-radius);
+  --menu-popup-padding: var(--context-menu-popup-padding);
+  --menu-popup-shadow: var(--context-menu-popup-shadow);
+  --menu-popup-animation-duration: var(--context-menu-popup-animation-duration);
+  --menu-popup-animation-easing: var(--context-menu-popup-animation-easing);
+  
+  /* ============================================
+     ITEM
+     ============================================ */
+  
+  --menu-item-padding-block: var(--context-menu-item-padding-block);
+  --menu-item-padding-inline: var(--context-menu-item-padding-inline);
+  --menu-item-font-size: var(--context-menu-item-font-size);
+  --menu-item-color: var(--context-menu-item-color);
+  --menu-item-cursor: var(--context-menu-item-cursor);
+  --menu-item-border-radius: var(--context-menu-item-border-radius);
+  --menu-item-transition: var(--context-menu-item-transition);
+  --menu-item-gap: var(--context-menu-item-gap);
+  
+  --menu-item-background-hover: var(--context-menu-item-background-hover);
+  --menu-item-color-hover: var(--context-menu-item-color-hover);
+  
+  --menu-item-color-disabled: var(--context-menu-item-color-disabled);
+  --menu-item-cursor-disabled: var(--context-menu-item-cursor-disabled);
+  --menu-item-opacity-disabled: var(--context-menu-item-opacity-disabled);
+  
+  /* ============================================
+     CHECKBOX & RADIO INDICATORS
+     ============================================ */
+  
+  --menu-item-indicator-width: var(--context-menu-item-indicator-width);
+  --menu-item-indicator-height: var(--context-menu-item-indicator-height);
+  --menu-item-indicator-color: var(--context-menu-item-indicator-color);
+  --menu-item-indicator-font-size: var(--context-menu-item-indicator-font-size);
+  
+  /* ============================================
+     GROUP
+     ============================================ */
+  
+  --menu-group-padding: var(--context-menu-group-padding);
+  
+  --menu-group-label-padding-block-start: var(--context-menu-group-label-padding-block-start);
+  --menu-group-label-padding-block-end: var(--context-menu-group-label-padding-block-end);
+  --menu-group-label-padding-inline: var(--context-menu-group-label-padding-inline);
+  --menu-group-label-font-size: var(--context-menu-group-label-font-size);
+  --menu-group-label-font-weight: var(--context-menu-group-label-font-weight);
+  --menu-group-label-color: var(--context-menu-group-label-color);
+  --menu-group-label-text-transform: var(--context-menu-group-label-text-transform);
+  --menu-group-label-letter-spacing: var(--context-menu-group-label-letter-spacing);
+  
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --menu-separator-height: var(--context-menu-separator-height);
+  --menu-separator-background: var(--context-menu-separator-background);
+  --menu-separator-margin-block: var(--context-menu-separator-margin-block);
+  
+  /* ============================================
+     SUBMENU TRIGGER
+     ============================================ */
+  
+  --menu-submenu-arrow-color: var(--context-menu-submenu-arrow-color);
+  --menu-submenu-arrow-font-size: var(--context-menu-submenu-arrow-font-size);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --menu-popup-background: var(--context-menu-popup-background);
+    --menu-popup-border: var(--context-menu-popup-border);
+  }
+}
+
+[data-theme='dark'] {
+  --menu-popup-background: var(--context-menu-popup-background);
+  --menu-popup-border: var(--context-menu-popup-border);
+}

package/dist/styles/semantic/menubar.css

@@ -0,0 +1,70 @@
+/* Menubar Component Tokens - Mojave Theme */
+/* Menubar is a horizontal container of Menu components */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --menubar-root-display: flex;
+  --menubar-root-align-items: center;
+  --menubar-root-gap: var(--space-1);
+  --menubar-root-padding: var(--space-1);
+  --menubar-root-background: var(--surface-base);
+  --menubar-root-border: var(--theme-stroke-default) solid var(--border-subtle);
+  --menubar-root-border-radius: var(--theme-radius-chrome);
+  
+  /* ============================================
+     TRIGGER (Menu trigger in menubar)
+     ============================================ */
+  
+  --menubar-trigger-padding-block: var(--space-2);
+  --menubar-trigger-padding-inline: var(--space-3);
+  --menubar-trigger-font-family: var(--theme-font-base-label-font-family);
+  --menubar-trigger-font-size: var(--theme-font-base-label-font-size);
+  --menubar-trigger-font-weight: var(--theme-font-base-label-font-weight);
+  --menubar-trigger-line-height: var(--theme-font-base-label-line-height);
+  --menubar-trigger-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --menubar-trigger-color: var(--text-primary);
+  --menubar-trigger-background: transparent;
+  --menubar-trigger-border: none;
+  --menubar-trigger-border-radius: var(--theme-radius-item);
+  --menubar-trigger-cursor: pointer;
+  --menubar-trigger-transition: all 0.15s ease;
+  
+  /* Trigger states */
+  --menubar-trigger-background-hover: var(--surface-raised);
+  --menubar-trigger-background-active: var(--theme-primary-100);
+  --menubar-trigger-color-active: var(--theme-primary-800);
+  
+  /* ============================================
+     MENU ITEMS (inherit from Menu)
+     ============================================ */
+  
+  /* All menu popup/item styles are inherited from Menu component */
+  --menubar-positioner-z-index: var(--menu-positioner-z-index);
+  --menubar-popup-min-width: var(--menu-popup-min-width);
+  --menubar-popup-background: var(--menu-popup-background);
+  --menubar-popup-border: var(--menu-popup-border);
+  --menubar-popup-border-radius: var(--menu-popup-border-radius);
+  --menubar-popup-padding: var(--menu-popup-padding);
+  --menubar-popup-shadow: var(--menu-popup-shadow);
+  --menubar-popup-animation-duration: var(--menu-popup-animation-duration);
+  --menubar-popup-animation-easing: var(--menu-popup-animation-easing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --menubar-root-background: var(--theme-neutral-100);
+    --menubar-root-border: var(--theme-stroke-default) solid var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --menubar-root-background: var(--theme-neutral-100);
+  --menubar-root-border: var(--theme-stroke-default) solid var(--theme-neutral-600);
+}

package/dist/styles/semantic/meter.css

@@ -0,0 +1,88 @@
+/* Meter Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --meter-root-display: flex;
+  --meter-root-flex-direction: column;
+  --meter-root-gap: var(--space-2);
+  --meter-root-width: 100%;
+  
+  /* ============================================
+     LABEL
+     ============================================ */
+  
+  --meter-label-font-family: var(--theme-font-base-label-font-family);
+  --meter-label-font-size: var(--theme-font-base-label-font-size);
+  --meter-label-font-weight: var(--theme-font-base-label-font-weight);
+  --meter-label-line-height: var(--theme-font-base-label-line-height);
+  --meter-label-letter-spacing: var(--theme-font-base-label-letter-spacing);
+  --meter-label-color: var(--text-primary);
+  --meter-label-margin-bottom: var(--space-1);
+  
+  /* ============================================
+     TRACK (Background bar)
+     ============================================ */
+  
+  --meter-track-height: 8px;
+  --meter-track-background: var(--theme-neutral-200);
+  --meter-track-border-radius: var(--theme-radius-pill);
+  --meter-track-overflow: hidden;
+  
+  /* ============================================
+     INDICATOR (Filled portion)
+     ============================================ */
+  
+  --meter-indicator-background: var(--theme-primary-600);
+  --meter-indicator-transition: width 0.3s ease;
+  --meter-indicator-height: 100%;
+  --meter-indicator-border-radius: var(--theme-radius-pill);
+  
+  /* ============================================
+     VALUE LABEL (Optional text showing value)
+     ============================================ */
+  
+  --meter-value-font-family: var(--theme-font-minimize-font-family);
+  --meter-value-font-size: var(--theme-font-minimize-font-size);
+  --meter-value-font-weight: var(--theme-font-minimize-font-weight);
+  --meter-value-line-height: var(--theme-font-minimize-line-height);
+  --meter-value-letter-spacing: var(--theme-font-minimize-letter-spacing);
+  --meter-value-color: var(--text-secondary);
+  --meter-value-text-align: right;
+  
+  /* ============================================
+     STATUS COLORS (optimum, sub-optimum, sub-sub-optimum)
+     ============================================ */
+  
+  /* Optimum - value is in the optimal range */
+  --meter-indicator-background-optimum: var(--theme-status-success);
+  
+  /* Sub-optimum - value is outside optimal but not critical */
+  --meter-indicator-background-sub-optimum: var(--theme-status-warning);
+  
+  /* Sub-sub-optimum - value is in critical range */
+  --meter-indicator-background-sub-sub-optimum: var(--theme-status-error);
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  --meter-track-height-sm: 4px;
+  --meter-track-height-lg: 12px;
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --meter-track-background: var(--theme-neutral-300);
+  }
+}
+
+[data-theme='dark'] {
+  --meter-track-background: var(--theme-neutral-300);
+}

package/dist/styles/semantic/modal.css

@@ -0,0 +1,14 @@
+/* Modal Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     MODAL TOKENS
+     ============================================ */
+  
+  --modal-bg: var(--surface-overlay);
+  --modal-border-radius: var(--theme-radius-modal);
+  --modal-padding: var(--space-8);
+  --modal-shadow: var(--shadow-2xl);
+  --modal-backdrop-bg: color-mix(in srgb, var(--theme-overlay-base) 50%, transparent);
+  --modal-max-width: 32rem;
+}

package/dist/styles/semantic/navigation-menu.css

@@ -0,0 +1,171 @@
+/* Navigation Menu Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --navigation-menu-root-display: flex;
+  --navigation-menu-root-align-items: center;
+  --navigation-menu-root-gap: var(--space-1);
+  --navigation-menu-root-background: var(--theme-neutral-100);
+  --navigation-menu-root-border-radius: var(--theme-radius-chrome);
+  --navigation-menu-root-padding: var(--space-1);
+  
+  /* ============================================
+     TRIGGER
+     ============================================ */
+  
+  --navigation-menu-trigger-display: flex;
+  --navigation-menu-trigger-align-items: center;
+  --navigation-menu-trigger-justify-content: center;
+  --navigation-menu-trigger-gap: var(--space-1-5);
+  --navigation-menu-trigger-height: 40px;
+  --navigation-menu-trigger-padding-block: var(--space-2);
+  --navigation-menu-trigger-padding-inline: var(--space-3-5);
+  --navigation-menu-trigger-font-family: var(--theme-font-base-trigger-font-family);
+  --navigation-menu-trigger-font-size: var(--theme-font-base-trigger-font-size);
+  --navigation-menu-trigger-font-weight: var(--theme-font-base-trigger-font-weight);
+  --navigation-menu-trigger-line-height: var(--theme-font-base-trigger-line-height);
+  --navigation-menu-trigger-letter-spacing: var(--theme-font-base-trigger-letter-spacing);
+  --navigation-menu-trigger-color: var(--text-primary);
+  --navigation-menu-trigger-background: var(--theme-neutral-100);
+  --navigation-menu-trigger-border: none;
+  --navigation-menu-trigger-border-radius: var(--theme-radius-item);
+  --navigation-menu-trigger-cursor: pointer;
+  --navigation-menu-trigger-transition: background-color 0.2s ease;
+  
+  /* Trigger states */
+  --navigation-menu-trigger-background-hover: var(--theme-neutral-200);
+  --navigation-menu-trigger-color-hover: var(--text-primary);
+  --navigation-menu-trigger-background-active: var(--theme-neutral-200);
+  --navigation-menu-trigger-color-active: var(--text-primary);
+  
+  /* ============================================
+     INDICATOR (chevron icon)
+     ============================================ */
+  
+  --navigation-menu-indicator-size: 10px;
+  --navigation-menu-indicator-color: currentColor;
+  --navigation-menu-indicator-transition: transform 0.2s ease;
+  
+  /* ============================================
+     POSITIONER
+     ============================================ */
+  
+  --navigation-menu-positioner-z-index: 1000;
+  
+  /* ============================================
+     POPUP
+     ============================================ */
+  
+  --navigation-menu-popup-min-width: 400px;
+  --navigation-menu-popup-max-width: 600px;
+  --navigation-menu-popup-padding: var(--space-6);
+  --navigation-menu-popup-background: var(--surface-base);
+  --navigation-menu-popup-color: var(--text-primary);
+  --navigation-menu-popup-border-width: var(--theme-stroke-default);
+  --navigation-menu-popup-border-color: var(--theme-neutral-300);
+  --navigation-menu-popup-border-color-dark: var(--theme-neutral-600);
+  --navigation-menu-popup-border-radius: var(--theme-radius-chrome);
+  --navigation-menu-popup-shadow: 
+    0 10px 15px -3px var(--theme-neutral-300),
+    0 4px 6px -4px var(--theme-neutral-300);
+  
+  /* ============================================
+     CONTENT
+     ============================================ */
+  
+  --navigation-menu-content-display: grid;
+  --navigation-menu-content-gap: var(--space-2);
+  --navigation-menu-content-grid-columns: 12rem 12rem;
+  
+  /* ============================================
+     LINK
+     ============================================ */
+  
+  --navigation-menu-link-display: block;
+  --navigation-menu-link-flex-direction: column;
+  --navigation-menu-link-gap: var(--space-1);
+  --navigation-menu-link-padding: var(--space-2);
+  --navigation-menu-link-border-radius: var(--theme-radius-item);
+  --navigation-menu-link-text-decoration: none;
+  --navigation-menu-link-transition: background-color 0.15s ease;
+  
+  --navigation-menu-link-background-hover: var(--theme-neutral-200);
+  
+  /* ============================================
+     LINK TITLE
+     ============================================ */
+  
+  --navigation-menu-link-title-font-family: var(--theme-font-base-trigger-font-family);
+  --navigation-menu-link-title-font-size: var(--theme-font-base-trigger-font-size);
+  --navigation-menu-link-title-font-weight: var(--theme-font-base-trigger-font-weight);
+  --navigation-menu-link-title-line-height: var(--theme-font-base-trigger-line-height);
+  --navigation-menu-link-title-letter-spacing: var(--theme-font-base-trigger-letter-spacing);
+  --navigation-menu-link-title-color: var(--text-primary);
+  
+  /* ============================================
+     LINK DESCRIPTION
+     ============================================ */
+  
+  --navigation-menu-link-description-font-family: var(--theme-font-condense-font-family);
+  --navigation-menu-link-description-font-size: var(--theme-font-condense-font-size);
+  --navigation-menu-link-description-font-weight: var(--theme-font-condense-font-weight);
+  --navigation-menu-link-description-line-height: var(--theme-font-condense-line-height);
+  --navigation-menu-link-description-letter-spacing: var(--theme-font-condense-letter-spacing);
+  --navigation-menu-link-description-color: var(--text-secondary);
+  
+  /* ============================================
+     SECTION
+     ============================================ */
+  
+  --navigation-menu-section-display: flex;
+  --navigation-menu-section-flex-direction: column;
+  --navigation-menu-section-gap: var(--space-2);
+  
+  /* ============================================
+     SECTION HEADING
+     ============================================ */
+  
+  --navigation-menu-section-heading-font-family: var(--theme-font-condense-subtitle-label-font-family);
+  --navigation-menu-section-heading-font-size: var(--theme-font-condense-subtitle-label-font-size);
+  --navigation-menu-section-heading-font-weight: var(--theme-font-condense-subtitle-label-font-weight);
+  --navigation-menu-section-heading-line-height: var(--theme-font-condense-subtitle-label-line-height);
+  --navigation-menu-section-heading-letter-spacing: var(--theme-font-condense-subtitle-label-letter-spacing);
+  --navigation-menu-section-heading-color: var(--text-secondary);
+  --navigation-menu-section-heading-text-transform: var(--theme-font-condense-subtitle-label-text-transform);
+  --navigation-menu-section-heading-margin-bottom: var(--space-2);
+  
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --navigation-menu-separator-height: var(--theme-stroke-default);
+  --navigation-menu-separator-background: var(--border-subtle);
+  --navigation-menu-separator-margin-block: var(--space-2);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --navigation-menu-root-background: var(--theme-neutral-200);
+    --navigation-menu-trigger-background: var(--theme-neutral-200);
+    --navigation-menu-trigger-background-hover: var(--theme-neutral-300);
+    --navigation-menu-trigger-background-active: var(--theme-neutral-300);
+    --navigation-menu-popup-background: var(--theme-neutral-50);
+    --navigation-menu-link-background-hover: var(--theme-neutral-100);
+  }
+}
+
+[data-theme='dark'] {
+  --navigation-menu-root-background: var(--theme-neutral-200);
+  --navigation-menu-trigger-background: var(--theme-neutral-200);
+  --navigation-menu-trigger-background-hover: var(--theme-neutral-300);
+  --navigation-menu-trigger-background-active: var(--theme-neutral-300);
+  --navigation-menu-popup-background: var(--theme-neutral-50);
+  --navigation-menu-link-background-hover: var(--theme-neutral-100);
+}