Quiet fields: base.css field baseline, --field tokens, 3:1 border-strong, app-wide migration

src/app/components/SettingsPopover.module.css

@@ -16,9 +16,12 @@
   max-width: min(320px, 90vw);
   padding: var(--space-4);
   background: var(--layer-01);
-  border: var(--border-width) solid var(--border-strong);
+  border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  /* The popover surface is --layer-01: fields step their fill off it. */
+  --field: var(--field-02);
+  --field-hover: var(--field-hover-02);
 }
 
 .title {
@@ -81,11 +84,6 @@
 .text {
   height: var(--control-height);
   padding: 0 var(--space-3);
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: var(--radius);
-  background: var(--bg);
-  color: var(--text);
-  font: inherit;
   font-size: 12px;
 }
 
@@ -99,16 +97,6 @@
   font-family: var(--font-mono);
 }
 
-.number:focus-visible,
-.text:focus-visible {
-  outline: 2px solid var(--focus);
-  outline-offset: -1px;
-}
-
-.text::placeholder {
-  color: var(--text-placeholder);
-}
-
 .reset {
   border: none;
   background: none;