.form-input { min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--control-min-size); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-background); color: var(--color-text); }
.form-input--soft { inline-size: 100%; min-block-size: 3.625rem; padding: var(--space-3); border: 0; border-radius: var(--radius-input); background: var(--color-input-background); font: inherit; }
.form-input--soft::placeholder { color: var(--color-placeholder); opacity: 1; }
.form-input--soft[aria-invalid="true"] { outline: 1px solid var(--color-error); }
.form-input--inverse { inline-size: 100%; min-block-size: var(--space-12); padding: var(--space-2) var(--space-4); border-color: var(--color-border-divider); border-radius: var(--radius-pill); background: transparent; color: var(--color-on-accent); font: inherit; }
.form-input--inverse::placeholder { color: var(--color-breadcrumb-muted); opacity: 1; }
.form-input--inverse:focus-visible { outline: 2px solid var(--color-focus-inverse); outline-offset: 2px; }
.form-input--outline { display: block; inline-size: 100%; min-block-size: var(--space-12); padding: var(--space-2) var(--space-4); border-color: var(--color-border-divider); border-radius: var(--radius-pill); background: var(--color-background); font: inherit; }
.form-input--outline::placeholder { color: var(--color-breadcrumb-muted); opacity: 1; }