/* Component utilities */
@utility oppb-panel {
  @apply bg-surface border border-border rounded-lg shadow-sm;
}

@utility oppb-button {
  @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors duration-[--transition-fast];
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
  @apply disabled:pointer-events-none disabled:opacity-50;
}

@utility oppb-button-primary {
  @apply oppb-button bg-primary text-white hover:bg-primary-hover;
}

@utility oppb-button-secondary {
  @apply oppb-button bg-surface-secondary text-text hover:bg-border;
}

@utility oppb-button-ghost {
  @apply oppb-button bg-transparent hover:bg-surface-secondary;
}

@utility oppb-input {
  @apply flex h-10 w-full rounded-md border border-border bg-surface px-3 py-2 text-sm;
  @apply placeholder:text-text-muted;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
  @apply disabled:cursor-not-allowed disabled:opacity-50;
}

@utility oppb-label {
  @apply text-sm font-medium text-text;
}

@utility oppb-icon-button {
  @apply inline-flex items-center justify-center rounded-md p-2 text-text-muted transition-colors duration-[--transition-fast];
  @apply hover:bg-surface-secondary hover:text-text;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary;
}

/* Canvas element styles */
@utility oppb-canvas-element {
  @apply cursor-move select-none;
}

@utility oppb-canvas-element-hover {
  @apply outline outline-2 outline-element-border outline-offset-2;
}

@utility oppb-canvas-element-selected {
  @apply outline outline-2 outline-element-border;
}