feat(appearance): add theme, accent, contrast, and typography personalization (#1307)

* feat(appearance): add theme, accent, contrast, and typography personalization

Expand Settings to Appearance into a full personalization surface and add a
quick switcher to the top bar (the palette button between search and
notifications). Choices are saved to the browser, sync across tabs, and apply
before first paint so there is no flash on reload.

- Themes: Dim (the default raised charcoal), OLED true black, Light, and Auto
  (follows the OS and re-resolves live when it flips).
- Accent: an eight-hue wheel (cyan default) that drives the one data color
  across charts, rails, focus rings, active states, and the ambient glow.
- Fine-tune sliders: a master Contrast that spreads page, ink, and borders
  together, plus Border brightness and Ambient glow.
- Typography: swappable interface (Geist / IBM Plex Sans / Hanken Grotesk) and
  data (Geist Mono / IBM Plex Mono / Fira Code) faces, and a text-size control
  (continuous slider in Settings, S/M/L/XL presets in the popover, kept in
  sync). The display serif stays locked as the signature face.

Surfaces, borders, and ink derive from per-theme lightness values so the live
knobs scale the whole UI through CSS, and the opaque directional borders read on
every panel including true black. A live preview reflects changes in real time.
Adds a documentation page under Features.

* fix(appearance): keep contrast-driven tokens in gamut and add picker keyboard nav

Clamp the contrast and knob driven surface, border, and ink lightness so the
full slider range stays a valid color. The page now always sits below the card
tone, so page/card separation no longer collapses at high contrast in Light; the
lit border edge never reaches white in Light at the low end of the knobs; and the
OLED and Dim extremes resolve to valid black/white instead of out-of-range values.

Add the radiogroup keyboard model (roving tabindex plus Arrow / Home / End) to the
accent and type pickers through a shared hook, matching the segmented control. One
item is tabbable and arrow keys move focus and selection together.

docs/docs.json

@@ -94,6 +94,7 @@
             "group": "Features",
             "pages": [
               "features/overview",
+              "features/appearance",
               {
                 "group": "Stacks",
                 "expanded": true,

docs/features/appearance.mdx

@@ -0,0 +1,53 @@
+---
+title: Appearance
+description: Personalize Sencho's look. Choose a theme and accent, fine-tune contrast, borders, and glow, swap the interface and data fonts, and set the text size. Every choice is saved to the current browser.
+---
+
+**Settings → Appearance** is where you make Sencho look the way you want. Pick a theme and accent color, fine-tune contrast and the ambient glow, choose the interface and data fonts, and scale the text. A live preview at the top of the section reflects every change as you make it.
+
+Most of these controls are also one click away from anywhere in the app: the **palette button** in the top bar, between the search and notification icons, opens a quick switcher for the theme mode, accent, and fonts.
+
+<Note>
+  Appearance choices are saved to **this browser only**. They follow you across tabs on the same browser, and every device remembers its own look. Nothing here changes what other operators see.
+</Note>
+
+## Theme
+
+The **Mode** control sets the overall surface palette:
+
+- **Dim** (default) is a raised charcoal. Cards and panels sit clearly above the page without going fully black.
+- **OLED** is true black, ideal for power-saving panels. Borders stay visible so cards never merge into the background.
+- **Light** is the bright theme, with the same directional, opaque borders inverted for a white surface.
+- **Auto** follows your operating system, switching between Dim and Light as your OS does, and re-resolving live when the OS flips.
+
+## Accent
+
+The **accent** is Sencho's one data color. It drives charts, sparklines, progress bars, focus rings, active states, the masthead and sidebar rails, and the ambient page glow, so changing it recolors the whole product cohesively.
+
+Eight well-spaced hues are available: **Cyan** (the default and the signature), **Blue**, **Violet**, **Magenta**, **Orange**, **Amber**, **Lime**, and **Steel** (a deliberate near-neutral). Status colors (green for healthy, amber for warning, rose for error) stay constant regardless of accent so state always reads the same.
+
+## Fine-tune
+
+Three sliders shape the surfaces and atmosphere. A **Reset fine-tune** button returns all three to their defaults.
+
+- **Contrast** is a master control that spreads the page tone, every border, and the text tiers together in one move. Higher contrast darkens the page, brightens borders, and crisps up secondary text. Pairing high contrast with the OLED theme gives the sharpest reading on a true-black panel.
+- **Border brightness** lifts or softens every hairline on its own, so the separation between cards reads exactly how you like it.
+- **Ambient glow** sets the intensity of the soft, accent-tinted glow behind the page. Slide it to zero for a completely flat background.
+
+## Typography
+
+Sencho uses three type contexts. The display face for hero headings stays fixed as the signature; the other two are yours to change.
+
+- **Interface font** sets the sans face used for body text, labels, navigation, and buttons. Choose **Geist** (default), **IBM Plex Sans**, or **Hanken Grotesk**.
+- **Data font** sets the monospace face used for the terminal, stat values, codes, and timestamps. Choose **Geist Mono** (default), **IBM Plex Mono**, or **Fira Code**.
+- **Text size** scales the entire interface from a single root multiplier. In Settings this is a continuous slider (default `1.00×`); the top-bar quick switcher offers **S / M / L / XL** presets. Both stay in sync.
+
+Hero headings and featured names always render in Instrument Serif so the editorial voice stays consistent no matter which interface font you pick.
+
+## Display
+
+The **Display** group holds the remaining per-browser preferences:
+
+- **Density** switches between **Comfortable** (roomy rows, the default) and **Compact** (tighter rows and tiles that fit more on screen for dense dashboards).
+- **Deploy progress modal** toggles the live streaming output window for deploy, restart, update, install, and Git operations.
+- **Diff preview before save** toggles a side-by-side diff of compose and env edits before they are written to disk.