feat(ui): add raised hover and pressed depth to standard buttons

Standard .button controls now use a compact 2px bottom edge, lift 1px on
hover, and press down with the depth removed. Highlighted buttons mix the
accent with black for a matching edge, and focus-visible keeps the accent
ring. Other button-like controls still use the lighter scale press.

DESIGN.md

@@ -51,6 +51,14 @@ Avoid oversized titles, generic dashboard cards, strong shadows, thick
 dividers, native browser selects, and isolated colored buttons that do not
 match the current action styles.
 
+Standard `.button` controls use a compact 2px bottom depth. Hover raises the
+button face by 1px and increases the visible depth to 3px. Pressing moves the
+face down 2px into the edge and removes the depth until release, keeping the
+overall bottom position stable. Disabled controls stay flat,
+and focus-visible controls retain the accent ring alongside the depth.
+Highlighted buttons mix the accent equally with black for a pronounced bottom
+edge, so custom theme colors produce a matching edge instead of a generic one.
+
 ---
 
 ## 2. Development and cascade notes

resources/css/app.css

@@ -86,8 +86,36 @@
     --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-/* Shared press feedback: every button-like control dips slightly on press and
-   eases back, so pressable elements feel responsive and consistent app-wide. */
+/* Standard buttons have a compact physical edge. Hover lifts the face by 1px;
+   pressing nudges it down while the depth disappears. */
+.button:not(:disabled) {
+    --button-depth-color: rgb(0 0 0 / 0.22);
+    --button-depth: 0 2px 0 var(--button-depth-color);
+    --button-depth-hover: 0 3px 0 var(--button-depth-color);
+
+    box-shadow: var(--button-depth);
+}
+
+.button.button-highlighted:not(:disabled),
+.button[isHighlighted]:not(:disabled) {
+    --button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);
+}
+
+/* Keep the shared focus indicator when the depth shadow owns box-shadow. */
+.button:not(:disabled):focus-visible {
+    box-shadow: var(--button-depth), 0 0 0 1px var(--color-accent);
+}
+
+.button:not(:disabled):hover {
+    transform: translateY(-1px);
+    box-shadow: var(--button-depth-hover);
+}
+
+.button:not(:disabled):hover:focus-visible {
+    box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-accent);
+}
+
+/* Other button-like controls retain the lighter scale feedback. */
 .button,
 .icon-button,
 .app-tab,
@@ -98,7 +126,6 @@
     transition-duration: 120ms;
 }
 
-.button:not(:disabled):active,
 .icon-button:not(:disabled):active,
 .app-tab:active,
 .split-action-main:not(:disabled):active,
@@ -106,6 +133,11 @@
     transform: scale(0.97);
 }
 
+.button:not(:disabled):active {
+    transform: translateY(2px);
+    box-shadow: none;
+}
+
 /* Focus border/ring on any form control should ease, not snap. The accent
    focus indicator is a border-color and/or box-shadow (ring) change, which the
    utilities' `transition-colors` did not fully animate. Target the elements

tests/Feature/ButtonDepthInteractionTest.php

@@ -0,0 +1,19 @@
+<?php
+
+test('standard buttons use raised hover and pressed depth states', function () {
+    $styles = file_get_contents(resource_path('css/app.css'));
+
+    expect($styles)
+        ->toContain('--button-depth-color: rgb(0 0 0 / 0.22);')
+        ->toContain('--button-depth: 0 2px 0 var(--button-depth-color);')
+        ->toContain('--button-depth-hover: 0 3px 0 var(--button-depth-color);')
+        ->toContain('.button-highlighted:not(:disabled)')
+        ->toContain('--button-depth-color: color-mix(in oklab, var(--color-coollabs) 52%, black);')
+        ->toContain('.button:not(:disabled):hover')
+        ->toContain('transform: translateY(-1px);')
+        ->toContain('.button:not(:disabled):active')
+        ->toContain('transform: translateY(2px);')
+        ->not->toContain('transform: translateY(1px);')
+        ->not->toContain('transform: translateY(3px);')
+        ->toContain('box-shadow: none;');
+});