@imagineio/configurator-sdk 0.1.0-beta.1

package/dist/styles/themes.css

@@ -0,0 +1,532 @@
+@layer sdk-base, vendor, sdk;
+@layer sdk-base {
+/* ============================================================================
+   BACKEND-SELECTABLE THEMES
+   ----------------------------------------------------------------------------
+   Applied by applyTheme() (sdk/ui/applyTheme.js) as TWO attributes on <html>:
+     data-theme       — numbered palette id (theme2, theme3, theme4, theme5, …)
+                        "theme1" is the base/default and sets NO attribute.
+     data-theme-mode  — 'dark' | 'light', derived from the id
+
+   `data-theme-mode="dark"` carries the SHARED dark skin — dark surfaces, light
+   text, and the fixes for Sidebar.css/option-card CSS that hardcode light hexes
+   (#fff, #363636, #F7F7F7) instead of tokens. Written ONCE here so every dark
+   palette (theme2, theme3, any future one) inherits white text without
+   duplication. `data-theme="<id>"` then layers accent / font / layout on top.
+   Scoped selectors out-specificity the base rules, so load order is moot.
+
+   Selected by /systems/<id>/.theme (app) or the /embed/<slug> boot payload.
+   Add a theme = add its palette block (+ its id to DARK_THEMES in applyTheme.js
+   if it's dark). No component code changes.
+   ============================================================================ */
+
+/* ========================================================================
+   RECORD BRIDGE — when a backend/embed theme RECORD is active, applyTheme sets
+   data-theme (+ --color-* tokens). Map those tokens onto the base vars the
+   DEFAULT layout (Themes 1 & 5) reads. Structural shells (theme2/3/4) read
+   --color-* directly via var(); this bridge covers the shared MainLayout path.
+   Each token falls back to the base literal so there's zero change when no record
+   is applied. Placed BEFORE the legacy preset blocks so a legacy preview like
+   `?theme=theme5` (which sets its own bg/text vars + data-theme-preset) still
+   wins; records set no color tokens on the preset path, so this only affects
+   actual records.
+   ======================================================================== */
+:root[data-theme] {
+  --bg-secondary:   var(--color-background, #f5f5f5);
+  --bg-scene:       var(--color-background, #ffffff);
+  --bg-primary:     var(--color-surface,    #ffffff);
+  --text-primary:   var(--color-foreground, #1a1a1a);
+  --text-secondary: var(--color-secondary,  #666666);
+  --text-muted:     var(--color-secondary,  #888888);
+  --border-default: var(--color-border,     #e5e5e5);
+  --color-selection: var(--color-accent,    #4a90d9);
+}
+
+/* ========================================================================
+   SHARED SURFACE OVERRIDES — reused by any theme that renders on dark
+   surfaces (currently theme2 + theme3). NOT a user-facing "dark mode"; just a
+   shared block so those themes don't each re-declare the same hardcoded-hex
+   fixes (Sidebar.css / option cards hardcode #fff/#363636/#F7F7F7). A theme
+   opts in via data-theme-mode="dark" (set by applyTheme for these ids).
+   ======================================================================== */
+:root[data-theme-preset][data-theme-mode="dark"] {
+  --bg-primary: #1e1e22;
+  --bg-secondary: #141417;
+  --bg-tertiary: #26262b;
+  --bg-muted: #202024;
+  --bg-scene: #17171a;
+  --bg-disabled: #2a2a2e;
+  --bg-overlay: rgba(0, 0, 0, 0.6);
+  --bg-wall: #2a2823;
+
+  --text-primary: #f2f2f4;
+  --text-secondary: #b8b8be;
+  --text-muted: #8a8a92;
+  --text-tertiary: #77777e;
+  --text-disabled: #55555b;
+  --text-inverse: #1a1a1a;
+  --text-link: #7db5f0;
+
+  --border-default: #34343a;
+  --border-light: #3a3a42;
+  --border-dark: #44444c;
+  --border-selected: #7db5f0;
+
+  --color-selection: #5b9be0;
+  --color-selection-rgb: 91, 155, 224;
+  --color-selection-light: rgba(91, 155, 224, 0.14);
+  --color-selection-medium: rgba(91, 155, 224, 0.26);
+  --color-selection-border: rgba(91, 155, 224, 0.5);
+  --color-hover: #f2f2f4;
+  --color-active: #f2f2f4;
+
+  /* neutral scale remapped (900 = lightest here) so token-driven text/borders
+     keep contrast on dark surfaces */
+  --color-neutral-900: #f2f2f4;
+  --color-neutral-800: #e2e2e6;
+  --color-neutral-700: #c4c4ca;
+  --color-neutral-600: #a6a6ae;
+  --color-neutral-500: #8a8a92;
+  --color-neutral-400: #6e6e76;
+  --color-neutral-300: #4c4c54;
+  --color-neutral-200: #3a3a42;
+  --color-neutral-100: #2e2e34;
+  --color-neutral-50: #26262b;
+
+  --thumbnail-bg: #26262b;
+  --thumbnail-border: #3a3a42;
+  --thumbnail-border-hover: #7db5f0;
+  --thumbnail-border-selected: #7db5f0;
+  --slider-track-bg: #3a3a42;
+  --slider-thumb-bg: #f2f2f4;
+  --icon-color-default: #9a9aa2;
+  --icon-color-hover: #f2f2f4;
+  --icon-color-active: #7db5f0;
+
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
+}
+
+/* re-point hardcoded light colours at tokens so the dark skin is complete */
+:root[data-theme-mode="dark"] .sidebar-chat-card { background: var(--bg-primary); }
+:root[data-theme-mode="dark"] .sidebar__logo-text { color: var(--text-primary); }
+:root[data-theme-mode="dark"] .sidebar__logo-divider { background: var(--border-light); }
+:root[data-theme-mode="dark"] .sidebar__action-btn { color: var(--text-secondary); }
+:root[data-theme-mode="dark"] .sidebar__action-btn:hover { background: var(--bg-tertiary); }
+:root[data-theme-mode="dark"] .sidebar-toggle-btn {
+  background: var(--bg-primary);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+
+:root[data-theme-mode="dark"] .option-thumbnail,
+:root[data-theme-mode="dark"] .frame-size-btn {
+  background: var(--bg-tertiary);
+  border-color: var(--border-default);
+  color: var(--text-primary);
+}
+:root[data-theme-mode="dark"] .option-thumbnail:hover,
+:root[data-theme-mode="dark"] .option-thumbnail--selected,
+:root[data-theme-mode="dark"] .frame-size-btn:hover,
+:root[data-theme-mode="dark"] .frame-size-btn--selected {
+  background: var(--bg-muted);
+  border-color: var(--color-selection);
+}
+:root[data-theme-mode="dark"] .option-thumbnail--disabled:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-default);
+}
+:root[data-theme-mode="dark"] .option-thumbnail__name { color: var(--text-primary); }
+:root[data-theme-mode="dark"] .color-swatch__name { color: var(--text-secondary); }
+:root[data-theme-mode="dark"] .color-swatch--selected .color-swatch__name { color: var(--text-primary); }
+:root[data-theme-mode="dark"] .color-swatch:hover .color-swatch__color { border-color: var(--color-selection); }
+:root[data-theme-mode="dark"] .color-swatch--selected .color-swatch__color {
+  border-color: var(--color-selection);
+  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-selection);
+}
+
+/* ============================================================================
+   Each named theme below is a FULL re-skin and is deliberately distinct from
+   the others across SIX axes: colour temperature, typography, shape language,
+   surface treatment (solid / glass / frosted), density, and sidebar position.
+   The base (:root, "Theme 1" / default) is never touched here.
+
+   There is no "dark theme" / "light theme" category — each is simply its own
+   distinct UI. "Theme 1" is the base (:root / default) and is left untouched.
+     theme2 → warm editorial NOIR  — champagne gold, serif, sharp, right dock
+     theme3 → cool NEON GRAPHITE   — violet→cyan, glass blur, rounded, glow
+     theme4 → soft STUDIO          — indigo, clean sans, very round, airy
+     theme5 → frosted AQUA GLASS   — teal/cyan, translucent frost, pill/compact
+
+   (data-theme-mode is NOT a user-facing "mode" — it's an internal flag that lets
+   a theme built on dark surfaces reuse the shared hardcoded-hex fixes below,
+   instead of each such theme re-declaring them. Purely an implementation detail.)
+   ============================================================================ */
+
+/* ========================================================================
+   THEME 2 (noir) — warm editorial noir. Champagne-gold on warm near-black,
+   serif display headings, sharp hairline cards, dramatic shadow, right dock.
+   Inherits the shared dark skin via data-theme-mode="dark", then re-tints it
+   WARM and swaps the cool-blue selection for gold.
+   ======================================================================== */
+:root[data-theme-preset="theme2"] {
+  /* warm charcoal surfaces (override the neutral shared-dark greys) */
+  --bg-primary: #17130f;
+  --bg-secondary: #100c09;
+  --bg-tertiary: #221b14;
+  --bg-muted: #1b1510;
+  --bg-scene: #120e0b;
+  --bg-disabled: #241d16;
+
+  --text-primary: #f6efe2;
+  --text-secondary: #c9bda6;
+  --text-muted: #9a8f79;
+  --text-tertiary: #857b67;
+
+  --border-default: #2f2820;
+  --border-light: #3b3227;
+  --border-dark: #4a3f30;
+
+  /* champagne-gold accent */
+  --color-selection: #cba24d;
+  --color-selection-rgb: 203, 162, 77;
+  --color-selection-light: rgba(203, 162, 77, 0.13);
+  --color-selection-medium: rgba(203, 162, 77, 0.26);
+  --color-selection-border: rgba(203, 162, 77, 0.55);
+  --border-selected: #cba24d;
+  --thumbnail-border-hover: #cba24d;
+  --thumbnail-border-selected: #cba24d;
+  --text-link: #e2c079;
+  --icon-color-active: #d9b463;
+  --slider-thumb-bg: #cba24d;
+
+  /* typography — editorial serif headings, quiet sans body */
+  --font-family-base: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
+  --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
+
+  /* card size — roomier: wider sidebar + larger tiles + bigger gaps */
+  --sidebar-width: 344px;
+  --thumbnail-gap: 12px;
+  --thumbnail-min-width: 84px;
+}
+
+/* cards — sharp corners, gold hairline, deep cinematic shadow */
+:root[data-theme-preset="theme2"] .sidebar--card,
+:root[data-theme-preset="theme2"] .sidebar-chat-card {
+  border: 1px solid var(--border-default);
+  border-radius: 3px;
+  background:
+    linear-gradient(180deg, rgba(203, 162, 77, 0.05), rgba(203, 162, 77, 0) 120px),
+    var(--bg-primary);
+  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 240, 214, 0.04);
+}
+
+/* section titles — gold, generous tracking, a short gold rule beneath */
+:root[data-theme-preset="theme2"] .sidebar__section-title {
+  color: #e2c079;
+  font-weight: 500;
+  letter-spacing: 2px;
+  position: relative;
+  padding-bottom: 7px;
+}
+:root[data-theme-preset="theme2"] .sidebar__section-title::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 26px;
+  height: 1px;
+  background: linear-gradient(90deg, #cba24d, rgba(203, 162, 77, 0));
+}
+
+/* larger option tiles + gold selection glow */
+:root[data-theme-preset="theme2"] .option-thumbnail {
+  min-height: 64px;
+  padding: 12px 6px;
+  border-radius: 3px;
+}
+:root[data-theme-preset="theme2"] .option-thumbnail__name { font-size: var(--font-size-md); }
+:root[data-theme-preset="theme2"] .option-thumbnail--selected {
+  box-shadow: 0 0 0 1px var(--color-selection), 0 6px 20px -6px rgba(203, 162, 77, 0.45);
+}
+:root[data-theme-preset="theme2"] .frame-size-btn { padding: 9px 12px; font-size: 12px; border-radius: 3px; }
+:root[data-theme-preset="theme2"] .sidebar-container { font-family: var(--font-family-base); }
+:root[data-theme-preset="theme2"] .sidebar__logo-text {
+  font-family: var(--font-family-heading);
+  letter-spacing: 0.3px;
+  color: #f6efe2;
+}
+
+/* sidebar docked right → move sidebar, toggle, and the scene action toolbar
+   (2D/fullscreen/refresh) + generate/save buttons to the left so they clear it */
+:root[data-theme-preset="theme2"] .sidebar-container { left: auto; right: 12px; }
+:root[data-theme-preset="theme2"] .main-layout__scene--sidebar-open {
+  padding-left: 0;
+  padding-right: calc(var(--sidebar-width) + 24px);
+}
+:root[data-theme-preset="theme2"] .sidebar-toggle-btn { left: auto; right: 12px; }
+:root[data-theme-preset="theme2"] .header { right: auto; left: 12px; }
+
+/* ========================================================================
+   THEME 3 (neon) — neon graphite. Cool blue-black surfaces, a violet→cyan neon
+   accent, frosted-glass card, rounded tiles, and a glow on selection.
+   Also a good embed dark default. Inherits the shared dark skin, re-tinted
+   COOL, with glass + neon layered on top.
+   ======================================================================== */
+:root[data-theme-preset="theme3"] {
+  /* cool graphite surfaces */
+  --bg-primary: #12141c;
+  --bg-secondary: #0c0e15;
+  --bg-tertiary: #1a1e2b;
+  --bg-muted: #161a25;
+  --bg-scene: #0b0d13;
+  --bg-disabled: #1c2130;
+
+  --text-primary: #eef1fb;
+  --text-secondary: #a9b0c8;
+  --text-muted: #7b839c;
+
+  --border-default: #242a3a;
+  --border-light: #2c3346;
+  --border-dark: #384056;
+
+  /* electric violet→cyan */
+  --color-selection: #8b5cf6;
+  --color-selection-rgb: 139, 92, 246;
+  --color-selection-light: rgba(139, 92, 246, 0.16);
+  --color-selection-medium: rgba(139, 92, 246, 0.3);
+  --color-selection-border: rgba(139, 92, 246, 0.6);
+  --border-selected: #8b5cf6;
+  --thumbnail-border-hover: #22d3ee;
+  --thumbnail-border-selected: #8b5cf6;
+  --text-link: #22d3ee;
+  --icon-color-active: #22d3ee;
+  --slider-thumb-bg: #8b5cf6;
+
+  --font-family-base: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
+  --font-family-heading: 'Segoe UI', system-ui, sans-serif;
+
+  --sidebar-width: 312px;
+  --thumbnail-gap: 10px;
+  --thumbnail-min-width: 74px;
+}
+
+/* frosted-glass card floating over the scene, rounded, faint neon rim */
+:root[data-theme-preset="theme3"] .sidebar--card,
+:root[data-theme-preset="theme3"] .sidebar-chat-card {
+  border-radius: 16px;
+  border: 1px solid rgba(139, 92, 246, 0.18);
+  background:
+    radial-gradient(120% 80% at 100% 0%, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0) 60%),
+    radial-gradient(120% 80% at 0% 0%, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0) 55%),
+    rgba(18, 20, 28, 0.72);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
+}
+
+/* section titles — violet→cyan gradient text */
+:root[data-theme-preset="theme3"] .sidebar__section-title {
+  background: linear-gradient(90deg, #a78bfa, #22d3ee);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 1.4px;
+}
+
+/* rounded tiles + neon selection glow */
+:root[data-theme-preset="theme3"] .option-thumbnail,
+:root[data-theme-preset="theme3"] .frame-size-btn { border-radius: 12px; }
+:root[data-theme-preset="theme3"] .option-thumbnail--selected,
+:root[data-theme-preset="theme3"] .frame-size-btn--selected {
+  border-color: var(--color-selection);
+  box-shadow: 0 0 0 1px var(--color-selection), 0 0 18px -2px rgba(139, 92, 246, 0.55);
+}
+:root[data-theme-preset="theme3"] .option-thumbnail:hover,
+:root[data-theme-preset="theme3"] .frame-size-btn:hover {
+  box-shadow: 0 0 16px -4px rgba(34, 211, 238, 0.5);
+}
+:root[data-theme-preset="theme3"] .sidebar-toggle-btn {
+  border-radius: 12px;
+  box-shadow: 0 0 16px -4px rgba(139, 92, 246, 0.5);
+}
+
+/* ========================================================================
+   THEME 4 (studio) — soft studio. Pure white, indigo accent, clean sans, very
+   rounded cards, soft layered shadows, airy spacing. (Also the embed's light
+   id.) A light theme, so it does NOT get data-theme-mode="dark".
+   ======================================================================== */
+:root[data-theme-preset="theme4"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #fbfbfe;
+  --bg-tertiary: #f2f2f8;
+  --bg-muted: #f6f6fb;
+  --bg-scene: #fdfdff;
+  --bg-wall: #eceaf4;
+
+  --color-selection: #4f46e5;
+  --color-selection-rgb: 79, 70, 229;
+  --color-selection-light: rgba(79, 70, 229, 0.1);
+  --color-selection-medium: rgba(79, 70, 229, 0.2);
+  --color-selection-border: rgba(79, 70, 229, 0.42);
+  --text-link: #4f46e5;
+  --border-selected: #4f46e5;
+  --border-default: #ececf3;
+  --border-light: #f0f0f6;
+  --thumbnail-border-hover: #4f46e5;
+  --thumbnail-border-selected: #4f46e5;
+  --icon-color-active: #4f46e5;
+  --slider-thumb-bg: #4f46e5;
+
+  --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --font-family-heading: 'Inter', 'Segoe UI', system-ui, sans-serif;
+
+  /* roomy + airy */
+  --sidebar-width: 332px;
+  --thumbnail-gap: 12px;
+  --thumbnail-min-width: 80px;
+}
+
+/* cards — very rounded, soft multi-layer shadow, hairline */
+:root[data-theme-preset="theme4"] .sidebar--card,
+:root[data-theme-preset="theme4"] .sidebar-chat-card {
+  border-radius: 18px;
+  border: 1px solid var(--border-default);
+  box-shadow: 0 1px 2px rgba(17, 12, 46, 0.04), 0 12px 32px -8px rgba(17, 12, 46, 0.12);
+}
+
+/* section titles — indigo, a soft indigo rule beneath */
+:root[data-theme-preset="theme4"] .sidebar__section-title {
+  color: #4f46e5;
+  letter-spacing: 1.2px;
+  position: relative;
+  padding-bottom: 7px;
+}
+:root[data-theme-preset="theme4"] .sidebar__section-title::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 24px;
+  height: 2px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, #6366f1, rgba(99, 102, 241, 0));
+}
+
+/* rounded tiles + soft indigo selection ring */
+:root[data-theme-preset="theme4"] .option-thumbnail,
+:root[data-theme-preset="theme4"] .frame-size-btn { border-radius: 14px; }
+:root[data-theme-preset="theme4"] .option-thumbnail--selected {
+  border-color: var(--color-selection);
+  background: #fff;
+  box-shadow: 0 0 0 3px var(--color-selection-light), 0 8px 20px -8px rgba(79, 70, 229, 0.3);
+}
+:root[data-theme-preset="theme4"] .frame-size-btn--selected { border-color: var(--color-selection); }
+:root[data-theme-preset="theme4"] .option-thumbnail:hover,
+:root[data-theme-preset="theme4"] .frame-size-btn:hover { border-color: var(--color-selection-border); }
+:root[data-theme-preset="theme4"] .sidebar-toggle-btn { border-radius: 14px; }
+
+/* ========================================================================
+   THEME 5 (aqua) — frosted aqua glass. Teal/cyan gradient accent, translucent
+   frosted cards over the scene, pill-round + compact tiles, breezy left inset.
+   Distinct from `light` (solid white, indigo) by being colourful + glassy.
+   ======================================================================== */
+:root[data-theme-preset="theme5"] {
+  /* teal/cyan brand + selection, cool-tinted surfaces */
+  --color-brand-primary: #0891b2;
+  --color-brand-primary-rgb: 8, 145, 178;
+  --color-brand-primary-dark: #0e7490;
+  --color-brand-primary-light: #22d3ee;
+  --color-brand-accent: #06b6d4;
+
+  --color-selection: #0ea5e9;
+  --color-selection-rgb: 14, 165, 233;
+  --color-selection-light: rgba(14, 165, 233, 0.12);
+  --color-selection-medium: rgba(14, 165, 233, 0.22);
+  --color-selection-border: rgba(14, 165, 233, 0.45);
+
+  --bg-primary: #f6fdff;
+  --bg-secondary: #eaf6fa;
+  --bg-tertiary: #dcedf2;
+  --bg-muted: #e9f4f7;
+  --bg-scene: #f2fbfd;
+  --bg-wall: #dce9ea;
+
+  --text-primary: #0c3745;
+  --text-secondary: #3f6875;
+  --text-muted: #6a8b95;
+  --text-link: #0284c7;
+  --border-default: #cfe6ec;
+  --border-light: #dcedf2;
+  --border-selected: #0e7490;
+  --thumbnail-border-hover: #0e7490;
+  --thumbnail-border-selected: #0e7490;
+  --icon-color-active: #0ea5e9;
+  --slider-thumb-bg: #0e7490;
+
+  /* rounder humanist sans */
+  --font-family-base: 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
+  --font-family-heading: 'Nunito', 'Trebuchet MS', 'Segoe UI', sans-serif;
+
+  /* compact/denser: narrower sidebar + smaller tiles + tight gaps */
+  --sidebar-width: 284px;
+  --thumbnail-gap: 7px;
+  --thumbnail-min-width: 62px;
+}
+
+/* frosted translucent cards with a teal-tinted glass shadow + top gradient */
+:root[data-theme-preset="theme5"] .sidebar--card,
+:root[data-theme-preset="theme5"] .sidebar-chat-card {
+  border-radius: 20px;
+  border: 1px solid rgba(14, 165, 233, 0.18);
+  background:
+    linear-gradient(160deg, rgba(34, 211, 238, 0.14), rgba(255, 255, 255, 0) 160px),
+    rgba(246, 253, 255, 0.78);
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+  box-shadow: 0 14px 40px -10px rgba(8, 145, 178, 0.28);
+}
+
+/* section titles — teal→cyan gradient text */
+:root[data-theme-preset="theme5"] .sidebar__section-title {
+  background: linear-gradient(90deg, #0e7490, #22d3ee);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+  letter-spacing: 0.6px;
+}
+
+/* smaller, pill-round tiles */
+:root[data-theme-preset="theme5"] .option-thumbnail {
+  min-height: 42px;
+  padding: 6px 3px;
+  border-radius: 16px;
+}
+:root[data-theme-preset="theme5"] .frame-size-btn { padding: 5px 8px; font-size: 9px; border-radius: 999px; }
+:root[data-theme-preset="theme5"] .option-thumbnail__name { font-size: var(--font-size-xs); }
+:root[data-theme-preset="theme5"] .sidebar-container { font-family: var(--font-family-base); }
+:root[data-theme-preset="theme5"] .sidebar-toggle-btn { border-radius: 16px; }
+
+/* selected/hover tiles — teal border + soft cyan ring */
+:root[data-theme-preset="theme5"] .option-thumbnail--selected,
+:root[data-theme-preset="theme5"] .frame-size-btn--selected {
+  border-color: var(--color-brand-primary-dark);
+  box-shadow: 0 0 0 3px var(--color-selection-light);
+}
+:root[data-theme-preset="theme5"] .option-thumbnail:hover,
+:root[data-theme-preset="theme5"] .frame-size-btn:hover,
+:root[data-theme-preset="theme5"] .color-swatch:hover .color-swatch__color {
+  border-color: var(--color-brand-primary-dark);
+}
+
+/* sidebar position — roomier left inset */
+:root[data-theme-preset="theme5"] .sidebar-container { left: 20px; top: 20px; bottom: 20px; }
+:root[data-theme-preset="theme5"] .main-layout__scene--sidebar-open {
+  padding-left: calc(var(--sidebar-width) + 40px);
+}
+
+}