style: refine acrylic workbench surfaces

features/map/core/components/base-layers-control.tsx

@@ -194,7 +194,7 @@ export function BaseLayersControl({
             ) : (
               <Map size={18} aria-hidden="true" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
             )}
-            <span className="absolute bottom-1 left-1 right-1 rounded bg-[var(--glass-menu)] px-1 py-0.5 text-xs font-semibold leading-none text-slate-800 shadow-sm">
+            <span className="surface-reading absolute bottom-1 left-1 right-1 rounded px-1 py-0.5 text-xs font-semibold leading-none text-slate-800">
               {activeLayer?.label ?? title}
             </span>
           </span>

features/map/core/components/control-panel.tsx

@@ -83,7 +83,7 @@ export function MapModeButton({ icon: Icon, label, active = false, disabled = fa
       className={cn(
         "flex h-14 flex-col items-center justify-center gap-1 text-xs font-semibold transition duration-150",
         MAP_COMPACT_RADIUS_CLASS_NAME,
-        active ? "bg-blue-600 text-white shadow-sm" : "bg-[var(--glass-menu)] text-slate-600 hover:text-blue-700",
+        active ? "bg-blue-600 text-white" : "surface-control text-slate-600 hover:text-blue-700",
         disabled && "cursor-not-allowed opacity-55 hover:text-slate-600"
       )}
     >
@@ -164,7 +164,7 @@ export function MapActionRow({
           ? "border-blue-600 bg-blue-600 text-white shadow-lg shadow-blue-600/25 hover:bg-blue-700"
           : strong
             ? "border-blue-100 bg-blue-50/95 text-blue-800"
-            : "border-transparent bg-[var(--glass-menu)] text-slate-700 hover:border-blue-100 hover:bg-white hover:text-blue-700",
+            : "surface-control border-transparent text-slate-700 hover:border-blue-100 hover:bg-white hover:text-blue-700",
         isDanger && "hover:border-red-100 hover:text-red-700",
         selected && !isPrimary && "border-blue-200 bg-blue-50 text-blue-800",
         muted && "opacity-70",

features/map/core/components/layer-control.tsx

@@ -69,8 +69,8 @@ export function MapLayerControl({
                 "flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm transition duration-150",
                 MAP_COMPACT_RADIUS_CLASS_NAME,
                 item.visible
-                  ? "border-blue-100 bg-[var(--glass-menu)] text-slate-900 shadow-md shadow-blue-950/10"
-                  : "border-transparent bg-[var(--glass-readable)] text-slate-500 hover:border-slate-200 hover:bg-white",
+                  ? "surface-control border-blue-100 text-slate-900"
+                  : "surface-well border-transparent text-slate-500 hover:border-slate-200 hover:bg-white",
                 disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
               )}
             >

features/map/core/components/layer-panel.tsx

@@ -65,7 +65,7 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
                 MAP_COMPACT_RADIUS_CLASS_NAME,
                 item.visible
                   ? "border-blue-200 bg-blue-50/90 text-blue-950 shadow-sm shadow-blue-950/5"
-                  : "border-transparent bg-[var(--glass-readable)] text-slate-500 hover:border-slate-200 hover:bg-white",
+                  : "surface-well border-transparent text-slate-500 hover:border-slate-200 hover:bg-white",
                 disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
               )}
             >

features/map/core/components/map-control-styles.ts

@@ -9,19 +9,19 @@ export const MAP_COMPACT_RADIUS_CLASS_NAME = MAP_CONTROL_RADIUS_CLASS_NAME;
 export const MAP_ICON_CELL_RADIUS_CLASS_NAME = "rounded-lg";
 
 export const MAP_CONTROL_SURFACE_CLASS_NAME =
-  "glass-control border";
-
-export const MAP_AIR_SURFACE_CLASS_NAME =
-  "glass-air border";
+  "acrylic-control border";
 
 export const MAP_TOOL_PANEL_SURFACE_CLASS_NAME =
-  "glass-panel border";
+  "acrylic-panel border";
+
+export const MAP_FOCUS_SURFACE_CLASS_NAME =
+  "acrylic-panel border";
 
 export const MAP_READABLE_SURFACE_CLASS_NAME =
-  "border border-transparent bg-[var(--glass-readable)]";
+  "surface-well border";
 
 export const MAP_READABLE_SURFACE_STRONG_CLASS_NAME =
-  "border border-transparent bg-[var(--glass-menu)]";
+  "surface-control border";
 
 export const MAP_CONTROL_HOVER_CLASS_NAME =
   "hover:bg-blue-100/70 hover:text-blue-700 hover:ring-1 hover:ring-blue-200/80 active:bg-blue-100";

features/map/core/components/measure-panel.tsx

@@ -72,7 +72,7 @@ export function MapMeasurePanel({
   return (
     <div className="space-y-3">
       <MapPanelSection title="模式">
-        <div className={cn("grid grid-cols-3 gap-1.5 border border-transparent bg-[var(--glass-readable)] p-1.5", MAP_READABLE_RADIUS_CLASS_NAME)}>
+        <div className={cn("surface-well grid grid-cols-3 gap-1.5 border p-1.5", MAP_READABLE_RADIUS_CLASS_NAME)}>
           {modes.map((mode) => (
             <MapModeButton
               key={mode.id}
@@ -121,7 +121,7 @@ export function MapMeasurePanel({
                   MAP_COMPACT_RADIUS_CLASS_NAME,
                   unit.id === activeUnitId
                     ? "bg-blue-600 text-white"
-                    : "bg-[var(--glass-menu)] text-slate-600 hover:text-blue-700"
+                    : "surface-control text-slate-600 hover:text-blue-700"
                 )}
               >
                 {unit.label}

features/map/core/components/notice.tsx

@@ -45,11 +45,11 @@ const sonnerPositions: Record<MapNoticePosition, SonnerPosition> = {
 };
 
 const toneClassNames: Record<MapNoticeTone, string> = {
-  info: "glass-menu text-slate-900",
-  success: "glass-menu text-slate-900",
-  warning: "glass-menu text-slate-900",
-  error: "glass-menu text-slate-900",
-  loading: "glass-menu text-slate-900"
+  info: "acrylic-panel text-slate-900",
+  success: "acrylic-panel text-slate-900",
+  warning: "acrylic-panel text-slate-900",
+  error: "acrylic-panel text-slate-900",
+  loading: "acrylic-panel text-slate-900"
 };
 
 const iconClassNames: Record<MapNoticeTone, string> = {

features/map/core/components/scale-line.tsx

@@ -3,7 +3,7 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
 import { type RefObject, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
-import { MAP_AIR_SURFACE_CLASS_NAME } from "./map-control-styles";
+import { MAP_CONTROL_SURFACE_CLASS_NAME } from "./map-control-styles";
 
 type ScaleLineState = {
   label: string;
@@ -102,7 +102,7 @@ export function MapScaleLine({
       aria-label={`比例尺 ${scale.label}，${coordinateLabel}`}
       className={cn(
         "pointer-events-none inline-flex w-auto max-w-full select-none items-center gap-2.5 overflow-hidden rounded-none rounded-tl-xl border-b-0 border-r-0 px-2.5 py-1.5 text-xs font-semibold leading-none text-slate-800",
-        MAP_AIR_SURFACE_CLASS_NAME,
+        MAP_CONTROL_SURFACE_CLASS_NAME,
         className
       )}
     >