@abstractframework/ui-kit 0.1.0

package/src/theme.css

@@ -0,0 +1,989 @@
+/* AbstractUIC UI Kit: Shared theme tokens for AbstractFramework thin clients */
+
+/* Base tokens (aligned with AbstractFlow; extended for thin clients) */
+:root {
+  color-scheme: dark;
+
+  /* Colors */
+  --bg-primary: #1a1a2e;
+  --bg-secondary: #16213e;
+  --bg-tertiary: #0f3460;
+  --text-primary: #eee;
+  --text-secondary: #aaa;
+  --text-muted: #666;
+  --accent: #e94560;
+  --success: #27ae60;
+  --warning: #f39c12;
+  --error: #e74c3c;
+  --info: #60a5fa;
+
+  /* Fonts (no remote imports; prefer system fonts) */
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+
+  /* Typography / density (controlled by thin-client Settings; avoid per-app drift) */
+  --font-scale: 1;
+  --header-density: 1;
+
+  --font-size-xxs: calc(10px * var(--font-scale));
+  --font-size-xs: calc(11px * var(--font-scale));
+  --font-size-sm: calc(12px * var(--font-scale));
+  --font-size-md: calc(13px * var(--font-scale));
+  --font-size-base: calc(14px * var(--font-scale));
+  --font-size-lg: calc(16px * var(--font-scale));
+  --font-size-xl: calc(18px * var(--font-scale));
+
+  --line-height-base: 1.5;
+
+  /* Sizes */
+  --header-height: calc(48px * var(--header-density));
+  --footer-height: calc(32px * var(--header-density));
+  --header-pad-x: 16px;
+  --header-pad-y: calc(8px * var(--header-density));
+
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+
+  /* General UI surfaces */
+  --ui-surface-1: rgba(0, 0, 0, 0.16);
+  --ui-surface-2: rgba(255, 255, 255, 0.06);
+  --ui-surface-3: rgba(0, 0, 0, 0.25);
+  --ui-border-1: rgba(255, 255, 255, 0.10);
+  --ui-border-2: rgba(255, 255, 255, 0.14);
+  --ui-shadow-1: 0 10px 30px rgba(0, 0, 0, 0.35);
+
+  /* Semantic tints */
+  --accent-subtle: rgba(233, 69, 96, 0.12);
+  --info-subtle: rgba(96, 165, 250, 0.12);
+  --success-subtle: rgba(34, 197, 94, 0.12);
+  --warning-subtle: rgba(245, 158, 11, 0.12);
+  --error-subtle: rgba(239, 68, 68, 0.12);
+
+  /* Semantic borders (used for selection + pills) */
+  --accent-border: rgba(233, 69, 96, 0.35);
+  --info-border: rgba(96, 165, 250, 0.35);
+  --success-border: rgba(34, 197, 94, 0.35);
+  --warning-border: rgba(245, 158, 11, 0.35);
+  --error-border: rgba(239, 68, 68, 0.35);
+  --muted-border: rgba(148, 163, 184, 0.22);
+
+  /* Chips / badges */
+  --ui-chip-bg: rgba(0, 0, 0, 0.22);
+  --ui-chip-border: rgba(255, 255, 255, 0.12);
+  --ui-chip-text: rgba(255, 255, 255, 0.92);
+
+  /* Small overlay surfaces (tabs, pills) */
+  --ui-overlay-bg: rgba(0, 0, 0, 0.18);
+  --ui-overlay-bg-hover: rgba(255, 255, 255, 0.08);
+  --ui-overlay-border: rgba(255, 255, 255, 0.14);
+  --ui-pill-bg: rgba(0, 0, 0, 0.22);
+  --ui-pill-border: rgba(255, 255, 255, 0.12);
+
+  /* Markdown/code surfaces */
+  --ui-code-bg: rgba(0, 0, 0, 0.18);
+  --ui-code-border: rgba(255, 255, 255, 0.08);
+  --ui-code-block-bg: rgba(0, 0, 0, 0.25);
+  --ui-code-block-border: rgba(255, 255, 255, 0.08);
+
+  /* Compatibility aliases used by multiple thin clients */
+  --bg: var(--bg-primary);
+  --bg-surface: var(--bg-secondary);
+  --bg-elevated: var(--bg-tertiary);
+  --bg-card: var(--bg-secondary);
+  --panel: var(--bg-secondary);
+  --panel2: var(--bg-tertiary);
+  --text: var(--text-primary);
+  --muted: var(--text-secondary);
+  --danger: var(--error);
+  --ok: var(--success);
+
+  /* Strokes */
+  --border: var(--bg-tertiary);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-accent: rgba(233, 69, 96, 0.55);
+}
+
+@supports (color: color-mix(in srgb, black 50%, white)) {
+  :root {
+    /* Prefer a theme-tinted translucent card surface when supported. */
+    --bg-card: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+  }
+}
+
+:root.theme-light,
+:root.theme-solarized-light,
+:root.theme-catppuccin-latte,
+:root.theme-rose-pine-dawn,
+:root.theme-one-light,
+:root.theme-everforest-light {
+  color-scheme: light;
+}
+
+:root.theme-light {
+  --bg-primary: #f7f7fb;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #e6e8f0;
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --accent: #e94560;
+  --success: #16a34a;
+  --warning: #d97706;
+  --error: #dc2626;
+  --info: #2563eb;
+
+  --bg-card: rgba(255, 255, 255, 0.92);
+  --border-default: rgba(15, 23, 42, 0.12);
+  --border-accent: rgba(233, 69, 96, 0.45);
+
+  --ui-surface-1: rgba(15, 23, 42, 0.03);
+  --ui-surface-2: rgba(15, 23, 42, 0.05);
+  --ui-surface-3: rgba(15, 23, 42, 0.04);
+  --ui-border-1: rgba(15, 23, 42, 0.10);
+  --ui-border-2: rgba(15, 23, 42, 0.14);
+  --ui-shadow-1: 0 10px 30px rgba(15, 23, 42, 0.12);
+
+  --ui-overlay-bg: rgba(15, 23, 42, 0.04);
+  --ui-overlay-bg-hover: rgba(15, 23, 42, 0.06);
+  --ui-overlay-border: rgba(15, 23, 42, 0.12);
+  --ui-pill-bg: rgba(15, 23, 42, 0.04);
+  --ui-pill-border: rgba(15, 23, 42, 0.12);
+
+  --ui-chip-bg: rgba(15, 23, 42, 0.04);
+  --ui-chip-border: rgba(15, 23, 42, 0.12);
+  --ui-chip-text: rgba(15, 23, 42, 0.92);
+
+  --ui-code-bg: rgba(15, 23, 42, 0.05);
+  --ui-code-border: rgba(15, 23, 42, 0.10);
+  --ui-code-block-bg: rgba(15, 23, 42, 0.05);
+  --ui-code-block-border: rgba(15, 23, 42, 0.10);
+
+  --accent-subtle: rgba(233, 69, 96, 0.10);
+  --info-subtle: rgba(37, 99, 235, 0.10);
+  --success-subtle: rgba(22, 163, 74, 0.10);
+  --warning-subtle: rgba(217, 119, 6, 0.10);
+  --error-subtle: rgba(220, 38, 38, 0.10);
+
+  --accent-border: rgba(233, 69, 96, 0.30);
+  --info-border: rgba(37, 99, 235, 0.30);
+  --success-border: rgba(22, 163, 74, 0.30);
+  --warning-border: rgba(217, 119, 6, 0.30);
+  --error-border: rgba(220, 38, 38, 0.30);
+  --muted-border: rgba(15, 23, 42, 0.18);
+}
+
+:root.theme-nord {
+  --bg-primary: #2e3440;
+  --bg-secondary: #3b4252;
+  --bg-tertiary: #434c5e;
+  --text-primary: #eceff4;
+  --text-secondary: #d8dee9;
+  --text-muted: #81a1c1;
+  --accent: #88c0d0;
+  --success: #a3be8c;
+  --warning: #ebcb8b;
+  --error: #bf616a;
+  --info: #5e81ac;
+
+  --accent-subtle: rgba(136, 192, 208, 0.12);
+  --info-subtle: rgba(94, 129, 172, 0.12);
+  --success-subtle: rgba(163, 190, 140, 0.12);
+  --warning-subtle: rgba(235, 203, 139, 0.12);
+  --error-subtle: rgba(191, 97, 106, 0.12);
+
+  --accent-border: rgba(136, 192, 208, 0.35);
+  --info-border: rgba(94, 129, 172, 0.35);
+  --success-border: rgba(163, 190, 140, 0.35);
+  --warning-border: rgba(235, 203, 139, 0.35);
+  --error-border: rgba(191, 97, 106, 0.35);
+  --border-accent: rgba(136, 192, 208, 0.55);
+}
+
+:root.theme-dracula {
+  --bg-primary: #282a36;
+  --bg-secondary: #343746;
+  --bg-tertiary: #44475a;
+  --text-primary: #f8f8f2;
+  --text-secondary: #d4d4de;
+  --text-muted: #6272a4;
+  --accent: #ff79c6;
+  --success: #50fa7b;
+  --warning: #f1fa8c;
+  --error: #ff5555;
+  --info: #8be9fd;
+
+  --accent-subtle: rgba(255, 121, 198, 0.12);
+  --info-subtle: rgba(139, 233, 253, 0.12);
+  --success-subtle: rgba(80, 250, 123, 0.12);
+  --warning-subtle: rgba(241, 250, 140, 0.12);
+  --error-subtle: rgba(255, 85, 85, 0.12);
+
+  --accent-border: rgba(255, 121, 198, 0.35);
+  --info-border: rgba(139, 233, 253, 0.35);
+  --success-border: rgba(80, 250, 123, 0.35);
+  --warning-border: rgba(241, 250, 140, 0.35);
+  --error-border: rgba(255, 85, 85, 0.35);
+  --border-accent: rgba(255, 121, 198, 0.55);
+}
+
+:root.theme-gruvbox {
+  --bg-primary: #282828;
+  --bg-secondary: #3c3836;
+  --bg-tertiary: #504945;
+  --text-primary: #ebdbb2;
+  --text-secondary: #d5c4a1;
+  --text-muted: #928374;
+  --accent: #fe8019;
+  --success: #b8bb26;
+  --warning: #fabd2f;
+  --error: #fb4934;
+  --info: #83a598;
+
+  --accent-subtle: rgba(254, 128, 25, 0.12);
+  --info-subtle: rgba(131, 165, 152, 0.12);
+  --success-subtle: rgba(184, 187, 38, 0.12);
+  --warning-subtle: rgba(250, 189, 47, 0.12);
+  --error-subtle: rgba(251, 73, 52, 0.12);
+
+  --accent-border: rgba(254, 128, 25, 0.35);
+  --info-border: rgba(131, 165, 152, 0.35);
+  --success-border: rgba(184, 187, 38, 0.35);
+  --warning-border: rgba(250, 189, 47, 0.35);
+  --error-border: rgba(251, 73, 52, 0.35);
+  --border-accent: rgba(254, 128, 25, 0.55);
+}
+
+:root.theme-monokai {
+  --bg-primary: #272822;
+  --bg-secondary: #2d2e27;
+  --bg-tertiary: #3e3d32;
+  --text-primary: #f8f8f2;
+  --text-secondary: #e2e2dc;
+  --text-muted: #75715e;
+  --accent: #66d9ef;
+  --success: #a6e22e;
+  --warning: #e6db74;
+  --error: #f92672;
+  --info: #a1efe4;
+
+  --accent-subtle: rgba(102, 217, 239, 0.12);
+  --info-subtle: rgba(161, 239, 228, 0.12);
+  --success-subtle: rgba(166, 226, 46, 0.12);
+  --warning-subtle: rgba(230, 219, 116, 0.12);
+  --error-subtle: rgba(249, 38, 114, 0.12);
+
+  --accent-border: rgba(102, 217, 239, 0.35);
+  --info-border: rgba(161, 239, 228, 0.35);
+  --success-border: rgba(166, 226, 46, 0.35);
+  --warning-border: rgba(230, 219, 116, 0.35);
+  --error-border: rgba(249, 38, 114, 0.35);
+  --border-accent: rgba(102, 217, 239, 0.55);
+}
+
+:root.theme-solarized-dark {
+  --bg-primary: #002b36;
+  --bg-secondary: #073642;
+  --bg-tertiary: #0b4b5a;
+  --text-primary: #eee8d5;
+  --text-secondary: #93a1a1;
+  --text-muted: #657b83;
+  --accent: #268bd2;
+  --success: #859900;
+  --warning: #b58900;
+  --error: #dc322f;
+  --info: #2aa198;
+
+  --accent-subtle: rgba(38, 139, 210, 0.12);
+  --info-subtle: rgba(42, 161, 152, 0.12);
+  --success-subtle: rgba(133, 153, 0, 0.12);
+  --warning-subtle: rgba(181, 137, 0, 0.12);
+  --error-subtle: rgba(220, 50, 47, 0.12);
+
+  --accent-border: rgba(38, 139, 210, 0.35);
+  --info-border: rgba(42, 161, 152, 0.35);
+  --success-border: rgba(133, 153, 0, 0.35);
+  --warning-border: rgba(181, 137, 0, 0.35);
+  --error-border: rgba(220, 50, 47, 0.35);
+  --border-accent: rgba(38, 139, 210, 0.55);
+}
+
+:root.theme-solarized-light {
+  --bg-primary: #fdf6e3;
+  --bg-secondary: #eee8d5;
+  --bg-tertiary: #e3ddc9;
+  --text-primary: #073642;
+  --text-secondary: #586e75;
+  --text-muted: #657b83;
+  --accent: #268bd2;
+  --success: #859900;
+  --warning: #b58900;
+  --error: #dc322f;
+  --info: #2aa198;
+
+  --bg-card: rgba(255, 255, 255, 0.88);
+  --border-default: rgba(7, 54, 66, 0.18);
+  --border-accent: rgba(38, 139, 210, 0.35);
+
+  --ui-overlay-bg: rgba(7, 54, 66, 0.04);
+  --ui-overlay-bg-hover: rgba(7, 54, 66, 0.06);
+  --ui-overlay-border: rgba(7, 54, 66, 0.14);
+  --ui-pill-bg: rgba(7, 54, 66, 0.04);
+  --ui-pill-border: rgba(7, 54, 66, 0.14);
+
+  --ui-chip-bg: rgba(7, 54, 66, 0.04);
+  --ui-chip-border: rgba(7, 54, 66, 0.14);
+  --ui-chip-text: rgba(7, 54, 66, 0.92);
+
+  --ui-code-bg: rgba(7, 54, 66, 0.04);
+  --ui-code-border: rgba(7, 54, 66, 0.14);
+  --ui-code-block-bg: rgba(7, 54, 66, 0.04);
+  --ui-code-block-border: rgba(7, 54, 66, 0.14);
+}
+
+:root.theme-tokyo-night {
+  --bg-primary: #1a1b26;
+  --bg-secondary: #24283b;
+  --bg-tertiary: #414868;
+  --text-primary: #c0caf5;
+  --text-secondary: #a9b1d6;
+  --text-muted: #565f89;
+  --accent: #7aa2f7;
+  --success: #9ece6a;
+  --warning: #e0af68;
+  --error: #f7768e;
+  --info: #2ac3de;
+
+  --accent-subtle: rgba(122, 162, 247, 0.12);
+  --info-subtle: rgba(42, 195, 222, 0.12);
+  --success-subtle: rgba(158, 206, 106, 0.12);
+  --warning-subtle: rgba(224, 175, 104, 0.12);
+  --error-subtle: rgba(247, 118, 142, 0.12);
+
+  --accent-border: rgba(122, 162, 247, 0.35);
+  --info-border: rgba(42, 195, 222, 0.35);
+  --success-border: rgba(158, 206, 106, 0.35);
+  --warning-border: rgba(224, 175, 104, 0.35);
+  --error-border: rgba(247, 118, 142, 0.35);
+  --border-accent: rgba(122, 162, 247, 0.55);
+}
+
+:root.theme-catppuccin-mocha {
+  --bg-primary: #1e1e2e;
+  --bg-secondary: #181825;
+  --bg-tertiary: #313244;
+  --text-primary: #cdd6f4;
+  --text-secondary: #bac2de;
+  --text-muted: #6c7086;
+  --accent: #cba6f7;
+  --success: #a6e3a1;
+  --warning: #f9e2af;
+  --error: #f38ba8;
+  --info: #89b4fa;
+
+  --accent-subtle: rgba(203, 166, 247, 0.12);
+  --info-subtle: rgba(137, 180, 250, 0.12);
+  --success-subtle: rgba(166, 227, 161, 0.12);
+  --warning-subtle: rgba(249, 226, 175, 0.12);
+  --error-subtle: rgba(243, 139, 168, 0.12);
+
+  --accent-border: rgba(203, 166, 247, 0.35);
+  --info-border: rgba(137, 180, 250, 0.35);
+  --success-border: rgba(166, 227, 161, 0.35);
+  --warning-border: rgba(249, 226, 175, 0.35);
+  --error-border: rgba(243, 139, 168, 0.35);
+  --border-accent: rgba(203, 166, 247, 0.55);
+}
+
+:root.theme-catppuccin-macchiato {
+  --bg-primary: #24273a;
+  --bg-secondary: #1e2030;
+  --bg-tertiary: #363a4f;
+  --text-primary: #cad3f5;
+  --text-secondary: #b8c0e0;
+  --text-muted: #8087a2;
+  --accent: #c6a0f6;
+  --success: #a6da95;
+  --warning: #eed49f;
+  --error: #ed8796;
+  --info: #8aadf4;
+
+  --accent-subtle: rgba(198, 160, 246, 0.12);
+  --info-subtle: rgba(138, 173, 244, 0.12);
+  --success-subtle: rgba(166, 218, 149, 0.12);
+  --warning-subtle: rgba(238, 212, 159, 0.12);
+  --error-subtle: rgba(237, 135, 150, 0.12);
+
+  --accent-border: rgba(198, 160, 246, 0.35);
+  --info-border: rgba(138, 173, 244, 0.35);
+  --success-border: rgba(166, 218, 149, 0.35);
+  --warning-border: rgba(238, 212, 159, 0.35);
+  --error-border: rgba(237, 135, 150, 0.35);
+  --border-accent: rgba(198, 160, 246, 0.55);
+}
+
+:root.theme-catppuccin-frappe {
+  --bg-primary: #303446;
+  --bg-secondary: #292c3c;
+  --bg-tertiary: #414559;
+  --text-primary: #c6d0f5;
+  --text-secondary: #b5bfe2;
+  --text-muted: #838ba7;
+  --accent: #ca9ee6;
+  --success: #a6d189;
+  --warning: #e5c890;
+  --error: #e78284;
+  --info: #8caaee;
+
+  --accent-subtle: rgba(202, 158, 230, 0.12);
+  --info-subtle: rgba(140, 170, 238, 0.12);
+  --success-subtle: rgba(166, 209, 137, 0.12);
+  --warning-subtle: rgba(229, 200, 144, 0.12);
+  --error-subtle: rgba(231, 130, 132, 0.12);
+
+  --accent-border: rgba(202, 158, 230, 0.35);
+  --info-border: rgba(140, 170, 238, 0.35);
+  --success-border: rgba(166, 209, 137, 0.35);
+  --warning-border: rgba(229, 200, 144, 0.35);
+  --error-border: rgba(231, 130, 132, 0.35);
+  --border-accent: rgba(202, 158, 230, 0.55);
+}
+
+:root.theme-rose-pine {
+  --bg-primary: #191724;
+  --bg-secondary: #1f1d2e;
+  --bg-tertiary: #26233a;
+  --text-primary: #e0def4;
+  --text-secondary: #908caa;
+  --text-muted: #6e6a86;
+  --accent: #c4a7e7;
+  --success: #9ccfd8;
+  --warning: #f6c177;
+  --error: #eb6f92;
+  --info: #31748f;
+
+  --accent-subtle: rgba(196, 167, 231, 0.12);
+  --info-subtle: rgba(49, 116, 143, 0.12);
+  --success-subtle: rgba(156, 207, 216, 0.12);
+  --warning-subtle: rgba(246, 193, 119, 0.12);
+  --error-subtle: rgba(235, 111, 146, 0.12);
+
+  --accent-border: rgba(196, 167, 231, 0.35);
+  --info-border: rgba(49, 116, 143, 0.35);
+  --success-border: rgba(156, 207, 216, 0.35);
+  --warning-border: rgba(246, 193, 119, 0.35);
+  --error-border: rgba(235, 111, 146, 0.35);
+  --border-accent: rgba(196, 167, 231, 0.55);
+}
+
+:root.theme-rose-pine-moon {
+  --bg-primary: #232136;
+  --bg-secondary: #2a273f;
+  --bg-tertiary: #393552;
+  --text-primary: #e0def4;
+  --text-secondary: #908caa;
+  --text-muted: #6e6a86;
+  --accent: #c4a7e7;
+  --success: #9ccfd8;
+  --warning: #f6c177;
+  --error: #eb6f92;
+  --info: #3e8fb0;
+
+  --accent-subtle: rgba(196, 167, 231, 0.12);
+  --info-subtle: rgba(62, 143, 176, 0.12);
+  --success-subtle: rgba(156, 207, 216, 0.12);
+  --warning-subtle: rgba(246, 193, 119, 0.12);
+  --error-subtle: rgba(235, 111, 146, 0.12);
+
+  --accent-border: rgba(196, 167, 231, 0.35);
+  --info-border: rgba(62, 143, 176, 0.35);
+  --success-border: rgba(156, 207, 216, 0.35);
+  --warning-border: rgba(246, 193, 119, 0.35);
+  --error-border: rgba(235, 111, 146, 0.35);
+  --border-accent: rgba(196, 167, 231, 0.55);
+}
+
+:root.theme-one-dark {
+  --bg-primary: #282c34;
+  --bg-secondary: #21252b;
+  --bg-tertiary: #3a3f4b;
+  --text-primary: #abb2bf;
+  --text-secondary: #9da5b4;
+  --text-muted: #5c6370;
+  --accent: #61afef;
+  --success: #98c379;
+  --warning: #e5c07b;
+  --error: #e06c75;
+  --info: #c678dd;
+
+  --accent-subtle: rgba(97, 175, 239, 0.12);
+  --info-subtle: rgba(198, 120, 221, 0.12);
+  --success-subtle: rgba(152, 195, 121, 0.12);
+  --warning-subtle: rgba(229, 192, 123, 0.12);
+  --error-subtle: rgba(224, 108, 117, 0.12);
+
+  --accent-border: rgba(97, 175, 239, 0.35);
+  --info-border: rgba(198, 120, 221, 0.35);
+  --success-border: rgba(152, 195, 121, 0.35);
+  --warning-border: rgba(229, 192, 123, 0.35);
+  --error-border: rgba(224, 108, 117, 0.35);
+  --border-accent: rgba(97, 175, 239, 0.55);
+}
+
+:root.theme-everforest-dark {
+  --bg-primary: #2b3339;
+  --bg-secondary: #323c41;
+  --bg-tertiary: #3a464c;
+  --text-primary: #d3c6aa;
+  --text-secondary: #a7c080;
+  --text-muted: #859289;
+  --accent: #a7c080;
+  --success: #a7c080;
+  --warning: #dbbc7f;
+  --error: #e67e80;
+  --info: #7fbbb3;
+
+  --accent-subtle: rgba(167, 192, 128, 0.12);
+  --info-subtle: rgba(127, 187, 179, 0.12);
+  --success-subtle: rgba(167, 192, 128, 0.12);
+  --warning-subtle: rgba(219, 188, 127, 0.12);
+  --error-subtle: rgba(230, 126, 128, 0.12);
+
+  --accent-border: rgba(167, 192, 128, 0.35);
+  --info-border: rgba(127, 187, 179, 0.35);
+  --success-border: rgba(167, 192, 128, 0.35);
+  --warning-border: rgba(219, 188, 127, 0.35);
+  --error-border: rgba(230, 126, 128, 0.35);
+  --border-accent: rgba(167, 192, 128, 0.55);
+}
+
+:root.theme-catppuccin-latte {
+  --bg-primary: #eff1f5;
+  --bg-secondary: #e6e9ef;
+  --bg-tertiary: #ccd0da;
+  --text-primary: #4c4f69;
+  --text-secondary: #5c5f77;
+  --text-muted: #9ca0b0;
+  --accent: #8839ef;
+  --success: #40a02b;
+  --warning: #df8e1d;
+  --error: #d20f39;
+  --info: #1e66f5;
+
+  --bg-card: rgba(255, 255, 255, 0.92);
+  --border-default: rgba(76, 79, 105, 0.12);
+  --border-accent: rgba(136, 57, 239, 0.35);
+
+  --ui-surface-1: rgba(76, 79, 105, 0.03);
+  --ui-surface-2: rgba(76, 79, 105, 0.05);
+  --ui-surface-3: rgba(76, 79, 105, 0.04);
+  --ui-border-1: rgba(76, 79, 105, 0.10);
+  --ui-border-2: rgba(76, 79, 105, 0.14);
+  --ui-shadow-1: 0 10px 30px rgba(76, 79, 105, 0.12);
+
+  --ui-overlay-bg: rgba(76, 79, 105, 0.04);
+  --ui-overlay-bg-hover: rgba(76, 79, 105, 0.06);
+  --ui-overlay-border: rgba(76, 79, 105, 0.12);
+  --ui-pill-bg: rgba(76, 79, 105, 0.04);
+  --ui-pill-border: rgba(76, 79, 105, 0.12);
+
+  --ui-chip-bg: rgba(76, 79, 105, 0.04);
+  --ui-chip-border: rgba(76, 79, 105, 0.12);
+  --ui-chip-text: rgba(76, 79, 105, 0.92);
+
+  --ui-code-bg: rgba(76, 79, 105, 0.05);
+  --ui-code-border: rgba(76, 79, 105, 0.10);
+  --ui-code-block-bg: rgba(76, 79, 105, 0.05);
+  --ui-code-block-border: rgba(76, 79, 105, 0.10);
+
+  --accent-subtle: rgba(136, 57, 239, 0.10);
+  --info-subtle: rgba(30, 102, 245, 0.10);
+  --success-subtle: rgba(64, 160, 43, 0.10);
+  --warning-subtle: rgba(223, 142, 29, 0.10);
+  --error-subtle: rgba(210, 15, 57, 0.10);
+
+  --accent-border: rgba(136, 57, 239, 0.30);
+  --info-border: rgba(30, 102, 245, 0.30);
+  --success-border: rgba(64, 160, 43, 0.30);
+  --warning-border: rgba(223, 142, 29, 0.30);
+  --error-border: rgba(210, 15, 57, 0.30);
+  --muted-border: rgba(76, 79, 105, 0.18);
+}
+
+:root.theme-rose-pine-dawn {
+  --bg-primary: #faf4ed;
+  --bg-secondary: #fffaf3;
+  --bg-tertiary: #f2e9e1;
+  --text-primary: #575279;
+  --text-secondary: #6e6a86;
+  --text-muted: #9893a5;
+  --accent: #907aa9;
+  --success: #286983;
+  --warning: #ea9d34;
+  --error: #b4637a;
+  --info: #56949f;
+
+  --bg-card: rgba(255, 255, 255, 0.92);
+  --border-default: rgba(87, 82, 121, 0.12);
+  --border-accent: rgba(144, 122, 169, 0.35);
+
+  --ui-surface-1: rgba(87, 82, 121, 0.03);
+  --ui-surface-2: rgba(87, 82, 121, 0.05);
+  --ui-surface-3: rgba(87, 82, 121, 0.04);
+  --ui-border-1: rgba(87, 82, 121, 0.10);
+  --ui-border-2: rgba(87, 82, 121, 0.14);
+  --ui-shadow-1: 0 10px 30px rgba(87, 82, 121, 0.12);
+
+  --ui-overlay-bg: rgba(87, 82, 121, 0.04);
+  --ui-overlay-bg-hover: rgba(87, 82, 121, 0.06);
+  --ui-overlay-border: rgba(87, 82, 121, 0.12);
+  --ui-pill-bg: rgba(87, 82, 121, 0.04);
+  --ui-pill-border: rgba(87, 82, 121, 0.12);
+
+  --ui-chip-bg: rgba(87, 82, 121, 0.04);
+  --ui-chip-border: rgba(87, 82, 121, 0.12);
+  --ui-chip-text: rgba(87, 82, 121, 0.92);
+
+  --ui-code-bg: rgba(87, 82, 121, 0.05);
+  --ui-code-border: rgba(87, 82, 121, 0.10);
+  --ui-code-block-bg: rgba(87, 82, 121, 0.05);
+  --ui-code-block-border: rgba(87, 82, 121, 0.10);
+
+  --accent-subtle: rgba(144, 122, 169, 0.10);
+  --info-subtle: rgba(86, 148, 159, 0.10);
+  --success-subtle: rgba(40, 105, 131, 0.10);
+  --warning-subtle: rgba(234, 157, 52, 0.10);
+  --error-subtle: rgba(180, 99, 122, 0.10);
+
+  --accent-border: rgba(144, 122, 169, 0.30);
+  --info-border: rgba(86, 148, 159, 0.30);
+  --success-border: rgba(40, 105, 131, 0.30);
+  --warning-border: rgba(234, 157, 52, 0.30);
+  --error-border: rgba(180, 99, 122, 0.30);
+  --muted-border: rgba(87, 82, 121, 0.18);
+}
+
+:root.theme-one-light {
+  --bg-primary: #fafafa;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #e5e5e6;
+  --text-primary: #383a42;
+  --text-secondary: #4f525d;
+  --text-muted: #a0a1a7;
+  --accent: #4078f2;
+  --success: #50a14f;
+  --warning: #c18401;
+  --error: #e45649;
+  --info: #a626a4;
+
+  --bg-card: rgba(255, 255, 255, 0.92);
+  --border-default: rgba(56, 58, 66, 0.12);
+  --border-accent: rgba(64, 120, 242, 0.35);
+
+  --ui-surface-1: rgba(56, 58, 66, 0.03);
+  --ui-surface-2: rgba(56, 58, 66, 0.05);
+  --ui-surface-3: rgba(56, 58, 66, 0.04);
+  --ui-border-1: rgba(56, 58, 66, 0.10);
+  --ui-border-2: rgba(56, 58, 66, 0.14);
+  --ui-shadow-1: 0 10px 30px rgba(56, 58, 66, 0.12);
+
+  --ui-overlay-bg: rgba(56, 58, 66, 0.04);
+  --ui-overlay-bg-hover: rgba(56, 58, 66, 0.06);
+  --ui-overlay-border: rgba(56, 58, 66, 0.12);
+  --ui-pill-bg: rgba(56, 58, 66, 0.04);
+  --ui-pill-border: rgba(56, 58, 66, 0.12);
+
+  --ui-chip-bg: rgba(56, 58, 66, 0.04);
+  --ui-chip-border: rgba(56, 58, 66, 0.12);
+  --ui-chip-text: rgba(56, 58, 66, 0.92);
+
+  --ui-code-bg: rgba(56, 58, 66, 0.05);
+  --ui-code-border: rgba(56, 58, 66, 0.10);
+  --ui-code-block-bg: rgba(56, 58, 66, 0.05);
+  --ui-code-block-border: rgba(56, 58, 66, 0.10);
+
+  --accent-subtle: rgba(64, 120, 242, 0.10);
+  --info-subtle: rgba(166, 38, 164, 0.10);
+  --success-subtle: rgba(80, 161, 79, 0.10);
+  --warning-subtle: rgba(193, 132, 1, 0.10);
+  --error-subtle: rgba(228, 86, 73, 0.10);
+
+  --accent-border: rgba(64, 120, 242, 0.30);
+  --info-border: rgba(166, 38, 164, 0.30);
+  --success-border: rgba(80, 161, 79, 0.30);
+  --warning-border: rgba(193, 132, 1, 0.30);
+  --error-border: rgba(228, 86, 73, 0.30);
+  --muted-border: rgba(56, 58, 66, 0.18);
+}
+
+:root.theme-everforest-light {
+  --bg-primary: #fdf6e3;
+  --bg-secondary: #fffbef;
+  --bg-tertiary: #e8e0cc;
+  --text-primary: #5c6a72;
+  --text-secondary: #708089;
+  --text-muted: #9da9a0;
+  --accent: #4f8f5a;
+  --success: #4f8f5a;
+  --warning: #d6993d;
+  --error: #f85552;
+  --info: #3a94c5;
+
+  --bg-card: rgba(255, 255, 255, 0.92);
+  --border-default: rgba(92, 106, 114, 0.12);
+  --border-accent: rgba(79, 143, 90, 0.35);
+
+  --ui-surface-1: rgba(92, 106, 114, 0.03);
+  --ui-surface-2: rgba(92, 106, 114, 0.05);
+  --ui-surface-3: rgba(92, 106, 114, 0.04);
+  --ui-border-1: rgba(92, 106, 114, 0.10);
+  --ui-border-2: rgba(92, 106, 114, 0.14);
+  --ui-shadow-1: 0 10px 30px rgba(92, 106, 114, 0.12);
+
+  --ui-overlay-bg: rgba(92, 106, 114, 0.04);
+  --ui-overlay-bg-hover: rgba(92, 106, 114, 0.06);
+  --ui-overlay-border: rgba(92, 106, 114, 0.12);
+  --ui-pill-bg: rgba(92, 106, 114, 0.04);
+  --ui-pill-border: rgba(92, 106, 114, 0.12);
+
+  --ui-chip-bg: rgba(92, 106, 114, 0.04);
+  --ui-chip-border: rgba(92, 106, 114, 0.12);
+  --ui-chip-text: rgba(92, 106, 114, 0.92);
+
+  --ui-code-bg: rgba(92, 106, 114, 0.05);
+  --ui-code-border: rgba(92, 106, 114, 0.10);
+  --ui-code-block-bg: rgba(92, 106, 114, 0.05);
+  --ui-code-block-border: rgba(92, 106, 114, 0.10);
+
+  --accent-subtle: rgba(79, 143, 90, 0.10);
+  --info-subtle: rgba(58, 148, 197, 0.10);
+  --success-subtle: rgba(79, 143, 90, 0.10);
+  --warning-subtle: rgba(214, 153, 61, 0.10);
+  --error-subtle: rgba(248, 85, 82, 0.10);
+
+  --accent-border: rgba(79, 143, 90, 0.30);
+  --info-border: rgba(58, 148, 197, 0.30);
+  --success-border: rgba(79, 143, 90, 0.30);
+  --warning-border: rgba(214, 153, 61, 0.30);
+  --error-border: rgba(248, 85, 82, 0.30);
+  --muted-border: rgba(92, 106, 114, 0.18);
+}
+
+/* ------------------------------------------------------------------------- */
+/* AbstractFlow-style custom select (searchable popover)                      */
+/* ------------------------------------------------------------------------- */
+
+.af-select {
+  display: inline-flex;
+}
+
+.af-select--panel {
+  display: flex;
+  width: 100%;
+}
+
+.af-select--pin {
+  display: inline-flex;
+}
+
+.af-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--ui-overlay-border, rgba(255, 255, 255, 0.14));
+  background: var(--ui-overlay-bg, rgba(0, 0, 0, 0.18));
+  color: var(--text-primary);
+  border-radius: var(--radius-md, 8px);
+  padding: 0 10px;
+  line-height: 1;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+}
+
+.af-select-trigger:hover:not(:disabled) {
+  background: var(--ui-overlay-bg-hover, rgba(255, 255, 255, 0.08));
+}
+
+.af-select--pin .af-select-trigger {
+  height: 20px;
+  max-width: 160px;
+  font-size: var(--font-size-xs);
+  padding: 0 8px;
+}
+
+.af-select--panel .af-select-trigger {
+  height: 34px;
+  width: 100%;
+}
+
+.af-select-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  text-align: left;
+}
+
+.af-select-value--placeholder {
+  color: var(--text-secondary);
+}
+
+.af-select-clear {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.af-select-clear:hover {
+  color: var(--text-primary);
+  background: var(--ui-overlay-bg-hover, rgba(255, 255, 255, 0.08));
+}
+
+.af-select-caret {
+  color: var(--text-secondary);
+  transform: translateY(-1px);
+}
+
+.af-select-caret--open {
+  color: var(--text-primary);
+}
+
+.af-select-popover {
+  z-index: 10000;
+  background: var(--bg-card, var(--bg-secondary));
+  border: 1px solid var(--ui-overlay-border, rgba(255, 255, 255, 0.14));
+  border-radius: 12px;
+  box-shadow: var(--ui-shadow-1, 0 10px 30px rgba(0, 0, 0, 0.35));
+  overflow: hidden;
+}
+
+.af-select-popover--top {
+  transform: translateY(-100%);
+}
+
+.af-select-search {
+  padding: 10px;
+  border-bottom: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.10));
+  background: var(--ui-surface-2, rgba(255, 255, 255, 0.06));
+}
+
+.af-select-search-input {
+  width: 100%;
+  height: 34px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--ui-border-2, rgba(255, 255, 255, 0.14));
+  background: var(--ui-code-bg, rgba(0, 0, 0, 0.18));
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
+}
+
+.af-select-options {
+  max-height: 340px;
+  overflow: auto;
+  padding: 6px;
+}
+
+.af-select-empty {
+  padding: 10px;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.af-select-group {
+  padding: 8px 10px 6px 10px;
+  font-size: var(--font-size-xxs);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.af-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  color: var(--text-primary);
+  font-size: var(--font-size-base);
+}
+
+.af-select-option--highlighted {
+  background: var(--accent-subtle, rgba(233, 69, 96, 0.12));
+}
+
+.af-select-option--selected {
+  background: var(--ui-surface-2, rgba(255, 255, 255, 0.06));
+}
+
+.af-select-option-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.af-select-check {
+  color: var(--accent);
+  font-weight: 700;
+}
+
+/* ThemeSelect swatch previews */
+.af-theme-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.af-theme-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.af-theme-label--placeholder {
+  color: var(--text-secondary);
+}
+
+.af-theme-option-label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.af-theme-option-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex: 0 0 auto;
+}
+
+.af-theme-swatches {
+  display: inline-flex;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
+.af-theme-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.10));
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+}