@import '../../tokens/tokens.css';

/* Form — audit capture with semantic validation states. */
.form { display: grid; gap: var(--ds-s4); max-width: 480px; }

.field label {
  display: block;
  font-size: var(--ds-t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-dim);
  font-weight: 600;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-body);
  background: var(--ds-ink);
  color: var(--ds-text);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r1);
  padding: 10px 12px;
}
.field input::placeholder { color: var(--ds-text-mute); }
.field input:focus {
  outline: 2px solid var(--ds-brass-hi);
  outline-offset: 3px;
  border-color: var(--ds-brass-hi);
}

.field.error input   { border-color: var(--ds-error); }
.field.success input { border-color: var(--ds-success); }
.field.warning input { border-color: var(--ds-warning); }

.msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ds-t-sm);
  margin-top: 6px;
  font-weight: 600;
}
.msg.error   { color: var(--ds-error); }
.msg.success { color: var(--ds-success); }
.msg.warning { color: var(--ds-warning); }

.form-submit {
  justify-self: start;
  background: var(--ds-brass);
  color: var(--ds-on-brass);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 20px;
  border: none;
  border-radius: var(--ds-r1);
  cursor: pointer;
}
.form-submit:hover { background: var(--ds-brass-hi); }
.form-submit:active { background: var(--ds-brass-press); }
.form-submit:focus-visible { outline: var(--ds-focus-ring); outline-offset: var(--ds-focus-offset); }