/* ──────────────────────────────────────────────────────────────
 * SPUM Studio — Color Tilesets
 *
 * Switch without adding visible UI:
 *   - URL: /studio/?tileset=reference-blue
 *   - Console: spumSetColorTileset('studio-noir')
 *   - Persisted key: localStorage.spum_color_tileset
 *
 * Keep layout and feature CSS pointed at these variables. A new visual pass
 * should mostly mean adding or editing one tileset block here.
 * ────────────────────────────────────────────────────────────── */

:root,
:root[data-color-tileset="reference-blue"] {
  color-scheme: dark;

  --ui-depth-1-bg: #030812;
  --ui-depth-2-bg: #06111f;
  --ui-depth-3-bg: #0a1a2f;
  --ui-depth-4-bg: #102846;
  --ui-depth-5-bg: #183a65;

  --ui-shell-bg: #020812;
  --ui-topbar-bg: #030914;
  --ui-footer-bg: #030914;
  --ui-left-nav-bg: #05101d;
  --ui-left-nav-panel-bg: #071725;
  --ui-cast-list-bg: #071522;
  --ui-cast-list-panel-bg: #0b2138;
  --ui-preview-bg: #081523;
  --ui-appearance-bg: #0d2440;
  --ui-appearance-border: rgba(77, 137, 255, 0.42);
  --ui-panel-bg: #102945;
  --ui-panel-bg-strong: #14355b;
  --ui-panel-border: rgba(109, 160, 255, 0.22);
  --ui-panel-border-strong: rgba(109, 160, 255, 0.44);

  --ui-border-weak: rgba(143, 184, 255, 0.10);
  --ui-border-mid: rgba(143, 184, 255, 0.16);
  --ui-border-strong: rgba(109, 160, 255, 0.38);

  --ui-accent: #74a7ff;
  --ui-accent-bg: rgba(74, 128, 255, 0.20);
  --ui-accent-border: rgba(116, 167, 255, 0.72);

  --ui-text-primary: #f4f8ff;
  --ui-text-secondary: #a5b6cf;
  --ui-text-muted: #697b95;
  --ui-text-faint: #4f5b6f;
  --ui-success: #35d07f;
  --ui-warning: #f2b94b;
  --ui-danger: #ff5f6d;

  --ai-depth-2-bg: #0f1016;
  --ai-depth-3-bg: #181c24;
  --ai-depth-4-bg: #222830;
  --ai-depth-5-bg: #2c3240;
  --ai-assistant-bg: #0f1016;
  --ai-assistant-border: rgba(180, 184, 200, 0.10);
  --ai-panel-bg: #222830;
  --ai-panel-border: rgba(180, 184, 200, 0.08);
  --ai-accent: #7c8aff;
  --ai-accent-bg: rgba(124, 138, 255, 0.14);
  --ai-accent-border: rgba(124, 138, 255, 0.52);

  --ui-body-bg-start: #06101c;
  --ui-topbar-bg-start: #06111f;
  --ui-logo-gradient-start: #6684ff;
  --ui-logo-gradient-end: #8fb9ff;
  --ui-column-divider-bg: #0a2138;
  --ui-left-nav-bg-start: #071828;
  --ui-cast-list-bg-start: #091a2b;
  --ui-preview-bg-start: #0a1c30;
  --ui-appearance-bg-start: #12305a;
  --ui-appearance-bg-end: #0a1c32;
  --ai-assistant-bg-start: #0e1014;
  --ui-workspace-bg: #06111d;
  --ui-nav-hover-bg: rgba(116, 167, 255, 0.07);
  --ui-nav-active-bg-start: rgba(74, 128, 255, 0.24);
  --ui-nav-active-bg-end: rgba(74, 128, 255, 0.10);
  --ui-add-button-bg-start: rgba(116, 167, 255, 0.27);
  --ui-add-button-bg-end: rgba(74, 128, 255, 0.14);
  --ui-control-bg: rgba(8, 21, 35, 0.72);
  --ui-control-bg-hover: rgba(16, 40, 70, 0.74);
  --ui-character-card-bg: rgba(7, 20, 34, 0.72);
  --ui-character-selected-bg-start: rgba(74, 128, 255, 0.24);
  --ui-character-selected-bg-end: rgba(16, 41, 69, 0.88);
  --ui-character-thumb-bg: rgba(74, 128, 255, 0.16);
  --ui-character-thumb-border: rgba(116, 167, 255, 0.18);
  --ui-depth-4-panel-bg: rgba(16, 40, 70, 0.62);
  --ui-preview-grid-line: rgba(91, 143, 235, 0.08);
  --ui-preview-canvas-bg: #07111d;
  --ui-slot-list-bg: rgba(6, 17, 29, 0.76);
  --ui-part-grid-bg-start: rgba(16, 40, 70, 0.84);
  --ui-part-grid-bg-end: rgba(8, 21, 35, 0.92);
  --ui-part-card-selected-glow: rgba(74, 128, 255, 0.28);
  --ui-slot-selected-bg-start: rgba(74, 128, 255, 0.24);
  --ui-slot-selected-bg-end: rgba(16, 41, 69, 0.76);
  --ui-footer-bg-end: #020712;
  --ui-debug-button-bg: rgba(116, 167, 255, 0.06);
  --ui-footer-debug-bg: rgba(3, 8, 18, 0.96);

  --ai-header-bg: rgba(22, 13, 43, 0.72);
  --ai-icon-hover-bg: rgba(167, 136, 255, 0.18);
  --ai-panel-bg-start: rgba(52, 34, 95, 0.72);
  --ai-card-bg: rgba(52, 34, 95, 0.38);
  --ai-card-border: rgba(167, 136, 255, 0.22);
  --ai-thumb-bg: rgba(167, 136, 255, 0.18);
  --ai-input-panel-bg: rgba(7, 5, 14, 0.44);
  --ai-system-message-bg: rgba(52, 34, 95, 0.20);
  --ai-assistant-message-bg-start: rgba(167, 136, 255, 0.16);
  --ai-assistant-message-bg-end: rgba(52, 34, 95, 0.28);
  --ai-user-message-bg: rgba(52, 34, 95, 0.46);
  --ai-user-message-border: rgba(167, 136, 255, 0.20);
  --ai-tool-bg: rgba(52, 34, 95, 0.30);
  --ai-tool-border: rgba(167, 136, 255, 0.18);
  --ai-input-bg: rgba(7, 5, 14, 0.66);
  --ai-input-border: rgba(167, 136, 255, 0.22);
  --ai-popover-bg: rgba(35, 22, 63, 0.82);
  --ai-setting-bg: rgba(7, 5, 14, 0.46);
  --ai-setting-border: rgba(167, 136, 255, 0.22);
}

:root[data-color-tileset="studio-noir"] {
  --ui-depth-1-bg: #01040b;
  --ui-depth-2-bg: #050f1d;
  --ui-depth-3-bg: #071629;
  --ui-depth-4-bg: #0d2444;
  --ui-depth-5-bg: #173a70;

  --ui-shell-bg: #01040b;
  --ui-topbar-bg: #02060f;
  --ui-footer-bg: #02060f;
  --ui-left-nav-bg: #050d18;
  --ui-left-nav-panel-bg: #07182d;
  --ui-cast-list-bg: #071525;
  --ui-cast-list-panel-bg: #0d213d;
  --ui-preview-bg: #050b13;
  --ui-appearance-bg: #091b34;
  --ui-appearance-border: rgba(87, 121, 255, 0.50);
  --ui-panel-bg: #0d223f;
  --ui-panel-bg-strong: #15345f;
  --ui-panel-border: rgba(104, 142, 255, 0.27);
  --ui-panel-border-strong: rgba(104, 142, 255, 0.58);

  --ui-border-weak: rgba(120, 152, 230, 0.12);
  --ui-border-mid: rgba(120, 152, 230, 0.20);
  --ui-border-strong: rgba(104, 142, 255, 0.48);

  --ui-accent: #7195ff;
  --ui-accent-bg: rgba(72, 100, 255, 0.28);
  --ui-accent-border: rgba(113, 149, 255, 0.88);
  --ui-text-primary: #f4f7ff;
  --ui-text-secondary: #b2bed3;
  --ui-text-muted: #74849d;

  --ai-assistant-bg: #0d051b;
  --ai-assistant-border: rgba(139, 88, 255, 0.48);
  --ai-panel-bg: #1d1034;
  --ai-panel-border: rgba(150, 102, 255, 0.36);
  --ai-accent: #a37cff;
  --ai-accent-bg: rgba(163, 124, 255, 0.20);
  --ai-accent-border: rgba(163, 124, 255, 0.70);

  --ui-body-bg-start: #030914;
  --ui-topbar-bg-start: #040a15;
  --ui-logo-gradient-start: #6d89ff;
  --ui-logo-gradient-end: #9bb8ff;
  --ui-column-divider-bg: #0b213f;
  --ui-left-nav-bg-start: #061424;
  --ui-cast-list-bg-start: #091a30;
  --ui-preview-bg-start: #071321;
  --ui-appearance-bg-start: #102b57;
  --ui-appearance-bg-end: #07182d;
  --ai-assistant-bg-start: #14062a;
  --ui-workspace-bg: #040b14;
  --ui-nav-hover-bg: rgba(113, 149, 255, 0.09);
  --ui-nav-active-bg-start: rgba(72, 100, 255, 0.34);
  --ui-nav-active-bg-end: rgba(72, 100, 255, 0.14);
  --ui-add-button-bg-start: rgba(113, 149, 255, 0.36);
  --ui-add-button-bg-end: rgba(72, 100, 255, 0.18);
  --ui-control-bg: rgba(5, 12, 23, 0.82);
  --ui-control-bg-hover: rgba(14, 35, 66, 0.86);
  --ui-character-card-bg: rgba(6, 17, 31, 0.80);
  --ui-character-selected-bg-start: rgba(72, 100, 255, 0.36);
  --ui-character-selected-bg-end: rgba(13, 34, 63, 0.96);
  --ui-character-thumb-bg: rgba(72, 100, 255, 0.24);
  --ui-character-thumb-border: rgba(113, 149, 255, 0.30);
  --ui-depth-4-panel-bg: rgba(12, 31, 58, 0.74);
  --ui-preview-grid-line: rgba(91, 143, 235, 0.12);
  --ui-preview-canvas-bg: #05080d;
  --ui-slot-list-bg: rgba(5, 12, 23, 0.84);
  --ui-part-grid-bg-start: rgba(12, 31, 58, 0.92);
  --ui-part-grid-bg-end: rgba(5, 12, 23, 0.96);
  --ui-part-card-selected-glow: rgba(72, 100, 255, 0.42);
  --ui-slot-selected-bg-start: rgba(72, 100, 255, 0.34);
  --ui-slot-selected-bg-end: rgba(13, 34, 63, 0.88);
  --ui-footer-bg-end: #01040b;
  --ui-debug-button-bg: rgba(113, 149, 255, 0.08);
  --ui-footer-debug-bg: rgba(1, 4, 11, 0.98);

  --ai-header-bg: rgba(20, 6, 42, 0.82);
  --ai-icon-hover-bg: rgba(163, 124, 255, 0.22);
  --ai-panel-bg-start: rgba(49, 28, 92, 0.82);
  --ai-card-bg: rgba(49, 28, 92, 0.48);
  --ai-card-border: rgba(163, 124, 255, 0.30);
  --ai-thumb-bg: rgba(98, 86, 255, 0.25);
  --ai-input-panel-bg: rgba(5, 2, 11, 0.56);
  --ai-system-message-bg: rgba(49, 28, 92, 0.27);
  --ai-assistant-message-bg-start: rgba(163, 124, 255, 0.20);
  --ai-assistant-message-bg-end: rgba(49, 28, 92, 0.38);
  --ai-user-message-bg: rgba(42, 25, 76, 0.56);
  --ai-user-message-border: rgba(163, 124, 255, 0.28);
  --ai-tool-bg: rgba(49, 28, 92, 0.38);
  --ai-tool-border: rgba(163, 124, 255, 0.24);
  --ai-input-bg: rgba(5, 2, 11, 0.78);
  --ai-input-border: rgba(163, 124, 255, 0.28);
  --ai-popover-bg: rgba(28, 15, 54, 0.92);
  --ai-setting-bg: rgba(5, 2, 11, 0.58);
  --ai-setting-border: rgba(163, 124, 255, 0.28);

  --ui-button-accent-bg-start: rgba(82, 126, 255, 0.96);
  --ui-button-accent-bg-end: rgba(65, 93, 230, 0.96);
  --ui-button-accent-border: rgba(128, 166, 255, 0.86);
  --ui-button-accent-hover-start: rgba(102, 147, 255, 1);
  --ui-button-accent-hover-end: rgba(74, 110, 245, 1);
  --ui-active-chip-bg: rgba(80, 112, 255, 0.42);
  --ui-active-chip-border: rgba(128, 166, 255, 0.72);
  --ui-active-tab-bg: rgba(72, 100, 255, 0.20);
}

:root[data-color-tileset="quiet-navy"] {
  --ui-depth-1-bg: #060a10;
  --ui-depth-2-bg: #0a0f18;
  --ui-depth-3-bg: #101827;
  --ui-depth-4-bg: #162238;
  --ui-depth-5-bg: #20304c;

  --ui-shell-bg: #050911;
  --ui-topbar-bg: #060a10;
  --ui-footer-bg: #060a10;
  --ui-left-nav-bg: #070d15;
  --ui-left-nav-panel-bg: #09111c;
  --ui-cast-list-bg: #0b111b;
  --ui-cast-list-panel-bg: #101a2b;
  --ui-preview-bg: #101929;
  --ui-appearance-bg: #12213b;
  --ui-appearance-border: rgba(68, 128, 255, 0.36);
  --ui-panel-bg: #142035;
  --ui-panel-bg-strong: #182a4a;
  --ui-panel-border: rgba(142, 180, 255, 0.18);
  --ui-panel-border-strong: rgba(142, 180, 255, 0.34);

  --ui-border-weak: rgba(255, 255, 255, 0.06);
  --ui-border-mid: rgba(255, 255, 255, 0.10);
  --ui-border-strong: rgba(142, 180, 255, 0.28);
  --ui-accent: #8eb4ff;
  --ui-accent-bg: rgba(142, 180, 255, 0.14);
  --ui-accent-border: rgba(142, 180, 255, 0.65);
  --ui-text-secondary: #9aa8bd;
  --ui-text-muted: #657286;

  --ai-assistant-bg: #130d21;
  --ai-assistant-border: rgba(155, 124, 255, 0.32);
  --ai-panel-bg: #1b1430;
  --ai-panel-border: rgba(155, 124, 255, 0.24);
  --ai-accent: #9b7cff;
  --ai-accent-bg: rgba(155, 124, 255, 0.14);
  --ai-accent-border: rgba(155, 124, 255, 0.55);

  --ui-body-bg-start: #070d16;
  --ui-topbar-bg-start: #08101a;
  --ui-column-divider-bg: #07121d;
  --ui-left-nav-bg-start: #09121d;
  --ui-cast-list-bg-start: #0d1623;
  --ui-preview-bg-start: #111c2e;
  --ui-appearance-bg-start: #15294a;
  --ui-appearance-bg-end: #101c2f;
  --ai-assistant-bg-start: #171027;
  --ui-workspace-bg: #0a0e14;
  --ui-depth-4-panel-bg: rgba(255, 255, 255, 0.025);
  --ui-control-bg: rgba(255, 255, 255, 0.025);
  --ui-control-bg-hover: rgba(255, 255, 255, 0.045);
  --ui-character-card-bg: rgba(255, 255, 255, 0.018);
  --ui-character-selected-bg-start: rgba(142, 180, 255, 0.14);
  --ui-character-selected-bg-end: rgba(20, 32, 53, 0.88);
  --ui-preview-grid-line: rgba(142, 180, 255, 0.035);
  --ui-preview-canvas-bg: rgba(0, 0, 0, 0.12);
  --ui-part-grid-bg-start: rgba(20, 32, 53, 0.84);
  --ui-part-grid-bg-end: rgba(8, 12, 20, 0.88);
  --ui-slot-list-bg: rgba(0, 0, 0, 0.12);
  --ai-header-bg: rgba(19, 13, 33, 0.72);
  --ai-panel-bg-start: rgba(48, 32, 80, 0.58);
}

:root[data-color-tileset="spum-navy-indigo"] {
  /* ── Cast 실측 기준 5-step neutral ramp ── */
  --ui-depth-1-bg: #0f1016;
  --ui-depth-2-bg: #0f1016;
  --ui-depth-3-bg: #181c24;
  --ui-depth-4-bg: #222830;
  --ui-depth-5-bg: #2c3240;

  --ui-shell-bg: var(--ui-depth-1-bg);
  --ui-topbar-bg: var(--ui-depth-1-bg);
  --ui-footer-bg: var(--ui-depth-1-bg);
  --ui-left-nav-bg: var(--ui-depth-2-bg);
  --ui-left-nav-panel-bg: var(--ui-depth-4-bg);
  --ui-cast-list-bg: #181a21;
  --ui-cast-list-panel-bg: var(--ui-depth-4-bg);
  --ui-cast-list-input-bg: #0e0f14;
  --ui-preview-bg: var(--ui-depth-3-bg);
  --ui-appearance-bg: var(--ui-depth-3-bg);
  --ui-appearance-border: rgba(255, 255, 255, 0.06);
  --ui-panel-bg: var(--ui-depth-4-bg);
  --ui-panel-bg-strong: var(--ui-depth-5-bg);
  --ui-panel-border: rgba(180, 184, 200, 0.10);
  --ui-panel-border-strong: rgba(76, 145, 237, 0.36);

  --ui-border-weak: rgba(255, 255, 255, 0.06);
  --ui-border-mid: rgba(255, 255, 255, 0.10);
  --ui-border-strong: rgba(76, 145, 237, 0.42);

  /* ── Accent: #4c91ed ── */
  --ui-accent: #4c91ed;
  --ui-accent-hover: #6da8f5;
  --ui-accent-active: #3a7ad8;
  --ui-accent-quiet: rgba(76, 145, 237, 0.06);
  --ui-accent-bg: rgba(76, 145, 237, 0.18);
  --ui-accent-border: rgba(76, 145, 237, 0.72);
  --ui-focus-ring: 0 0 0 2px rgba(76, 145, 237, 0.42);
  --ui-selected-tint: rgba(76, 145, 237, 0.14);
  --ui-inset-bg: rgba(0, 0, 0, 0.32);

  /* ── Control surfaces ── */
  --ui-control-bg: rgba(255, 255, 255, 0.04);
  --ui-control-bg-hover: rgba(255, 255, 255, 0.08);
  --ui-control-border-hover: rgba(255, 255, 255, 0.18);
  --ui-input-bg: #0e0f14;

  --ui-text-primary: #f5f5f7;
  --ui-text-secondary: #b8b8bf;
  --ui-text-muted: #6c6c75;
  --ui-text-faint: #45454d;

  --ui-success: #2ED3A2;
  --ui-warning: #F4B95F;
  --ui-danger: #FF5C6C;

  --ai-depth-2-bg: #0f1016;
  --ai-depth-3-bg: #181c24;
  --ai-depth-4-bg: #222830;
  --ai-depth-5-bg: #2c3240;
  --ai-assistant-bg: #0f1016;
  --ai-assistant-border: rgba(255, 255, 255, 0.06);
  --ai-panel-bg: #222830;
  --ai-panel-border: rgba(255, 255, 255, 0.06);

  --ai-accent: #7c8aff;
  --ai-accent-hover: #99a4ff;
  --ai-accent-active: #5f6de6;
  --ai-accent-quiet: rgba(124, 138, 255, 0.06);
  --ai-accent-bg: rgba(124, 138, 255, 0.14);
  --ai-accent-border: rgba(124, 138, 255, 0.52);
  --ai-focus-ring: 0 0 0 2px rgba(124, 138, 255, 0.36);

  --ui-panel-highlight: var(--spum-shadow-inset-top);
  --ui-panel-shadow: var(--spum-shadow-elevated);
  --ui-control-inset: var(--spum-shadow-inset-top), var(--spum-shadow-inset-bottom);
  --ui-control-active-inset: var(--spum-shadow-inset-pressed);

  --ui-canvas-bg: #0d0e13;
  --ui-canvas-grid-minor: rgba(180, 184, 200, 0.04);
  --ui-canvas-grid-major: rgba(180, 184, 200, 0.07);
  --ui-canvas-cross: rgba(76, 145, 237, 0.18);
  --ui-canvas-grid-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><g shape-rendering='crispEdges'><path d='M0 8H64M0 16H64M0 24H64M0 32H64M0 40H64M0 48H64M0 56H64M8 0V64M16 0V64M24 0V64M32 0V64M40 0V64M48 0V64M56 0V64' stroke='rgba(180,184,200,0.04)' stroke-width='1'/><path d='M0 0H64M0 0V64' stroke='rgba(180,184,200,0.07)' stroke-width='1'/></g></svg>");

  /* ── Derived / layout tokens ── */
  --ui-body-bg-start: var(--ui-depth-1-bg);
  --ui-topbar-bg-start: var(--ui-depth-1-bg);
  --ui-logo-gradient-start: #4c91ed;
  --ui-logo-gradient-end: #7bb8ff;
  --ui-column-divider-bg: var(--ui-border-weak);
  --ui-left-nav-bg-start: var(--ui-depth-2-bg);
  --ui-cast-list-bg-start: #181a21;
  --ui-preview-bg-start: var(--ui-depth-3-bg);
  --ui-appearance-bg-start: var(--ui-depth-3-bg);
  --ui-appearance-bg-end: var(--ui-depth-2-bg);
  --ui-workspace-bg: #13151b;
  --ui-nav-hover-bg: rgba(76, 145, 237, 0.10);
  --ui-nav-active-bg-start: rgba(76, 145, 237, 0.30);
  --ui-nav-active-bg-end: rgba(76, 145, 237, 0.12);
  --ui-add-button-bg-start: rgba(255, 255, 255, 0.04);
  --ui-add-button-bg-end: rgba(255, 255, 255, 0.04);
  --ui-control-bg: rgba(255, 255, 255, 0.04);
  --ui-control-bg-hover: rgba(255, 255, 255, 0.08);
  --ui-character-card-bg: transparent;
  --ui-character-selected-bg-start: rgba(76, 145, 237, 0.12);
  --ui-character-selected-bg-end: rgba(76, 145, 237, 0.06);
  --ui-character-thumb-bg: #1a1d24;
  --ui-character-thumb-border: rgba(255, 255, 255, 0.06);
  --ui-depth-4-panel-bg: #22242b;
  --ui-preview-grid-line: rgba(180, 184, 200, 0.04);
  --ui-preview-canvas-bg: #0d0e13;
  --ui-slot-list-bg: rgba(0, 0, 0, 0.12);
  --ui-part-grid-bg: var(--ui-appearance-bg);
  --ui-part-grid-bg-start: var(--ui-appearance-bg);
  --ui-part-grid-bg-end: var(--ui-appearance-bg);
  --ui-part-card-selected-glow: rgba(76, 145, 237, 0.38);
  --ui-slot-selected-bg-start: rgba(76, 145, 237, 0.12);
  --ui-slot-selected-bg-end: rgba(76, 145, 237, 0.06);
  --ui-footer-bg-end: var(--ui-depth-1-bg);
  --ui-debug-button-bg: rgba(76, 145, 237, 0.10);
  --ui-footer-debug-bg: rgba(6, 6, 10, 0.98);

  --ai-assistant-bg-start: #14161c;
  --ai-header-bg: rgba(20, 22, 28, 0.92);
  --ai-panel-bg-start: rgba(30, 33, 40, 0.76);
  --ai-card-bg: rgba(30, 33, 40, 0.46);
  --ai-card-border: rgba(155, 108, 255, 0.18);
  --ai-thumb-bg: rgba(155, 108, 255, 0.12);
  --ai-icon-hover-bg: rgba(155, 108, 255, 0.14);
  --ai-input-panel-bg: rgba(10, 12, 16, 0.58);
  --ai-system-message-bg: rgba(30, 33, 40, 0.28);
  --ai-assistant-message-bg-start: rgba(155, 108, 255, 0.18);
  --ai-assistant-message-bg-end: rgba(44, 30, 89, 0.38);
  --ai-user-message-bg: rgba(44, 30, 89, 0.54);
  --ai-user-message-border: rgba(155, 108, 255, 0.28);
  --ai-tool-bg: rgba(44, 30, 89, 0.38);
  --ai-tool-border: rgba(155, 108, 255, 0.24);
  --ai-input-bg: rgba(7, 4, 17, 0.78);
  --ai-input-border: rgba(155, 108, 255, 0.30);
  --ai-popover-bg: rgba(33, 23, 67, 0.92);
  --ai-setting-bg: rgba(7, 4, 17, 0.58);
  --ai-setting-border: rgba(155, 108, 255, 0.28);

  --ui-button-accent-bg-start: rgba(76, 145, 237, 0.96);
  --ui-button-accent-bg-end: rgba(58, 122, 216, 0.96);
  --ui-button-accent-border: rgba(76, 145, 237, 0.86);
  --ui-button-accent-hover-start: rgba(109, 168, 245, 1);
  --ui-button-accent-hover-end: rgba(76, 145, 237, 1);
  --ui-active-chip-bg: rgba(76, 145, 237, 0.32);
  --ui-active-chip-border: rgba(76, 145, 237, 0.76);
  --ui-active-tab-bg: rgba(76, 145, 237, 0.18);
}

:root[data-color-tileset] {
  --spum-bg-0: var(--ui-workspace-bg);
  --spum-bg-1: var(--ui-preview-bg);
  --spum-bg-2: var(--ui-panel-bg);
  --spum-bg-3: var(--ui-panel-bg-strong);
  --spum-bg-4: var(--ui-depth-5-bg);
  --spum-text: var(--ui-text-primary);
  --spum-text-secondary: var(--ui-text-secondary);
  --spum-text-muted: var(--ui-text-muted);
  --spum-text-faint: var(--ui-text-faint);
  --spum-accent: var(--ui-accent);
  --spum-accent-soft: var(--ui-accent-bg);
  --spum-accent-border: color-mix(in srgb, var(--ui-accent-border), transparent 28%);
  --spum-border: var(--ui-border-weak);
  --spum-border-mid: var(--ui-border-mid);
  --spum-border-strong: var(--ui-border-strong);

  --ui-depth-1-border: color-mix(in srgb, var(--ui-border-weak), transparent 30%);
  --ui-depth-2-border: var(--ui-border-weak);
  --ui-depth-3-border: color-mix(in srgb, var(--ui-border-mid), transparent 16%);
  --ui-depth-4-border: var(--ui-border-mid);
  --ui-depth-5-border: var(--ui-border-strong);
  --ui-nav-active-border: var(--ui-panel-border-strong);
  --ui-character-selected-ring: color-mix(in srgb, var(--ui-accent-border), transparent 60%);
  --ui-control-border-hover: color-mix(in srgb, var(--ui-accent-border), transparent 54%);
  --ui-slot-selected-border: color-mix(in srgb, var(--ui-accent-border), transparent 42%);
  --ui-blue-wash-weak: color-mix(in srgb, var(--ui-accent), transparent 94%);
  --ui-blue-wash-mid: color-mix(in srgb, var(--ui-accent), transparent 90%);
  --ui-appearance-placeholder-glow: color-mix(in srgb, var(--ui-accent), transparent 94%);
  --ai-depth-2-border: color-mix(in srgb, var(--ai-panel-border), transparent 46%);
  --ai-depth-3-border: color-mix(in srgb, var(--ai-panel-border), transparent 32%);
  --ai-depth-4-border: color-mix(in srgb, var(--ai-panel-border), transparent 14%);
  --ai-depth-5-border: var(--ai-accent-border);
  --ai-subtle-border: color-mix(in srgb, var(--ai-panel-border), transparent 36%);
  --ai-assistant-message-border: color-mix(in srgb, var(--ai-accent-border), transparent 62%);
  --ai-wash-mid: color-mix(in srgb, var(--ai-accent), transparent 90%);
  --ai-placeholder-glow: color-mix(in srgb, var(--ai-accent), transparent 94%);
  --ui-text-strong: var(--ui-text-primary);
  --ui-text: var(--ui-text-secondary);

  --ui-button-accent-bg-start: color-mix(in srgb, var(--ui-accent), transparent 14%);
  --ui-button-accent-bg-end: color-mix(in srgb, var(--ui-accent), #1d2f7d 34%);
  --ui-button-accent-border: color-mix(in srgb, var(--ui-accent-border), transparent 12%);
  --ui-button-accent-hover-start: color-mix(in srgb, var(--ui-accent), white 8%);
  --ui-button-accent-hover-end: color-mix(in srgb, var(--ui-accent), #1d2f7d 22%);
  --ui-active-chip-bg: var(--ui-accent-bg);
  --ui-active-chip-border: var(--ui-accent-border);
  --ui-active-tab-bg: color-mix(in srgb, var(--ui-accent), transparent 86%);
}