/*
 * Ecommerce Visual Generator UI system.
 * Theme blocks own color decisions. Component contracts consume semantic tokens.
 * Template canvas artwork is intentionally outside this file.
 */

:root,
html[data-ui-theme="warm-neutral"] {
  color-scheme: light;
  --ui-font-family: "MiSans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ui-font-size-caption: 10px;
  --ui-font-size-helper: 11px;
  --ui-font-size-label: 12px;
  --ui-font-size-control: 14px;
  --ui-font-size-section: 17px;
  --ui-font-size-dialog-title: 19px;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 650;
  --ui-font-weight-bold: 700;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;

  --ui-radius-control: 7px;
  --ui-radius-panel: 10px;
  --ui-radius-dialog: 14px;
  --ui-control-height: 40px;

  --ui-color-workspace: #f2f0eb;
  --ui-color-surface: #fbfaf7;
  --ui-color-surface-raised: #ffffff;
  --ui-color-surface-soft: #f7f4ef;
  --ui-color-surface-active: #fff0e8;
  --ui-color-border: #ded9d1;
  --ui-color-border-strong: #c9c3b9;
  --ui-color-text: #19201d;
  --ui-color-text-secondary: #565a56;
  --ui-color-text-muted: #79766f;
  --ui-color-text-subtle: #98948e;
  --ui-color-accent: #ef6536;
  --ui-color-accent-hover: #d9572b;
  --ui-color-accent-soft: #fff0e8;
  --ui-color-accent-border: #efb59d;
  --ui-color-action-primary: #c84f24;
  --ui-color-action-primary-hover: #aa3e18;
  --ui-color-on-accent: #ffffff;
  --ui-color-focus-ring: rgba(200, 79, 36, 0.24);
  --ui-color-overlay: rgba(18, 22, 19, 0.66);
  --ui-color-success: #62866f;
  --ui-color-danger: #c84f43;
  --ui-color-warning: #9a641d;
  --ui-color-warning-soft: #fff5df;
  --ui-color-warning-border: #e7c27b;
  --ui-color-navigation: #171b18;
  --ui-color-navigation-hover: #242925;
  --ui-color-navigation-active: #30251f;
  --ui-color-navigation-border: #353b36;
  --ui-color-on-navigation: #f7f5f0;
  --ui-color-on-navigation-muted: #9fa5a0;
  --ui-color-stage: #242925;
  --ui-color-canvas-workspace: #e9e7e1;
  --ui-color-canvas-grid: rgba(25, 32, 29, 0.055);
  --ui-color-canvas-board: rgba(255, 255, 255, 0.76);
  --ui-color-canvas-ruler: #d8d4cc;
  --ui-color-status-stable: #6f9a7d;
  --ui-color-status-beta: #7998aa;
  --ui-color-status-draft: #c79455;
  --ui-color-status-planned: #7d8580;
  --ui-shadow-control: 0 5px 14px rgba(200, 79, 36, 0.18);
  --ui-shadow-menu: 0 18px 44px rgba(24, 29, 26, 0.16);
  --ui-shadow-dialog: 0 28px 90px rgba(0, 0, 0, 0.28);
  --ui-shadow-platform: 0 22px 60px rgba(49, 45, 39, 0.14);
  --ui-shadow-platform-soft: 0 10px 28px rgba(49, 45, 39, 0.09);
}

html[data-ui-theme="cool-slate"] {
  --ui-color-workspace: #edf1f6;
  --ui-color-surface: #f8fafc;
  --ui-color-surface-raised: #ffffff;
  --ui-color-surface-soft: #f1f5f9;
  --ui-color-surface-active: #eaf1ff;
  --ui-color-border: #d8dee8;
  --ui-color-border-strong: #b9c3d1;
  --ui-color-text: #172033;
  --ui-color-text-secondary: #475467;
  --ui-color-text-muted: #667085;
  --ui-color-text-subtle: #8a94a6;
  --ui-color-accent: #2563eb;
  --ui-color-accent-hover: #1d4ed8;
  --ui-color-accent-soft: #eaf1ff;
  --ui-color-accent-border: #9db7f5;
  --ui-color-action-primary: #2563eb;
  --ui-color-action-primary-hover: #1d4ed8;
  --ui-color-focus-ring: rgba(37, 99, 235, 0.22);
  --ui-color-overlay: rgba(15, 23, 42, 0.66);
  --ui-color-success: #3f7d5b;
  --ui-color-danger: #c2413b;
  --ui-color-warning: #9a651f;
  --ui-color-warning-soft: #fff7e6;
  --ui-color-warning-border: #e2bf78;
  --ui-color-navigation: #111827;
  --ui-color-navigation-hover: #1f2937;
  --ui-color-navigation-active: #172554;
  --ui-color-navigation-border: #334155;
  --ui-color-on-navigation: #f8fafc;
  --ui-color-on-navigation-muted: #94a3b8;
  --ui-color-stage: #1e293b;
  --ui-color-canvas-workspace: #e6ebf2;
  --ui-color-canvas-grid: rgba(23, 32, 51, 0.06);
  --ui-color-canvas-board: rgba(255, 255, 255, 0.78);
  --ui-color-canvas-ruler: #cfd6e0;
  --ui-color-status-stable: #5d9b76;
  --ui-color-status-beta: #60a5fa;
  --ui-color-status-draft: #d39a45;
  --ui-color-status-planned: #8491a3;
  --ui-shadow-control: 0 5px 14px rgba(37, 99, 235, 0.18);
  --ui-shadow-menu: 0 18px 44px rgba(15, 23, 42, 0.16);
  --ui-shadow-dialog: 0 28px 90px rgba(15, 23, 42, 0.3);
  --ui-shadow-platform: 0 22px 60px rgba(15, 23, 42, 0.16);
  --ui-shadow-platform-soft: 0 10px 28px rgba(15, 23, 42, 0.1);
}

[data-ui-system="visual-workbench"] {
  font-family: var(--ui-font-family);
}

[data-ui-surface="toolbar"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
}

[data-ui-surface="toolbar"] :is(.toolbar-field > label, .toolbar-action-label) {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-caption);
  font-weight: var(--ui-font-weight-semibold);
}

[data-ui-surface="toolbar"] :is(select, input, .template-picker-button, .mode-tab, .size-chip) {
  min-height: var(--ui-control-height);
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-control);
  box-shadow: none;
}

[data-ui-surface="toolbar"] :is(select, input, .template-picker-button, .mode-tab):hover {
  border-color: var(--ui-color-border-strong);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text);
}

[data-ui-surface="toolbar"] :is(select, input, .template-picker-button, .mode-tab):focus-visible {
  border-color: var(--ui-color-accent);
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="toolbar"] .mode-tab.active {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  box-shadow: inset 0 -2px 0 var(--ui-color-accent);
}

[data-ui-surface="toolbar"] .template-picker-meta {
  color: var(--ui-color-text-subtle);
}

[data-ui="button"] {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  font-family: var(--ui-font-family);
  font-size: 13px;
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  transform: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

[data-ui="button"][data-ui-variant="primary"] {
  border-color: var(--ui-color-action-primary);
  background: var(--ui-color-action-primary);
  color: var(--ui-color-on-accent);
  box-shadow: var(--ui-shadow-control);
}

[data-ui="button"][data-ui-variant="primary"]:hover {
  border-color: var(--ui-color-action-primary-hover);
  background: var(--ui-color-action-primary-hover);
  color: var(--ui-color-on-accent);
  box-shadow: var(--ui-shadow-control);
  transform: none;
}

[data-ui="button"][data-ui-variant="secondary"],
[data-ui="button"][data-ui-variant="icon"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
  box-shadow: none;
}

[data-ui="button"][data-ui-variant="secondary"]:hover,
[data-ui="button"][data-ui-variant="icon"]:hover {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  box-shadow: none;
  transform: none;
}

[data-ui="button"]:focus-visible,
[data-ui-action="menu-item"]:focus-visible,
[data-ui-action="nav-item"]:focus-visible {
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui="button"]:disabled,
[data-ui="button"][aria-disabled="true"] {
  cursor: not-allowed;
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text-subtle);
  box-shadow: none;
  opacity: 0.72;
}

[data-ui-surface="menu"] {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-menu);
}

[data-ui-surface="menu"] .workflow-more-group-title {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-helper);
  font-weight: var(--ui-font-weight-semibold);
}

[data-ui-action="menu-item"] {
  border-color: transparent;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-color-text-secondary);
  box-shadow: none;
  transform: none;
}

[data-ui-action="menu-item"]:hover {
  border-color: transparent;
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  box-shadow: none;
  transform: none;
}

[data-ui-overlay="dialog"] {
  background: var(--ui-color-overlay);
}

[data-ui-surface="dialog"] {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-dialog);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-dialog);
}

[data-ui-surface="dialog"] .settings-head,
[data-ui-surface="dialog"] .settings-footer {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
}

[data-ui-surface="dialog"] .settings-head h2 {
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-dialog-title);
  font-weight: var(--ui-font-weight-bold);
}

[data-ui-surface="dialog"] .settings-nav {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
}

[data-ui-action="nav-item"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-text-secondary);
  box-shadow: none;
}

[data-ui-action="nav-item"]:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--ui-color-border) 55%, transparent);
  color: var(--ui-color-text);
  box-shadow: none;
  transform: none;
}

[data-ui-action="nav-item"].active {
  border-color: transparent;
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-accent-hover);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-color-text) 8%, transparent);
}

[data-ui-surface="dialog"] :is(.settings-content, .settings-card, .settings-template-card) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
}

[data-ui-surface="dialog"] :is(.settings-row, .settings-template-row) {
  border-color: color-mix(in srgb, var(--ui-color-border) 72%, transparent);
}

[data-ui-surface="dialog"] :is(.settings-panel-head h3, .settings-row-copy strong, .settings-template-name) {
  color: var(--ui-color-text);
}

[data-ui-surface="dialog"] :is(.settings-panel-head p, .settings-row-copy small, .settings-folder-name, .settings-template-default) {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="dialog"] :is(input, select) {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
}

[data-ui-surface="dialog"] :is(input, select):focus-visible {
  border-color: var(--ui-color-accent);
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="dialog"] .settings-switch input:checked + span {
  background: var(--ui-color-action-primary);
}

[data-ui-surface="dialog"] .settings-switch input:focus-visible + span {
  outline-color: var(--ui-color-focus-ring);
}

[data-ui-surface="dialog"] input[type="radio"] {
  accent-color: var(--ui-color-action-primary);
}

[data-ui-surface="platform"] {
  background: var(--ui-color-workspace);
  color: var(--ui-color-text);
}

[data-ui-surface="platform-header"],
[data-ui-surface="navigation"],
[data-ui-surface="dialog-header-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="platform-header"] :is(h1, .brand-block h1),
[data-ui-surface="dialog-header-dark"] h2 {
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="platform-header"] :is(.brand-eyebrow, .brand-block p),
[data-ui-surface="navigation"] .rail-title {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="platform-header"] :is(.brand-mark),
[data-ui-surface="navigation"] :is(.rail-title__mark, .rail-title strong) {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
}

[data-ui="button"][data-ui-variant="secondary-on-dark"],
[data-ui="button"][data-ui-variant="icon-on-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui="button"][data-ui-variant="secondary-on-dark"]:hover,
[data-ui="button"][data-ui-variant="icon-on-dark"]:hover {
  border-color: color-mix(in srgb, var(--ui-color-on-navigation-muted) 72%, var(--ui-color-navigation-border));
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 72%, var(--ui-color-on-navigation) 12%);
  color: var(--ui-color-on-navigation);
  transform: none;
}

[data-ui="button"][data-ui-variant="icon-on-dark"] {
  width: var(--ui-control-height);
  padding: 0;
}

[data-ui-surface="navigation"].module-rail:is(.is-expanded, :hover) {
  background: var(--ui-color-navigation-hover);
}

[data-ui-action="module"] {
  border-color: color-mix(in srgb, var(--ui-color-navigation-border) 82%, transparent);
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 78%, var(--ui-color-navigation));
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"]:hover {
  border-color: color-mix(in srgb, var(--ui-color-on-navigation-muted) 58%, var(--ui-color-navigation-border));
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 72%, var(--ui-color-on-navigation) 10%);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"].is-active {
  border-color: color-mix(in srgb, var(--ui-color-accent) 52%, var(--ui-color-navigation-border));
  background: var(--ui-color-navigation-active);
  color: var(--ui-color-on-navigation);
  box-shadow: inset 3px 0 0 var(--ui-color-accent);
}

[data-ui-action="module"] .module-item__icon {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"].is-active .module-item__icon {
  border-color: var(--ui-color-accent);
  background: var(--ui-color-action-primary);
  color: var(--ui-color-on-accent);
}

[data-ui-action="module"] .module-item__name {
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"] .module-item__status {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="dialog"] .release-dialog__header {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
}

[data-ui-surface="dialog"] :is(.release-summary, .release-section ul) {
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="dialog"] .release-section h4 {
  color: var(--ui-color-text);
}

[data-ui-surface="module-summary"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text-muted);
}

[data-ui-surface="module-summary"] :is(p, .module-summary__facts li) {
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="stage"] {
  background-color: var(--ui-color-stage);
  background-image: radial-gradient(color-mix(in srgb, var(--ui-color-on-navigation) 10%, transparent) 0.8px, transparent 0.8px);
}

[data-ui-surface="entry-card"] {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-platform);
}

[data-ui-surface="entry-card"] p {
  color: var(--ui-color-text-secondary);
}

.status-dot--stable { background: var(--ui-color-status-stable); }
.status-dot--beta { background: var(--ui-color-status-beta); }
.status-dot--draft { background: var(--ui-color-status-draft); }
.status-dot--planned { background: var(--ui-color-status-planned); }

[data-ui-surface="poster-editor"] {
  background: var(--ui-color-workspace);
  color: var(--ui-color-text);
}

[data-ui-surface="poster-toolbar"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
  box-shadow: var(--ui-shadow-platform-soft);
}

[data-ui-surface="poster-toolbar"] .brand-mark {
  border: 1px solid color-mix(in srgb, var(--ui-color-accent) 72%, var(--ui-color-navigation-border));
  background: var(--ui-color-action-primary);
  color: var(--ui-color-on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-color-on-accent) 24%, transparent);
}

[data-ui-surface="poster-toolbar"] .brand strong {
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="poster-toolbar"] .brand span:last-child {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="field-on-dark"],
[data-ui-surface="field-group-on-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui-surface="field-on-dark"] :is(select, .ui-icon) {
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="field-on-dark"] option {
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="toolbar-icon"] {
  border-color: var(--ui-color-navigation-border);
  color: var(--ui-color-on-navigation-muted);
  background: transparent;
}

[data-ui-action="toolbar-icon"]:hover:not(:disabled) {
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="toolbar-icon"]:disabled {
  color: color-mix(in srgb, var(--ui-color-on-navigation-muted) 58%, transparent);
  opacity: 0.62;
}

[data-ui-action="toolbar-icon"]:focus-visible,
[data-ui-action="layer-group"]:focus-visible,
[data-ui-action="layer"]:focus-visible {
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="field-group-on-dark"] :is(select, input) {
  border: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
}

[data-ui-surface="field-group-on-dark"] :is(select, input):focus-visible,
[data-ui-surface="field-on-dark"] select:focus-visible {
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="poster-navigation"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui-surface="poster-navigation"] .sidebar-tabs {
  border-color: var(--ui-color-navigation-border);
}

[data-ui-surface="poster-navigation"] [data-ui-action="nav-item"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="poster-navigation"] [data-ui-action="nav-item"]:hover {
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="poster-navigation"] [data-ui-action="nav-item"].active {
  border-bottom-color: var(--ui-color-accent);
  background: transparent;
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui-surface="search-on-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="search-on-dark"] input,
[data-ui-surface="search-on-dark"] input::placeholder {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="search-on-dark"]:focus-within {
  border-color: var(--ui-color-accent);
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="poster-navigation"] :is(.panel-heading, .auto-select-toggle) {
  border-color: var(--ui-color-navigation-border);
  color: var(--ui-color-on-navigation);
  background: transparent;
}

[data-ui-surface="poster-navigation"] .panel-heading button,
[data-ui-surface="poster-navigation"] .image-actions button {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="layer-group"] {
  border-color: color-mix(in srgb, var(--ui-color-navigation-border) 82%, transparent);
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 74%, var(--ui-color-navigation));
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="layer-group"]:hover {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="layer-group"] :is(.group-chevron, em) {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="layer-group"] em {
  background: color-mix(in srgb, var(--ui-color-on-navigation-muted) 14%, transparent);
}

[data-ui-action="layer"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-on-navigation);
}

[data-ui-action="layer"]:hover {
  background: var(--ui-color-navigation-hover);
}

[data-ui-action="layer"].active {
  border-color: color-mix(in srgb, var(--ui-color-accent) 46%, var(--ui-color-navigation-border));
  background: var(--ui-color-navigation-active);
  color: var(--ui-color-on-navigation);
  box-shadow: inset 3px 0 0 var(--ui-color-accent);
}

[data-ui-action="layer"] :is(.visibility-dot, .layer-actions) {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="poster-workspace"] {
  background: var(--ui-color-workspace);
}

[data-ui-surface="editor-toolbar"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-platform-soft);
}

[data-ui-surface="editor-toolbar"] :is(span, .zoom-control, .reference-control) {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="editor-toolbar"] :is(input[type="range"], input[type="checkbox"]) {
  accent-color: var(--ui-color-action-primary);
}

[data-ui-surface="editor-toolbar"] .zoom-preset,
[data-ui-surface="poster-editor"] .draft-banner button {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="editor-toolbar"] .zoom-preset:hover,
[data-ui-surface="poster-editor"] .draft-banner button:hover {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
}

[data-ui-surface="poster-editor"] .draft-status {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text-muted);
}

[data-ui-surface="poster-editor"] .draft-banner {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-warning);
}

[data-ui-surface="canvas-workspace"] {
  background-color: var(--ui-color-canvas-workspace);
  background-image:
    radial-gradient(circle at center, color-mix(in srgb, var(--ui-color-surface-raised) 86%, transparent), transparent 42%),
    linear-gradient(90deg, var(--ui-color-canvas-grid) 1px, transparent 1px),
    linear-gradient(var(--ui-color-canvas-grid) 1px, transparent 1px);
}

[data-ui-surface="canvas-workspace"] .stage-board {
  border-color: var(--ui-color-border);
  background: var(--ui-color-canvas-board);
  box-shadow: var(--ui-shadow-platform);
}

[data-ui-surface="canvas-workspace"] :is(.ruler-corner, .ruler) {
  border-color: var(--ui-color-border);
  color: var(--ui-color-text-muted);
}

[data-ui-surface="canvas-workspace"] .ruler-corner {
  background: var(--ui-color-surface-soft);
}

[data-ui-surface="canvas-workspace"] .ruler-top {
  background-color: var(--ui-color-surface-soft);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 23px, var(--ui-color-canvas-ruler) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--ui-color-canvas-ruler) 62%, transparent) 9px 10px);
}

[data-ui-surface="canvas-workspace"] .ruler-left {
  background-color: var(--ui-color-surface-soft);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 23px, var(--ui-color-canvas-ruler) 23px 24px),
    repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in srgb, var(--ui-color-canvas-ruler) 62%, transparent) 9px 10px);
}

[data-ui-surface="inspector"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-platform-soft);
}

[data-ui-surface="inspector-content"] :is(.inspector-tabs, .panel-heading, .inspector-section) {
  border-color: var(--ui-color-border);
}

[data-ui-surface="inspector-content"] [data-ui-action="nav-item"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-text-muted);
}

[data-ui-surface="inspector-content"] [data-ui-action="nav-item"].active {
  border-bottom-color: var(--ui-color-accent);
  background: transparent;
  color: var(--ui-color-text);
  box-shadow: none;
}

[data-ui-surface="inspector-content"] :is(.panel-heading, .inspector-section h3) {
  color: var(--ui-color-text);
}

[data-ui-surface="inspector-content"] :is(.field > span, .image-field > span, .toggle-row span, .fit-mode-field span, .mini-field span) {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="inspector-content"] :is(.field input, .field textarea, .field select, .fit-mode-field select) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
}

[data-ui-surface="inspector-content"] :is(.field input, .field textarea, .field select, .fit-mode-field select):focus {
  border-color: var(--ui-color-accent);
  box-shadow: 0 0 0 3px var(--ui-color-focus-ring);
}

[data-ui-surface="inspector-content"] :is(.toggle-row, .mode-switch) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
}

[data-ui-surface="inspector-content"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--ui-color-action-primary);
}

[data-ui-surface="inspector-content"] :is(.secondary-action, .image-actions button, .panel-heading button) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="inspector-content"] :is(.secondary-action, .image-actions button, .panel-heading button):hover {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
}

[data-ui-surface="inspector-content"] .mode-switch button {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="inspector-content"] .mode-switch button.active {
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-accent-hover);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-color-text) 10%, transparent);
}

[data-ui-status="success"] {
  border-color: color-mix(in srgb, var(--ui-color-success) 46%, var(--ui-color-border));
  background: color-mix(in srgb, var(--ui-color-success) 12%, var(--ui-color-surface-raised));
  color: var(--ui-color-success);
}

[data-ui-status="warning"] {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-warning);
}

[data-ui-status="error"] {
  border-color: color-mix(in srgb, var(--ui-color-danger) 46%, var(--ui-color-border));
  background: color-mix(in srgb, var(--ui-color-danger) 10%, var(--ui-color-surface-raised));
  color: var(--ui-color-danger);
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-system="visual-workbench"] *,
  [data-ui-system="visual-workbench"] *::before,
  [data-ui-system="visual-workbench"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}