Finish admin page

packages/config/tailwind/theme.css

@@ -48,6 +48,17 @@
 
   --tracking-display: -0.03em;
 
+  /**
+   * Eyebrow: the 10px uppercase label used for section headings, table
+   * headers and field labels. It appeared as the arbitrary value
+   * `text-[0.625rem]` in twenty places before it was a token, which is
+   * exactly how a type scale stops being a scale.
+   */
+  --text-eyebrow: 0.625rem;
+  --text-eyebrow--line-height: 1.4;
+  --text-eyebrow--letter-spacing: 0.1em;
+  --text-eyebrow--font-weight: 600;
+
   /* ---- Layout ----------------------------------------------------------- */
   --spacing-gutter: 1.25rem;
   --container-page: 90rem;
@@ -55,9 +66,24 @@
   --radius-card: 0.25rem;
   --radius-pill: 999px;
 
+  /**
+   * Z-index scale. Named, because `z-50` scattered across files is how two
+   * overlays end up fighting and the loser is whichever rendered first.
+   */
+  --z-sticky: 20;
+  --z-dropdown: 30;
+  --z-overlay: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+
   /* ---- Motion ----------------------------------------------------------- */
   --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
   --animate-rise: rise 0.5s var(--ease-out-quint) both;
+
+  /* Micro-interaction timing. 150–200ms reads as instant-but-smooth; past
+     300ms a hover starts to feel like lag. */
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
 }
 
 /**
@@ -171,4 +197,49 @@
     background-color: var(--color-volt-300);
     color: var(--color-ink-950);
   }
+
+  /**
+   * One focus ring for the whole product.
+   *
+   * Applied to `:focus-visible` rather than `:focus`, so it appears for
+   * keyboard and programmatic focus but not on mouse clicks — the reason
+   * teams remove focus outlines in the first place.
+   *
+   * This is a *baseline*, not a replacement for component-level styles: it
+   * means a plain <button> written in a hurry is still keyboard-navigable.
+   * Sixteen of them across twelve files had no focus indicator at all before
+   * this rule existed.
+   */
+  :focus-visible {
+    outline: 2px solid var(--color-ink-950);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  /* On dark surfaces an ink ring is invisible; invert it. */
+  .on-dark :focus-visible,
+  .bg-ink-950 :focus-visible {
+    outline-color: var(--color-volt-400);
+  }
+}
+
+/**
+ * ---- Reduced motion --------------------------------------------------------
+ *
+ * Honouring `prefers-reduced-motion` is an accessibility requirement, not a
+ * nicety: for people with vestibular disorders, movement can cause actual
+ * nausea. Animation is reduced to near-zero rather than removed, because
+ * `animation: none` can leave elements stuck in their pre-animation state —
+ * `--animate-rise` starts at `opacity: 0`, so disabling it outright would
+ * make content invisible.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }