feat(menu-family): adopt the `overlay` elevation plane (B2)

Extend the dropdown's overlay-plane adoption to the rest of the menu family:

- context-menu: Content / SubContent carry `data-depth="overlay"`; prune the
  recipe's content-border / bg / shadow tokens + point the arrow at
  `--depth-overlay-surface`.
- menubar: its per-menu panel reuses `[data-dropdown-menu-content]`, so the
  dropdown's prune (f80f2225) had left it with NO elevation — restore it by
  stamping `data-depth="overlay"` on the eidos Content wrapper. (regression fix)
- navigation-menu: mega-menu panel carries `data-depth="overlay"`; drop the
  hardcoded border / bg / shadow from the recipe CSS.

Radius / font / color stay each panel's own. Verified in-browser: all three
paint bg oklch(0.285) + 1px border + shadow/halo from the plane; check 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/context-menu/context-menu-content.svelte

@@ -22,7 +22,7 @@
 	setListSurfaceSizeContext({ getSize: () => resolvedSize });
 </script>
 
-<ContextMenu.Content data-stagger="" data-list-surface="" {...rest} data-size={resolvedSize}>
+<ContextMenu.Content data-stagger="" data-list-surface="" data-depth="overlay" {...rest} data-size={resolvedSize}>
 	{#snippet children(snippetProps)}
 		{@render bodyContent?.(snippetProps)}
 	{/snippet}

src/uix/eidos/components/context-menu/context-menu-sub-content.svelte

@@ -20,7 +20,7 @@
 	const resolvedSize = $derived(eidos.resolve(size ?? sizeCtx?.getSize(), 'md'));
 </script>
 
-<ContextMenu.SubContent data-stagger="" data-list-surface="" {...rest} data-size={resolvedSize}>
+<ContextMenu.SubContent data-stagger="" data-list-surface="" data-depth="overlay" {...rest} data-size={resolvedSize}>
 	{#snippet children(snippetProps)}
 		{@render bodyContent?.(snippetProps)}
 	{/snippet}

src/uix/eidos/components/context-menu/context-menu.css

@@ -25,11 +25,9 @@
 	max-block-size: var(--context-menu-content-max-height, min(60vh, 22rem));
 	overflow-y: auto;
 	padding: var(--context-menu-content-padding, var(--space-1));
-	border: var(--context-menu-content-border-width, 1px) solid
-		var(--context-menu-content-border-color, var(--color-border-default));
+	/* Elevation — surface · border · shadow — from the `overlay` plane via
+	   `data-depth` (A1, Decisión 8). Radius / font / color stay the panel's own. */
 	border-radius: var(--context-menu-content-radius, var(--radius-md));
-	background: var(--context-menu-content-bg, var(--color-surface-overlay));
-	box-shadow: var(--context-menu-content-shadow, var(--shadow-overlay));
 	font-family: var(--style-label-font-family, var(--font-ui));
 	font-size: var(--context-menu-content-font-size, var(--font-size-sm));
 	color: var(--color-content-primary);
@@ -178,7 +176,9 @@
 /* ── Arrow ────────────────────────────────────────────────────────── */
 
 [data-context-menu-arrow] {
-	fill: var(--context-menu-content-bg, var(--color-surface-overlay));
+	/* The arrow is part of the elevation surface — consume the `overlay` plane so
+	   it always matches the panel (A1, like popover), not a parallel token. */
+	fill: var(--depth-overlay-surface);
 }
 
 /* ── State transitions ────────────────────────────────────────────── */

src/uix/eidos/components/menubar/menubar-content.svelte

@@ -30,7 +30,7 @@
 	`DropdownMenu.Item` `data-animation-style="fade"` (re-used as Menubar.Item)
 	already apply — this marker is all that's needed. See dropdown-menu README → Motion.
 -->
-<Menubar.Content {...passthrough} data-stagger="" data-list-surface="" data-size={resolvedSize}>
+<Menubar.Content {...passthrough} data-stagger="" data-list-surface="" data-depth="overlay" data-size={resolvedSize}>
 	{#snippet children(snippetProps)}
 		{@render bodyContent?.(snippetProps)}
 	{/snippet}

src/uix/eidos/components/navigation-menu/navigation-menu-content.svelte

@@ -4,4 +4,4 @@
 	let { children, ...rest }: NavigationMenuContentProps = $props();
 </script>
 
-<NavigationMenu.Content {...rest}>{@render children?.()}</NavigationMenu.Content>
+<NavigationMenu.Content data-depth="overlay" {...rest}>{@render children?.()}</NavigationMenu.Content>

src/uix/eidos/components/navigation-menu/navigation-menu.css

@@ -165,11 +165,10 @@
 
 	min-inline-size: 14rem;
 	padding: var(--space-2);
-	border: var(--border-width) solid var(--color-border-default);
+	/* Elevation — surface · border · shadow — from the `overlay` plane via
+	   `data-depth` (A1, Decisión 8). Radius / color stay the panel's own. */
 	border-radius: var(--radius-lg);
-	background: var(--color-surface-overlay);
 	color: var(--color-content-primary);
-	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	outline: none;
 }
 

src/uix/eidos/generated/base.css

@@ -3375,11 +3375,7 @@
 	--context-menu-content-min-width: 12rem;
 	--context-menu-content-max-height: min(60vh, 22rem);
 	--context-menu-content-padding: var(--space-1);
-	--context-menu-content-border-width: var(--border-width);
-	--context-menu-content-border-color: var(--color-border-default);
 	--context-menu-content-radius: var(--radius-md);
-	--context-menu-content-bg: var(--color-surface-overlay);
-	--context-menu-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--context-menu-content-font-size: var(--font-size-sm);
 	--context-menu-item-gap: var(--space-2);
 	--context-menu-item-height: 2rem;

src/uix/eidos/lib/recipes/base.ts

@@ -4220,11 +4220,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'content-min-width': '12rem',
 		'content-max-height': 'min(60vh, 22rem)',
 		'content-padding': 'var(--space-1)',
-		'content-border-width': 'var(--border-width)',
-		'content-border-color': 'var(--color-border-default)',
 		'content-radius': 'var(--radius-md)',
-		'content-bg': 'var(--color-surface-overlay)',
-		'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
 		'content-font-size': 'var(--font-size-sm)',
 		'item-gap': 'var(--space-2)',
 		'item-height': '2rem',