/* Reusable primitives. Feature pages compose these instead of creating new visual patterns. */
.ui-button { min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-surface); font: 700 var(--text-md)/var(--leading-tight) var(--font-mono); cursor: pointer; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.ui-button:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.ui-button--primary { border-color: color-mix(in srgb, var(--color-positive) 30%, var(--color-border)); color: var(--color-positive); background: color-mix(in srgb, var(--color-positive) 9%, var(--color-surface)); }
.ui-button--primary:hover { color: var(--color-canvas); background: var(--color-positive); }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.ui-card { min-width: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-raised); }
.ui-card--interactive { transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
.ui-card--interactive:hover { border-color: var(--color-text-muted); background: var(--color-surface-hover); }
.ui-badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); background: var(--color-surface); font: 700 var(--text-xs)/var(--leading-tight) var(--font-mono); }
.ui-badge--warning { border-color: color-mix(in srgb, var(--color-neutral) 42%, var(--color-border)); color: var(--color-neutral); }
.ui-field { min-height: 2.5rem; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-surface); }
.ui-field::placeholder { color: var(--color-text-subtle); }
.ui-state { display: grid; place-items: center; gap: var(--space-2); min-height: 7.5rem; padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); text-align: center; }
.ui-state[data-state="error"] { color: var(--color-negative); border-color: color-mix(in srgb, var(--color-negative) 45%, var(--color-border)); }