/* Form primitives for inputs, selects and textareas. */
.cgl-field {
  display: grid;
  gap: var(--cgl-space-2);
}

.cgl-label {
  color: var(--cgl-text-primary);
  font-size: var(--cgl-font-size-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cgl-input,
.cgl-select,
.cgl-textarea {
  width: 100%;
  border: 1px solid var(--cgl-border-subtle);
  border-radius: var(--cgl-radius-sm);
  background: var(--cgl-surface-card);
  color: var(--cgl-text-primary);
  transition: border-color var(--cgl-transition-fast), box-shadow var(--cgl-transition-fast);
}

.cgl-input,
.cgl-select {
  min-height: 44px;
  padding: 0 var(--cgl-space-4);
}

.cgl-textarea {
  min-height: 120px;
  padding: var(--cgl-space-3) var(--cgl-space-4);
  resize: vertical;
}

.cgl-input:focus,
.cgl-select:focus,
.cgl-textarea:focus {
  border-color: var(--cgl-brand-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  outline: none;
}

.cgl-help-text {
  color: var(--cgl-text-muted);
  font-size: var(--cgl-font-size-sm);
}