@layer atoms {
  .input, .select, .textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    color: var(--color-text);

    &:focus {
      border-color: var(--color-focus);
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 25%, transparent);
    }
    &[inputmode="decimal"], &[type="number"] { font-variant-numeric: tabular-nums; }
  }
  .textarea { min-height: 5rem; resize: vertical; }
  .input[type="file"] { padding: var(--space-2); }
}