/* Professional Industrial UI primitives.
   These classes are opt-in so legacy screens can adopt them gradually. */

:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-radius-sm: 6px;
  --ui-radius-md: 9px;
  --ui-radius-lg: 12px;
  --ui-control-height: 42px;
  --ui-touch-target: 44px;
  --ui-shadow-raised: 0 10px 28px color-mix(in srgb, var(--text-primary) 16%, transparent);
  --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--border-focus) 35%, transparent);
}

.ui-heading {
  display: grid;
  gap: var(--ui-space-1);
  margin: 0 0 var(--ui-space-5);
}

.ui-eyebrow,
.ui-heading__eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ui-heading__title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.ui-section-title,
.ui-dialog-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.25;
}

.ui-heading__description,
.ui-secondary-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.ui-muted-text,
.ui-helper-text {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.ui-form,
.ui-form-grid {
  display: grid;
  gap: var(--ui-space-3);
}

.ui-form label,
.ui-form-label {
  display: grid;
  gap: var(--ui-space-1);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.ui-form input,
.ui-form select,
.ui-form textarea,
.ui-control {
  width: 100%;
  min-height: var(--ui-control-height);
  border: 1px solid var(--input-border);
  border-radius: var(--ui-radius-md);
  background: var(--input-bg);
  color: var(--text-primary);
  font: inherit;
}

.ui-form input,
.ui-form select,
.ui-control {
  padding: 9px 10px;
}

.ui-form textarea {
  min-height: 88px;
  padding: 10px;
  resize: vertical;
}

.ui-form input::placeholder,
.ui-form textarea::placeholder,
.ui-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.ui-form input:focus-visible,
.ui-form select:focus-visible,
.ui-form textarea:focus-visible,
.ui-control:focus-visible,
.ui-action:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ui-focus-ring);
}

.ui-form [aria-invalid="true"],
.ui-control--error {
  border-color: var(--state-danger);
}

.ui-error-text {
  color: var(--state-danger);
  font-size: 13px;
  font-weight: 650;
}

.ui-form :disabled,
.ui-control:disabled {
  cursor: not-allowed;
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text-muted);
  opacity: .8;
}

.ui-action {
  display: inline-flex;
  min-height: var(--ui-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.ui-action--primary {
  border-color: var(--action-primary);
  background: var(--action-primary);
  color: var(--action-primary-text);
}

.ui-action--primary:hover {
  border-color: var(--action-primary-hover);
  background: var(--action-primary-hover);
}

.ui-action--secondary {
  border-color: var(--border-strong);
  background: var(--surface-interactive);
  color: var(--text-primary);
}

.ui-action--secondary:hover,
.ui-action--ghost:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive);
}

.ui-action--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}

.ui-action--danger {
  border-color: var(--state-danger);
  background: var(--state-danger);
  color: var(--danger-text);
}

.ui-section {
  display: grid;
  gap: var(--ui-space-4);
}

.ui-section--plain {
  padding-block: var(--ui-space-4);
  border-block: 1px solid var(--border);
}

.ui-section--dense,
.ui-choice-card {
  padding: var(--ui-space-3);
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-lg);
  background: var(--surface);
}

.ui-choice-card {
  box-shadow: var(--ui-shadow-raised);
}

.ui-choice-card[aria-selected="true"] {
  border-color: var(--border-focus);
  background: var(--surface-selected);
  box-shadow: var(--ui-focus-ring);
}

.ui-dense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: 56px;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.ui-dense-row__primary {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.ui-dense-row__meta {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

.ui-status-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--state-neutral);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.ui-status-badge--success { color: var(--state-success); }
.ui-status-badge--warning { color: var(--state-warning); }
.ui-status-badge--danger { color: var(--state-danger); }
.ui-status-badge--info { color: var(--state-info); }
.ui-status-badge--neutral { color: var(--state-neutral); }

@media (max-width: 720px) {
  .ui-heading__title { font-size: 24px; }

  .ui-action {
    min-height: var(--ui-touch-target);
  }

  .ui-dense-row {
    min-height: 52px;
  }
}