@lovett/ui 0.0.9 → 0.0.11

package/dist/styles.css

@@ -31,10 +31,24 @@
  *
  * Out of scope for Phase 1: .empty, .skel, .field*, .pg-header, .search-bar,
  * .breadcrumbs, .topbar, .checkbox, .radio, .switch, .reasoning-pulse,
- * .chat-md-list, .selection-reply-btn, ::selection. Those land when their
- * consumers (Field, EmptyState, PageHeader, etc.) arrive in later phases.
+ * .chat-md-list, .selection-reply-btn. Those land when their consumers
+ * (Field, EmptyState, PageHeader, etc.) arrive in later phases.
+ * `::selection` landed 2026-09-04 (ADR-145 amendment) — see TEXT SELECTION.
  */
 
+/* ---- TEXT SELECTION ---- */
+/**
+ * Explicit, token-backed highlight. Without this, the only `::selection`
+ * rule in the bundle came from `@lovett/shell` (`background:
+ * var(--selection-bg)`), whose variable is scoped to `.cs-frame` — so at
+ * the root it resolved to nothing and highlighted text was invisible.
+ * `--selection-bg` is now a public token in tokens.css (light + dark).
+ */
+::selection {
+  background: var(--selection-bg);
+  color: inherit;
+}
+
 /* ---- PANE MASK ---- */
 /**
  * Opaque fill matching the MainLayout content pane, for a sticky element that
@@ -131,6 +145,34 @@
   box-shadow: var(--ring-focus);
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+ * BASELINE FOCUS INDICATOR
+ *
+ * Until this existed, only elements that opted in — primitives via .btn /
+ * .input-shell, and hand-written `focus-visible:` classes — showed OUR focus
+ * ring. Everything else fell through to the browser's `outline: auto`, which
+ * on macOS paints in the USER'S SYSTEM ACCENT COLOUR. So a keyboard user with
+ * an amber system accent saw an amber ring on most controls and our red ring
+ * on a few, in the same tab sequence. Measured in the Generate lens: 115
+ * buttons, 35 with a ring.
+ *
+ * `:where()` gives this ZERO specificity, so it is a floor, not an override —
+ * .btn, .input-shell, and any component or utility class still win.
+ * ───────────────────────────────────────────────────────────────────────── */
+@layer base {
+  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex^='-'])):focus-visible {
+    /* OUTLINE, not box-shadow, deliberately. Tailwind's shadow/ring utilities
+       compose onto `box-shadow`, so a zero-specificity box-shadow baseline loses
+       to any element carrying one (e.g. a `ring-1` selected state) and silently
+       renders nothing. `outline` is untouched by that chain, follows
+       border-radius in every modern browser, and matches --ring-focus's geometry.
+       Elements with their own ring set `outline: none` alongside it, so they
+       override this cleanly rather than double-drawing. */
+    outline: 2px solid rgb(var(--accent));
+    outline-offset: 0;
+  }
+}
+
 .btn-primary {
   background: rgb(var(--accent));
   color: white;

package/dist/theme-v2.css

@@ -0,0 +1,228 @@
+/*
+ * @lovett/ui — v2 theme, SCOPED.
+ *
+ * GENERATED. Regenerate with:
+ *   python3 scripts/figma/emit-theme.py <corpus> --out packages/ui/src/theme-v2.css
+ *
+ * Opt in by putting `data-ds="v2"` on any element. Everything inside it
+ * renders on the v2 palette, including existing @lovett/ui primitives —
+ * they read the same token names, which now resolve to different values.
+ * Nothing outside the scope changes.
+ *
+ * Derived from a 13-kit Figma corpus; see docs/design-system/figma-corpus/.
+ * The direction is Vertex Lab: pure-white trays, near-neutral greys, a
+ * navy-tinted ink used as a SURFACE and not only as text.
+ *
+ * The semantic reassignment is the load-bearing change:
+ *   --accent       red    brand identity and the primary action, nothing else
+ *   --success      green  save, publish, approve, live
+ *   --destructive  AMBER  destructive. No longer red.
+ *   --warning      gold   caution
+ *   --info         violet
+ *
+ * Consequence worth knowing before adopting: amber is a weaker danger
+ * signal than red, so destructive actions must carry an icon and an
+ * explicit verb. Colour alone no longer does that work.
+ */
+
+[data-ds="v2"] {
+  /* ── Surfaces ─────────────────────────────────────────────── */
+  /* The frame/tray step is 2.1 pts — ratified as `medium`. Both being
+     white removes the distinction the card pattern is built on. */
+  --page-bg: 240 241 242;
+  --background: 240 241 242;
+  --main-content-bg: 240 241 242;
+  --bg-surface: 248 248 249;
+  --surface-frame: 248 248 249;
+  --card-frame-bg: 248 248 249;
+  --bg-card: 255 255 255;
+  --card: 255 255 255;
+  --tray-bg: 255 255 255;
+  --bg-elevated: 255 255 255;
+  --surface-raised: 255 255 255;
+  --popover: 255 255 255;
+  --bg-input: 255 255 255;
+  --bg-card-hover: 250 251 252;
+  --bg-input-hover: 250 251 252;
+  --muted: 246 247 248;
+  --canvas-placement-bg: 246 247 248;
+
+  /* ── Ink ──────────────────────────────────────────────────── */
+  /* Navy-tinted, not black. Vertex uses #1c274c 6,522 times — far too
+     many for text: it is a panel colour, so it gets a full ramp. */
+  --ink-15: 253 253 253;
+  --ink-25: 250 251 254;
+  --ink-30: 247 248 252;
+  --ink-40: 241 245 253;
+  --ink-60: 235 241 254;
+  --ink-50: 243 247 255;
+  --ink-100: 229 237 254;
+  --ink-200: 207 217 238;
+  --ink-300: 182 193 217;
+  --ink-400: 150 163 191;
+  --ink-500: 119 134 165;
+  --ink-600: 93 108 140;
+  --ink-700: 70 82 109;
+  --ink-800: 48 58 80;
+  --ink-900: 27 35 51;
+  --ink-950: 11 16 28;
+  --foreground: 11 16 28;
+  --card-foreground: 11 16 28;
+  --popover-foreground: 11 16 28;
+  --text-secondary: 93 108 140;
+  --muted-foreground: 93 108 140;
+  --text-tertiary: 119 134 165;
+  --text-muted: 150 163 191;
+  --secondary: 246 247 248;
+  --secondary-foreground: 11 16 28;
+
+  /* ── Borders ──────────────────────────────────────────────── */
+  /* Structure only. Depth is shadow — a hard hairline on a depth
+     surface reads as a form field. Inputs keep theirs deliberately. */
+  --border: 0 0 0 / 0.05;
+  --border-strong: 0 0 0 / 0.10;
+  --border-card: 0 0 0 / 0.06;
+  --border-input: 0 0 0 / 0.12;
+  --main-content-border: 0 0 0 / 0.06;
+  --input: 246 247 248;
+
+  /* ── Brand ────────────────────────────────────────────────── */
+  /* --accent is the AA-safe action red (4.77:1 with white). The bright
+     step is 4.01:1 and cannot carry a white label, so it is exposed
+     separately for accents, marks, charts and active fills. */
+  --accent: 221 40 34;
+  --accent-bright: 228 70 58;
+  --accent-hover: 201 17 17;
+  --accent-muted: 228 70 58 / 0.10;
+  --accent-subtle: 228 70 58 / 0.05;
+  --accent-glow: 228 70 58 / 0.22;
+  --primary: 221 40 34;
+  --primary-hover: 201 17 17;
+  --primary-foreground: 255 255 255;
+  --ring: 221 40 34;
+  --brand-15: 253 253 253;
+  --brand-25: 252 251 250;
+  --brand-30: 252 247 246;
+  --brand-40: 255 242 240;
+  --brand-60: 254 237 234;
+  --brand-50: 255 244 242;
+  --brand-100: 253 231 228;
+  --brand-200: 253 204 196;
+  --brand-300: 254 166 154;
+  --brand-400: 251 114 99;
+  --brand-500: 228 70 58;
+  --brand-600: 201 17 17;
+  --brand-700: 157 8 9;
+  --brand-800: 114 4 4;
+  --brand-900: 72 2 2;
+  --brand-950: 41 0 0;
+
+  /* ── Semantic — REASSIGNED ────────────────────────────────── */
+  --success: 13 128 75;
+  --success-bg: 6 160 93 / 0.12;
+  --warning: 100 80 1;
+  --warning-bg: 161 131 18 / 0.14;
+  /* Amber. The collision between a red brand and a red danger state
+     cannot be solved by moving the hue — every credible danger red
+     sits within a few degrees of the brand. Moving the MEANING can. */
+  --destructive: 115 71 9;
+  --destructive-bg: 187 116 2 / 0.14;
+  --destructive-foreground: 255 255 255;
+  --info: 130 62 210;
+  --info-bg: 155 97 235 / 0.12;
+
+  /* ── Categorical series ───────────────────────────────────── */
+  /* Constant lightness so no series outranks another; chroma tuned per
+     hue so each is equally vivid rather than equally saturated. */
+  --series-1: 226 74 62;
+  --series-2: 153 100 229;
+  --series-3: 9 160 93;
+  --series-4: 186 116 4;
+  --series-5: 2 137 234;
+  --series-6: 14 154 148;
+  --series-7: 212 73 150;
+  --series-8: 113 149 3;
+
+  /* ── Elevation ────────────────────────────────────────────── */
+  --shadow-sm: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
+  --shadow-md: 0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 4px -2px oklch(0 0 0 / 0.08), 0 4px 10px -2px oklch(0 0 0 / 0.06);
+  --shadow-lg: 0 0 0 1px oklch(0 0 0 / 0.06), 0 6px 16px -4px oklch(0 0 0 / 0.12);
+  --shadow-xl: 0 0 0 1px oklch(0 0 0 / 0.06), 0 12px 32px -8px oklch(0 0 0 / 0.18);
+  --shadow-2xl: 0 0 0 1px oklch(0 0 0 / 0.06), 0 24px 56px -12px oklch(0 0 0 / 0.24);
+  --shadow-glow: 0 0 20px oklch(0 0 0 / 0);
+  --card-shadow-rest: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
+  --card-shadow-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 6px 14px -2px oklch(0 0 0 / 0.08), inset 0 1px 0 0 oklch(1 0 0 / 0.9);
+  --inset-highlight: 255 255 255 / 0.9;
+  --modal-overlay: 0 0 0 / 0.32;
+  /* Solid, matching the base theme — a 3px translucent halo measures ~1.4:1
+     against its surface, under the 3:1 WCAG 2.2 SC 2.4.11 asks of a focus
+     indicator. See the note on --ring-focus in tokens.css. */
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+  --ring-error: 0 0 0 2px rgb(var(--destructive));
+}
+
+/*
+ * Dark. Derived by SELECTING different steps from the same OKLCH ramps,
+ * not by inverting the light values — mechanical inversion is what
+ * produces muddy dark modes. The ink ramp supplies the surfaces here,
+ * which is the same navy that supplies the text in light.
+ */
+[data-ds="v2"][data-theme="dark"] {
+  --page-bg: 11 16 28;
+  --background: 11 16 28;
+  --main-content-bg: 11 16 28;
+  --bg-surface: 27 35 51;
+  --surface-frame: 27 35 51;
+  --card-frame-bg: 27 35 51;
+  --bg-card: 48 58 80;
+  --card: 48 58 80;
+  --tray-bg: 48 58 80;
+  --bg-elevated: 70 82 109;
+  --surface-raised: 70 82 109;
+  --popover: 70 82 109;
+  --bg-input: 27 35 51;
+  --bg-card-hover: 70 82 109;
+  --bg-input-hover: 48 58 80;
+  --muted: 48 58 80;
+  --canvas-placement-bg: 27 35 51;
+  --foreground: 250 251 252;
+  --card-foreground: 250 251 252;
+  --popover-foreground: 250 251 252;
+  --text-secondary: 192 193 195;
+  --muted-foreground: 192 193 195;
+  --text-tertiary: 162 163 165;
+  --text-muted: 133 134 136;
+  --secondary: 48 58 80;
+  --secondary-foreground: 250 251 252;
+  --border: 255 255 255 / 0.08;
+  --border-strong: 255 255 255 / 0.14;
+  --border-card: 255 255 255 / 0.08;
+  --border-input: 255 255 255 / 0.14;
+  --main-content-border: 255 255 255 / 0.08;
+  /* Accents brighten in dark — the light-mode steps go muddy on a dark
+     surface because the surrounding lightness has moved. */
+  --accent: 228 70 58;
+  --accent-bright: 251 114 99;
+  --accent-hover: 251 114 99;
+  --primary: 228 70 58;
+  --primary-hover: 251 114 99;
+  --success: 80 188 126;
+  --warning: 190 160 64;
+  --destructive: 218 145 55;
+  --info: 181 134 254;
+  --success-bg: 6 160 93 / 0.16;
+  --warning-bg: 161 131 18 / 0.16;
+  --destructive-bg: 187 116 2 / 0.16;
+  --info-bg: 155 97 235 / 0.16;
+  /* Layered depth shadows are invisible on dark; a single ring reads. */
+  --shadow-sm: 0 0 0 1px oklch(1 0 0 / 0.08);
+  --shadow-md: 0 0 0 1px oklch(1 0 0 / 0.08), 0 4px 12px oklch(0 0 0 / 0.4);
+  --shadow-lg: 0 0 0 1px oklch(1 0 0 / 0.08), 0 8px 24px oklch(0 0 0 / 0.5);
+  --shadow-xl: 0 0 0 1px oklch(1 0 0 / 0.10), 0 16px 40px oklch(0 0 0 / 0.55);
+  --shadow-2xl: 0 0 0 1px oklch(1 0 0 / 0.10), 0 24px 60px oklch(0 0 0 / 0.6);
+  --card-shadow-rest: 0 0 0 1px oklch(1 0 0 / 0.08);
+  --card-shadow-hover: 0 0 0 1px oklch(1 0 0 / 0.14);
+  --inset-highlight: 255 255 255 / 0.05;
+  --modal-overlay: 0 0 0 / 0.7;
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+}

package/dist/tokens.css

@@ -49,6 +49,9 @@
  *                                      colored backgrounds — switches,
  *                                      sliders, badges-on-accent)
  *         --muted                     (muted fill for ghost UI)
+ *         --surface-subtle            (lightest structural tint — header bands
+ *                                      and zebra on an already-bordered
+ *                                      surface; 1.04:1, matched across themes)
  *         --header-height             (sticky AppHeader height — referenced
  *                                      by sticky chip bars; same value lives
  *                                      in src/lib/layout.ts for JS callsites)
@@ -92,6 +95,49 @@
   --accent-muted: 207 14 15 / 0.12;
   --accent-subtle: 207 14 15 / 0.06;
   --accent-glow: 207 14 15 / 0.25;
+  /* Text-selection highlight. PUBLIC, and a full colour (not a triple) so
+     `::selection { background: var(--selection-bg) }` is valid at :root.
+     `@lovett/shell` ships that exact global rule while defining the
+     variable only inside `.cs-frame`; unset at the root, `background`
+     computed to transparent and every selection in the app was invisible
+     (ADR-145 amendment, 2026-09-04). Neutral blue like a native selection,
+     not the accent — the accent earns impact from scarcity. */
+  --selection-bg: rgb(var(--info) / 0.34);
+  /* Ink ON an accent fill. PUBLIC, and theme-independent because --accent is:
+     the brand red does not change between light and dark, so its foreground
+     must not either. Measures 5.64:1 on --accent.
+     Added 2026-08-29 — needs a token ADR (CLAUDE.md §4). It closes a real gap:
+     app code had three different answers for "text on accent" (a `text-white`
+     literal, the INTERNAL --primary-foreground, and a reference to this very
+     name with an inline fallback), and one of them — `rgb(var(--foreground))`
+     — inverted to near-black on red at 3.34:1 in light mode. The public
+     --accent family had every value EXCEPT its foreground, so lens code had
+     nothing correct to reach for. */
+  --accent-foreground: 255 255 255;
+  /* Accent as TEXT on a normal surface — a different problem from
+     --accent-foreground (ink ON an accent fill). PUBLIC, and unlike --accent it
+     IS theme-tuned: the brand red measures 5.64:1 on a light card but only
+     3.05:1 on a dark one, so an accent-coloured LABEL is legible in light and
+     fails AA in dark. The dark value is the lifted red that clears it (4.57:1).
+     Use for selected-state labels, accent links, accent metric values — never
+     as a fill. */
+  --accent-ink: 239 68 68;
+
+  /* SEMANTIC INK — PUBLIC. Same problem as --accent-ink, same shape of answer.
+     `--success` / `--warning` are sized to work as FILLS and as icon strokes;
+     used as TEXT ON THEIR OWN 10-12% TINT they are only legible in one theme.
+     Measured over the card: success reads 5.64:1 dark but 3.33:1 light, and
+     warning 6.46:1 dark but 2.86:1 light — both fail AA for body text in light
+     mode, which is exactly where the generate lens's tip panels and word-count
+     chips live. Dark keeps the base colour; light gets a darkened ink that
+     clears 4.5:1 while still reading green and amber rather than near-black.
+     Text only — never a fill, and never a border. */
+  --success-ink: var(--success);
+  --warning-ink: var(--warning);
+  /* Destructive is the one that fails in BOTH themes as text on its own tint
+     (3.53:1 light, 3.67:1 dark), so unlike the other two the dark value is not
+     the base — it is lifted 18% toward white to clear 5.11:1 / 4.51:1. */
+  --destructive-ink: 242 102 102;
 
   /* ============================================================
      HIERARCHY MAP PALETTE — PUBLIC, theme-INDEPENDENT.
@@ -167,6 +213,17 @@
   --folder-slate: 148 163 184;
   --folder-ink: 203 213 225;
 
+  /* OPAQUE categorical tints — the chip/pill FILL for a --folder-* hue.
+     Pre-composited (hue at 0.12 over --surface-card) so a chip needs no
+     alpha and therefore does not change appearance when the surface
+     under it changes. Only the two hues with consumers are defined;
+     extend per hue as consumers land rather than all nine up front.
+     NOTE: the hue itself is a FILL/GRAPHIC value, not an ink — e.g.
+     --folder-amber on its own tint measures 2.86:1 in light. Chip TEXT
+     is --foreground; the tint + border carry the category. */
+  --folder-amber-tint: 53 43 28;
+  --folder-blue-tint: 31 39 56;
+
   /* ============================================================
      SIDEBAR — INTERNAL (only <Sidebar/> reads these)
      ============================================================ */
@@ -298,8 +355,18 @@
   --shadow-xl: 0 16px 40px rgb(0 0 0 / 0.55);
   --shadow-2xl: 0 24px 60px rgb(0 0 0 / 0.60);
 
-  --ring-focus: 0 0 0 3px rgb(207 14 15 / 0.25);
-  --ring-error: 0 0 0 3px rgb(239 68 68 / 0.25);
+  /* Thin and SOLID, not a soft halo — and this is a legibility fix as much as
+     a look. The old 3px @ 0.25/0.20 composited to rgb(245 207 207) on a light
+     card and rgb(63 24 27) on a dark one: 1.43:1 and 1.11:1 against the surface
+     it sits on, against the 3:1 that WCAG 2.2 SC 2.4.11 (Focus Appearance)
+     asks of a focus indicator. Alpha was measured across the range and NOTHING
+     below fully-opaque clears 3:1 in dark mode, so the ring is solid: 5.64:1
+     light, 3.05:1 dark. 2px keeps the >=2px perimeter the same SC requires
+     while reading crisper than the 3px glow it replaces.
+     Both resolve through the theme-aware tokens, so the light block needs no
+     override — var() resolves at use time. */
+  --ring-focus: 0 0 0 2px rgb(var(--accent));
+  --ring-error: 0 0 0 2px rgb(var(--destructive));
 
   --radius-xs: 6px;
 
@@ -339,6 +406,18 @@
   --surface-card: 27 27 30;
   --surface-inset: 45 45 48;
   --surface-hover: 55 55 59;
+  /* THE LIGHTEST STRUCTURAL TINT — PUBLIC. A header band or zebra stripe on a
+     surface that ALREADY HAS A BORDER, where the fill only has to hint that a
+     row is chrome rather than content.
+     Measured: the border alone is 1.25:1 in dark and 1.32:1 in light, stronger
+     than any fill step in the neutral ramp — so the fill is decoration on top
+     of structure that already reads, and it can go very light indeed.
+     Sized by OKLCH lightness so the two themes are the SAME design: ΔL 0.017
+     dark, 0.014 light (1.045:1 / 1.042:1). That symmetry is the point. Using
+     --muted for this job gave ΔL 0.075 in dark against 0.038 in light — twice
+     the step in one theme, which is why a header that looked right in dark read
+     as a grey slab in light. */
+  --surface-subtle: 31 31 34;
   /* A control you can act on — input, select, option tile, chip-button.
      Sits at CARD level on purpose: in light that is white against the
      frame behind it, which reads "type here"; in dark it is raised above
@@ -389,6 +468,21 @@
 [data-theme="light"], [data-theme="combo"] {
   /* Brand accent — base stays, hover darkens, glow softens */
   --accent-hover: 178 8 9;
+  --selection-bg: rgb(var(--info) / 0.24);
+  /* Brand red passes on a light card (5.64:1) — see the :root note. */
+  --accent-ink: var(--accent);
+  /* Solved against the DARKEST tint these inks land on, not the lightest.
+     The lens mixes success at both 10% (tip panels) and 20% (score chips); an
+     ink tuned only to the 10% tint cleared 4.61:1 there and still failed at
+     4.09:1 on the 20% chip. This value clears BOTH — 5.12:1 and 4.54:1 — and
+     at 77% of --success it is still unmistakably green. */
+  --success-ink: 4 116 81;
+  /* Same reasoning as --success-ink: solved against the 20% tint as well as
+     the 10% one (5.03:1 / 4.52:1, up from 2.86:1 / 4.05:1). 72% of --warning,
+     still unmistakably amber. */
+  --warning-ink: 156 86 4;
+  /* 5.28:1 / 4.51:1 on the 10% and 20% tints, up from 3.53:1. */
+  --destructive-ink: 189 33 33;
   --accent-muted: 207 14 15 / 0.10;
   --accent-subtle: 207 14 15 / 0.05;
   --accent-glow: 207 14 15 / 0.20;
@@ -406,9 +500,28 @@
   --card-foreground: 17 17 19;
   --popover-foreground: 17 17 19;
   --muted-foreground: 82 82 91;
-  --text-secondary: 82 82 91;
-  /* --text-tertiary stays from :root */
-  /* Lifted 161->137 — was 2.56:1 on a white card. */
+  /* Byte-identical to --muted-foreground in both themes since they were
+     introduced. Aliased rather than duplicated so the two names cannot
+     drift apart; prefer --muted-foreground in new code. */
+  --text-secondary: var(--muted-foreground);
+  /* Was "stays from :root" — but :root IS the dark theme, so light
+     inherited the dark-tuned 132 132 141, which measures 3.71:1 on a
+     255 card and fails AA for the 13px body text that consumes it.
+     Re-picked by measurement, not by eye: 110 110 119 is the first rung
+     with headroom on every light surface it can land on —
+     5.05:1 on --surface-card/page (255), 4.72:1 on --surface-frame (247),
+     4.52:1 on --surface-inset (242). Keeps the ramp's 286° cool cast.
+     Side effect: it also repairs the ink ramp's shape. The tiers were
+     L 0.442 / 0.616 / 0.633 — a wide gap then a collision, tertiary and
+     muted less than half a surface-step apart. They are now
+     0.442 / 0.541 / 0.633: three evenly-spread rungs. */
+  --text-tertiary: 110 110 119;
+  /* Lifted 161->137 — was 2.56:1 on a white card. Still only 3.47:1 on
+     255, i.e. it clears the 3:1 non-text floor and NOT the 4.5:1 text
+     floor. That is deliberate: --text-muted is the quietest rung and is
+     for NON-TEXT and DISABLED chrome only — quiet icons, chevrons,
+     disabled labels. Real text one tier up (--text-tertiary) or higher.
+     Lifting this to pass 4.5:1 would collapse it into --text-tertiary. */
   --text-muted: 137 137 146;
   --secondary-foreground: 17 17 19;
 
@@ -446,9 +559,6 @@
   --shadow-2xl: 0 24px 60px rgb(0 0 0 / 0.16);
   --shadow-glow: 0 0 20px rgb(207 14 15 / 0.20);
 
-  --ring-focus: 0 0 0 3px rgb(207 14 15 / 0.20);
-  --ring-error: 0 0 0 3px rgb(220 38 38 / 0.18);
-
   /* Match --page-bg (254/254/254). Was 241/245/249 (slate) — that's
    * what was actually painting "the steely background" the owner
    * flagged; --page-bg is the body, but MainLayout's content area
@@ -508,6 +618,8 @@
   --surface-frame: 247 247 249;
   --surface-inset: 242 242 244;
   --surface-hover: 238 238 240;
+  /* 1.042:1 against the card — a band, not a slab. See the :root note. */
+  --surface-subtle: 250 250 252;
   /* A control you can act on — input, select, option tile, chip-button.
      Sits at CARD level on purpose: in light that is white against the
      frame behind it, which reads "type here"; in dark it is raised above
@@ -606,6 +718,9 @@
   --folder-pink: 219 39 119;
   --folder-slate: 71 85 105;
   --folder-ink: 15 23 42;
+  /* Opaque categorical tints — hue at 0.10 over the 255 light card. */
+  --folder-amber-tint: 251 241 230;
+  --folder-blue-tint: 232 237 251;
 }
 
 /* ============================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "private": false,
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",