@lovett/ui 0.0.4 → 0.0.6

package/dist/tokens.css

@@ -0,0 +1,700 @@
+/*
+ * @lovett/ui — design tokens
+ *
+ * Ported from brand-ai-extension/webapp/src/index.css
+ *   tag : v-pre-workspace-intake-phase1
+ *   sha : 172dd010fee808bcd03795119ba888206da5bafd
+ *
+ * Note: in the source repo, tokens live in `webapp/src/index.css`. PRD §7.2
+ * still references `webapp/src/styles/tokens.css` — that path does not exist
+ * in source. Flagged in Phase 1 completion report as a PRD-correction.
+ *
+ * This file contains ONLY token declarations (`:root` + `[data-theme="light"]`).
+ * Component CSS utilities the primitives consume (`.ds-card-surface`,
+ * `.btn`, `.input-shell`, etc.) live in `./styles.css`.
+ *
+ * Token discipline (CLAUDE.md §4 is the human-readable source of truth;
+ * `packages/eslint-config/index.js` mirrors the internal list for ESLint
+ * enforcement; ADR-008 Decision 7 makes these three a hard-gate parity check).
+ *
+ *   PUBLIC tokens (apps may use freely):
+ *     • Brand:     --accent, --accent-hover, --accent-muted,
+ *                  --accent-subtle, --accent-glow
+ *     • Hierarchy: --hierarchy-red, --hierarchy-red-dark,
+ *                  --hierarchy-red-darkest, --hierarchy-red-shadow,
+ *                  --hierarchy-outline, --hierarchy-slate,
+ *                  --hierarchy-on-base
+ *                  (theme-INDEPENDENT; fixed in both themes because
+ *                   the hierarchy SVG overlay sits on an always-light
+ *                   OSM basemap regardless of UI theme)
+ *     • Text:      --foreground, --text-secondary, --text-tertiary,
+ *                  --text-muted, --muted-foreground
+ *     • Semantic:  --success(-bg), --warning(-bg), --info(-bg),
+ *                  --destructive(-bg, -foreground)
+ *     • Folder:    --folder-red/amber/emerald/teal/blue/violet/pink/
+ *                  slate/ink (categorical palette for folder accents)
+ *     • Spacing:   --space-1…12 (4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48)
+ *     • Radius:    --radius-xs/sm/md/lg/xl/2xl/full, --radius (legacy)
+ *     • Motion:    --ease-out, --ease-spring, --ease-in-out,
+ *                  --dur-fast, --dur-base, --dur-slow,
+ *                  --transition, --transition-slow (legacy)
+ *     • Controls:  --ctrl-sm/md/lg (32 / 40 / 48 — Button/Input heights)
+ *     • Focus:     --ring-focus, --ring-error
+ *     • Shadow:    --shadow-sm/md/lg/xl/2xl, --shadow-glow
+ *     • Visual utilities (generic, not surface-specific):
+ *         --border, --border-strong   (divider / separator lines)
+ *         --surface-overlay, --surface-overlay-soft/strong/stronger
+ *                                     (hover backgrounds, badge fills)
+ *         --surface-on-accent         (thumb / knob surface on accent-
+ *                                      colored backgrounds — switches,
+ *                                      sliders, badges-on-accent)
+ *         --muted                     (muted fill for ghost UI)
+ *         --header-height             (sticky AppHeader height — referenced
+ *                                      by sticky chip bars; same value lives
+ *                                      in src/lib/layout.ts for JS callsites)
+ *         --section-scroll-offset     (in-page anchor scroll-margin)
+ *         --prose-narrow, --prose-wide (reading-width caps)
+ *         --inset-highlight           (top-edge highlight strip; tokenized to
+ *                                      avoid copy-pasting the rgba into many
+ *                                      boxShadow strings)
+ *         --font-sans                 (default font stack)
+ *
+ *   INTERNAL tokens (primitives only — ESLint-enforced):
+ *     • Background / surface tokens consumed by specific primitives:
+ *         --background, --bg-card, --bg-card-hover, --bg-surface,
+ *         --bg-elevated, --bg-input, --bg-input-hover, --page-bg,
+ *         --main-content-bg, --main-content-border, --card, --card-foreground,
+ *         --popover, --popover-foreground, --canvas-placement-bg
+ *     • <Card> internals: --border-card, --card-foot-bg,
+ *                         --card-shadow-rest, --card-shadow-hover,
+ *                         --card-frame-bg, --tray-bg, --tray-inset, --radius-tray
+ *     • <Input> internals: --border-input, --input
+ *     • <Modal> internals: --modal-overlay
+ *     • Sidebar internals (only <Sidebar/> reads these): --sidebar-bg,
+ *         --sidebar-surface, --sidebar-surface-hover, --sidebar-surface-active,
+ *         --sidebar-text, --sidebar-text-bright, --sidebar-text-dim,
+ *         --sidebar-border, --sidebar-section-label, --sidebar-rail,
+ *         --sidebar-width, --sidebar-collapsed-width
+ *     • Toast internals (only <Toaster/> reads these): --toast-bg,
+ *         --toast-text, --toast-border
+ *     • shadcn legacy aliases primitives may still rely on:
+ *         --secondary, --secondary-foreground
+ *     • Legacy brand aliases kept working for existing pages:
+ *         --primary, --primary-hover, --primary-foreground, --ring
+ */
+
+:root {
+  /* ============================================================
+     BRAND ACCENT (red)  — PUBLIC
+     ============================================================ */
+  --accent: 207 14 15;
+  --accent-hover: 227 26 27;
+  --accent-muted: 207 14 15 / 0.12;
+  --accent-subtle: 207 14 15 / 0.06;
+  --accent-glow: 207 14 15 / 0.25;
+
+  /* ============================================================
+     HIERARCHY MAP PALETTE — PUBLIC, theme-INDEPENDENT.
+     The hierarchy SVG overlay sits on top of an always-light OSM
+     basemap regardless of UI theme. These tokens are fixed in both
+     light and dark mode so the overlay reads consistently. Sourced
+     from zip-search src/index.css:95-211 (hierarchy block).
+     ============================================================ */
+
+  /* Brand-red ladder — used by state pills, stacked NE callouts,
+     drilled-state outlines, connector lines, hover/selected states. */
+  --hierarchy-red: 231 12 7;          /* primary fill */
+  --hierarchy-red-dark: 184 9 5;      /* hover fill, selected stroke */
+  --hierarchy-red-darkest: 139 7 4;   /* selected fill */
+  --hierarchy-red-shadow: 75 3 2;     /* near-black; selected stacked-pill stroke */
+
+  /* Slate ladder — default outlines + context-state polygon + label fills. */
+  --hierarchy-outline: 71 85 105;     /* slate-600; default outline stroke */
+  --hierarchy-slate: 100 116 139;     /* slate-500; context-state polygon + label fill */
+
+  /* White triplet — for the translucent default state-polygon fill. */
+  --hierarchy-on-base: 255 255 255;
+
+  /* Legacy brand aliases — kept working for existing primitive code paths.
+     INTERNAL: lenses/routes/components should use --accent / --foreground. */
+  --primary: var(--accent);
+  --primary-hover: var(--accent-hover);
+  --primary-foreground: 255 255 255;
+  --ring: var(--accent);
+
+  /* ============================================================
+     DARK THEME SURFACES  — INTERNAL (primitives only)
+     ============================================================ */
+  --foreground: 244 244 245;
+  /* PUBLIC (ADR-063 D1): opaque elevated surface for bespoke lens/app
+     floating chrome (pills, capsules, one-off raised panels) that can't be a
+     primitive. Same values as the INTERNAL --bg-elevated by design. */
+  --card-foreground: 244 244 245;
+  --popover-foreground: 244 244 245;
+  --muted-foreground: 161 161 170;
+  --text-secondary: 161 161 170;
+  /* Lifted 113->132 / 82->106: at the old values --text-tertiary measured
+     3.56:1 and --text-muted 2.22:1 on --bg-card, i.e. both under the 3:1
+     floor on the surface they are most often used on. */
+  --text-tertiary: 132 132 141;
+  --text-muted: 106 106 115;
+  --secondary-foreground: 244 244 245;
+
+  --border: 255 255 255 / 0.08;
+  --border-strong: 255 255 255 / 0.14;
+  /* Semantic — PUBLIC */
+  --success: 16 185 129;
+  --success-bg: 16 185 129 / 0.12;
+  --warning: 245 158 11;
+  --warning-bg: 245 158 11 / 0.12;
+  --info: 59 130 246;
+  --info-bg: 59 130 246 / 0.12;
+  --destructive: 239 68 68;
+  --destructive-bg: 239 68 68 / 0.12;
+  --destructive-foreground: 255 255 255;
+
+  /* Folder palette — PUBLIC. Categorical accents for Asset folders
+     (ADR-035). Tuned brighter here so they read on near-black cards;
+     the light theme block below carries darker, more saturated values.
+     Folders store a colour KEY ('red' | 'amber' | …), never a hex. */
+  --folder-red: 239 68 68;
+  --folder-amber: 245 158 11;
+  --folder-emerald: 16 185 129;
+  --folder-teal: 20 184 166;
+  --folder-blue: 59 130 246;
+  --folder-violet: 139 92 246;
+  --folder-pink: 236 72 153;
+  --folder-slate: 148 163 184;
+  --folder-ink: 203 213 225;
+
+  /* ============================================================
+     SIDEBAR — INTERNAL (only <Sidebar/> reads these)
+     ============================================================ */
+  --sidebar-bg: 10 10 11;
+  --sidebar-surface: 255 255 255 / 0.04;
+  --sidebar-surface-hover: 255 255 255 / 0.08;
+  --sidebar-surface-active: 207 14 15 / 0.15;
+  --sidebar-text: 161 161 170;
+  --sidebar-text-bright: 244 244 245;
+  --sidebar-text-dim: 113 113 122;
+  --sidebar-border: 255 255 255 / 0.06;
+  --sidebar-section-label: 82 82 91;
+  --sidebar-rail: 255 255 255 / 0.08;
+  --sidebar-width: 260px;
+  --sidebar-collapsed-width: 56px;
+
+  /* ============================================================
+     LAYOUT  — PUBLIC (generic visual utilities)
+     ============================================================ */
+  --header-height: 56px;
+  --section-scroll-offset: 120px;
+  --prose-narrow: 32.5rem;
+  --prose-wide: 42rem;
+  --inset-highlight: 255 255 255 / 0.05;
+
+  /* Bullet primitives — PUBLIC (generic visual utilities).
+     Used by atoms.ListItem + lens bullet markers (e.g. value-section).
+     `--bullet-offset-y` is the marginTop needed to optically center a
+     `--bullet-size` dot against a line of `text-[13px]` body copy with
+     line-height 1.5. If a future callsite needs a different alignment
+     (e.g. larger text, looser leading), override `marginTop` per-callsite
+     rather than introducing a per-context token. */
+  --bullet-size: 5px;
+  --bullet-offset-y: 7px;
+
+  /* Recessed card footer strip — INTERNAL (<Card.Foot>) */
+  /* Card surface — INTERNAL (<Card>) */
+  --border-card: 255 255 255 / 0.08;
+  --card-shadow-rest:
+    0 1px 2px rgb(0 0 0 / 0.20);
+  --card-shadow-hover:
+    0 4px 12px rgb(0 0 0 / 0.28);
+
+  /* Card-tray — INTERNAL (<Card.Tray>) */
+  --tray-inset: 4px;
+  --radius-tray: var(--radius-md);
+
+  /* Card frame — INTERNAL (outer .ds-card-surface bg in framed mode) */
+  /* ============================================================
+     CALCULATOR SHELL v2 — INTERNAL (ADR-076 D7). Consumed only by
+     the v2 primitives (CalculatorShellV2 header, StatRow tiles) and
+     the recessed .ds-card-tray. rgb triples / shadow lists, no hex.
+     ============================================================ */
+  /* Near-black brand surface — v2 header + StatRow tiles. The only
+     heavy-black surface in the kit (ADR-076 D4); black is reserved
+     for the header and StatRow tiles, nowhere else. The prototype's
+     #0a0a0b hex is non-compliant, so this is an rgb triple. */
+  --brand-ink: 0 0 0;
+  /* v2 shell card elevation — multi-layer drop shadow + top-edge
+     inner highlight (the "read depth as quality" ladder). */
+  --shell-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.05),
+    0 4px 12px rgb(0 0 0 / 0.35),
+    0 16px 48px rgb(0 0 0 / 0.45);
+  /* Recessed-tray shadow — the bright inner tray reads as inset. */
+  --tray-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
+
+  /* ============================================================
+     MAIN CONTENT AREA — INTERNAL (layout primitives only)
+     ============================================================ */
+  --main-content-border: 255 255 255 / 0.08;
+
+  /* ============================================================
+     RADIUS SCALE  — PUBLIC
+     ============================================================ */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+  --radius: 0.5rem; /* legacy alias */
+
+  /* ============================================================
+     SHADOWS  — PUBLIC
+     ============================================================ */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.35);
+  --shadow-glow: 0 0 20px rgb(207 14 15 / 0.25);
+
+  /* Transitions — PUBLIC (legacy bundled motion; --dur and --ease are preferred). */
+  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Monospace stack — added 2026-05-18 per ADR-023 D17.
+   * JetBrains Mono is loaded from Google Fonts in apps/<app>/index.html
+   * (added per pre-batch coordination commit). Falls back to platform
+   * monospaces if the @font-face fails. Used by tabular numeric data
+   * in keywords table (Phase 8), SEMSpec ad-strength / CPC / search
+   * volume columns (Phase 12), and any other tabular-data surfaces.
+   * Consume via Tailwind `font-mono` utility (resolves to this stack). */
+  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+  /* ============================================================
+     LIGHT-MODE-READY ADDITIONS (dark values; light overrides below)
+     ============================================================ */
+  --surface-overlay-soft: 255 255 255 / 0.04;
+  --surface-overlay: 255 255 255 / 0.06;
+  --surface-overlay-strong: 255 255 255 / 0.10;
+  --surface-overlay-stronger: 255 255 255 / 0.16;
+  --modal-overlay: 0 0 0 / 0.65;
+
+  /* `--surface-on-accent` — PUBLIC (Phase Sidebar-E MIN-1, ADR-049).
+   * The "thumb on a colored track" surface: switch thumbs, slider
+   * knobs, badge fills sitting on accent-colored backgrounds. Both
+   * themes default to pure white because thumbs read as white against
+   * red accents in either light or dark mode — the alternative is a
+   * theme-aware off-white that buys nothing. Kept as a public token
+   * (rather than a raw `white` literal) so the boundary lint can
+   * enforce it and so a future redesign can re-tune both themes from
+   * one place. Consumers wrap as `rgb(var(--surface-on-accent))`. */
+  --surface-on-accent: 255 255 255;
+
+  --border-input: 255 255 255 / 0.10;
+
+  --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);
+
+  --radius-xs: 6px;
+
+  --ctrl-sm: 32px;
+  --ctrl-md: 40px;
+  --ctrl-lg: 48px;
+
+  /* Spacing scale (4px base) — PUBLIC */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* Motion — PUBLIC */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-fast: 140ms;
+  --dur-base: 240ms;
+  --dur-slow: 420ms;
+
+  /* Toast — INTERNAL (only <Toaster/> reads these) */
+  --toast-bg: 17 17 19;
+  --toast-text: 244 244 245;
+  --toast-border: 255 255 255 / 0.10;
+
+  /* Canvas placement bg — INTERNAL (placement primitive) */
+
+  /* Surface ladder — dark. Same five roles, same hue family. */
+  --surface-page: 11 11 12;
+  --surface-frame: 21 21 23;
+  --surface-card: 27 27 30;
+  --surface-inset: 45 45 48;
+  --surface-hover: 55 55 59;
+  /* 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
+     the frame. --muted/--surface-inset is the RECESSED role (wells, zebra,
+     table headers) and reads as disabled when a control borrows it. The
+     lenses were borrowing it because --bg-input is internal and this
+     public role did not exist. */
+  --surface-control: var(--surface-card);
+  --surface-elevated: 37 37 40;
+
+  --page-bg: var(--surface-page);
+  --background: var(--surface-page);
+  --main-content-bg: var(--surface-page);
+  --bg-surface: var(--surface-frame);
+  --bg-card: var(--surface-card);
+  --card: var(--surface-card);
+  --tray-bg: var(--surface-card);
+  --card-frame-bg: var(--surface-frame);
+  --card-foot-bg: var(--surface-frame);
+  --bg-elevated: var(--surface-elevated);
+  --surface-raised: var(--surface-elevated);
+  --popover: var(--surface-elevated);
+  --bg-input: var(--surface-frame);
+  --muted: var(--surface-inset);
+  --input: var(--surface-inset);
+  --secondary: var(--surface-inset);
+  --canvas-placement-bg: var(--surface-frame);
+  --bg-card-hover: var(--surface-hover);
+  --bg-input-hover: var(--surface-inset);
+
+}
+
+/* ============================================================
+   LIGHT THEME OVERRIDES
+   Only the flip + re-tune tokens land here; sidebar / toast /
+   radii / spacing / motion all stay invariant on :root.
+
+   THREE-MODE SYSTEM (2026-05-26): three values for data-theme:
+     dark   — :root defaults (everything dark)
+     light  — full light theme (this block + sidebar light overrides)
+     combo  — light surfaces + DARK sidebar
+   "combo" inherits the dark --sidebar-* from :root by NOT redeclaring
+   them. The shared light surface tokens are gathered under the
+   combined `[data-theme="light"], [data-theme="combo"]` selector
+   below; the --sidebar-* overrides sit in a `[data-theme="light"]`-
+   only block immediately after.
+   ============================================================ */
+[data-theme="light"], [data-theme="combo"] {
+  /* Brand accent — base stays, hover darkens, glow softens */
+  --accent-hover: 178 8 9;
+  --accent-muted: 207 14 15 / 0.10;
+  --accent-subtle: 207 14 15 / 0.05;
+  --accent-glow: 207 14 15 / 0.20;
+
+  /* Light-mode neutral palette (2026-05-18, iteration 2) — owner
+   * iterated from "kill the steel undertone" → "still too gray; push
+   * as close to pure #FFF without quite touching it." Page surface is
+   * now 254/254/254 (one unit shy of pure white, perfectly neutral).
+   * Cards stay 255 — fill delta is just 1 unit, so card chrome leans
+   * almost entirely on --border-card (0.07). If cards visually
+   * disappear, bump --border-card. Hover/muted/input-hover stay
+   * darker on purpose so state changes remain visible. */
+  --foreground: 17 17 19;
+  /* PUBLIC (ADR-063 D1) — see the dark block note. */
+  --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. */
+  --text-muted: 137 137 146;
+  --secondary-foreground: 17 17 19;
+
+  --border: 0 0 0 / 0.12;
+  --border-strong: 0 0 0 / 0.20;
+  /* Bumped from 0.16 → 0.22 — inputs on a white --bg-input (above) sitting
+   * inside a Card (--bg-card = 255 / same as input) need a stronger border
+   * to delineate. The 0.16 value worked when --bg-input was slate-tinted; on
+   * white-on-white the prior border was too subtle. */
+  --border-input: 0 0 0 / 0.22;
+  --success: 5 150 105;
+  --success-bg: 5 150 105 / 0.10;
+  /* `--warning` and the folder palette are intentionally split out
+     to a `[data-theme="light"]`-only block below — combo mode keeps
+     the brighter `:root` values so group-card colors stay readable
+     against the dark `--sidebar-bg` it inherits. */
+  --info: 37 99 235;
+  --info-bg: 37 99 235 / 0.10;
+  --destructive: 220 38 38;
+  --destructive-bg: 220 38 38 / 0.10;
+
+  --surface-overlay-soft: 0 0 0 / 0.03;
+  --surface-overlay: 0 0 0 / 0.05;
+  --surface-overlay-strong: 0 0 0 / 0.08;
+  --surface-overlay-stronger: 0 0 0 / 0.12;
+  --modal-overlay: 0 0 0 / 0.40;
+  /* `--surface-on-accent` stays white in light mode too — see :root
+   * comment. Declared here for symmetry / future-proofing. */
+  --surface-on-accent: 255 255 255;
+
+  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.06);
+  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.08);
+  --shadow-lg:  0 8px 25px rgb(0 0 0 / 0.10);
+  --shadow-xl:  0 16px 40px rgb(0 0 0 / 0.12);
+  --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
+   * paints with this token. Both must move together. */
+  --main-content-border: 0 0 0 / 0.10;
+  /* Calculator Shell v2 — light overrides (ADR-076 D7). */
+  --brand-ink: 20 20 23;
+  --shell-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.8),
+    0 2px 6px rgb(0 0 0 / 0.06),
+    0 16px 40px rgb(0 0 0 / 0.10);
+  --tray-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
+
+  /* Bumped from 0.07 → 0.12 (matches public --border) — when --page-bg
+   * moved to 254 (near-white) and --bg-card stayed 255, cards lost their
+   * fill-contrast affordance. The border now does the visual work, same
+   * opacity as Button secondary border (the "Generate from URL" look the
+   * owner called the gold standard). */
+  --border-card: 0 0 0 / 0.12;
+  --card-shadow-rest:
+    inset 0 1px 0 rgb(255 255 255 / 0.7),
+    0 1px 2px rgb(0 0 0 / 0.06),
+    0 4px 10px rgb(0 0 0 / 0.06);
+  --card-shadow-hover:
+    inset 0 1px 0 rgb(255 255 255 / 0.7),
+    0 2px 4px rgb(0 0 0 / 0.07),
+    0 8px 24px rgb(0 0 0 / 0.09);
+
+  /* ============================================================
+     SURFACE LADDER — the canonical set (2026-08-04)
+     ------------------------------------------------------------
+     Before this, 19 surface tokens carried 4 distinct values, in
+     THREE different grey families: --card-frame-bg / --card-foot-bg
+     at hue 248 (slate), --muted / --bg-card-hover at 90
+     (achromatic), --input / --secondary at 286 (zinc). Mixing grey
+     families is what reads as "inconsistent" long before anyone can
+     say which value is wrong.
+
+     Everything now sits on hue 286 — the family the TEXT ramp
+     already uses (--foreground and every --text-* measure 285.8-286.4),
+     so greys and type finally agree.
+
+     FIVE roles. Every legacy name below is an alias onto one of them,
+     so no component changes and nothing is orphaned:
+
+       page    the document. PURE WHITE — no grey backdrop.
+       card    cards, trays, inputs, popovers. Also white; separation
+               is border + shadow, not a fill step.
+       frame   the CONTAINED BACKGROUND for a group of sections —
+               <FrameStack> wrapping several <SectionCard>. The only
+               place a grey surface is correct.
+       inset   recessed wells, table header strips, zebra rows.
+       hover   the deepest step; hover on an inset.
+     ============================================================ */
+  --surface-page: 255 255 255;
+  --surface-card: 255 255 255;
+  --surface-frame: 247 247 249;
+  --surface-inset: 242 242 244;
+  --surface-hover: 238 238 240;
+  /* 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
+     the frame. --muted/--surface-inset is the RECESSED role (wells, zebra,
+     table headers) and reads as disabled when a control borrows it. The
+     lenses were borrowing it because --bg-input is internal and this
+     public role did not exist. */
+  --surface-control: var(--surface-card);
+
+  /* Legacy names — aliases onto the five above. Kept so the ~1,300
+     existing call sites keep working; prefer the canonical names. */
+  --page-bg: var(--surface-page);
+  --background: var(--surface-page);
+  --bg-surface: var(--surface-page);
+  --main-content-bg: var(--surface-page);
+  --bg-card: var(--surface-card);
+  --card: var(--surface-card);
+  --tray-bg: var(--surface-card);
+  --bg-elevated: var(--surface-card);
+  --surface-raised: var(--surface-card);
+  --popover: var(--surface-card);
+  --bg-input: var(--surface-card);
+  --card-frame-bg: var(--surface-frame);
+  --card-foot-bg: var(--surface-frame);
+  --muted: var(--surface-inset);
+  --input: var(--surface-inset);
+  --secondary: var(--surface-inset);
+  --canvas-placement-bg: var(--surface-inset);
+  --bg-card-hover: var(--surface-hover);
+  --bg-input-hover: var(--surface-frame);
+
+}
+
+/* ============================================================
+   SIDEBAR — INTERNAL (only <Sidebar/> reads these)
+   Light-theme overrides — Phase Sidebar-E (ADR-049 D7 + Phase E).
+   The rail should still read as a "distinct surface" from
+   --main-content-bg in light mode, just inverted: a slightly-
+   tinted light background with darker borders + text. Values
+   below were tuned against the dark-theme reference:
+     dark --sidebar-bg = 10 10 11        (near-black)
+     dark --sidebar-border = white/0.06  (faint white hairline)
+   Light analogue:
+     --sidebar-bg = 244 244 248          (cool off-white, one step
+                                          darker than --bg-card so
+                                          the rail still reads as
+                                          a step DOWN from --main-
+                                          content-bg's 254/254/254)
+     --sidebar-border = 0/0.10           (matches public --border)
+   `--sidebar-text*` and `--sidebar-surface-*` track the public
+   text + overlay scale in the same direction as the dark values,
+   just polarity-flipped.
+
+   This block is `[data-theme="light"]`-ONLY — `combo` mode keeps
+   the dark `--sidebar-*` values from :root so the sidebar stays
+   dark even though the rest of the shell is light.
+   ============================================================ */
+[data-theme="light"] {
+  /* Flat white — this token is the app FRAME (main-layout.tsx paints the
+     whole shell with it), so a grey here tints every light page behind the
+     floating content card. The card's border + shadow carry the separation.
+     Matches meta-ads-audit-dashboard, which consumes the same tokens and
+     sets its rail to --page-bg. */
+  --sidebar-bg: 255 255 255;
+  --sidebar-surface: 0 0 0 / 0.04;
+  --sidebar-surface-hover: 0 0 0 / 0.08;
+  --sidebar-surface-active: 207 14 15 / 0.10;
+  --sidebar-text: 82 82 91;
+  --sidebar-text-bright: 17 17 19;
+  --sidebar-text-dim: 113 113 122;
+  --sidebar-border: 0 0 0 / 0.10;
+  --sidebar-section-label: 113 113 122;
+  --sidebar-rail: 0 0 0 / 0.08;
+
+  /* ============================================================
+     SEMANTIC + FOLDER PALETTE — light-only overrides.
+     Owner directive 2026-05-27: combo mode (dark sidebar + light
+     shell) was rendering group cards in the rail with the
+     light-mode darker/saturated folder palette painted on a still-
+     dark --sidebar-bg → low contrast, hard to see the category
+     color. Splitting these out so combo inherits the brighter
+     `:root` values (designed for dark substrate) keeps the rail
+     readable. Trade-off: in combo mode, asset folders rendering on
+     the light main-content area use the brighter `:root` tokens
+     too — they read slightly less optimal on white but stay
+     visible. Sidebar visibility is the primary affordance in combo.
+     ============================================================ */
+  --warning: 217 119 6;
+  --warning-bg: 217 119 6 / 0.10;
+  --folder-red: 207 14 15;
+  --folder-amber: 217 119 6;
+  --folder-emerald: 5 150 105;
+  --folder-teal: 13 148 136;
+  --folder-blue: 29 78 216;
+  --folder-violet: 124 58 237;
+  --folder-pink: 219 39 119;
+  --folder-slate: 71 85 105;
+  --folder-ink: 15 23 42;
+}
+
+/* ============================================================
+   META-PREVIEW PLATFORM-CHROME TOKENS (theme-INDEPENDENT)
+   ------------------------------------------------------------
+   The `@lovett/ui/meta-previews` renderers reproduce real
+   Facebook / Instagram / Messenger UI, which is always-light
+   regardless of the workspace theme — exactly like the
+   `--hierarchy-*` palette above. They consume these as inline
+   `var(--color-*)` values (full colours, NOT rgb-triplets), so
+   they live as plain custom properties here rather than in the
+   light/dark theme blocks.
+
+   Promotion gap fix (ADR-060 D12 follow-through): the renderers
+   referenced `var(--color-surface-50/100/200)` + a `meta-blue`
+   colour that were never defined when the previews were promoted
+   out of the prototype (docs/prototype/meta/preview-package). The
+   values below are the prototype's Tailwind-config colours (see
+   the package README "Tailwind config" block), restoring pixel
+   fidelity. `--color-meta-ink` is the always-dark preview-surface
+   base text (formerly the lens-local `--mc-fb-text`).
+
+   These are platform-chrome and exempt substrate (packages/ui),
+   so the hex literals are permitted here and nowhere in apps/.
+   ============================================================ */
+:root {
+  --color-meta-blue: rgb(var(--platform-facebook));
+  --color-meta-ink: #050505;
+  --color-surface-50: #fafafa;
+  --color-surface-100: #f4f4f5;
+  --color-surface-200: #e4e4e7;
+}
+
+/* ============================================================
+   PLATFORM BRAND + MEDIA-OVERLAY TOKENS (theme-INDEPENDENT)
+   ------------------------------------------------------------
+   Third-party brand colours. Facebook is #1877F2 whether the
+   workspace is light or dark, so these deliberately sit OUTSIDE
+   the theme blocks — putting them in the theme would make a
+   platform badge change colour with the app, which is wrong.
+
+   This block exists because `swipes.css` and `collections.css`
+   each said, in their own header: "when a second consumer of
+   these exact tokens lands, promote to packages/ui/src/tokens.css".
+   Three landed (collections, ad-intel, the social previews), and
+   the same Facebook blue ended up defined in seven places under
+   seven names — plus an eighth, `--adstage-fb-like`, at a DIFFERENT
+   and wrong value (#2078f4). This is that promotion.
+
+   BARE TRIPLES, not complete colours: the same brand colour is
+   used at different opacities per surface (swipes/collections
+   badges at 0.78, ad-intel at 0.85), so the alpha belongs at the
+   call site — `rgb(var(--platform-facebook) / 0.78)`. Baking an
+   alpha into the token is what makes it un-shareable.
+
+   The `--media-*` overlays DO carry their alpha, because there the
+   opacity ramp IS the shared definition: swipes and collections
+   used byte-identical values.
+
+   Platform-chrome and exempt substrate (packages/ui), so the
+   literals are permitted here and nowhere in apps/.
+   ============================================================ */
+:root {
+  /* Platform brand colours. */
+  --platform-facebook: 24 119 242;
+  --platform-instagram: 225 48 108;
+  --platform-linkedin: 10 102 194;
+  --platform-google: 66 133 244;
+  /* Google's logo green — the discovery report's tiles use it where the
+   * badge surfaces use the logo blue above. Both are real, both are used. */
+  --platform-google-green: 52 168 83;
+  --platform-youtube: 255 0 0;
+  /* TikTok's brand is black, which only works as a BADGE FILL (white text
+   * on it). As an icon colour on a dark card it measures 1.22:1, so the
+   * discovery tiles use theme-aware --folder-slate instead. Same reason
+   * there is no --platform-x: X is brand-black too, and its one consumer
+   * uses --folder-ink, which is byte-identical in light mode. */
+  --platform-tiktok: 0 0 0;
+  --platform-yelp: 211 35 35;
+  --platform-email: 245 158 11;
+  --platform-website: 255 255 255;
+  /* Near-white reads on every brand fill above. */
+  --platform-on-color: 255 255 255;
+
+  /* Overlays on creative media. Theme-independent because the thing
+   * underneath is an image, not a themed surface. */
+  --media-scrim-strong: 0 0 0 / 0.78;
+  --media-scrim-mid: 0 0 0 / 0.2;
+  --media-scrim-label: 0 0 0 / 0.55;
+  --media-on-scrim: 255 255 255 / 0.88;
+  --media-overlay-btn: 255 255 255 / 0.14;
+}