refactor: update surface color variables for consistency across styles

Author: medyll

dist/theme.css

@@ -199,9 +199,13 @@
 		--color-primary-hover: hsl(from var(--color-primary) h s calc(l - 8%));
 		--color-primary-muted: hsl(from var(--color-primary) h s calc(l + 28%));
 		/* surfaces */
-		--color-surface: light-dark(#ffffff, #1a1a1a);
-		--color-surface-2: light-dark(#f5f5f5, #252525);
-		--color-surface-3: light-dark(#ebebeb, #2e2e2e);
+		--color-surface:         light-dark(#ffffff, #1a1a1a);   /* fond de page, base */
+		--color-surface-alt:     light-dark(#f5f5f5, #252525);   /* sidebar, panels, zones distinctes */
+		--color-surface-raised:  light-dark(#ffffff, #2e2e2e);   /* cards, modals, éléments élevés */
+		--color-surface-overlay: light-dark(rgba(255,255,255,0.85), rgba(30,30,30,0.85)); /* drawers, popovers (avec backdrop-filter) */
+		--color-surface-sunken:  light-dark(#ebebeb, #141414);   /* inputs, zones en creux */
+		--color-surface-hover:   light-dark(#f0f0f0, #2a2a2a);  /* hover sur items de liste */
+		--color-surface-active:  light-dark(#e6effd, #1e2d47);  /* item sélectionné/actif (teinte primary) */
 		/* status colors */
 		--color-success: #10b981;
 		--color-warning: #f59e0b;
@@ -293,15 +297,15 @@
 		font-size: var(--text-sm);
 	}
 	code {
-		background: var(--color-surface-2);
+		background: var(--color-surface-alt);
 		padding: 0.1em 0.35em;
 		border-radius: var(--radius-sm);
 		border: var(--border-width) solid var(--color-border);
 	}
 	pre {
 		padding: var(--pad-md);
 		border-radius: var(--radius-md);
-		background: var(--color-surface-2);
+		background: var(--color-surface-alt);
 		overflow-x: auto;
 		& code {
 			background: none;
@@ -328,7 +332,7 @@
 		font-size: var(--text-base);
 		line-height: var(--leading-normal);
 		color: var(--color-text);
-		background: var(--color-surface-2);
+		background: var(--color-surface-alt);
 		border: var(--border-width) solid var(--color-border);
 		border-radius: var(--radius-md);
 		padding: var(--pad-xs) var(--pad-sm);
@@ -368,7 +372,7 @@
 		font-weight: var(--font-medium);
 		line-height: var(--leading-none);
 		color: var(--color-text);
-		background: var(--color-surface-2);
+		background: var(--color-surface-alt);
 		border: var(--border-width) solid var(--color-border);
 		border-radius: var(--radius-md);
 		padding: var(--pad-xs) var(--pad-sm);

dist/utilities.css

@@ -116,7 +116,7 @@
 
 /* ── Background ── */
 .bg-white        { background-color: #fff; }
-.bg-gray-50      { background-color: var(--color-surface-2); }
+.bg-gray-50      { background-color: var(--color-surface-alt); }
 .bg-blue-50      { background-color: color-mix(in srgb, var(--color-primary) 8%, transparent); }
 .bg-blue-100     { background-color: color-mix(in srgb, var(--color-primary) 15%, transparent); }
 .bg-orange-100   { background-color: color-mix(in srgb, #f97316 15%, transparent); }

dist/workspace.css

@@ -279,7 +279,7 @@
 										font-weight: var(--font-semibold);
 									}
 									&:hover:not(.selected) {
-										background: var(--color-surface-2);
+										background: var(--color-surface-alt);
 									}
 								}
 							}
@@ -437,7 +437,7 @@
 input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
 textarea,
 select {
-	background-color: var(--color-surface-2);
+	background-color: var(--color-surface-alt);
 	color: var(--color-text);
 	border: var(--border-width) solid var(--color-border);
 	border-radius: var(--radius-md);