fix: restore control typography and hover states

src/styles.css

@@ -175,11 +175,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-button,
-input {
-  font: inherit;
-}
-
 button:focus-visible,
 input:focus-visible {
   outline: 2px solid #0f172a;
@@ -202,10 +197,6 @@ input:focus-visible {
 .acrylic-navigation,
 .acrylic-panel,
 .acrylic-control,
-.surface-dock,
-.surface-control,
-.surface-well,
-.surface-reading,
 .glass-transient,
 .material-tone-info,
 .material-tone-normal,
@@ -257,10 +248,20 @@ input:focus-visible {
   -webkit-backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
 }
 
-.surface-dock { background-color: var(--surface-dock); }
-.surface-control { background-color: var(--surface-control); }
-.surface-well { background-color: var(--surface-well); }
-.surface-reading { background-color: var(--surface-reading); }
+@layer components {
+  .surface-dock,
+  .surface-control,
+  .surface-well,
+  .surface-reading {
+    border-color: var(--surface-border);
+    background-clip: padding-box;
+  }
+
+  .surface-dock { background-color: var(--surface-dock); }
+  .surface-control { background-color: var(--surface-control); }
+  .surface-well { background-color: var(--surface-well); }
+  .surface-reading { background-color: var(--surface-reading); }
+}
 
 .glass-transient {
   background-color: var(--glass-transient);