/* ===========================================================================
   machado.group — Input & Field
   ---------------------------------------------------------------------------
   Borderless text input. Separation comes from surface tonality (the field
   sits on a sunken well, distinct from page/card); white accent ring on focus
   only.
   **PRECONDIÇÃO do mecanismo tonal:** ele exige um CARD atrás. No dark não há
   degrau para baixo — `--surface-sunken` é #080808 e `--surface-page` é #0c0c0c,
   quatro de 255, medido em 1,02:1 num consumidor: o campo fica invisível e os
   rótulos flutuam sobre nada. Campo que assenta DIRETO na página usa
   `.input--on-page`, que sobe o tom em vez de baixar.
   Optional field wrapper with mono-caps label and helper / error text.
   =========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
  color: var(--ink-secondary);
}

.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--ink);
  background: var(--surface-sunken);
  border: none;
  border-radius: var(--radius-sm);
  transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard);
  appearance: none;
}
.input::placeholder { color: var(--ink-tertiary); }
.input:hover:not(:disabled) { background: var(--surface-inset); }
.input:focus-visible {
  outline: none;
  background: var(--surface-raised);
  box-shadow: var(--shadow-focus);
}
.input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   --on-page: o campo assenta na página, sem card atrás. Sobe o tom em vez de
   baixar — 1,65:1 contra a página, onde o default dava 1,02:1. O anel de foco
   do sistema fica intacto. Medido no consumidor `machado.group` (landing).
   --------------------------------------------------------------------------- */
.input--on-page { background: color-mix(in srgb, var(--surface-inset), var(--ink) 12%); }
.input--on-page:hover:not(:disabled) { background: color-mix(in srgb, var(--surface-inset), var(--ink) 20%); }
.input--on-page:focus-visible { background: color-mix(in srgb, var(--surface-inset), var(--ink) 20%); }

/* mono variant for codes / data entry */
.input--mono { font-family: var(--font-mono); letter-spacing: var(--tracking-snug); }

/* sizes */
.input--sm { height: 36px; padding: 0 var(--space-3); font-size: var(--fs-body-sm); }
.input--lg { height: 52px; padding: 0 var(--space-5); }

/* textarea */
textarea.input { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); line-height: var(--lh-body); resize: vertical; }

/* helper / error */
.field__help  { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-secondary); }
.field__error { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--accent); }

.field--error .input { box-shadow: inset 0 0 0 1px var(--accent); }
.field--error .input:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-tint), 0 0 0 1px var(--accent);
}