@prenta/admin 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,109 @@
 # @actuate-media/cms-admin
 
+## 2.7.0
+
+### Minor Changes
+
+- 69b9667: Porcelain, Linen, and Graphite replace the purple admin palette. Accent presets are Cobalt, Teal, Actuate coral, Rust, and Slate, each tuned to 4.5:1. Shared page header, count chip, tabs, and unsaved bar are new exports. Legacy accent names still resolve.
+
+  Jobs can be cancelled. A queued job stops immediately; a running job stops after the current slice. Review decisions, batch estimates, and the admin-only automatic apply rule are enforced in cms-core.
+
+  Menus keep a location on one menu and stop new indents at depth 2. Chrome is a code-first schema with `defineRegion` and `prenta pull chrome`. Form settings cover attribution windows, spam terms, closed forms, and retention.
+
+- 69b9667: Admin tokens now match the October 2026 design kit. Linen joins Porcelain and Graphite as a base in Settings → Admin appearance, and every kit token is available, including Tailwind names like `bg-card`, `text-sub`, `rounded-12` and `shadow-shd`. Warning amber, card radius, shadows, motion, toast layering and the high-contrast values use the kit's values, and the last purple v1 colors are gone. The published Tailwind v3 preset adds the kit sizes without redefining stock keys (`text-sm2`, `rounded-4`, `rounded-5`).
+
+  Any accent color is accepted now (hex, `rgb()`, `hsl()` or `oklch()`). Instead of rejecting a low-contrast pick, `tuneAccent` in `@prenta/core` adjusts it until text clears 4.6:1 on light bases, on Graphite and on its own tint. `admin.branding.primaryColor` is tuned the same way and wins over the saved accent; a value the admin can't read is ignored with a console warning and the accent stays editable. Unsaved Appearance changes are undone when you leave the tab. The admin root carries `--acc-base`, `--acc-lt` and `--acc-dk` (`accentPickCssVars`) and derives the rest. `accentTokensToCssVars` keeps its old output and is deprecated, as is `MIN_ACCENT_CONTRAST`. `AppearanceSettings` gains an optional `adminLightBase`.
+
+  `@prenta/admin` needs the `@prenta/core` release that ships with it (8.10.0): it imports `accentPickCssVars`, `toHex` and `tuneAccent`, which older core versions don't export. Upgrade both together.
+
+- 69b9667: The admin sidebar now follows the October 2026 design kit. Dashboard, Pages, Posts and Appearance sit at the top, Media, Forms, SEO and Script Tags under CONTENT, then your own collections, and Jobs above Settings under SETTINGS. Appearance is a group (Menus, Header & Footer, Widgets). Under Forms, All Entries and All Forms each open a row per form. Clicking a group opens it; the current page's group opens on its own.
+
+  At tablet width the sidebar is a 60px icon rail: sub-pages open in a flyout, the parent is marked for any of its pages, unread counts stay visible and labels remain available to screen readers. Hovering a rail item no longer moves keyboard focus, Esc closes its flyout or label without moving focus, and opening a flyout from the keyboard moves focus into it. On phones a bottom tab bar replaces the sidebar and leaves room for the home indicator. Its More tab opens the full menu, including the Settings tabs, as a dialog with its own Close button: focus moves into it and stays there, Esc or Close closes it and focus returns to More. Widening the window closes it. Sheets and dialogs cover the tab bar, toasts appear above it, and the Reduce motion setting stops the menu's slide. The current page stays outlined in Windows high-contrast mode.
+
+  `AdminShell` takes an optional `tabBar` for the mobile bar and makes its open mobile sidebar a modal dialog, and `Sidebar` accepts the nav `items` so a page can share one tree between the sidebar and the tab bar.
+
+- 69b9667: The admin's controls now match the October 2026 design kit: 34px buttons with 13px semibold text, radius-12 cards with a 13px 16px header row, 34×19 switches, and the kit's count chips and tabs. On light themes the AI button's gradient ends darker, so its white label stays readable.
+
+  New exports: `Breadcrumb` (items take an admin `path` and render as real links; `AdminLinksProvider` supplies the base path outside `AdminRoot`) and `UnderlineTabPanel`, which pairs with `UnderlineTabs` through a shared `idBase`. `UnderlineTabs` tabs take an `icon`, `count` and `badge`, and move with the arrow keys, Home and End. `Segmented` takes `counts` and moves with the arrow keys. `PageHeader` takes `flush` and a rich `subtitle`. `UnsavedBar` takes `saveDisabled`, `saveLabel`, `discardLabel` and a `card` variant, renders only while the form is dirty, and announces itself to screen readers.
+
+  Breadcrumbs appear only on second-level screens. The shell no longer adds a breadcrumb bar under the top bar; screens such as Post Types, All Entries, Trash and collection documents pass a `Breadcrumb` to `PageHeader` instead. `Breadcrumbs` (the path-derived bar) is still exported but deprecated. Collection document screens get their Cancel button and post-create redirect back, open a created or duplicated document fresh, and no longer ask about unsaved changes after a successful Create. Their fields are read-only while a new document is being created, so nothing typed during the save is lost. Pages › Trash opens Trash again instead of the page editor.
+
+  Settings tabs show the kit's unsaved-changes bar ("Reset" / "Save changes") only while the form has unsaved changes, and a successful save shows a "Saved" toast. Saving Admin appearance now clears its unsaved state. Toasts appear at the bottom centre in the kit's dark style; errors and warnings stay up for 6 seconds unless the call sets its own duration.
+
+- 69b9667: The admin top bar now follows the October 2026 design kit. Search is a single "Search…" field with a shortcut hint, ⌘K on Mac, iPhone and iPad and Ctrl+K elsewhere (both shortcuts work everywhere): it opens the command palette with the cursor in its search box, and closing the palette puts focus back where it was. On the right sit the dark-mode toggle, notifications and a round avatar with your initials, which opens the account menu (Profile, Settings, Logout). A red dot on the bell means you have unread notifications, and screen readers hear how many. The notifications panel closes with Esc (focus goes back to the bell), with a click elsewhere, or when you Tab past it. While the command palette is open, Tab stays inside it. The bell now also shows unread notifications when the admin runs in development mode.
+
+  On phones the search field becomes a 44px icon and the menu button is gone, since the tab bar's More opens the full menu. On 4K screens the top bar is 64px tall with a wider search field. `Header`'s `onToggleSidebar` is now optional: pass it only if your own shell needs a menu button on small screens.
+
+- 69b9667: The admin now adapts to the October 2026 design kit's screen sizes: phones (up to 768px), tablets (769–1024px), laptops, wide screens and 4K.
+  - **Tablets:** the secondary buttons in a page header (View Site, Export and the like) shrink to 40px icons that keep their names for screen readers. The main action and AI buttons keep their text. Page titles are 19px and the page gutter is 20px.
+  - **Phones:**
+    - Every page-header button becomes a 44px icon.
+    - The main create action ("New page", "New Post", "Upload Files", "New Form", "New Script", "New Post Type" and each collection's "New …") floats as a round button above the tab bar.
+    - The Pages, Posts, Forms, Script Tags and collection lists show each row as a card, with the column names as labels, long values wrapping, and the checkbox and row actions at a touch-friendly size. Where the table header could sort or select all, a "Sort by" menu and a "Select all" checkbox sit above the cards. Other tables scroll sideways inside their own box, never the whole page.
+    - Dialogs open as bottom sheets.
+    - Side panels (entry details, form schema, script editor, SEO editor, redirects) and the media details panel fill the screen between the top bar and the tab bar. Focus moves into them and back to the row you came from, and the media grid keeps its place.
+    - Toasts appear above the floating button instead of over it.
+    - The media folder list starts closed and opens above the files.
+  - **Row actions** are always visible on tablets, phones and touch screens, since there is no hover to reveal them.
+  - **4K:** titles are 26px and the gutter is 44px.
+
+  For custom admin screens, `@prenta/admin`'s Tailwind build now has `mobile:`, `tablet:`, `laptop:`, `wide:`, `4k:` and `narrow:` (tablet and phone) variants, along with `not-mobile:` and `not-narrow:`.
+
+- 69b9667: A polish pass on the admin, following the October 2026 design kit.
+  - **Titles match the sidebar.** Media (was "Media Library"), SEO (was "SEO Operations Center") and SMTP Log (was "Deliveries"), with the kit's subtitles on Media and SEO. A form's entries page is titled with the form's name under a Dashboard / Forms breadcrumb, which replaces its "Back to Forms" button. Breadcrumbs stay on second-level screens only.
+  - **One count chip.** The header counts on Forms, All Entries, a form's entries, Media and Script Tags share the kit's rounded count chip. On All Entries and a form's entries, the unread and starred chips turn that filter on, and a second click goes back to all entries.
+  - **No wrapping.** Script Tags' location and consent filters, its "Consent-gated" count, Media's counts and the Pages tag chips (such as "Landing Pages") stay on one line, and Script Tags' search box keeps at least 180px.
+  - **Dashboard stat cards.** Five cards sit in one row from 1400px, two above three below that, and two per row on phones with the last one full width. With four cards (a site with one content collection) they sit in one row from 1400px and two by two below, with no empty slot. Below 1025px the Recent Activity grid and the SEO score row stack in one column.
+  - **Settings** uses the kit's header and tab strip: each tab has its icon, and Email reads "Email (SMTP)" (also in the phone menu). When the tabs don't fit, the side that hides tabs fades out and a chevron there scrolls the strip; the selected tab scrolls into view, including when you open Settings on a later tab. On phones the tabs are 40px tall, 44px on touch screens. In Windows high-contrast mode the selected tab, a pressed count chip and an active filter pill are outlined, so they still stand out.
+  - **Create actions live in the page header.** "New Post Type" moved from the top bar into the Post Types header, and the top bar no longer repeats a collection's "New …" button.
+
+  `CountChip` now takes a string `n` for formatted values ("2.4 GB"), `tone="muted"` and a leading `icon`. `UnderlineTabs` takes `variant="page"` for a page-level strip, fades only the edges that hide tabs (at any width, not only at 1280px and below) and shows scroll buttons there. All its tabs get the phone and touch heights above.
+
+- 69b9667: The Jobs screen (under Settings in the sidebar) has been redesigned. It shows when the background worker last ran and when it runs next, the SEO scan and content health schedules with Run now, and alerts for failed jobs and for AI changes waiting for review. Each job shows a plain status (Running, In progress, Retrying, Queued, Needs review, Succeeded, Failed, Cancelling or Cancelled), what's happening now, its progress, and who started it. Filter by state or type; the counts follow the type you pick.
+
+  The list updates every 5 seconds while Live is on and the browser tab is in view. Turn Live off to keep it still while you read.
+
+  From the list you can run a scan now (if one is already queued or running, that job opens instead of a second one starting), retry a failed job from where it stopped, and cancel a queued or running job after confirming. A running job finishes its current slice first.
+
+  Light mode now shows the info colour again: it was missing, which left the SEO scan icon and other info-coloured text and tints without their colour.
+
+- 69b9667: Opening a job on the Jobs screen now shows its details in a panel on the right (full screen on a phone), with five tabs:
+  - **Overview**: what the job is doing in plain words, its progress, the last error with a Copy button, the AI's explanation of a failure or summary of a scan, and the facts (who started it, attempts, operation or schedule, AI usage).
+  - **Review** (batch AI jobs): each suggested change next to the current text, 20 at a time. Approve it as a draft or publish it, edit it first, or reject it, and undo any decision. On a published document, "Keep current status" leaves the change waiting, because saving it would make it live; Publish applies it. Approve all approves every waiting change. An edit you're making stays put while the list updates. People who can't edit content don't see this tab.
+  - **Results** (SEO scans and content health checks): the key numbers, the AI summary, the issues by kind with a link to where each gets fixed, and whether the SEO digest went out.
+  - **Activity**: the job's slices, pauses, failures and retries, newest first.
+  - **Details**: the raw job record, for developers.
+
+  When a change can't be saved (the document changed at the same moment, a link points to a page that's no longer published, or someone else already decided it), the change says why.
+
+  `cmsApi` results now include the parsed response `body` next to `data`, for endpoints that send fields beside `data`.
+
+### Patch Changes
+
+- 69b9667: Appearance → Menus opens the menu editor again, and sidebar groups open when you're on one of their pages. Settings tabs show the save bar only after a change.
+
+  A form's open and close dates, entry limit, and closed message now save and are enforced on submit.
+
+  Cancelling a job while a slice is running now sticks: the job stops after that slice. Migration 0025 ships a `down.sql` for manual rollback.
+
+- 69b9667: Settings → Layout now works like the other Settings tabs: instead of an always-visible "Save Changes" button, the "Unsaved changes" bar appears once you change a default variant, with Reset to go back to the saved defaults and a "Saved" toast after saving. Clearing every default variant now saves too (before, the old defaults came back), and a failed read of the settings no longer overwrites them.
+
+  Settings tabs also open from the design kit's `#hash` links (`/settings#appearance`, `#keys` for API Keys) as well as `?tab=`.
+
+  If you leave Admin appearance while a save is still running, the admin keeps the look you saved instead of putting the previous one back; if that save fails, the saved look comes back and an error toast says so.
+
+- 69b9667: Sites declare what editors can change in their header and footer with `defineRegion(name, { component, variants, fields })` and `field.brand`, `menu`, `link`, `text`, `textarea`, `select`, `boolean` and `social`, from `@prenta/core/config`. Saved values are typed per region: `RegionValues<typeof header>` for what the CMS stores, `ChromeFieldsOf<typeof header>` for what the site receives. The earlier array-of-fields `defineRegion` and `DEFAULT_CHROME_SCHEMA` are gone, and the `@prenta/core/chrome/schema` entry with them.
+
+  `prenta push chrome` sends the regions `prenta.config.ts` exports to the CMS, with the repo, branch and commit; run it on every deploy, with an admin API key. The CMS stores each region's schema and fits the saved values to it. A value whose field was removed is kept as an orphan for 30 days, or until someone removes it. A field with `renamedFrom` keeps the old key's value. `prenta pull chrome` writes the CMS's schema to `.prenta/chrome.json`, and `prenta types` generates `ChromeFields` from it.
+
+  Migration 0027 adds the `prenta_chrome_regions` table. It ships a `down.sql` for manual rollback.
+
+## 2.6.1
+
+### Patch Changes
+
+- 626b0fb: Describe each section as the band it looks like, and have a connected agent report which bands it built or skipped. A design image is the reference; photos are uploaded from their own files.
+
 ## 2.6.0
 
 ### Minor Changes

package/design-system/tokens.css

@@ -1,74 +1,67 @@
 /*
- * PrentaCMS — Design Tokens v2.0.0
+ * PrentaCMS — Design Tokens v2.1.0
  * GENERATED FILE — DO NOT EDIT. Source: design-system/tokens.json.
  * Regenerate: pnpm --filter @prenta/admin generate
  *
- * Light theme is the default (:root); dark activates via [data-theme="dark"]
- * on <html>. Consumers embedding @prenta/admin should import
- * src/styles/prenta-tokens.css instead — it scopes the same values to
- * .prenta-admin so a host page's :root cannot override them.
+ * Porcelain is the default (:root). Linen activates via data-light="linen"
+ * and Graphite via [data-theme="dark"] on <html>. Consumers embedding
+ * @prenta/admin should import src/styles/prenta-tokens.css instead — it
+ * scopes the same values to .prenta-admin so a host page's :root cannot
+ * override them.
  */
 
 :root {
   /* Surfaces */
-  --bg: #f5f4fa; /* App background */
+  --bg: #f4f5f7; /* Porcelain app background */
   --sb: #ffffff; /* Sidebar / topbar surface */
   --card: #ffffff; /* Card / panel surface */
-  --bdr: #e8e6f2; /* Hairline border */
+  --bdr: #e3e5ea; /* Hairline border */
 
   /* Text */
-  --txt: #1a1827; /* Primary text */
-  --sub: #6b6878; /* Secondary text */
+  --txt: #16181d; /* Primary text */
+  --sub: #50555f; /* Secondary text */
   /*
-   * Tertiary text. The handoff value #B0ADBE is 2.2:1 on --card — below WCAG
-   * AA. The admin uses --muted as real text (section labels, check hints,
-   * canvas meta line, character counters), so it is darkened to 4.6:1 while
-   * staying one step lighter than --sub to preserve the hierarchy. Do not
-   * revert without also changing every --muted consumer to decorative use.
-   * Handoff value: #b0adbe — deliberately overridden.
+   * Tertiary text. October 2026 Porcelain value, 5.27:1 on white. Tailwind
+   * exposes it as text-faint, because bg-muted is a surface in this repo.
    */
-  --muted: #716e83;
+  --muted: #676c76;
 
   /* Accent */
-  --acc: #7c3aed; /* Accent / interactive */
-  --acc-l: #ede9fe; /* Accent tint (hover/active bg) */
-  --acc-m: #c4b5fd; /* Accent mid (focus ring) */
-
-  /* Semantic */
   /*
-   * Success text/fill. The handoff value #059669 is 3.57:1 on --suc-l at
-   * 11.5px (axe on Pages Published chips). Emerald-700 meets 4.5:1 on that
-   * tint, on bg-success/10 over a card, and with white. Handoff value: #059669
-   * — deliberately overridden.
+   * Picked accent, Cobalt by default. Presets: Teal #0F8A7E, Actuate coral
+   * #E8645A, Rust #C2410C, Slate #3F4A5A.
    */
-  --suc: #047857;
-  --suc-l: #ecfdf5;
+  --acc-base: #2f5bea;
   /*
-   * Warning text/fill. The handoff value #D97706 is 2.85:1 on --warn-l.
-   * Amber-700 #B45309 is 4.39:1 on bg-warning/10 over a card (axe on dashboard
-   * Scheduled chips). Amber-800 meets 4.5:1 on that mixed tint and with white.
-   * Handoff value: #d97706 — deliberately overridden.
+   * Accent text and fills. --acc-lt is the pick nudged toward black until it
+   * clears 4.6:1.
    */
-  --warn: #92400e;
-  --warn-l: #fffbeb;
+  --acc: var(--acc-lt, var(--acc-base));
+  /* Accent tint: hover, selected rows, active nav */
+  --acc-l: color-mix(in oklch, var(--acc) 11%, var(--card));
+  /* Accent mid: focus ring, hover borders */
+  --acc-m: color-mix(in oklch, var(--acc) 38%, var(--card));
+  --on-acc: #ffffff; /* Text on accent fills */
+
+  /* Semantic */
+  --suc: #047857; /* Success text/fill. Text on its own tint clears 4.5:1. */
+  --suc-l: #ecfdf5;
   /*
-   * Error text/fill. The handoff value #DC2626 is 4.41:1 on --err-l — just
-   * under AA for 11.5px StatusBadge text. Red-700 meets 4.5:1 on that tint and
-   * with white. Handoff value: #dc2626 — deliberately overridden.
+   * Warning text/fill. 4.84:1 on --warn-l, 5.02:1 on white. Pair it with
+   * --warn-l, not a translucent warn mix (4.39:1 at 10%).
    */
-  --err: #b91c1c;
+  --warn: #b45309;
+  --warn-l: #fffbeb;
+  --err: #b91c1c; /* Error text/fill */
   --err-l: #fef2f2;
-  /*
-   * Info text/fill. The handoff value #0891B2 is 3.31:1 on --info-l. Cyan-700
-   * meets 4.5:1 on that tint and with white. Handoff value: #0891b2 —
-   * deliberately overridden.
-   */
-  --info: #0e7490;
+  --info: #0e7490; /* Info text/fill */
   --info-l: #e0f7fa;
+  --orange: #c2410c;
+  --notify-dot: #e11d48; /* Topbar bell unread dot */
 
   /* Tag palette */
-  --tag-purple: #7c3aed;
-  --tag-purple-soft: #f3e8ff;
+  --tag-purple: #4f46e5;
+  --tag-purple-soft: #eef2ff;
   --tag-green: #0f766e;
   --tag-green-soft: #ccfbf1;
   --tag-orange: #c2410c;
@@ -92,10 +85,55 @@
   --tag-gray: #475569;
   --tag-gray-soft: #f1f5f9;
 
+  /* Avatars */
+  --avatar-1: #2f5bea;
+  --avatar-2: #0e7490;
+  --avatar-3: #047857;
+  --avatar-4: #b45309;
+  --avatar-5: #e11d48;
+  --avatar-6: #4f46e5;
+  --avatar-7: #db2777;
+  /*
+   * The handoff value #0D9488 is 3.74:1 with white initials. Teal-700 meets
+   * 4.5:1. Handoff value: #0d9488 — deliberately overridden.
+   */
+  --avatar-8: #0f766e;
+
   /* AI */
-  --ai1: #7c3aed;
-  --ai2: #c026d3;
-  --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
+  --ai1: var(--acc);
+  /*
+   * Second AI gradient stop: the accent rotated 50°. Darkened on light bases
+   * so white text keeps 4.5:1, hover brightness included (the kit lightens it,
+   * 2.85:1 on Cobalt)
+   */
+  --ai2: oklch(from var(--acc) calc(l - 0.07) c calc(h - 50));
+  --ai-soft: linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--ai1) 9%, transparent),
+    color-mix(in oklch, var(--ai2) 7%, transparent)
+  );
+
+  /* Overlays */
+  --scrim: rgba(10, 12, 20, 0.38); /* Modal backdrop */
+  --scrim-drawer: rgba(10, 12, 20, 0.28); /* Drawer backdrop */
+
+  /* Code surfaces */
+  --code-bg: #0f1115;
+  --code-txt: #d6dae1;
+  --code-cmt: #6b7280;
+  --code-str: #9fd39b;
+  --code-kw: #c4a7ff;
+  --code-err: #f2b8b5;
+  --code-btn-bg: #171a20;
+  --code-btn-bdr: #2a2e36;
+  --code-btn-txt: #c9cdd4;
+
+  /* Search preview */
+  /*
+   * Search result title in the SERP preview. Google's link blue, so the card
+   * looks like the result it previews; never derived from the accent.
+   */
+  --serp-link: #1a0dab;
 
   /* Controls */
   /*
@@ -105,31 +143,47 @@
   --toggle-thumb: #ffffff;
 
   /* Type */
-  /*
-   * UI text. system-ui until OFL woff2 ships under design-system/fonts/. Never
-   * a third-party request — the admin renders inside consumer applications.
-   */
-  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  /* Code, robots directives, token names */
+  /* UI text. DM Sans is self-hosted via @fontsource (no Google Fonts request). */
+  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  /* Code, keys, ids, paths and slugs */
   --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
   --fw-reg: 450;
   --fw-med: 500;
   --fw-semi: 600;
   --fw-bold: 700;
   --fs-page: 21px; /* Page title */
-  --fs-card: 14px; /* Card / section title */
+  --fs-drawer: 16px; /* Drawer / modal title */
+  --fs-stat: 20px; /* Jobs drawer result numbers */
+  --fs-card: 13.5px; /* Card heading */
   --fs-body: 13px; /* Body, controls, table cells */
-  --fs-sub: 12px; /* Secondary / captions */
-  --fs-hint: 11.5px; /* Hints, metadata */
-  --fs-label: 10px; /* Section labels */
+  --fs-sm: 12.5px; /* Secondary rows, breadcrumbs, chips */
+  --fs-sub: 12px; /* Meta, help */
+  --fs-hint: 11.5px; /* Hints, table meta, mono */
+  --fs-badge: 9.5px; /* Nav unread badges */
+  --fs-tab: 9px; /* Mobile tab bar labels */
+  --fs-count: 10.5px; /* Count badges in tabs and nav */
+  --fs-micro: 11px; /* Table headers */
+  --fs-label: 10px; /* Sidebar section labels */
 
   /* Layout */
-  --sbw: 224px;
-  --sbw-col: 60px;
+  --sbw: 224px; /* Sidebar expanded */
+  --sbw-col: 60px; /* Sidebar collapsed / tablet rail */
   --tbh: 56px;
+  --gut: 28px; /* Page gutter (laptop tier) */
+  --drawer-w: 440px; /* Generic drawer */
+  --jobs-drawer-w: 620px; /* Jobs detail drawer */
+  --tabbar-h: 56px; /* Mobile bottom tab bar */
 
   /* Radius */
-  --r-sm: 6px; /* Small buttons, badges, tags, chips-in-rows */
+  --r-xs: 4px; /* kbd, consent badge */
+  --r-sm: 5px; /* Tiny tags */
+  --r-6: 6px; /* Small icon buttons, chips in rows */
+  --r-7: 7px; /* Nav items, menu buttons */
+  --r-8: 8px; /* Buttons, inputs, selects */
+  --r-9: 9px; /* Toasts, list items */
+  --r-10: 10px; /* Inner cards, alerts, KPI tiles */
+  --r-12: 12px; /* Page cards */
+  --r-14: 14px; /* Modals */
   --r-field: 7px; /* Text inputs, textareas, selects */
   /*
    * Primary / secondary buttons, dropdowns. --r-control is the pre-2.0 name,
@@ -137,7 +191,7 @@
    */
   --r-ctl: 8px;
   --r-control: var(--r-ctl); /* deprecated alias */
-  --r: 10px; /* Cards and panels */
+  --r: 12px; /* Cards and panels */
   --r-fig: 12px; /* Canvas figures and media frames */
   --r-pill: 99px; /* Toggles, meters, notice pills */
 
@@ -169,13 +223,17 @@
   --ring: 0 0 0 3px var(--acc-m); /* Focus ring shadow */
 
   /* Elevation */
-  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04); /* Card resting */
-  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1); /* Popovers, modals, hover */
+  --shd: 0 1px 2px rgba(16, 18, 24, 0.05), 0 1px 4px rgba(16, 18, 24, 0.04); /* Card resting */
+  --shd2: 0 4px 16px rgba(16, 18, 24, 0.1); /* Popovers, modals, hover */
+  --shd-bar: 0 10px 30px rgba(0, 0, 0, 0.22); /* Floating unsaved-changes bar */
+  --shd-knob: 0 1px 2px rgba(0, 0, 0, 0.25); /* Switch knob */
+  --shd-save: 0 -3px 16px rgba(0, 0, 0, 0.06); /* Settings save bar (Settings.html .ap-save) */
+  --shd-tabbar: 0 -2px 12px rgba(0, 0, 0, 0.08); /* Mobile bottom tab bar */
 
   /* Motion */
   --mo-fast: 0.12s; /* Hover, color */
   --motion-fast: var(--mo-fast); /* deprecated alias */
-  --mo-base: 0.18s; /* Toggles, reveals */
+  --mo-base: 0.15s; /* Toggles, reveals */
   --motion-base: var(--mo-base); /* deprecated alias */
   --mo-slow: 0.22s; /* Panels, canvas scale */
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
@@ -184,32 +242,60 @@
 
   /* Layering */
   --z-raise: 2; /* Canvas section labels, sticky group headers */
+  --z-bar: 20; /* Sticky bars */
   --z-resizer: 30; /* Panel drag handle */
   --z-overlay: 45; /* In-panel overlays (version history) */
+  /*
+   * Mobile bottom tab bar. Kit 110; below the admin's overlays (scrims 40,
+   * drawers and dialogs 50+) so it never covers a sheet's footer
+   */
+  --z-tabbar: 30;
   --z-menu: 120; /* Dropdowns, flyouts */
-  --z-toast: 200;
+  --z-drawer-scrim: 150;
+  --z-drawer: 160;
+  --z-modal: 200;
+  --z-toast: 260;
+  --z-toast-jobs: 300; /* Jobs toasts over the Jobs drawer */
+}
+
+:root[data-light='linen']:not([data-theme='dark']) {
+  /* Surfaces */
+  --bg: #f5f2ec;
+  --sb: #fbfaf7;
+  --card: #ffffff;
+  --bdr: #e6e0d6;
+
+  /* Text */
+  --txt: #1e1a15;
+  --sub: #5c554a;
+  --muted: #6d665a;
+
+  /* Elevation */
+  --shd: 0 1px 2px rgba(40, 30, 15, 0.06), 0 1px 4px rgba(40, 30, 15, 0.04);
+  --shd2: 0 4px 16px rgba(40, 30, 15, 0.1);
 }
 
 [data-theme='dark'] {
   /* Surfaces */
-  --bg: #0d0c18;
-  --sb: #141222;
-  --card: #1c1a2e;
-  --bdr: #2c2a42;
+  --bg: #0e0f11;
+  --sb: #15161a;
+  --card: #1b1d21;
+  --bdr: #2a2d33;
 
   /* Text */
-  --txt: #eae8f5;
-  --sub: #8e8ba8;
-  /*
-   * Same AA correction as light mode — the handoff value #504E68 is 2.1:1 on
-   * --card. Handoff value: #504e68 — deliberately overridden.
-   */
-  --muted: #8784a2;
+  --txt: #ecedef;
+  --sub: #adb1ba;
+  --muted: #9499a3; /* Graphite tertiary text. 5.90:1 on the Graphite card. */
 
   /* Accent */
-  --acc: #9d71f0;
-  --acc-l: #231950;
-  --acc-m: #5e3eaa;
+  /*
+   * --acc-dk is the pick nudged toward white until it clears 4.6:1 on
+   * Graphite.
+   */
+  --acc: var(--acc-dk, color-mix(in oklch, var(--acc-base) 70%, #ffffff));
+  --acc-l: color-mix(in oklch, var(--acc-base) 20%, var(--card));
+  --acc-m: color-mix(in oklch, var(--acc-base) 50%, var(--card));
+  --on-acc: #0e0f11;
 
   /* Semantic */
   --suc: #10b981;
@@ -220,10 +306,11 @@
   --err-l: #200808;
   --info: #38bdf8;
   --info-l: #0a2838;
+  --orange: #fb923c;
 
   /* Tag palette */
-  --tag-purple: #a78bfa;
-  --tag-purple-soft: #2e1065;
+  --tag-purple: #818cf8;
+  --tag-purple-soft: #1e1b4b;
   --tag-green: #2dd4bf;
   --tag-green-soft: #042f2e;
   --tag-orange: #fb923c;
@@ -238,9 +325,16 @@
   --tag-gray-soft: #1e293b;
 
   /* AI */
-  --ai1: #7c3aed;
-  --ai2: #c026d3;
-  --ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
+  /* Graphite keeps the kit's lighter stop: the text on it is dark */
+  --ai2: oklch(from var(--acc) calc(l + 0.1) c calc(h - 50));
+  --ai-soft: linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--ai1) 16%, transparent),
+    color-mix(in oklch, var(--ai2) 12%, transparent)
+  );
+
+  /* Search preview */
+  --serp-link: #8ab4f8;
 
   /* Elevation */
   --shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);