aimeat 2.1.0 → 2.2.0

package/dist/public/lib/VENDORED.md

@@ -11,7 +11,8 @@ with per-lib AI docs + changelogs) — keep this table and the registry in sync.
 |------|---------|---------|---------|--------|---------|
 | `tailwindcss@4.js` | `@tailwindcss/browser` | 4.3.1 | `styling` | `https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4` | MIT |
 | `daisyui@5.css` | `daisyui` | 5.5.23 | `styling` | `https://cdn.jsdelivr.net/npm/daisyui@5` | MIT |
-| `aimeat-daisyui-bridge.css` | AIMEAT-local (theme bridge) | — | `styling` | this repo | MIT |
+| `aimeat-theme.css` | AIMEAT-local (the theme SYSTEM: 5 palettes × light+dark on the `data-theme` × `data-palette` axes, self-hosted faces, elevation/motion/type tokens; verified by `pnpm check:theme`) | 2.0.0 | `styling` | this repo | MIT |
+| `aimeat-daisyui-bridge.css` | AIMEAT-local (theme bridge; `@import`s the theme) | — | `styling` | this repo | MIT |
 | `chartjs@4.js` | `chart.js` (UMD) | 4.5.1 | `chartjs` | `https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js` | MIT |
 | `mermaid/mermaid.min.js` | `mermaid` (UMD) | 11.15.0 | `mermaid` | `node_modules/mermaid/dist` (see mermaid/README.md) | MIT |
 | `three.min.js` | `three` (r128 UMD) | r128 | `three` | `https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js` | MIT |
@@ -20,10 +21,11 @@ with per-lib AI docs + changelogs) — keep this table and the registry in sync.
 | `pixi-unsafe-eval@8.min.js` | `pixi.js` (unsafe-eval companion — REQUIRED after pixi under the app CSP) | 8.19.0 | `pixi` | `https://cdn.jsdelivr.net/npm/pixi.js@8/dist/packages/unsafe-eval.min.js` | MIT |
 | `phaser@3.min.js` | `phaser` | 3.90.0 | `phaser` | `https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js` | MIT |
 | `drawflow@0.min.js` + `.min.css` | `drawflow` (engine INSIDE the aimeat-flow cortex — apps use AIMEAT.flow, never Drawflow directly) | 0.0.60 | `aimeat-flow` | `https://cdn.jsdelivr.net/npm/drawflow@0.0.60/dist/` | MIT |
-| `fonts.css` + `fonts/*.woff2` | Baloo 2 (variable 400–800) + Bangers display fonts, latin + latin-ext (ä/ö) | Baloo 2 v23 · Bangers v25 | `fonts` | Google Fonts CDN (see `fonts/LICENSE.md`) | OFL-1.1 |
+| `fonts.css` + `fonts/*.woff2` | Baloo 2 + Bangers display fonts (the `fonts` pack, via `fonts.css`) AND the theme-system faces Inter, Space Grotesk, Fraunces, JetBrains Mono (declared by `aimeat-theme.css`, lazy-loaded per family). All latin + latin-ext (ä/ö); see `fonts/LICENSE.md` | Baloo 2 v23 · Bangers v25 · Inter v20 · Space Grotesk v22 · Fraunces v38 · JetBrains Mono v24 | `fonts` / `styling` | Google Fonts CDN (see `fonts/LICENSE.md`) | OFL-1.1 |
 | `realtime.js` | AIMEAT-local (WS/WebRTC/Yjs client + `SharedClock` synced timeline) | 1 | `realtime` | this repo | MIT |
 | `toastui/toastui-editor-all.min.js` + `.min.css` | TOAST UI Editor | (SPA-internal) | — | `https://uicdn.toast.com` | MIT |
-| `preact.mjs`, `preact-hooks.mjs`, `htm.mjs`, `yaml.mjs`, `minidenticons.min.js` | preact / htm / yaml / minidenticons (ESM) | (SPA-internal, importmap) | — | jsdelivr | MIT |
+| `yaml.mjs` | `yaml` (ESM) | 2.x | `yaml` | jsdelivr | ISC |
+| `preact.mjs`, `preact-hooks.mjs`, `htm.mjs`, `minidenticons.min.js` | preact / htm / minidenticons (ESM) | (SPA-internal, importmap) | — | jsdelivr | MIT |
 | `live-updates.js` | AIMEAT-local (SSE ESM wrapper) | (SPA-internal) | — | this repo | MIT |
 | `samples/` | audio samples for aimeat-audio | — | — | CC | CC |
 
@@ -51,6 +53,7 @@ The same append-only rule applies to the node-bundled cortex wrappers
 
 ```html
 <link href="/lib/daisyui@5.css" rel="stylesheet" type="text/css" />
+<link href="/lib/aimeat-theme.css" rel="stylesheet" type="text/css" />
 <link href="/lib/aimeat-daisyui-bridge.css" rel="stylesheet" type="text/css" />
 <script src="/lib/tailwindcss@4.js"></script>
 <!-- charts: <script src="/lib/chartjs@4.js"></script> before aimeat-charts -->

package/dist/public/lib/aimeat-daisyui-bridge.css

@@ -1,6 +1,10 @@
 /*
  * @file aimeat-daisyui-bridge.css
  * @description Theme-compat layer so the bundled cortex UI libraries cohere with daisyUI.
+ *   (0) Pulls in the AIMEAT daisyUI theme (aimeat-theme.css) so any app already loading this
+ *       bridge gets the house palette — coral primary, the designed dark surface ramp and
+ *       correct `-content` pairs — without editing the app. Before this, `--color-primary` was
+ *       daisyUI's indigo and every branded app hardcoded `#E8564A` by hand.
  *   (1) Maps AIMEAT theme.css variable NAMES to daisyUI 5 theme variables so libs that read
  *       --text / --bg-card / --accent / … follow a daisyUI app's `data-theme` automatically.
  *   (2) Dark-mode polish: a few cortex components hardcode LIGHT colors (no var) — alerts,
@@ -8,12 +12,30 @@
  *       theme-aware tints (`:root .aui-*` wins on specificity). No changes to the libraries.
  *   Load this AFTER the daisyUI stylesheet. Hardcoded fallbacks keep it working if daisyUI
  *   vars are absent.
+ *
+ *   NOTE on daisyUI's OWN components: they are not overridden here. With the theme loaded they
+ *   are already theme-correct, and daisyUI 5 ships the quiet variants an app usually wants —
+ *   `badge-soft`, `alert-soft`, `btn-soft`, `card-border`. Reach for those instead of a solid
+ *   `badge-warning`, which is a loud block of amber on a dark page even when it is legible.
  * @usage  <link href="/lib/daisyui@5.css" rel="stylesheet" />
  *         <link href="/lib/aimeat-daisyui-bridge.css" rel="stylesheet" />
  * @version-history
- *   v1.0.0 — 2026-06-26 — Initial bridge (cortex libs follow daisyUI theme).
+ *   v1.3.0 — 2026-07-25 — FIX the --border collision: the bridge mapped --border to a COLOUR at
+ *     :root for the aui-* cortex components, while daisyUI 5 uses the same name as a border WIDTH
+ *     inside calc() on nearly every component — the invalid calc collapsed badge/input paddings to
+ *     0 and toggles to slivers on every bridge-loading page since v1.0.0. The colour mapping is now
+ *     scoped to aui-* elements, with a --border-w restore for daisyUI components nested inside.
+ *   v1.2.0 — 2026-07-25 — @import the AIMEAT daisyUI theme, so the house palette reaches every
+ *     app that already loads the bridge. Contrast + surface ramp verified by
+ *     `pnpm check:theme` (tools/theme-contrast.ts).
  *   v1.1.0 — 2026-06-26 — Map --bg-surface-dim (table zebra) + theme-aware alert/badge tints.
+ *   v1.0.0 — 2026-06-26 — Initial bridge (cortex libs follow daisyUI theme).
  */
+
+/* MUST be the first rule: @import is only valid ahead of ordinary rules. Same-origin, cached
+   alongside this file, and a no-op duplicate when the app also links the theme directly. */
+@import url('/lib/aimeat-theme.css');
+
 :root {
   --text:           var(--color-base-content, #1A1A2E);
   --text-dim:       color-mix(in oklab, var(--color-base-content, #6B7280) 70%, transparent);
@@ -24,7 +46,6 @@
   --bg-surface-dim: color-mix(in oklab, var(--color-base-content, #111827) 5%, var(--color-base-100, #ffffff));
   --bg-dim:         var(--color-base-200, #f3f4f6);
   --surface:        var(--color-base-200, #f3f4f6);
-  --border:         var(--color-base-300, #e5e7eb);
   --accent:         var(--color-primary, #e8564a);
   --blue:           var(--color-info, #3b82f6);
   --danger:         var(--color-error, #ef4444);
@@ -33,6 +54,22 @@
   --warning:        var(--color-warning, #f59e0b);
 }
 
+/* ── The --border name collision, fixed. The cortex `aui-*` components read `var(--border)` as a
+      border COLOUR; daisyUI 5 reads the same name as a border WIDTH in calc() maths on nearly every
+      component (`padding-inline: calc(var(--size)/2 - var(--border))` on .badge, toggle geometry,
+      input paddings…). Mapping the colour at :root (bridge v1.0.0–v1.2.0) made those calcs invalid
+      at computed-value time, so paddings collapsed to 0 and toggles rendered as slivers on EVERY
+      page that loaded this bridge. The colour is now scoped to elements that actually carry an
+      aui-* class, and daisyUI components nested inside an aui container get the palette's width
+      back via --border-w (declared per theme block in aimeat-theme.css). ── */
+[class^='aui-'], [class*=' aui-'] {
+  --border: var(--color-base-300, #e5e7eb);
+}
+[class^='aui-'] :where(.btn, .badge, .toggle, .checkbox, .radio, .input, .select, .textarea, .file-input, .range, .tab, .tabs, .card, .alert, .table, .kbd, .status, .divider, .menu, .modal-box, .stats, .progress),
+[class*=' aui-'] :where(.btn, .badge, .toggle, .checkbox, .radio, .input, .select, .textarea, .file-input, .range, .tab, .tabs, .card, .alert, .table, .kbd, .status, .divider, .menu, .modal-box, .stats, .progress) {
+  --border: var(--border-w, 1px);
+}
+
 /* ── Dark-mode polish: override the cortex libs' hardcoded light colors with theme-aware
       tints. `:root .aui-*` (specificity 0,1,1) beats the libs' `.aui-*` (0,1,0) regardless
       of stylesheet order. Tint = subtle wash of the semantic colour over the card bg; text

package/dist/public/lib/aimeat-theme.css

@@ -0,0 +1,538 @@
+/*
+ * @file aimeat-theme.css
+ * @description THE AIMEAT theme system — five designed palettes, each defining BOTH light and
+ *   dark, expressed as daisyUI 5 theme variables so a published app gets a finished look without
+ *   hardcoding a single hex value. Two orthogonal axes (the model proven by aimeat-tdr-cortex):
+ *
+ *     data-theme="light" | "dark"       MODE  — the user's light/dark choice ('aimeat-theme' key)
+ *     data-palette="paper" | ...        PALETTE — which designed look ('aimeat-palette' key;
+ *                                       absent = the default AIMEAT coral palette)
+ *
+ *   Palettes (each with a personality beyond colour — its own display face, radii and border
+ *   weight; body text is Inter everywhere so content stays quiet and legible):
+ *     aimeat    coral + slate steel, Inter, crisp 6px controls   (the house default)
+ *     paper     warm editorial: cream/ink, bordeaux, Fraunces serif display
+ *     circuit   cold technical: steel/blueprint, cyan, JetBrains Mono display
+ *     contrast  high-contrast accessible: black/white, 2px borders, every pair >= 4.5:1
+ *     mist      quiet neutral: low-chroma sage/grey, soft 20px radii
+ *
+ *   Every colour pair is verified by `pnpm check:theme` (tools/theme-contrast.ts), which parses
+ *   the `@theme-block` markers below and holds each block to: -content pairs (4.5:1, or 3:1 when
+ *   marked large/bold-UI-only), body text 4.5:1 on page AND card, the card-boundary step + edge,
+ *   primary >= 3:1 against page and card (WCAG 1.4.11 — a button must be discernible), and the
+ *   accuracy of every ratio claimed in a comment. Do not edit a colour without re-running it.
+ *
+ *   ELEVATION DIRECTION — deliberately inverted vs daisyUI: base-200 (card) is ELEVATED above
+ *   base-100 (page) in both modes. base-300 is the strongest separation — borders and dividers.
+ *
+ *   FONTS are self-hosted at /lib/fonts/ (SIL OFL 1.1, latin + latin-ext so ä/ö render) and
+ *   lazy-load per family: a page only downloads the faces its palette actually uses.
+ * @structure @font-face (Inter, Space Grotesk, Fraunces, JetBrains Mono) · shared tokens
+ *   (type scale, motion, spacing) · per-mode elevation · 5 palettes x 2 modes (each tagged
+ *   `@theme-block <palette> <mode>` for the verifier) · typography application rules
+ * @usage  <link href="/lib/daisyui@5.css" rel="stylesheet" />
+ *         <link href="/lib/aimeat-theme.css" rel="stylesheet" />        <-- after daisyUI
+ *         <link href="/lib/aimeat-daisyui-bridge.css" rel="stylesheet" />
+ *   The bridge @imports this file, so an app that already loads the bridge gets it with no edit.
+ *   Deliberately UNLAYERED: daisyUI declares its themes inside `@layer base`, and any unlayered
+ *   rule beats every layered one regardless of order or specificity.
+ * @version-history
+ *   v2.1.0 — 2026-07-25 — Owner review round: the default (and mist) display face is Inter — the
+ *     geometric Space Grotesk read wrong in the hero sizes (the faces stay vendored for apps);
+ *     aimeat secondary is slate steel #45637A/#9AB8D0 (full 4.5:1+ pairs) instead of the purple;
+ *     aimeat controls take circuit's crisper shape (field 6px, selector 4px); every block declares
+ *     --border-w, the width mirror the bridge uses to undo its aui --border colour scoping.
+ *   v2.0.0 — 2026-07-25 — The theme SYSTEM: data-palette axis (paper/circuit/contrast/mist next
+ *     to the aimeat default), per-palette display faces (self-hosted OFL fonts), elevation/motion/
+ *     type-scale tokens, and typography application (body=Inter, headings=palette display face).
+ *     Additive: the default palette's colour values are unchanged from v1.0.0.
+ *   v1.0.0 — 2026-07-25 — Initial AIMEAT daisyUI theme (single coral palette, light + dark).
+ */
+
+/* ── SELF-HOSTED FACES (/lib/fonts/, SIL OFL 1.1 — see /lib/fonts/LICENSE.md) ──
+   Variable fonts, latin + latin-ext subsets. Browsers fetch a face only when a rendered
+   element actually uses it, so unused palettes cost nothing. */
+@font-face {
+  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
+  src: url('/lib/fonts/inter-var-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
+  src: url('/lib/fonts/inter-var-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
+  src: url('/lib/fonts/space-grotesk-var-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
+  src: url('/lib/fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
+  src: url('/lib/fonts/fraunces-var-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
+  src: url('/lib/fonts/fraunces-var-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
+  src: url('/lib/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
+  src: url('/lib/fonts/jetbrains-mono-var-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* ── SHARED TOKENS (palette-independent) ─────────────────────────────────────
+   Type scale: a real hierarchy an app can lean on instead of inventing sizes.
+   Motion: durations + easings for the cortex libs and app transitions.
+   Spacing rhythm: gaps that make unrelated apps read as one product. */
+:root {
+  --text-hero: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);  /* the one biggest thing on the page */
+  --text-title: 1.375rem;                               /* section/card titles */
+  --text-body: 0.9375rem;                               /* default reading size (15px) */
+  --text-fine: 0.8125rem;                               /* captions/meta — never smaller (13px) */
+
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --motion-slow: 320ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
+  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
+
+  --gap-card: 1rem;        /* inside a card */
+  --gap-section: 1.5rem;   /* between cards/sections */
+}
+
+/* ── ELEVATION (follows MODE, not palette) ───────────────────────────────────
+   Three steps: card (resting), raise (hover/dragging), pop (menus/dialogs). Dark shadows in
+   both modes — light-on-dark "glow" shadows read as smears. */
+:root,
+[data-theme='light'] {
+  --elev-card: 0 1px 2px rgb(15 18 25 / 0.06), 0 4px 14px rgb(15 18 25 / 0.05);
+  --elev-raise: 0 2px 4px rgb(15 18 25 / 0.08), 0 10px 24px rgb(15 18 25 / 0.09);
+  --elev-pop: 0 4px 10px rgb(15 18 25 / 0.10), 0 18px 44px rgb(15 18 25 / 0.16);
+}
+[data-theme='dark'] {
+  --elev-card: 0 1px 2px rgb(0 0 0 / 0.45), 0 5px 16px rgb(0 0 0 / 0.30);
+  --elev-raise: 0 2px 5px rgb(0 0 0 / 0.50), 0 12px 28px rgb(0 0 0 / 0.38);
+  --elev-pop: 0 5px 12px rgb(0 0 0 / 0.55), 0 22px 52px rgb(0 0 0 / 0.48);
+}
+
+/* ═══ PALETTE: aimeat (default — coral + slate, Space Grotesk display) ═══════ */
+
+/* @theme-block aimeat light */
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+
+  /* Surfaces. base-100 = page AND the default form-control fill, base-200 = card (elevated),
+     base-300 = wells + borders. The page must be a real step off a white card, or cards and the
+     inputs daisyUI fills with base-100 vanish (the v1.0.0 lesson — see check:theme). */
+  --color-base-100: #efeee8;
+  --color-base-200: #ffffff;
+  --color-base-300: #d9dbe1;
+  --color-base-content: #1a1a2e;              /* 14.7:1 on base-100, 17.1:1 on base-200 */
+
+  /* Brand. Coral is the AIMEAT heart. */
+  --color-primary: #e8564a;
+  --color-primary-content: #ffffff;           /* 3.6:1 — large/bold UI text only, per the SPA */
+  --color-secondary: #45637a;
+  --color-secondary-content: #ffffff;         /* 6.3:1 */
+  --color-accent: #06b6d4;
+  --color-accent-content: #06253a;            /* 6.5:1 — teal needs DARK content; white is 2.4:1 */
+  --color-neutral: #1a1a2e;
+  --color-neutral-content: #ffffff;           /* 17.1:1 */
+
+  /* Semantic. */
+  --color-info: #3b82f6;
+  --color-info-content: #ffffff;              /* 3.7:1 — large/bold UI text only */
+  --color-success: #10b981;
+  --color-success-content: #05271c;           /* 6.3:1 — green is LIGHT; white fails at 2.5:1 */
+  --color-warning: #f59e0b;
+  --color-warning-content: #1a1a2e;           /* 7.9:1 — amber is LIGHT; white fails at 2.2:1 */
+  --color-error: #ef4444;
+  --color-error-content: #ffffff;             /* 3.8:1 — large/bold UI text only */
+
+  /* Shape + type. AIMEAT is generous on boxes, tighter on controls, flat + shadow. */
+  --radius-box: 16px;
+  --radius-field: 6px;
+  --radius-selector: 4px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: -0.01em;
+}
+
+/* @theme-block aimeat dark */
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  /* The designed dark ramp: real separation between page, card and edge. */
+  --color-base-100: #14151a;
+  --color-base-200: #21232e;
+  --color-base-300: #383c46;
+  --color-base-content: #edeef2;              /* 15.7:1 on base-100, 13.5:1 on base-200 */
+
+  /* Brand. Coral is brightened for dark surfaces — the brand stays coral, the contrast holds. */
+  --color-primary: #ff6f62;                   /* 6.7:1 as text/icon on base-100 */
+  --color-primary-content: #14151a;           /* 6.7:1 — white on this coral FAILS at 2.7:1 */
+  --color-secondary: #9ab8d0;
+  --color-secondary-content: #14151a;         /* 8.8:1 */
+  --color-accent: #22d3ee;
+  --color-accent-content: #06253a;            /* 8.7:1 */
+  --color-neutral: #23262f;
+  --color-neutral-content: #edeef2;           /* 13.0:1 */
+
+  /* Semantic — brightened so they read as light-on-dark, with dark content on every fill. */
+  --color-info: #60a5fa;
+  --color-info-content: #0b1b33;              /* 6.8:1 */
+  --color-success: #34d399;
+  --color-success-content: #05271c;           /* 8.3:1 */
+  --color-warning: #fbbf24;
+  --color-warning-content: #1a1a2e;           /* 10.2:1 */
+  --color-error: #f87171;
+  --color-error-content: #2a0a0a;             /* 6.6:1 */
+
+  --radius-box: 16px;
+  --radius-field: 6px;
+  --radius-selector: 4px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: -0.01em;
+}
+
+/* ═══ PALETTE: paper (warm editorial — cream/ink, bordeaux, Fraunces display) ═
+   The `html[data-palette]` prefix outranks the base blocks (0,1,1 vs 0,1,0), and the
+   palette-dark block outranks palette-light (0,2,1) — so the cascade is decided by
+   specificity, never by source order. Every block is COMPLETE: all tokens, both modes. */
+
+/* @theme-block paper light */
+html[data-palette='paper'] {
+  color-scheme: light;
+  --color-base-100: #eae2cf;
+  --color-base-200: #fdfaf1;
+  --color-base-300: #d2c6aa;
+  --color-base-content: #26201a;              /* 12.5:1 on base-100, 15.4:1 on base-200 */
+  --color-primary: #a03040;
+  --color-primary-content: #ffffff;           /* 7.0:1 */
+  --color-secondary: #7d5a3c;
+  --color-secondary-content: #ffffff;         /* 6.2:1 */
+  --color-accent: #3f6e58;
+  --color-accent-content: #ffffff;            /* 5.9:1 */
+  --color-neutral: #26201a;
+  --color-neutral-content: #f7f2e8;           /* 14.4:1 */
+  --color-info: #2f6da8;
+  --color-info-content: #ffffff;              /* 5.4:1 */
+  --color-success: #2f7d4f;
+  --color-success-content: #ffffff;           /* 5.0:1 */
+  --color-warning: #b9770a;
+  --color-warning-content: #26140a;           /* 4.8:1 */
+  --color-error: #b03028;
+  --color-error-content: #ffffff;             /* 6.4:1 */
+  --radius-box: 10px;
+  --radius-field: 8px;
+  --radius-selector: 4px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: 0;
+}
+
+/* @theme-block paper dark */
+html[data-palette='paper'][data-theme='dark'] {
+  color-scheme: dark;
+  --color-base-100: #151110;
+  --color-base-200: #282017;
+  --color-base-300: #453b2d;
+  --color-base-content: #ece4d4;              /* 14.8:1 on base-100, 12.7:1 on base-200 */
+  --color-primary: #e08590;
+  --color-primary-content: #2a0e14;           /* 6.8:1 */
+  --color-secondary: #c9a06a;
+  --color-secondary-content: #241708;         /* 7.3:1 */
+  --color-accent: #86c2a5;
+  --color-accent-content: #0c2a1c;            /* 7.5:1 */
+  --color-neutral: #241e18;
+  --color-neutral-content: #ece4d4;           /* 13.0:1 */
+  --color-info: #7fb3e3;
+  --color-info-content: #0d2135;              /* 7.4:1 */
+  --color-success: #7fce9f;
+  --color-success-content: #0b2a18;           /* 8.3:1 */
+  --color-warning: #e6b45a;
+  --color-warning-content: #2a1d05;           /* 8.7:1 */
+  --color-error: #ee8f85;
+  --color-error-content: #2c0d0a;             /* 7.6:1 */
+  --radius-box: 10px;
+  --radius-field: 8px;
+  --radius-selector: 4px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: 0;
+}
+
+/* ═══ PALETTE: circuit (cold technical — steel/blueprint, cyan, mono display) ═ */
+
+/* @theme-block circuit light */
+html[data-palette='circuit'] {
+  color-scheme: light;
+  --color-base-100: #e9edf1;
+  --color-base-200: #ffffff;
+  --color-base-300: #c3cdd8;
+  --color-base-content: #10181f;              /* 15.2:1 on base-100, 17.9:1 on base-200 */
+  --color-primary: #0e7290;
+  --color-primary-content: #ffffff;           /* 5.5:1 */
+  --color-secondary: #47566b;
+  --color-secondary-content: #ffffff;         /* 7.5:1 */
+  --color-accent: #9a5b00;
+  --color-accent-content: #ffffff;            /* 5.4:1 */
+  --color-neutral: #10181f;
+  --color-neutral-content: #e9edf1;           /* 15.2:1 */
+  --color-info: #2563eb;
+  --color-info-content: #ffffff;              /* 5.2:1 */
+  --color-success: #177245;
+  --color-success-content: #ffffff;           /* 6.0:1 */
+  --color-warning: #a16207;
+  --color-warning-content: #ffffff;           /* 4.9:1 */
+  --color-error: #c62828;
+  --color-error-content: #ffffff;             /* 5.6:1 */
+  --radius-box: 8px;
+  --radius-field: 6px;
+  --radius-selector: 3px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: -0.02em;
+}
+
+/* @theme-block circuit dark */
+html[data-palette='circuit'][data-theme='dark'] {
+  color-scheme: dark;
+  --color-base-100: #0a0f14;
+  --color-base-200: #18202b;
+  --color-base-300: #31404f;
+  --color-base-content: #d9e4ee;              /* 14.9:1 on base-100, 12.7:1 on base-200 */
+  --color-primary: #4fd2f2;
+  --color-primary-content: #062a35;           /* 8.5:1 */
+  --color-secondary: #93a7c0;
+  --color-secondary-content: #101823;         /* 7.2:1 */
+  --color-accent: #ffb454;
+  --color-accent-content: #2a1a02;            /* 9.5:1 */
+  --color-neutral: #151c25;
+  --color-neutral-content: #d9e4ee;           /* 13.3:1 */
+  --color-info: #74a9f7;
+  --color-info-content: #0c1b33;              /* 7.2:1 */
+  --color-success: #56d493;
+  --color-success-content: #06281a;           /* 8.5:1 */
+  --color-warning: #f2c14e;
+  --color-warning-content: #271d04;           /* 9.9:1 */
+  --color-error: #f28b82;
+  --color-error-content: #2b0d09;             /* 7.6:1 */
+  --radius-box: 8px;
+  --radius-field: 6px;
+  --radius-selector: 3px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: -0.02em;
+}
+
+/* ═══ PALETTE: contrast (high-contrast accessible — black/white, 2px borders) ═
+   Every -content pair >= 4.5:1 in both modes; edges are BOLD (>= 2.8:1 against both
+   neighbours) so boundaries survive low-vision and bright-sunlight conditions. */
+
+/* @theme-block contrast light */
+html[data-palette='contrast'] {
+  color-scheme: light;
+  --color-base-100: #e9e9e9;
+  --color-base-200: #ffffff;
+  --color-base-300: #8a8a8a;
+  --color-base-content: #000000;              /* 17.3:1 on base-100, 21.0:1 on base-200 */
+  --color-primary: #1d4ed8;
+  --color-primary-content: #ffffff;           /* 6.7:1 */
+  --color-secondary: #6d28d9;
+  --color-secondary-content: #ffffff;         /* 7.1:1 */
+  --color-accent: #0e7490;
+  --color-accent-content: #ffffff;            /* 5.4:1 */
+  --color-neutral: #000000;
+  --color-neutral-content: #ffffff;           /* 21.0:1 */
+  --color-info: #1e5fa8;
+  --color-info-content: #ffffff;              /* 6.4:1 */
+  --color-success: #15803d;
+  --color-success-content: #ffffff;           /* 5.0:1 */
+  --color-warning: #ffd60a;
+  --color-warning-content: #241a00;           /* 12.2:1 */
+  --color-error: #b91c1c;
+  --color-error-content: #ffffff;             /* 6.5:1 */
+  --radius-box: 12px;
+  --radius-field: 8px;
+  --radius-selector: 4px;
+  --border: 2px;
+  --border-w: 2px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: -0.01em;
+}
+
+/* @theme-block contrast dark */
+html[data-palette='contrast'][data-theme='dark'] {
+  color-scheme: dark;
+  --color-base-100: #000000;
+  --color-base-200: #17171c;
+  --color-base-300: #62626c;
+  --color-base-content: #ffffff;              /* 21.0:1 on base-100, 17.9:1 on base-200 */
+  --color-primary: #99c2ff;
+  --color-primary-content: #001433;           /* 10.0:1 */
+  --color-secondary: #cdb1ff;
+  --color-secondary-content: #1d0a40;         /* 9.7:1 */
+  --color-accent: #6fe3ff;
+  --color-accent-content: #003040;            /* 9.4:1 */
+  --color-neutral: #ffffff;
+  --color-neutral-content: #000000;           /* 21.0:1 */
+  --color-info: #8ab8ff;
+  --color-info-content: #001b3d;              /* 8.5:1 */
+  --color-success: #6fe3a1;
+  --color-success-content: #00250f;           /* 10.4:1 */
+  --color-warning: #ffd60a;
+  --color-warning-content: #241a00;           /* 12.2:1 */
+  --color-error: #ff9d94;
+  --color-error-content: #300500;             /* 9.2:1 */
+  --radius-box: 12px;
+  --radius-field: 8px;
+  --radius-selector: 4px;
+  --border: 2px;
+  --border-w: 2px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: -0.01em;
+}
+
+/* ═══ PALETTE: mist (quiet neutral — low-chroma sage/grey, soft radii) ═══════ */
+
+/* @theme-block mist light */
+html[data-palette='mist'] {
+  color-scheme: light;
+  --color-base-100: #e6eae4;
+  --color-base-200: #fbfcfa;
+  --color-base-300: #c6cec4;
+  --color-base-content: #2b322d;              /* 10.8:1 on base-100, 12.8:1 on base-200 */
+  --color-primary: #47695a;
+  --color-primary-content: #ffffff;           /* 6.1:1 */
+  --color-secondary: #5c6470;
+  --color-secondary-content: #ffffff;         /* 6.0:1 */
+  --color-accent: #7a6455;
+  --color-accent-content: #ffffff;            /* 5.6:1 */
+  --color-neutral: #2b322d;
+  --color-neutral-content: #f4f6f3;           /* 12.1:1 */
+  --color-info: #4a7196;
+  --color-info-content: #ffffff;              /* 5.1:1 */
+  --color-success: #4d7d5f;
+  --color-success-content: #ffffff;           /* 4.8:1 */
+  --color-warning: #8a6d2f;
+  --color-warning-content: #ffffff;           /* 4.9:1 */
+  --color-error: #9c4f47;
+  --color-error-content: #ffffff;             /* 5.8:1 */
+  --radius-box: 20px;
+  --radius-field: 12px;
+  --radius-selector: 8px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: 0;
+}
+
+/* @theme-block mist dark */
+html[data-palette='mist'][data-theme='dark'] {
+  color-scheme: dark;
+  --color-base-100: #141715;
+  --color-base-200: #252b27;
+  --color-base-300: #414a44;
+  --color-base-content: #e2e6e2;              /* 14.3:1 on base-100, 11.5:1 on base-200 */
+  --color-primary: #9cc0ae;
+  --color-primary-content: #10241a;           /* 8.2:1 */
+  --color-secondary: #aeb6c0;
+  --color-secondary-content: #171b20;         /* 8.4:1 */
+  --color-accent: #c2ab97;
+  --color-accent-content: #241a0e;            /* 7.8:1 */
+  --color-neutral: #212523;
+  --color-neutral-content: #e2e6e2;           /* 12.3:1 */
+  --color-info: #93b3d1;
+  --color-info-content: #101f2e;              /* 7.6:1 */
+  --color-success: #97c6a6;
+  --color-success-content: #10241a;           /* 8.5:1 */
+  --color-warning: #d3b878;
+  --color-warning-content: #241c08;           /* 8.8:1 */
+  --color-error: #d49a92;
+  --color-error-content: #2a100c;             /* 7.5:1 */
+  --radius-box: 20px;
+  --radius-field: 12px;
+  --radius-selector: 8px;
+  --border: 1px;
+  --border-w: 1px;
+  --depth: 0;
+  --noise: 0;
+  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+  --display-tracking: 0;
+}
+
+/* ── TYPOGRAPHY APPLICATION ──────────────────────────────────────────────────
+   Font FAMILY only — never size or weight, which stay with the app's utility classes
+   (an unlayered `h1 { font-weight }` would silently override every `font-bold`).
+   Body text is the palette's body face; headings + .card-title get the display face,
+   which is where a palette's personality lives; code gets the mono face. */
+body {
+  font-family: var(--font-body, 'Inter', 'Segoe UI', system-ui, sans-serif);
+}
+h1, h2, h3, h4, h5, h6, .card-title {
+  font-family: var(--font-display, 'Inter', 'Segoe UI', system-ui, sans-serif);
+  letter-spacing: var(--display-tracking, 0);
+}
+code, pre, kbd, samp {
+  font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace);
+}