machinaos 0.0.76 → 0.0.78

package/client/src/themes/renaissance.css

@@ -0,0 +1,727 @@
+/* ============================================================================
+ * themes/renaissance.css — illuminated codex / Florentine workshop manuscript.
+ *
+ * Defines the full new-contract token block AND overrides the shadcn
+ * HSL-triplet tokens so existing Tailwind utilities (bg-card, text-muted-
+ * foreground, bg-action-save-soft, etc.) retint correctly without any
+ * component changes.
+ *
+ * Palette: vellum cream (#fbf3dc), ink brown (#5a3a14), gold leaf
+ * (#d4a030), crimson seal (#8a1410). HSL triplets are conversions of
+ * the same hex values.
+ *
+ * Decorative layers (vellum noise, fleur-de-lis, marginalia, gilded
+ * corner ornaments) are deferred to Phase 3 fan-out — they target
+ * `.app-frame`, `.canvas`, `.sidebar` etc. which don't exist as
+ * dedicated React component classes today.
+ *
+ * Source: design_handoff_machinaos_themes/themes/renaissance.css.
+ * ============================================================================ */
+
+:root[data-theme="renaissance"] {
+  /* ── New contract — full colour values ────────────────────────────── */
+
+  /* Surfaces */
+  --bg-app: #f3e8c8;
+  --bg-panel: #ead09a;
+  --bg-canvas: #e8d4a0;
+  --bg-elevated: #fbf3dc;
+  --bg-input: #fbf3dc;
+  --bg-hover: rgba(138, 94, 28, 0.10);
+  --bg-active: rgba(212, 160, 48, 0.20);
+  --bg-overlay: rgba(58, 32, 8, 0.55);
+
+  /* Borders */
+  --border-default: #8a5e1c;
+  --border-strong: #5a3a14;
+  --border-focus: #4a8230;
+  --ornament-frame: inset 0 0 0 2px #8a5e1c, inset 0 0 0 6px #d4a030, inset 0 0 0 8px #5a3a14;
+
+  /* Foreground */
+  --fg-default: #3a2008;
+  --fg-muted: #6a4a1c;
+  --fg-faint: #8a6a3c;
+  --fg-on-accent: #fbf3dc;
+  --fg-on-success: #fbf3dc;
+  --fg-on-danger: #fbf3dc;
+  --fg-on-warning: #3a2008;
+
+  /* Theme-specific accents (used by decorative layers; safe to read in
+   * components migrated to the new contract) */
+  --gold: #d4a030;
+  --gold-bright: #f0c850;
+  --crimson: #8a1410;
+  /* Wave 30.2: ultramarine ("lapis lazuli") — historically the most
+   * prestigious Renaissance pigment, used in illuminated manuscripts +
+   * Marian iconography. Hue 230° sits ~180° opposite the warm vellum
+   * canvas (#e8d4a0, hue 45°) so it reads luminously against cream. */
+  --lapis: #2548c8;
+  --lapis-bright: #4a72e8;
+
+  /* Type — Cinzel display + Cormorant body + IM Fell English mono */
+  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
+  --font-body: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
+  --font-mono: 'IM Fell English', 'Courier Prime', monospace;
+  --type-scale-base: 15px;
+  --type-tracking-display: 0.10em;
+  --type-uppercase: uppercase;
+
+  /* Geometry — slim radii (parchment + wax-pressed feel) */
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-pill: 12px;
+
+  /* Motion — slow, weighted */
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasis: cubic-bezier(0.7, -0.1, 0.3, 1.2);
+  --dur-fast: 140ms;
+  --dur-default: 280ms;
+  --dur-slow: 520ms;
+  --motion-style: organic;
+  --sound-pack: parchment;
+
+  /* Wave 30.2: ultramarine pulse — maximum hue contrast (180° opposite)
+   * against warm vellum. Earlier gold + crimson attempts were either
+   * too similar to the cream background (gold) or too dark to read as
+   * luminous glow (crimson). Lapis ultramarine sits cool against warm
+   * vellum and reads as a Marian-blue halo, the canonical "this thing
+   * is sacred / important" signal in Renaissance iconography. */
+  --node-pulse-color: var(--lapis-bright);
+
+  /* Cursor — quill pen with gold-leaf nib (upstream design handoff) */
+  --cursor-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M3 25 L10 17 L13 20 L6 27 Z' fill='%235a3a14'/><path d='M10 17 L20 5 L24 9 L13 20 Z' fill='%23d4a030' stroke='%235a3a14' stroke-width='1'/><path d='M14 9 L18 13 M12 11 L16 15 M10 13 L14 17' stroke='%235a3a14' stroke-width='0.5' fill='none'/></svg>") 3 25, auto;
+  --cursor-pointer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M5 5 L20 12 L13 14 L11 22 Z' fill='%23d4a030' stroke='%235a3a14' stroke-width='1.5'/></svg>") 5 5, pointer;
+
+  /* Canvas backplane — faint cartography ornament (fleur-de-lis on
+   * 80x80 tile, light gold ink) */
+  --canvas-grid:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%238a5e1c' stroke-width='0.4' opacity='0.35'><path d='M40 22 Q35 32, 30 32 Q26 32, 28 28 Q32 26, 40 28 Q48 26, 52 28 Q54 32, 50 32 Q45 32, 40 22 Z'/><path d='M40 28 L40 40 M36 36 L44 36'/><circle cx='40' cy='42' r='2'/></g></svg>");
+  --canvas-grid-opacity: 1;
+
+  --scrollbar-track: #e8d09a;
+  --scrollbar-thumb: #8a5e1c;
+
+  /* ── Shadcn HSL-triplet bridge ─────────────────────────────────────
+   * Same colours as the new contract above, expressed as HSL triplets
+   * so Tailwind utilities like bg-card/50 (alpha composition) keep
+   * working. */
+
+  --background: 40 65% 87%;            /* #f3e8c8 */
+  --foreground: 28 76% 13%;            /* #3a2008 */
+  --card: 41 79% 92%;                  /* #fbf3dc */
+  --card-foreground: 28 76% 13%;
+  --popover: 41 79% 92%;
+  --popover-foreground: 28 76% 13%;
+
+  --primary: 32 53% 48%;               /* #b8893c gold accent */
+  --primary-foreground: 41 79% 92%;
+  --secondary: 38 65% 76%;             /* #ead09a panel */
+  --secondary-foreground: 28 76% 13%;
+  --muted: 38 65% 76%;
+  --muted-foreground: 33 60% 26%;      /* #6a4a1c */
+  --accent: 41 65% 51%;                /* #d4a030 gold leaf */
+  --accent-foreground: 28 76% 13%;
+
+  --destructive: 2 79% 30%;            /* #8a1410 crimson */
+  --destructive-foreground: 41 79% 92%;
+  --success: 78 63% 25%;               /* #4a6818 olive */
+  --warning: 35 71% 44%;               /* #c08020 amber */
+  --info: 211 56% 23%;                 /* #1a3a5a navy */
+
+  --border: 33 66% 33%;                /* #8a5e1c */
+  --input: 33 66% 33%;
+  --ring: 41 65% 51%;                  /* gold focus */
+
+  /* Action role tokens — re-derived from Renaissance semantic palette.
+   * Keep the soft / hover / border alpha pattern so ActionButton still
+   * works without any code change. */
+  --action-run: 78 63% 25%;            /* olive (success) */
+  --action-run-soft: 78 63% 25% / 0.18;
+  --action-run-hover: 78 63% 25% / 0.30;
+  --action-run-border: 78 63% 25% / 0.6;
+
+  --action-stop: 2 79% 30%;            /* crimson (destructive) */
+  --action-stop-soft: 2 79% 30% / 0.15;
+  --action-stop-hover: 2 79% 30% / 0.25;
+  --action-stop-border: 2 79% 30% / 0.6;
+
+  --action-save: 41 65% 51%;           /* gold leaf (primary action) */
+  --action-save-soft: 41 65% 51% / 0.20;
+  --action-save-hover: 41 65% 51% / 0.35;
+  --action-save-border: 32 53% 48% / 0.7;
+
+  --action-config: 35 71% 44%;         /* amber (warning) */
+  --action-config-soft: 35 71% 44% / 0.18;
+  --action-config-hover: 35 71% 44% / 0.30;
+  --action-config-border: 35 71% 44% / 0.6;
+
+  --action-secret: 211 56% 23%;        /* navy (info / secret) */
+  --action-secret-soft: 211 56% 23% / 0.15;
+  --action-secret-hover: 211 56% 23% / 0.25;
+  --action-secret-border: 211 56% 23% / 0.6;
+
+  --action-tools: 32 53% 48%;          /* gold accent */
+  --action-tools-soft: 32 53% 48% / 0.18;
+  --action-tools-hover: 32 53% 48% / 0.30;
+  --action-tools-border: 32 53% 48% / 0.6;
+
+  /* Tint utilities — slightly stronger on parchment so brand-coloured
+   * surfaces (provider icons, skill colours) stay legible. */
+  --tint-soft: 14%;
+  --tint-border: 35%;
+}
+
+/* ── Body parchment background ─────────────────────────────────────────
+ * The handoff layers radial gradients + an SVG noise texture on body.
+ * Safe to apply since `body` is theme-agnostic. */
+
+:root[data-theme="renaissance"] body {
+  background:
+    radial-gradient(ellipse at 15% 25%, rgba(138, 70, 20, 0.12), transparent 35%),
+    radial-gradient(ellipse at 85% 75%, rgba(180, 100, 30, 0.10), transparent 40%),
+    radial-gradient(circle at 70% 20%, rgba(90, 50, 18, 0.08), transparent 25%),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.05 0 0 0 0.10 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"),
+    var(--bg-app);
+}
+
+/* ::selection — gold leaf highlight */
+:root[data-theme="renaissance"] ::selection {
+  background: rgba(212, 160, 48, 0.5);
+  color: #3a2008;
+}
+
+/* Gilded scrollbars — gold thumb on cream track with carved inset rule */
+:root[data-theme="renaissance"] ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+:root[data-theme="renaissance"] ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+:root[data-theme="renaissance"] ::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: var(--radius-sm, 2px);
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+}
+:root[data-theme="renaissance"] ::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--scrollbar-thumb) 80%, white);
+}
+
+/* ── Per-component decorations (Wave 16 port from handoff) ─── */
+
+/* Floating illuminated initial as ambient ornament */
+@keyframes ren-flicker {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.8; }
+}
+
+/* ─── ILLUMINATED FRAME with gilded corners ─── */
+:root[data-theme="renaissance"] .app-frame {
+  box-shadow: var(--ornament-frame), 0 0 60px rgba(90, 50, 18, 0.3) inset;
+  position: relative;
+}
+:root[data-theme="renaissance"] .app-frame::before,
+:root[data-theme="renaissance"] .app-frame::after {
+  content: ''; position: absolute; width: 36px; height: 36px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><path d='M2 2 L34 2 L34 6 L6 6 L6 34 L2 34 Z' fill='%23d4a030' stroke='%235a3a14' stroke-width='1'/><circle cx='6' cy='6' r='3' fill='%238a1410' stroke='%235a3a14' stroke-width='0.8'/><path d='M10 2 L14 2 M18 2 L22 2 M26 2 L30 2 M2 10 L2 14 M2 18 L2 22 M2 26 L2 30' stroke='%235a3a14' stroke-width='0.6'/></svg>") no-repeat;
+  pointer-events: none; z-index: 100;
+}
+:root[data-theme="renaissance"] .app-frame::before { top: 0; left: 0; }
+:root[data-theme="renaissance"] .app-frame::after { top: 0; right: 0; transform: scaleX(-1); }
+
+/* ─── PANELS get a vellum lining ─── */
+:root[data-theme="renaissance"] .toolbar,
+:root[data-theme="renaissance"] .sidebar,
+:root[data-theme="renaissance"] .palette,
+:root[data-theme="renaissance"] .chat {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
+    var(--bg-panel);
+}
+:root[data-theme="renaissance"] .toolbar { border-bottom: 2px double var(--border-strong); }
+:root[data-theme="renaissance"] .sidebar { border-right: 2px double var(--border-strong); }
+:root[data-theme="renaissance"] .palette { border-left: 2px double var(--border-strong); }
+:root[data-theme="renaissance"] .chat    { border-top: 2px double var(--border-strong); }
+
+/* ─── CANVAS — workshop floor with fleur-de-lis pattern + vignette ─── */
+:root[data-theme="renaissance"] .canvas {
+  background:
+    radial-gradient(ellipse at center, transparent 30%, rgba(90, 50, 18, 0.25) 100%),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%238a5e1c' stroke-width='0.4' opacity='0.35'><path d='M40 22 Q35 32, 30 32 Q26 32, 28 28 Q32 26, 40 28 Q48 26, 52 28 Q54 32, 50 32 Q45 32, 40 22 Z'/><path d='M40 28 L40 40 M36 36 L44 36'/><circle cx='40' cy='42' r='2'/></g></svg>"),
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.95' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.05 0 0 0 0.08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
+    var(--bg-canvas);
+}
+
+/* Marginalia — handwritten marginal note in canvas */
+:root[data-theme="renaissance"] .canvas::before {
+  content: '" Ars longa, vita brevis "';
+  position: absolute; bottom: 12px; right: 16px;
+  font-family: var(--font-mono);
+  font-style: italic;
+  font-size: 13px;
+  color: var(--border-default);
+  opacity: 0.7;
+  transform: rotate(-2deg);
+  pointer-events: none;
+  z-index: 0;
+}
+:root[data-theme="renaissance"] .canvas::after {
+  content: ''; position: absolute; top: 12px; left: 16px;
+  width: 64px; height: 64px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%238a5e1c' stroke-width='1' opacity='0.5'><circle cx='32' cy='32' r='28'/><circle cx='32' cy='32' r='22'/><path d='M32 4 L32 60 M4 32 L60 32 M11 11 L53 53 M53 11 L11 53'/><circle cx='32' cy='32' r='3' fill='%23d4a030'/></g></svg>") no-repeat center / contain;
+  pointer-events: none;
+  z-index: 0;
+}
+/* Make sure nodes/edges sit above marginalia */
+:root[data-theme="renaissance"] .canvas .node,
+:root[data-theme="renaissance"] .canvas .edge { z-index: 2; }
+
+/* Floating illuminated initial as ambient ornament */
+:root[data-theme="renaissance"] .canvas .ornament {
+  position: absolute;
+  font-family: var(--font-display);
+  color: var(--gold);
+  text-shadow: 2px 2px 0 var(--border-strong);
+  font-size: 120px;
+  font-weight: 700;
+  opacity: 0.12;
+  pointer-events: none;
+  animation: ren-flicker 6s ease-in-out infinite;
+}
+
+/* ─── BUTTONS as pressed gold foil ─── */
+:root[data-theme="renaissance"] .btn {
+  background: linear-gradient(180deg, #fbf3dc 0%, #e8c478 100%);
+  border: 1px solid var(--border-default);
+  color: var(--fg-default);
+  font-family: var(--font-display);
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  font-size: 11px; font-weight: 600;
+  padding: 7px 14px;
+  box-shadow: 0 1px 0 #fbf3dc inset, 0 -1px 0 rgba(90, 50, 18, 0.2) inset, 0 2px 0 var(--border-strong);
+  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
+}
+:root[data-theme="renaissance"] .btn:hover {
+  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
+  box-shadow: 0 1px 0 #fff inset, 0 3px 0 var(--border-strong);
+}
+:root[data-theme="renaissance"] .btn:active {
+  transform: translateY(2px);
+  box-shadow: 0 1px 0 #fff inset, 0 0 0 var(--border-strong);
+}
+
+/* ─── INPUTS — ruled-line paper ─── */
+:root[data-theme="renaissance"] .input {
+  background:
+    repeating-linear-gradient(transparent, transparent 21px, rgba(138, 94, 28, 0.18) 21px, rgba(138, 94, 28, 0.18) 22px),
+    var(--bg-input);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-body);
+  font-size: 14px;
+  color: var(--fg-default);
+  padding: 6px 10px;
+}
+:root[data-theme="renaissance"] .input:focus {
+  outline: none; background: #fff;
+  box-shadow: 0 0 0 1px var(--gold), 0 0 0 2px var(--border-strong);
+}
+
+/* ─── ROWS — ink-spread on hover ─── */
+:root[data-theme="renaissance"] .row {
+  font-family: var(--font-body);
+  font-size: 15px;
+  color: var(--fg-default);
+  padding: 6px 10px;
+  position: relative;
+  background-image: linear-gradient(90deg, var(--bg-hover), var(--bg-hover));
+  background-size: 0% 100%;
+  background-repeat: no-repeat;
+  transition: background-size var(--dur-default) var(--ease-default), color var(--dur-fast);
+}
+:root[data-theme="renaissance"] .row:hover {
+  background-size: 100% 100%;
+  color: var(--crimson);
+}
+:root[data-theme="renaissance"] .row:hover::before {
+  content: '✦'; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
+  color: var(--gold); font-size: 10px;
+}
+
+/* ─── NODES as illuminated cards with red wax ─── */
+:root[data-theme="renaissance"] .node {
+  background: var(--bg-elevated);
+  border: 1.5px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-default);
+  padding: 10px 14px;
+  box-shadow:
+    0 0 0 1px var(--gold) inset,
+    0 0 0 3px var(--bg-elevated) inset,
+    0 0 0 4px var(--border-strong) inset,
+    0 4px 0 var(--border-strong),
+    0 6px 12px rgba(58, 32, 8, 0.25);
+  position: relative;
+  transition: transform var(--dur-default) var(--ease-emphasis);
+}
+:root[data-theme="renaissance"] .node:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 0 0 1px var(--gold-bright) inset,
+    0 0 0 3px var(--bg-elevated) inset,
+    0 0 0 4px var(--border-strong) inset,
+    0 6px 0 var(--border-strong),
+    0 10px 20px rgba(58, 32, 8, 0.35);
+}
+/* Wax seal corner */
+:root[data-theme="renaissance"] .node::after {
+  content: ''; position: absolute; top: -6px; right: -6px;
+  width: 16px; height: 16px;
+  background: radial-gradient(circle at 35% 30%, #c4202a, #5a0a08);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
+}
+
+/* ─── SQUARE NODES — guild emblems ─── */
+:root[data-theme="renaissance"] .sq-node-box {
+  background: linear-gradient(180deg, var(--bg-elevated), #d4b078);
+  border: 2px solid var(--border-strong);
+  border-radius: 4px;
+  box-shadow: 0 3px 0 var(--border-strong), inset 0 0 0 1px var(--gold);
+  color: var(--crimson);
+}
+:root[data-theme="renaissance"] .sq-node.selected .sq-node-box {
+  border-color: var(--gold);
+  box-shadow: 0 0 0 3px rgba(212, 160, 48, 0.5), 0 3px 0 var(--border-strong), inset 0 0 0 1px var(--gold);
+}
+
+/* Wave 29: Renaissance executing nodes flicker like candlelight using
+ * ren-flicker (opacity pulse) — NOT the digital node-pulse. The gold
+ * border stays steady; only the ambient glow shimmers. Higher specificity
+ * than base.css's generic rule, so this wins. */
+/* Wave 30.2: dedicated executing-pulse keyframe that animates
+ * BOX-SHADOW only (the original `ren-flicker` opacity-fade
+ * washed the whole node). Pulses ultramarine (lapis lazuli)
+ * intensity at high opacity for visibility against vellum.
+ * Lapis is 180° opposite the warm cream canvas, so even at the
+ * far halo (40% opacity) it reads as a luminous Marian halo
+ * rather than blending into the background. Smooth ease-in-out
+ * preserves the candleflame-flicker quality. */
+@keyframes ren-pulse-exec {
+  0%, 100% {
+    box-shadow:
+      0 0 0 3px rgba(74, 114, 232, 0.85),
+      0 0 36px 8px rgba(74, 114, 232, 0.65),
+      0 0 72px 18px rgba(37, 72, 200, 0.40);
+  }
+  50% {
+    box-shadow:
+      0 0 0 4px rgba(74, 114, 232, 1),
+      0 0 52px 12px rgba(74, 114, 232, 0.85),
+      0 0 96px 28px rgba(37, 72, 200, 0.55);
+  }
+}
+
+:root[data-theme="renaissance"] .sq-node[data-executing] .sq-node-box,
+:root[data-theme="renaissance"] .react-flow__node.executing .sq-node-box,
+:root[data-theme="renaissance"] .react-flow__node.executing .node {
+  animation: ren-pulse-exec 2.0s ease-in-out infinite;
+  border-color: var(--lapis-bright);
+}
+:root[data-theme="renaissance"] .sq-node-pip {
+  border: 1px solid var(--border-strong);
+  box-shadow: 0 0 4px currentColor;
+}
+:root[data-theme="renaissance"] .sq-node-gear {
+  background: var(--gold);
+  color: var(--border-strong);
+  border: 1px solid var(--border-strong);
+  font-size: 10px;
+}
+:root[data-theme="renaissance"] .sq-node-handle.out { background: var(--crimson); }
+:root[data-theme="renaissance"] .sq-node-label {
+  color: var(--fg-default);
+  letter-spacing: 0.08em;
+  font-weight: 600;
+}
+
+/* ─── CATEGORY (palette) — illuminated section ─── */
+:root[data-theme="renaissance"] .cat {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: 2px;
+}
+:root[data-theme="renaissance"] .cat-head {
+  border-bottom: 1px solid var(--border-default);
+  background: linear-gradient(180deg, transparent, rgba(212, 160, 48, 0.08));
+}
+:root[data-theme="renaissance"] .cat-tile {
+  background: var(--gold);
+  border: 1px solid var(--border-strong);
+  color: var(--border-strong);
+}
+:root[data-theme="renaissance"] .cat-name {
+  font-family: var(--font-display);
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--crimson);
+}
+:root[data-theme="renaissance"] .cat-count {
+  background: var(--bg-active);
+  color: var(--fg-muted);
+  border: 1px solid var(--border-default);
+}
+
+/* ─── COMP ITEMS — entry cards ─── */
+:root[data-theme="renaissance"] .comp {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-default);
+  border-radius: 2px;
+}
+:root[data-theme="renaissance"] .comp:hover {
+  background: var(--bg-hover);
+  border-color: var(--gold);
+}
+:root[data-theme="renaissance"] .comp-ico {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  color: var(--crimson);
+}
+:root[data-theme="renaissance"] .comp-name {
+  font-family: var(--font-display);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+:root[data-theme="renaissance"] .comp-desc {
+  font-style: italic;
+  color: var(--fg-muted);
+}
+
+/* ─── MENU POP — parchment dropdown ─── */
+:root[data-theme="renaissance"] .menu-pop {
+  background: var(--bg-elevated);
+  border: 2px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--gold), 0 8px 24px rgba(58,32,8,0.4);
+}
+:root[data-theme="renaissance"] .menu-pop-item {
+  font-family: var(--font-body);
+  font-size: 13px;
+}
+:root[data-theme="renaissance"] .menu-pop-item:hover {
+  background: var(--bg-hover);
+  color: var(--crimson);
+}
+
+/* ─── SETTINGS SECTIONS ─── */
+:root[data-theme="renaissance"] .settings-section {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+}
+:root[data-theme="renaissance"] .settings-section h3 {
+  color: var(--crimson);
+  font-family: var(--font-display);
+  border-bottom: 1px solid var(--gold);
+  padding-bottom: 8px;
+  letter-spacing: 0.06em;
+}
+:root[data-theme="renaissance"] .settings-summary {
+  background: var(--bg-panel);
+  border: 1px dashed var(--border-default);
+  font-family: var(--font-mono);
+  font-style: italic;
+}
+
+/* ─── CRED CARDS ─── */
+:root[data-theme="renaissance"] .cred-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: 2px;
+}
+:root[data-theme="renaissance"] .cred-card-head {
+  background: linear-gradient(180deg, transparent, rgba(212, 160, 48, 0.10));
+  border-bottom: 1px solid var(--border-default);
+}
+:root[data-theme="renaissance"] .cred-card .name {
+  font-family: var(--font-display);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 12px;
+}
+:root[data-theme="renaissance"] .cred-tag {
+  font-family: var(--font-display);
+  letter-spacing: 0.08em;
+  font-size: 9px;
+}
+:root[data-theme="renaissance"] .cred-card-desc { font-style: italic; }
+
+/* Credential rows — sealed entries */
+:root[data-theme="renaissance"] .cred-row {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  position: relative;
+}
+:root[data-theme="renaissance"] .cred-row::before {
+  content: '✦'; color: var(--gold); margin-right: 4px;
+}
+:root[data-theme="renaissance"] .cred-row .name {
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 0.10em;
+}
+:root[data-theme="renaissance"] .cred-row .badge {
+  font-family: var(--font-display);
+  letter-spacing: 0.10em;
+  font-size: 9px;
+  padding: 3px 8px;
+}
+
+/* ─── PARAMETER PANEL COLS ─── */
+:root[data-theme="renaissance"] .param-col {
+  background: var(--bg-elevated);
+  border-right: 2px double var(--border-strong);
+}
+:root[data-theme="renaissance"] .param-col-head {
+  background: linear-gradient(180deg, transparent, rgba(212, 160, 48, 0.10));
+  border-bottom: 1px solid var(--gold);
+  font-family: var(--font-display);
+  color: var(--crimson);
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+}
+:root[data-theme="renaissance"] .json-block {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-default);
+  font-family: var(--font-mono);
+  color: var(--fg-default);
+}
+:root[data-theme="renaissance"] .json-key { color: var(--crimson); font-style: italic; }
+:root[data-theme="renaissance"] .json-str { color: hsl(var(--success)); }
+:root[data-theme="renaissance"] .json-num { color: var(--gold-bright); }
+
+/* ─── CHAT TABS ─── */
+:root[data-theme="renaissance"] .chat-tab {
+  font-family: var(--font-display);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 10px;
+}
+:root[data-theme="renaissance"] .chat-tab.active {
+  background: var(--gold);
+  color: var(--border-strong);
+}
+
+/* ─── CHAT MESSAGES — letter-style ─── */
+:root[data-theme="renaissance"] .chat-msg {
+  font-family: var(--font-body);
+  font-size: 14px;
+  border-radius: var(--radius-sm);
+}
+:root[data-theme="renaissance"] .chat-msg-user {
+  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
+  color: var(--fg-default);
+  border: 1px solid var(--border-strong);
+}
+:root[data-theme="renaissance"] .chat-msg-bot {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  position: relative;
+}
+:root[data-theme="renaissance"] .chat-msg-bot::before {
+  content: '✦'; color: var(--gold); margin-right: 6px;
+}
+
+/* ─── THEME SWITCHER chrome ─── */
+:root[data-theme="renaissance"] .theme-switcher {
+  background: linear-gradient(180deg, var(--bg-elevated), #e8c478);
+  border: 1.5px solid var(--border-strong);
+  box-shadow: 0 0 0 1px var(--gold) inset, 0 6px 16px rgba(58, 32, 8, 0.4);
+}
+
+/* ─── EMPTY STATE drop cap ─── */
+:root[data-theme="renaissance"] .empty-state .glyph {
+  font-family: var(--font-display);
+  font-size: 96px;
+  color: var(--gold);
+  text-shadow: 3px 3px 0 var(--border-strong);
+  font-weight: 700;
+}
+
+/* ─── STATUS BAR — illuminated footer rule ─── */
+:root[data-theme="renaissance"] .statusbar {
+  background: linear-gradient(180deg, var(--bg-panel), #d4b078);
+  border-top: 2px double var(--border-strong);
+  font-family: var(--font-mono);
+  color: var(--fg-muted);
+  font-style: italic;
+}
+:root[data-theme="renaissance"] .statusbar .pip {
+  background: hsl(var(--success));
+  box-shadow: 0 0 6px hsl(var(--success)), 0 0 0 1px var(--border-strong);
+}
+
+/* ─── MODAL — illuminated codex page ─── */
+:root[data-theme="renaissance"] .modal {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
+    var(--bg-elevated);
+  border: 2px solid var(--border-strong);
+  box-shadow:
+    inset 0 0 0 1px var(--gold),
+    inset 0 0 0 5px var(--bg-elevated),
+    inset 0 0 0 6px var(--gold),
+    0 30px 80px rgba(58, 32, 8, 0.6);
+  padding: 8px;
+}
+:root[data-theme="renaissance"] .modal-head {
+  border-bottom: 2px double var(--border-strong);
+  padding: 16px 20px 14px;
+}
+:root[data-theme="renaissance"] .modal-title {
+  color: var(--fg-default);
+  font-family: var(--font-display);
+}
+:root[data-theme="renaissance"] .modal-foot {
+  border-top: 2px double var(--border-strong);
+}
+:root[data-theme="renaissance"] .field label {
+  color: #8a5e1c;
+}
+
+/* ─── COMMAND PALETTE — open scroll ─── */
+:root[data-theme="renaissance"] .cmdk {
+  background:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.23 0 0 0 0 0.05 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
+    var(--bg-elevated);
+  border: 2px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--gold), 0 30px 60px rgba(58, 32, 8, 0.5);
+}
+:root[data-theme="renaissance"] .cmdk input {
+  font-family: var(--font-display);
+  font-size: 14px;
+  letter-spacing: 0.06em;
+  border-bottom: 2px double var(--border-strong);
+  background: transparent;
+  color: var(--fg-default);
+}
+:root[data-theme="renaissance"] .cmdk-item {
+  font-family: var(--font-body);
+  font-size: 14px;
+}
+:root[data-theme="renaissance"] .cmdk-item.active {
+  background: linear-gradient(90deg, transparent, var(--bg-hover), transparent);
+  color: var(--crimson);
+}
+:root[data-theme="renaissance"] .cmdk-item.active::before {
+  content: '✦'; color: var(--gold); margin-right: 6px;
+}
+:root[data-theme="renaissance"] .cmdk-item kbd {
+  background: var(--bg-active);
+  border: 1px solid var(--border-default);
+  font-family: var(--font-mono);
+}