.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-height);
  padding: 0 var(--ui-space-3);
  border: var(--ui-border-width) solid var(--ui-color-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-control);
  color: var(--ui-color-text);
  cursor: pointer;
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--ui-motion-duration-fast) var(--ui-motion-easing-standard), border-color var(--ui-motion-duration-fast) var(--ui-motion-easing-standard), color var(--ui-motion-duration-fast) var(--ui-motion-easing-standard);
}

.ui-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-color-control-hover); border-color: var(--ui-color-border-interactive); }
.ui-button:active:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-color-surface-soft); }
.ui-button:focus-visible { outline: 2px solid var(--ui-color-focus); outline-offset: 2px; }
.ui-button:disabled, .ui-button[aria-disabled="true"] { background: var(--ui-color-disabled-surface); border-color: var(--ui-color-disabled-border); color: var(--ui-color-disabled-text); cursor: not-allowed; pointer-events: none; }

.ui-button--primary { background: var(--ui-color-accent); border-color: var(--ui-color-accent); color: var(--ui-color-text-on-accent); }
.ui-button--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-color-accent-strong); border-color: var(--ui-color-accent-strong); }
.ui-button--secondary { background: var(--ui-color-control); }
.ui-button--danger { background: transparent; border-color: var(--ui-color-danger); color: var(--ui-color-danger-strong); }
.ui-button--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-color-danger-soft); border-color: var(--ui-color-danger-strong); color: var(--ui-color-text); }

.ui-panel { padding: var(--ui-space-4); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-lg); background: var(--ui-color-surface); }
.ui-subpanel { padding: var(--ui-space-3); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-md); background: var(--ui-color-surface-raised); }
.ui-card { padding: var(--ui-space-3); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-md); background: var(--ui-color-surface-raised); }
.ui-toolbar { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }

.ui-field { display: flex; flex-direction: column; gap: var(--ui-space-1); color: var(--ui-color-text-muted); font-size: var(--ui-font-size-sm); }
.ui-input, .ui-select { width: 100%; min-height: var(--ui-control-height); padding: 0 var(--ui-space-2); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-md); background: var(--ui-color-control); color: var(--ui-color-text); }
.ui-input:focus-visible, .ui-select:focus-visible { border-color: var(--ui-color-border-interactive); outline: 2px solid var(--ui-color-focus); outline-offset: 2px; }
.ui-input:disabled, .ui-select:disabled { background: var(--ui-color-disabled-surface); border-color: var(--ui-color-disabled-border); color: var(--ui-color-disabled-text); cursor: not-allowed; }

.ui-badge { display: inline-flex; align-items: center; border: var(--ui-border-width) solid var(--ui-color-border); border-radius: 999px; padding: 2px var(--ui-space-2); background: var(--ui-color-surface-soft); color: var(--ui-color-text-muted); font-size: var(--ui-font-size-sm); line-height: 1.2; }
.ui-badge--success { border-color: var(--ui-color-success-border); background: var(--ui-color-success-soft); color: var(--ui-color-success-text); }
.ui-badge--warning { border-color: var(--ui-color-warning-border); background: var(--ui-color-warning-soft); color: var(--ui-color-warning-text); }
.ui-badge--danger { border-color: var(--ui-color-danger); background: var(--ui-color-danger-soft); color: var(--ui-color-danger-strong); }
.ui-status { min-height: 20px; color: var(--ui-color-text-muted); }
.ui-empty-state { padding: var(--ui-space-5) var(--ui-space-4); border: var(--ui-border-width) dashed var(--ui-color-border); border-radius: var(--ui-radius-md); color: var(--ui-color-text-muted); text-align: center; }

.ui-table { width: 100%; border-collapse: collapse; color: var(--ui-color-text); }
.ui-table :is(th, td) { padding: var(--ui-space-2); border-bottom: var(--ui-border-width) solid var(--ui-color-border); text-align: left; }
.ui-table th { color: var(--ui-color-text-muted); font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-semibold); }

/* Editor workspace ruler chrome uses the same shared UI palette as the surrounding shell.
   :root raises specificity above the later legacy one-class ruler rules in editor style.css. */
:root .ui-workspace-ruler {
  background: var(--ui-color-surface);
  color: var(--ui-color-text-muted);
  --workspace-ruler-background: var(--ui-color-surface);
  --workspace-ruler-tick-color: var(--ui-color-text-muted);
  --workspace-ruler-label-color: var(--ui-color-text-soft);
}

:root .ui-workspace-ruler-corner {
  border-right-color: var(--ui-color-border);
  border-bottom-color: var(--ui-color-border);
}

:root .ui-workspace-ruler-x {
  border-bottom-color: var(--ui-color-border);
}

:root .ui-workspace-ruler-y {
  border-right-color: var(--ui-color-border);
}